Best JavaScript code snippet using best
mainScreenChats.js
Source: mainScreenChats.js
1import Chats from "../chats/chats";2import ScreenChat from "../screenChat/screenChat";3import './mainScreenChats.css'4import '../App.css'5import { connectedUser, getOtherUserByChatId } from "../dbHandle/dbHardcoded";6import { useState } from "react";7import { getMsgsByChatId, getOtherUser, getLastMsg } from '../dbHandle/dbHardcoded';8import Message from "../screenChat/message";9import UserChat from "../chats/userChat";10import { addConectionToList } from "../dbHandle/dbHardcoded";11import UserConnectionError from "../errorPages/userNotSignIn";12/* This function is responsiable about the the main screen of the chats page- 13merge between the chats list and the chat screen */14function MainScreenChats() {15 const [chatsState, setChatsState] = useState({ chatId: "-1", otherUserName: "", msgsComponents: [], lastMsg: {} });16 const chatInfo = { connectedUser: connectedUser, chatId: chatsState.chatId, otherUserName: chatsState.otherUserName, msgsComponents: chatsState.msgsComponents }17 //when the user click the chat he wants to see this function will be activate and update the current chatId he is watching18 const updateChatId = (chatId) => {19 var chatMessages = getMsgsByChatId(chatId);20 var connectedUser = chatInfo.connectedUser;21 // list of the messages22 var messageList = chatMessages.map((msg, key) => {23 msg["connectedUser"] = connectedUser;24 return <Message {...msg} key={key} />25 });26 var other = getOtherUserByChatId(chatId, connectedUser);27 setChatsState({ chatId: chatId, otherUserName: other, msgsComponents: messageList, lastMsg: {} });28 //change the display to be 100% - handle design29 document.getElementById("mainScreenChat").style = "height:100%";30 }31 const currUserFriend = getOtherUser(connectedUser)32 // list of the chats connected33 const chatsOnScreenList = currUserFriend.map((value, key) => {34 return <UserChat lastMsg={getLastMsg(value[0])} user={value[1]} updateChatId={updateChatId} chatId={value[0]} key={key} />35 });36 const [usersOnScreen, setUserOnScreen] = useState(chatsOnScreenList);37 /* When message is sent this function will be activate and update the display of the messages.38 This function add the given message to the list of messages that we are displaying now.39 Also this function update the last message for te specific chat */40 const updateMessages = (msg) => {41 setChatsState((curentState) => {42 return {43 chatId: curentState.chatId, otherUserName: curentState.otherUserName,44 msgsComponents: [...curentState.msgsComponents, <Message {...msg} key={curentState.msgsComponents.length} />],45 lastMsg: msg46 };47 });48 setUserOnScreen((current) => {49 return current.map((value, key) => {50 if (value.props.chatId === chatsState.chatId)51 return <UserChat lastMsg={msg} user={chatsState.otherUserName} updateChatId={updateChatId} chatId={chatsState.chatId} key={key} />52 return value;53 });54 });55 }56 /* Add the chat to the chat list in the left side of screen */57 const addConection = () => {58 var user = document.getElementById("contactname")59 var username = user.value60 //clear the field and the validation checks for the next time and hide the add button61 user.classList.remove("is-valid")62 user.value= "";63 document.getElementById("btnAddChatModal").setAttribute("hidden", true);64 var chatId = addConectionToList(connectedUser, username);65 var newList = usersOnScreen;66 // add the new chat67 newList.push(<UserChat lastMsg={{}} key={usersOnScreen.length} user={username} updateChatId={updateChatId} chatId={chatId} />);68 // list the chats on screen69 setUserOnScreen(70 (current) => {71 return newList.map((value, key) => {72 return value;73 });74 });75 };76 return (77 <>78 {79 connectedUser === ""?(80 <UserConnectionError/> 81 ):(82 <div id="mainScreenChat" className="container">83 <div className="row">84 <div className="col-md-3">85 <Chats addConection={addConection} setUserOnScreen={setUserOnScreen} usersOnScreen={usersOnScreen} lastMsg={chatsState.lastMsg} updateChatId={updateChatId} />86 </div>87 <div className="col-md-9">88 <ScreenChat {...chatInfo} updateMessages={updateMessages} />89 </div>90 </div>91 </div>92 )}93 </>94 );95}...
1650743503398_create-table-songs.js
1/* eslint-disable linebreak-style */2/* eslint-disable camelcase */3exports.shorthands = undefined;4exports.up = (pgm) => {5 pgm.createTable('songs', {6 id: {7 type: 'VARCHAR(50)',8 primaryKey: true,9 },10 title: {11 type: 'TEXT',12 notNull: true,13 },14 year: {15 type: 'INTEGER',16 notNull: true,17 },18 performer: {19 type: 'TEXT',20 notNull: true,21 },22 genre: {23 type: 'TEXT',24 notNull: true,25 },26 duration: {27 type: 'INTEGER',28 notNull: false,29 },30 album_id: {31 type: 'VARCHAR(50)',32 references: 'albums',33 notNull: false,34 onDelete: 'cascade',35 },36 });37};38exports.down = (pgm) => {39 pgm.dropTable('songs');...
App.js
Source: App.js
1import React from 'react';2import { BrowserRouter, Routes, Route } from 'react-router-dom';3import LayoutContainer from './layout';4import routes from './config/routes';5import './App.css';6function App() {7 return (8 <BrowserRouter>9 <LayoutContainer>10 <Routes>11 {routes.map((item) => (12 <Route key={item.id} element={item.page} path={item.path}></Route>13 ))}14 </Routes>15 </LayoutContainer>16 </BrowserRouter>17 );18}...
1650743462384_create-table-albums.js
1/* eslint-disable linebreak-style */2/* eslint-disable camelcase */3exports.shorthands = undefined;4exports.up = (pgm) => {5 pgm.createTable('albums', {6 id: {7 type: 'VARCHAR(50)',8 primaryKey: true,9 },10 name: {11 type: 'TEXT',12 notNull: true,13 },14 year: {15 type: 'INTEGER',16 notNull: true,17 },18 });19};20exports.down = (pgm) => {21 pgm.dropTable('albums');...
routes.js
Source: routes.js
1import { EMPLOYEE, COMPANY, UNKNOWN_PATH } from './path';2import Employee from '../pages/employee';3import Company from '../pages/company';4const routes = [5 {6 id: 1,7 path: EMPLOYEE,8 page: <Employee />,9 },10 {11 id: 2,12 path: COMPANY,13 page: <Company />,14 },15 {16 id: 3,17 path: UNKNOWN_PATH,18 page: <Employee />,19 },20];...
menuList.js
Source: menuList.js
1import { UserOutlined, TeamOutlined } from '@ant-design/icons';2import { COMPANY, EMPLOYEE } from './path';3const menuList = [4 {5 name: 'Employee',6 key: 'employee',7 icon: <UserOutlined />,8 path: EMPLOYEE,9 },10 {11 name: 'Company',12 key: 'company',13 icon: <TeamOutlined />,14 path: COMPANY,15 },16];...
index.js
Source: index.js
1import React from 'react';2const Employee = () => {3 return <>EMPLOYEE</>;4};...
path.js
Source: path.js
1export const EMPLOYEE = '/employee';2export const COMPANY = '/company';...
Check out the latest blogs from LambdaTest on this topic:
LambdaTest has recently received two notable awards from the leading business software directory FinancesOnline after their experts were impressed with our test platform’s capabilities in accelerating one’s development process.
The layout of a web page is one of the most important features of a web page. It can affect the traffic inflow by a significant margin. At times, a designer may come up with numerous layout ideas and sometimes he/she may struggle the entire day to come up with one. Moreover, design becomes even more important when it comes to ensuring cross browser compatibility.
Chrome is hands down the most used browsers by developers and users alike. It is the primary reason why there is such a solid chrome community and why there is a huge list of Chrome Extensions targeted at developers.
In a startup, the major strength of the people is that they are multitaskers. Be it anything, the founders and the core team wears multiple hats and takes complete responsibilities to get the ball rolling. From designing to deploying, from development to testing, everything takes place under the hawk eyes of founders and the core members.
We are in the era of the ‘Heads down’ generation. Ever wondered how much time you spend on your smartphone? Well, let us give you an estimate. With over 2.5 billion smartphone users, an average human spends approximately 2 Hours 51 minutes on their phone every day as per ComScore’s 2017 report. The number increases by an hour if we include the tab users as well!
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!