Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use setSelected method in Playwright Internal

Best JavaScript code snippet using playwright-internal

HomePage.js

Source:HomePage.js

1import MainWrapperDefault from '../wrappers/MainWrapper'2import {3  TreePageHeader,4  TreeTitleArea,5  StyledDisplayName,6  TreeEditorArea,7  TreeEditButtonArea,8  DocuWrapper,9  DocuHeaderArea,10  DocuBodyArea,11  NodeButtonArea,12  PrevNodeArea,13  NextNodeArea,14  HalfWidthContainer,15  HalfWidthDocumentContainer,16  EditDocuButtonArea,17} from '../pages/techtree/TechtreeDetailPage'18import DoubleSideLayout from '../wrappers/DoubleSideLayout'19import MarkdownEditor from '../components/MarkdownEditor'20import MarkdownRenderer from '../components/MarkdownRenderer'21import { HalfWidthWrapper } from '../wrappers/HalfWidthWrapper'22import TreeMapDemo from '../components/TreeMapDemo'23import { Spinner } from '../components/Spinner'24import { DangerButton, DefaultButton } from '../components/Button'25import {26  TitleInput,27  TitleBottomLine,28  StyledTitle,29} from '../components/TitleInput'30import Loader from 'react-loader-spinner'31import MainIcon from '../assets/MainIcon.png'32import HomeImage from '../assets/HomeImage.png'33import CountUp from 'react-countup'34import React, { useState, useEffect, useCallback } from 'react'35import styled from 'styled-components'36import { Link } from 'react-router-dom'37import { useDispatch, useSelector } from 'react-redux'38import { setUserPlace } from '../redux/auth'39import { changeSortingMethod } from '../redux/board'40import {41  boxShadow,42  colorPalette,43  hoverAction,44  fontSize,45  fontWeight,46} from '../lib/constants'47import { selectNode, changeTreeTitle, finishEditDocu } from '../redux/demo'48import { editTechtree, finishTechtreeEdit } from '../redux/techtree'49import { returnPreviousNodeList, returnNextNodeList } from '../lib/functions'50import departments from '../lib/yonseiDepartments.json'51import translationText from '../lib/translation.json'52import { authService } from '../lib/firebase'53import Swal from 'sweetalert2'54const colorSet = [colorPalette.teal1, colorPalette.green1, colorPalette.lime1]55const nameSet = [56  'ì´ê³¼ë',57  'ê³µë',58  'ë¬¸ê³¼ë',59  'ìê²½ë',60  'ê²½ìë',61  'ìê³¼ë',62  'ìëªë',63  'ì¬ê³¼ë',64  'ì ê³¼ë',65  'ìë',66  'ê°í¸ë',67  'ìë',68  'ì¹ë',69  'ì¸ëì°ë',70  'êµì¡ë',71  'ê¸ë¡ë²ì¸ì¬',72  'ì°ê³ì ê³µ',73  'ì½í',74] //shuffleArray()75//const topCatchPraise1 = 'Forestyì í¨ê» ì§ìì ì²ì ê°ê¿ëê°ì.'76//const topCatchPraise2 = 'ì§ê¸ê¹ì§ Forestyì ì¬ì´ì§ ëë¬´'77const topCatchPraise1 = translationText.en.topCatchPraise178const topCatchPraise2 = translationText.en.topCatchPraise279const catchPraise1 = 'With '80const catchPraise2 = 'Grow Your Forest'81const catchPraise3 = 'Community By Your Major'82const catchPraise4 = 'Foresty ì ì ê³µë³ ê²ìí'83const catchPraise5 =84  'ê°ì ì ê³µë¼ë¦¬ ëª¨ì´ë ì»¤ë®¤ëí°ë¥¼ íµí´ ë¤ìí ì ë³´ë¥¼ ê³µì í´ ë³´ì¸ì.'85export default function HomePage() {86  const dispatch = useDispatch()87  const { treeSum } = useSelector((state) => {88    return { treeSum: state.techtree.treeSum }89  })90  const isClient = typeof window === 'object'91  function getSize() {92    return {93      width: isClient ? window.innerWidth : undefined,94      height: isClient ? window.innerHeight : undefined,95    }96  }97  const [windowSize, setWindowSize] = useState(getSize)98  const [isPopup, setIsPopUp] = useState(false)99  const [selectedDepts, setselectedDepts] = useState(null)100  const onSetIsPopUp = useCallback((param) => {101    setIsPopUp(param)102  })103  const onSetselectedDepts = useCallback((param) => {104    setselectedDepts(param)105  })106  useEffect(() => {107    authService.currentUser?.reload()108    dispatch(setUserPlace('main'))109    if (!isClient) {110      return false111    }112    function handleResize() {113      setWindowSize(getSize())114    }115    window.addEventListener('resize', handleResize)116    return () => window.removeEventListener('resize', handleResize)117  }, [])118  return (119    <MainWrapperDefault>120      <HomePageHeader>121        <div>122          <img src={MainIcon} height="101px" />123          <br />124          <div>125            <br />126            <div127              style={{128                fontSize: fontSize.large,129                fontWeight: fontWeight.semibold,130              }}131            >132              {topCatchPraise1}133            </div>134            <br />135            <div>{topCatchPraise2}</div>136            <br />137            <TreeSumText>138              {treeSum ? <CountUp end={treeSum} duration={2.5} /> : ''}139            </TreeSumText>140          </div>141        </div>142      </HomePageHeader>143      <DemoTree />144      <HomePageSection>145        <HomePageMiddle>146          <MiddleSectionTextArea>147            <BigText>{catchPraise3}</BigText>148            <LargeBoldText>{catchPraise4}</LargeBoldText>149            <br />150            <br />151            <br />152            <div style={{ fontSize: `${fontSize.xsmall}` }}>{catchPraise5}</div>153          </MiddleSectionTextArea>154          <div>155            <img156              style={{ width: '100%', objectFit: 'cover' }}157              src={HomeImage}158            />159          </div>160        </HomePageMiddle>161      </HomePageSection>162      <BlockWrapper>163        {windowSize.width > 1024 ? (164          <DesktopBlocks165            onSetIsPopUp={setIsPopUp}166            onSetselectedDepts={onSetselectedDepts}167          />168        ) : (169          ''170        )}171        {1024 > windowSize.width && windowSize.width > 650 ? (172          <TabletBlocks173            onSetIsPopUp={setIsPopUp}174            onSetselectedDepts={onSetselectedDepts}175          />176        ) : (177          ''178        )}179        {650 > windowSize.width ? (180          <MobileBlocks181            onSetIsPopUp={setIsPopUp}182            onSetselectedDepts={onSetselectedDepts}183          />184        ) : (185          ''186        )}187      </BlockWrapper>188      {/* popup modalì ëí ì½ë ìì */}189      <PopupWrapper190        isPopup={isPopup}191        onClick={(e) => {192          setIsPopUp(false)193          setselectedDepts(null)194        }}195      >196        <PopupGridContainer197          onClick={(e) => {198            e.preventDefault()199          }}200        >201          {selectedDepts?.map((dept) => {202            return (203              <PopupDept204                onClick={(e) => {205                  e.preventDefault()206                  dispatch(changeSortingMethod(dept, 'time', 1))207                }}208              >209                <Link210                  style={{211                    cursor: 'pointer',212                    display: 'grid',213                    boxSizing: 'border-box',214                    padding: '20px 10px',215                    placeItems: 'center',216                    width: '100%',217                    height: '100%',218                  }}219                  to={`/board/${dept}?page=1`}220                >221                  {dept}222                </Link>223              </PopupDept>224            )225          })}226        </PopupGridContainer>227      </PopupWrapper>228    </MainWrapperDefault>229  )230}231export const HomePageSection = styled.div`232  display: grid;233  font-size: ${fontSize.medium};234  line-height: ${fontSize.xlarge};235  text-align: center;236  text-decoration: none solid rgb(53, 53, 53);237  height: 575px;238  align-items: center;239`240export const HomePageHeader = styled(HomePageSection)``241export const HomePageMiddle = styled(HomePageSection)`242  grid-template-columns: 1fr 1fr;243  @media (max-width: 768px) {244    grid-template-columns: 1fr;245  }246`247export const MiddleSectionTextArea = styled.div`248  text-align: left;249  @media (max-width: 768px) {250    text-align: center;251  }252`253export const BigText = styled.div`254  font-size: 40px;255  line-height: 45px;256  font-weight: 900;257  margin-top: 2rem;258  margin-bottom: 0.5rem;259`260export const LargeBoldText = styled.div`261  all: unset;262  font-weight: bold;263  color: ${colorPalette.mainGreen};264  font-size: ${fontSize.large};265`266export const TreeSumText = styled.div`267  font-size: ${fontSize.xxlarge};268  font-weight: 500;269  color: ${colorPalette.teal6};270  line-height: 42px;271`272function DemoTree() {273  const dispatch = useDispatch()274  const {275    techtreeTitle,276    nodeList,277    linkList,278    selectedNode,279    previousNodeList,280    nextNodeList,281  } = useSelector((state) => {282    return {283      techtreeTitle: state.demo.demoTitle,284      nodeList: state.demo.demoNodeList,285      linkList: state.demo.demoLinkList,286      selectedNode: state.demo.selectedNode,287      previousNodeList: state.demo.previousNodeList,288      nextNodeList: state.demo.nextNodeList,289    }290  })291  const { isEditingTechtree, techtreeData } = useSelector((state) => {292    return {293      isEditingTechtree: state.techtree.isEditingTechtree,294      techtreeData: state.techtree.techtreeData,295    }296  })297  const [documentTitle, setDocumentTitle] = useState('')298  const [documentText, setDocumentText] = useState('')299  const [isEditingDocument, setIsEditingDocument] = useState(false)300  useEffect(() => {301    setDocumentTitle(selectedNode.name)302    setDocumentText(selectedNode.body)303  }, [selectedNode, dispatch])304  const onChangeDocumentTitle = useCallback(305    (e) => {306      e.preventDefault()307      setDocumentTitle(e.target.value)308    },309    [documentTitle]310  )311  const onChangeTechtreeTitle = useCallback((e) => {312    e.preventDefault()313    dispatch(changeTreeTitle(e.target.value))314  }, [])315  const onFinishDocuEdit = useCallback(() => {316    dispatch(317      finishEditDocu(318        selectedNode.id,319        documentTitle,320        documentText,321        nodeList,322        linkList,323        techtreeData324      )325    )326    setIsEditingDocument(false)327  }, [328    isEditingDocument,329    selectedNode,330    documentTitle,331    documentText,332    nodeList,333    linkList,334    techtreeData,335  ])336  const onClickTechtreeEdit = useCallback(() => {337    if (isEditingTechtree) {338      dispatch(finishTechtreeEdit())339    } else {340      dispatch(editTechtree())341    }342  }, [dispatch, isEditingTechtree])343  const onClickTechtreeCommit = useCallback(344    async (e) => {345      e.preventDefault()346    },347    [dispatch, nodeList, linkList, techtreeTitle]348  )349  return (350    <>351      <TreeTitleArea>352        <TitleInput353          value={techtreeTitle}354          placeholder="í¸ë¦¬ì ì£¼ì ë¥¼ ì ì´ì£¼ì¸ì!"355          onChange={onChangeTechtreeTitle}356          maxLength="30"357        />358      </TreeTitleArea>359      <DoubleSideLayout>360        <HalfWidthContainer>361          <TreeEditorArea>362            <TreeMapDemo />363          </TreeEditorArea>364          <TreeEditButtonArea>365            <DefaultButton366              onClick={() => {367                Swal.fire('Fork Other Tree', 'You can add tree to your Forest!')368                // alert(369                //   'ë§ìì ëë í¸ë¦¬ë¥¼ ë³µì¬í´ ìì ì forest ì ì¶ê°í  ì ìì´ì!'370                // )371              }}372            >373              Fork This Tree374            </DefaultButton>375            <DefaultButton376              onClick={() => {377                Swal.fire(378                  'Easy Backup',379                  'You can download tree as a json format!'380                )381                //alert('ìì±í í¸ë¦¬ë¥¼ json ííë¡ ë¤ì´ë°ì ì ìì´ì.')382              }}383            >384              Download Tree385            </DefaultButton>386            {isEditingTechtree ? (387              <DefaultButton onClick={onClickTechtreeEdit}>Done</DefaultButton>388            ) : (389              <DefaultButton onClick={onClickTechtreeEdit}>390                Edit Tree391              </DefaultButton>392            )}393            <DefaultButton394              onClick={() => {395                Swal.fire(396                  'Update Tree',397                  'When it is clicked, changes are saved!'398                )399                //alert('ì´ ë²í¼ì ëë¥´ë©´ í¸ë¦¬ììì ë³ê²½ì¬íì´ ì ì¥ë¼ì!')400              }}401            >402              Save Changes403            </DefaultButton>404            <DangerButton405              onClick={() => {406                Swal.fire('Watch Out!', 'This button delete tree totally!')407                //const deleteOK = window.confirm(408                //  `ì¡°ì¬íì¸ì! ì´ ë²í¼ì ëë¥´ë©´ í¸ë¦¬ ì ì²´ê° ìì ë¼ì!`409                //)410                //if (deleteOK) {411                //  //alert('')412                //} else {413                //  return414                //}415              }}416            >417              Delete All418            </DangerButton>419          </TreeEditButtonArea>420        </HalfWidthContainer>421        <HalfWidthDocumentContainer>422          <DocuWrapper id="docuWrapper">423            <DocuHeaderArea>424              <div className="docuTitle">425                {isEditingDocument ? (426                  <div>427                    <TitleInput428                      value={documentTitle}429                      onChange={onChangeDocumentTitle}430                    />431                  </div>432                ) : (433                  <StyledTitle>{selectedNode.name}</StyledTitle>434                )}435              </div>436              <EditDocuButtonArea>437                {isEditingDocument ? (438                  <DefaultButton onClick={onFinishDocuEdit}>439                    ìì ìë£440                  </DefaultButton>441                ) : (442                  ''443                )}444                {typeof selectedNode.id !== 'undefined' &&445                !isEditingDocument ? (446                  <DefaultButton447                    onClick={() => {448                      setIsEditingDocument(true)449                    }}450                  >451                    Edit452                  </DefaultButton>453                ) : (454                  ''455                )}456              </EditDocuButtonArea>457            </DocuHeaderArea>458            <TitleBottomLine />459            <DocuBodyArea>460              {isEditingDocument ? (461                <MarkdownEditor462                  bindingText={documentText}463                  bindingSetter={setDocumentText}464                  width="100%"465                />466              ) : (467                <MarkdownRenderer text={selectedNode.body} />468              )}469            </DocuBodyArea>470          </DocuWrapper>471          <NodeButtonArea>472            <PrevNodeArea>473              {previousNodeList.length > 0 ? <div>Previous</div> : ''}474              {previousNodeList.map((node, idx) => {475                return (476                  <div key={idx}>477                    <DefaultButton478                      onClick={() => {479                        const newPreviousNodeList = returnPreviousNodeList(480                          linkList,481                          nodeList,482                          node483                        )484                        const newNextNodeList = returnNextNodeList(485                          linkList,486                          nodeList,487                          node488                        )489                        dispatch(490                          selectNode(newPreviousNodeList, newNextNodeList, node)491                        )492                        const offsetElement = document.getElementById(493                          'docuWrapper'494                        )495                        const clientRect = offsetElement.getBoundingClientRect()496                        const relativeTop = clientRect.top497                        const scrolledTopLength = window.pageYOffset498                        const absoluteYPosition =499                          scrolledTopLength + relativeTop500                        window.scrollTo(0, absoluteYPosition - 80)501                      }}502                    >503                      {node?.name}504                    </DefaultButton>505                  </div>506                )507              })}508            </PrevNodeArea>509            <NextNodeArea>510              {nextNodeList.length > 0 ? <div>Next</div> : ''}511              {nextNodeList.map((node, idx) => {512                return (513                  <div key={idx}>514                    <DefaultButton515                      onClick={() => {516                        const newPreviousNodeList = returnPreviousNodeList(517                          linkList,518                          nodeList,519                          node520                        )521                        const newNextNodeList = returnNextNodeList(522                          linkList,523                          nodeList,524                          node525                        )526                        dispatch(527                          selectNode(newPreviousNodeList, newNextNodeList, node)528                        )529                        const offsetElement = document.getElementById(530                          'docuWrapper'531                        )532                        const clientRect = offsetElement.getBoundingClientRect()533                        const relativeTop = clientRect.top534                        const scrolledTopLength = window.pageYOffset535                        const absoluteYPosition =536                          scrolledTopLength + relativeTop537                        window.scrollTo(0, absoluteYPosition - 80)538                      }}539                    >540                      {node?.name}541                    </DefaultButton>542                  </div>543                )544              })}545            </NextNodeArea>546          </NodeButtonArea>547        </HalfWidthDocumentContainer>548      </DoubleSideLayout>549      <br />550    </>551  )552}553function OneBlock({ color, name, setIsPopUp, setselectedDepts }) {554  return (555    <WidthOneBlock556      style={{557        backgroundColor: color,558        color: '#ffffff',559        fontWeight: 500,560        fontSize: fontSize.xlarge,561        cursor: 'pointer',562      }}563      onClick={() => {564        setIsPopUp(true)565        setselectedDepts(departments[name])566      }}567    >568      {name}569      {/* <Link570        to={`/board/${name}`}571        style={{572          width: '100%',573          height: '100%',574          display: 'grid',575          alignItems: 'center',576        }}577      >578        579      </Link> */}580    </WidthOneBlock>581  )582}583function ThreeBlock({ color, name, name2 }) {584  return (585    <WidthThreeBlock586      style={{587        backgroundColor: color,588        color: colorPalette.gray7,589      }}590    >591      <Link592        to={`/forest`}593        style={{594          width: '100%',595          height: '100%',596          display: 'grid',597          alignItems: 'center',598        }}599      >600        <div style={{ display: `inline` }}>601          <span>{name}</span>602          <span style={{ fontWeight: '700' }}>{name2}</span>603        </div>604      </Link>605    </WidthThreeBlock>606  )607}608export const BlockWrapper = styled.div`609  display: grid;610  grid-gap: 25px;611  align-items: center; // ë´ë¶ììë¤ ì¸ë¡ì¤ìì ë ¬612  justify-items: center; // ê°ë¡ ì¤ìì ë ¬613  grid-auto-columns: minmax(125px, auto);614  grid-auto-rows: minmax(125px, auto);615  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;616  @media (max-width: 1440px) {617    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;618  }619  @media (max-width: 1024px) {620    grid-template-columns: 1fr 1fr 1fr 1fr;621  }622  @media (max-width: 650px) {623    grid-template-columns: 1fr 1fr 1fr;624  }625`626export const WidthOneBlock = styled.div`627  grid-row-start: span 1;628  grid-column-start: span 1;629  border-radius: 5px;630  text-align: center;631  display: grid;632  align-items: center;633  width: 100%;634  height: 100%;635  aspect-ratio: 1/1; // ëª¨ë°ì¼ììë ìëì ìí´!636  box-shadow: ${boxShadow.default};637  &:hover {638    ${hoverAction}639  }640`641export const WidthThreeBlock = styled.div`642  grid-row-start: span 1;643  grid-column-start: span 3;644  text-align: center;645  border-radius: 5px;646  display: grid;647  align-items: center;648  width: 100%;649  height: 100%;650  font-size: 40px;651  box-shadow: ${boxShadow.default};652  &:hover {653    ${hoverAction}654  }655`656function DesktopBlocks({ onSetIsPopUp, onSetselectedDepts }) {657  return (658    <>659      <OneBlock660        color={colorPalette.mainGreen}661        name={nameSet[0]}662        setIsPopUp={onSetIsPopUp}663        setselectedDepts={onSetselectedDepts}664      ></OneBlock>665      <OneBlock666        color={colorPalette.mainGreen}667        name={nameSet[1]}668        setIsPopUp={onSetIsPopUp}669        setselectedDepts={onSetselectedDepts}670      ></OneBlock>671      <OneBlock672        color={colorPalette.mainGreen}673        name={nameSet[2]}674        setIsPopUp={onSetIsPopUp}675        setselectedDepts={onSetselectedDepts}676      ></OneBlock>677      <OneBlock678        color={colorPalette.mainGreen}679        name={nameSet[3]}680        setIsPopUp={onSetIsPopUp}681        setselectedDepts={onSetselectedDepts}682      ></OneBlock>683      <OneBlock684        color={colorPalette.mainGreen}685        name={nameSet[4]}686        setIsPopUp={onSetIsPopUp}687        setselectedDepts={onSetselectedDepts}688      ></OneBlock>689      <OneBlock690        color={colorPalette.mainGreen}691        name={nameSet[5]}692        setIsPopUp={onSetIsPopUp}693        setselectedDepts={onSetselectedDepts}694      ></OneBlock>695      <OneBlock696        color={colorPalette.mainGreen}697        name={nameSet[6]}698        setIsPopUp={onSetIsPopUp}699        setselectedDepts={onSetselectedDepts}700      ></OneBlock>701      <ThreeBlock702        color={colorPalette.gray0}703        name={catchPraise1}704        name2={'Foresty'}705      ></ThreeBlock>706      <OneBlock707        color={colorPalette.mainGreen}708        name={nameSet[7]}709        setIsPopUp={onSetIsPopUp}710        setselectedDepts={onSetselectedDepts}711      ></OneBlock>712      <OneBlock713        color={colorPalette.mainGreen}714        name={nameSet[8]}715        setIsPopUp={onSetIsPopUp}716        setselectedDepts={onSetselectedDepts}717      ></OneBlock>718      <OneBlock719        color={colorPalette.mainGreen}720        name={nameSet[9]}721        setIsPopUp={onSetIsPopUp}722        setselectedDepts={onSetselectedDepts}723      ></OneBlock>724      <OneBlock725        color={colorPalette.mainGreen}726        name={nameSet[10]}727        setIsPopUp={onSetIsPopUp}728        setselectedDepts={onSetselectedDepts}729      ></OneBlock>730      <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>731      <OneBlock732        color={colorPalette.mainGreen}733        name={nameSet[11]}734        setIsPopUp={onSetIsPopUp}735        setselectedDepts={onSetselectedDepts}736      ></OneBlock>737      <OneBlock738        color={colorPalette.mainGreen}739        name={nameSet[12]}740        setIsPopUp={onSetIsPopUp}741        setselectedDepts={onSetselectedDepts}742      ></OneBlock>743      <OneBlock744        color={colorPalette.mainGreen}745        name={nameSet[13]}746        setIsPopUp={onSetIsPopUp}747        setselectedDepts={onSetselectedDepts}748      ></OneBlock>749      <OneBlock750        color={colorPalette.mainGreen}751        name={nameSet[14]}752        setIsPopUp={onSetIsPopUp}753        setselectedDepts={onSetselectedDepts}754      ></OneBlock>755      <OneBlock756        color={colorPalette.mainGreen}757        name={nameSet[15]}758        setIsPopUp={onSetIsPopUp}759        setselectedDepts={onSetselectedDepts}760      ></OneBlock>761      <OneBlock762        color={colorPalette.mainGreen}763        name={nameSet[16]}764        setIsPopUp={onSetIsPopUp}765        setselectedDepts={onSetselectedDepts}766      ></OneBlock>767      <OneBlock768        color={colorPalette.mainGreen}769        name={nameSet[17]}770        setIsPopUp={onSetIsPopUp}771        setselectedDepts={onSetselectedDepts}772      ></OneBlock>773    </>774  )775}776function TabletBlocks({ onSetIsPopUp, onSetselectedDepts }) {777  return (778    <>779      <OneBlock780        color={colorPalette.mainGreen}781        name={nameSet[0]}782        setIsPopUp={onSetIsPopUp}783        setselectedDepts={onSetselectedDepts}784      ></OneBlock>785      <OneBlock786        color={colorPalette.mainGreen}787        name={nameSet[1]}788        setIsPopUp={onSetIsPopUp}789        setselectedDepts={onSetselectedDepts}790      ></OneBlock>791      <OneBlock792        color={colorPalette.mainGreen}793        name={nameSet[2]}794        setIsPopUp={onSetIsPopUp}795        setselectedDepts={onSetselectedDepts}796      ></OneBlock>797      <OneBlock798        color={colorPalette.mainGreen}799        name={nameSet[3]}800        setIsPopUp={onSetIsPopUp}801        setselectedDepts={onSetselectedDepts}802      ></OneBlock>803      <ThreeBlock804        color={colorPalette.gray0}805        name={catchPraise1}806        name2={'Foresty'}807      ></ThreeBlock>808      <OneBlock809        color={colorPalette.mainGreen}810        name={nameSet[4]}811        setIsPopUp={onSetIsPopUp}812        setselectedDepts={onSetselectedDepts}813      ></OneBlock>814      <OneBlock815        color={colorPalette.mainGreen}816        name={nameSet[5]}817        setIsPopUp={onSetIsPopUp}818        setselectedDepts={onSetselectedDepts}819      ></OneBlock>820      <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>821      <OneBlock822        color={colorPalette.mainGreen}823        name={nameSet[6]}824        setIsPopUp={onSetIsPopUp}825        setselectedDepts={onSetselectedDepts}826      ></OneBlock>827      <OneBlock828        color={colorPalette.mainGreen}829        name={nameSet[7]}830        setIsPopUp={onSetIsPopUp}831        setselectedDepts={onSetselectedDepts}832      ></OneBlock>833      <OneBlock834        color={colorPalette.mainGreen}835        name={nameSet[8]}836        setIsPopUp={onSetIsPopUp}837        setselectedDepts={onSetselectedDepts}838      ></OneBlock>839      <OneBlock840        color={colorPalette.mainGreen}841        name={nameSet[9]}842        setIsPopUp={onSetIsPopUp}843        setselectedDepts={onSetselectedDepts}844      ></OneBlock>845      <OneBlock846        color={colorPalette.mainGreen}847        name={nameSet[10]}848        setIsPopUp={onSetIsPopUp}849        setselectedDepts={onSetselectedDepts}850      ></OneBlock>851      <OneBlock852        color={colorPalette.mainGreen}853        name={nameSet[11]}854        setIsPopUp={onSetIsPopUp}855        setselectedDepts={onSetselectedDepts}856      ></OneBlock>857      <OneBlock858        color={colorPalette.mainGreen}859        name={nameSet[12]}860        setIsPopUp={onSetIsPopUp}861        setselectedDepts={onSetselectedDepts}862      ></OneBlock>863      <OneBlock864        color={colorPalette.mainGreen}865        name={nameSet[13]}866        setIsPopUp={onSetIsPopUp}867        setselectedDepts={onSetselectedDepts}868      ></OneBlock>869      <OneBlock870        color={colorPalette.mainGreen}871        name={nameSet[14]}872        setIsPopUp={onSetIsPopUp}873        setselectedDepts={onSetselectedDepts}874      ></OneBlock>875      <OneBlock876        color={colorPalette.mainGreen}877        name={nameSet[15]}878        setIsPopUp={onSetIsPopUp}879        setselectedDepts={onSetselectedDepts}880      ></OneBlock>881      <OneBlock882        color={colorPalette.mainGreen}883        name={nameSet[16]}884        setIsPopUp={onSetIsPopUp}885        setselectedDepts={onSetselectedDepts}886      ></OneBlock>887      <OneBlock888        color={colorPalette.mainGreen}889        name={nameSet[17]}890        setIsPopUp={onSetIsPopUp}891        setselectedDepts={onSetselectedDepts}892      ></OneBlock>893    </>894  )895}896function MobileBlocks({ onSetIsPopUp, onSetselectedDepts }) {897  return (898    <>899      <OneBlock900        color={colorPalette.mainGreen}901        name={nameSet[0]}902        setIsPopUp={onSetIsPopUp}903        setselectedDepts={onSetselectedDepts}904      ></OneBlock>905      <OneBlock906        color={colorPalette.mainGreen}907        name={nameSet[1]}908        setIsPopUp={onSetIsPopUp}909        setselectedDepts={onSetselectedDepts}910      ></OneBlock>911      <OneBlock912        color={colorPalette.mainGreen}913        name={nameSet[2]}914        setIsPopUp={onSetIsPopUp}915        setselectedDepts={onSetselectedDepts}916      ></OneBlock>917      <ThreeBlock918        color={colorPalette.gray0}919        name={catchPraise1}920        name2={'Foresty'}921      ></ThreeBlock>922      <ThreeBlock color={colorPalette.gray0} name={catchPraise2}></ThreeBlock>923      <OneBlock924        color={colorPalette.mainGreen}925        name={nameSet[3]}926        setIsPopUp={onSetIsPopUp}927        setselectedDepts={onSetselectedDepts}928      ></OneBlock>929      <OneBlock930        color={colorPalette.mainGreen}931        name={nameSet[4]}932        setIsPopUp={onSetIsPopUp}933        setselectedDepts={onSetselectedDepts}934      ></OneBlock>935      <OneBlock936        color={colorPalette.mainGreen}937        name={nameSet[5]}938        setIsPopUp={onSetIsPopUp}939        setselectedDepts={onSetselectedDepts}940      ></OneBlock>941      <OneBlock942        color={colorPalette.mainGreen}943        name={nameSet[6]}944        setIsPopUp={onSetIsPopUp}945        setselectedDepts={onSetselectedDepts}946      ></OneBlock>947      <OneBlock948        color={colorPalette.mainGreen}949        name={nameSet[7]}950        setIsPopUp={onSetIsPopUp}951        setselectedDepts={onSetselectedDepts}952      ></OneBlock>953      <OneBlock954        color={colorPalette.mainGreen}955        name={nameSet[8]}956        setIsPopUp={onSetIsPopUp}957        setselectedDepts={onSetselectedDepts}958      ></OneBlock>959      <OneBlock960        color={colorPalette.mainGreen}961        name={nameSet[9]}962        setIsPopUp={onSetIsPopUp}963        setselectedDepts={onSetselectedDepts}964      ></OneBlock>965      <OneBlock966        color={colorPalette.mainGreen}967        name={nameSet[10]}968        setIsPopUp={onSetIsPopUp}969        setselectedDepts={onSetselectedDepts}970      ></OneBlock>971      <OneBlock972        color={colorPalette.mainGreen}973        name={nameSet[11]}974        setIsPopUp={onSetIsPopUp}975        setselectedDepts={onSetselectedDepts}976      ></OneBlock>977      <OneBlock978        color={colorPalette.mainGreen}979        name={nameSet[12]}980        setIsPopUp={onSetIsPopUp}981        setselectedDepts={onSetselectedDepts}982      ></OneBlock>983      <OneBlock984        color={colorPalette.mainGreen}985        name={nameSet[13]}986        setIsPopUp={onSetIsPopUp}987        setselectedDepts={onSetselectedDepts}988      ></OneBlock>989      <OneBlock990        color={colorPalette.mainGreen}991        name={nameSet[14]}992        setIsPopUp={onSetIsPopUp}993        setselectedDepts={onSetselectedDepts}994      ></OneBlock>995      <OneBlock996        color={colorPalette.mainGreen}997        name={nameSet[15]}998        setIsPopUp={onSetIsPopUp}999        setselectedDepts={onSetselectedDepts}1000      ></OneBlock>1001      <OneBlock1002        color={colorPalette.mainGreen}1003        name={nameSet[16]}1004        setIsPopUp={onSetIsPopUp}1005        setselectedDepts={onSetselectedDepts}1006      ></OneBlock>1007      <OneBlock1008        color={colorPalette.mainGreen}1009        name={nameSet[17]}1010        setIsPopUp={onSetIsPopUp}1011        setselectedDepts={onSetselectedDepts}1012      ></OneBlock>1013    </>1014  )1015}1016// popup1017const PopupWrapper = styled.div`1018  display: ${(props) => {1019    return props.isPopup ? 'grid' : 'none'1020  }};1021  opacity: ${(props) => {1022    return props.isPopup ? '1' : '0'1023  }};1024  position: fixed;1025  place-items: center;1026  width: 100vw;1027  height: 100vh;1028  background: rgba(0, 0, 0, 0.2);1029  left: 0;1030  top: 0;1031`1032const PopupGridContainer = styled.div`1033  width: 70vw;1034  display: grid;1035  align-items: center;1036  grid-gap: 10px;1037  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));1038`1039const PopupDept = styled.div`1040  border-radius: 15px;1041  color: white;1042  font-weight: bold;1043  background: ${colorPalette.mainGreen};...

kit.js

Source:kit.js

1import React, { useState } from 'react';2import ItemsLayout from './itemsLayout';3import SideNavigation from './Sidebar'4function Uikit() {5    //Kit state objects6    const [selectedAvatars, setselectedAvatars] = useState(true);7    const [selectedButtons, setSelectedButtons] = useState(false);8    const [selectedCards, setselectedCards] = useState(false);9    const [selectedCharts, setselectedCharts] = useState(false);10    const [selectedContainers, setselectedContainers] = useState(false);11    const [selectedDropdowns, setselectedDropdowns] = useState(false);12    const [selectedForms, setselectedForms] = useState(false);13    const [selectedInputs, setselectedInputs] = useState(false);14    const [selectedMenus, setselectedMenus] = useState(false);15    const [selectedModals, setselectedModals] = useState(false);16    const [selectedNavs, setselectedNavs] = useState(false);17    const [selectedNotifications, setselectedNotifications] = useState(false);18    const [selectedPagination, setselectedPagination] = useState(false);19    const [selectedProgresses, setselectedProgresses] = useState(false);20    const [selectedScrolls, setselectedScrolls] = useState(false);21    const [selectedSpinners, setselectedSpinners] = useState(false);22    const [selectedTables, setselectedTables] = useState(false);23    //Render component functions24    const renderAvatars =() =>{25        setselectedAvatars(true);26        setSelectedButtons(false);27        setselectedCards(false);28        setselectedCharts(false);29        setselectedContainers(false);30        setselectedDropdowns(false);31        setselectedForms(false);32        setselectedInputs(false);33        setselectedMenus(false);34        setselectedModals(false);35        setselectedNavs(false);36        setselectedNotifications(false);37        setselectedPagination(false);38        setselectedProgresses(false);39        setselectedScrolls(false);40        setselectedSpinners(false);41        setselectedTables(false);42    }43    const renderButtons=()=>{44        setselectedAvatars(false);45        setSelectedButtons(true);46        setselectedCards(false);47        setselectedCharts(false);48        setselectedContainers(false);49        setselectedDropdowns(false);50        setselectedForms(false);51        setselectedInputs(false);52        setselectedMenus(false);53        setselectedModals(false);54        setselectedNavs(false);55        setselectedNotifications(false);56        setselectedPagination(false);57        setselectedProgresses(false);58        setselectedScrolls(false);59        setselectedSpinners(false);60        setselectedTables(false);61    }62    const renderCards =()=>{63        setselectedAvatars(false);64        setSelectedButtons(false);65        setselectedCards(true);66        setselectedCharts(false);67        setselectedContainers(false);68        setselectedDropdowns(false);69        setselectedForms(false);70        setselectedInputs(false);71        setselectedMenus(false);72        setselectedModals(false);73        setselectedNavs(false);74        setselectedNotifications(false);75        setselectedPagination(false);76        setselectedProgresses(false);77        setselectedScrolls(false);78        setselectedSpinners(false);79        setselectedTables(false);80    }81    const renderCharts =()=>{82        setselectedAvatars(false);83        setSelectedButtons(false);84        setselectedCards(false);85        setselectedCharts(true);86        setselectedContainers(false);87        setselectedDropdowns(false);88        setselectedForms(false);89        setselectedInputs(false);90        setselectedMenus(false);91        setselectedModals(false);92        setselectedNavs(false);93        setselectedNotifications(false);94        setselectedPagination(false);95        setselectedProgresses(false);96        setselectedScrolls(false);97        setselectedSpinners(false);98        setselectedTables(false);99    }100    const renderContainers =()=>{101        setselectedAvatars(false);102        setSelectedButtons(false);103        setselectedCards(false);104        setselectedCharts(false);105        setselectedContainers(true);106        setselectedDropdowns(false);107        setselectedForms(false);108        setselectedInputs(false);109        setselectedMenus(false);110        setselectedModals(false);111        setselectedNavs(false);112        setselectedNotifications(false);113        setselectedPagination(false);114        setselectedProgresses(false);115        setselectedScrolls(false);116        setselectedSpinners(false);117        setselectedTables(false);118    }119    const renderDropdowns =()=>{120        setselectedAvatars(false);121        setSelectedButtons(false);122        setselectedCards(false);123        setselectedCharts(false);124        setselectedContainers(false);125        setselectedDropdowns(true);126        setselectedForms(false);127        setselectedInputs(false);128        setselectedMenus(false);129        setselectedModals(false);130        setselectedNavs(false);131        setselectedNotifications(false);132        setselectedPagination(false);133        setselectedProgresses(false);134        setselectedScrolls(false);135        setselectedSpinners(false);136        setselectedTables(false);137    }138    const renderForms =()=>{139        setselectedAvatars(false);140        setSelectedButtons(false);141        setselectedCards(false);142        setselectedCharts(false);143        setselectedContainers(false);144        setselectedDropdowns(false);145        setselectedForms(true);146        setselectedInputs(false);147        setselectedMenus(false);148        setselectedModals(false);149        setselectedNavs(false);150        setselectedNotifications(false);151        setselectedPagination(false);152        setselectedProgresses(false);153        setselectedScrolls(false);154        setselectedSpinners(false);155        setselectedTables(false);156    }157    const renderInputs =()=>{158        setselectedAvatars(false);159        setSelectedButtons(false);160        setselectedCards(false);161        setselectedCharts(false);162        setselectedContainers(false);163        setselectedDropdowns(false);164        setselectedForms(false);165        setselectedInputs(true);166        setselectedMenus(false);167        setselectedModals(false);168        setselectedNavs(false);169        setselectedNotifications(false);170        setselectedPagination(false);171        setselectedProgresses(false);172        setselectedScrolls(false);173        setselectedSpinners(false);174        setselectedTables(false);175    }176    const renderMenus =()=>{177        setselectedAvatars(false);178        setSelectedButtons(false);179        setselectedCards(false);180        setselectedCharts(false);181        setselectedContainers(false);182        setselectedDropdowns(false);183        setselectedForms(false);184        setselectedInputs(false);185        setselectedMenus(true);186        setselectedModals(false);187        setselectedNavs(false);188        setselectedNotifications(false);189        setselectedPagination(false);190        setselectedProgresses(false);191        setselectedScrolls(false);192        setselectedSpinners(false);193        setselectedTables(false);194    }195    const renderModals =()=>{196        setselectedAvatars(false);197        setSelectedButtons(false);198        setselectedCards(false);199        setselectedCharts(false);200        setselectedContainers(false);201        setselectedDropdowns(false);202        setselectedForms(false);203        setselectedInputs(false);204        setselectedMenus(false);205        setselectedModals(true);206        setselectedNavs(false);207        setselectedNotifications(false);208        setselectedPagination(false);209        setselectedProgresses(false);210        setselectedScrolls(false);211        setselectedSpinners(false);212        setselectedTables(false);213    }214    const renderNavigations =()=>{215        setselectedAvatars(false);216        setSelectedButtons(false);217        setselectedCards(false);218        setselectedCharts(false);219        setselectedContainers(false);220        setselectedDropdowns(false);221        setselectedForms(false);222        setselectedInputs(false);223        setselectedMenus(false);224        setselectedModals(false);225        setselectedNavs(true);226        setselectedNotifications(false);227        setselectedPagination(false);228        setselectedProgresses(false);229        setselectedScrolls(false);230        setselectedSpinners(false);231        setselectedTables(false);232    }233    const renderNotifications =()=>{234        setselectedAvatars(false);235        setSelectedButtons(false);236        setselectedCards(false);237        setselectedCharts(false);238        setselectedContainers(false);239        setselectedDropdowns(false);240        setselectedForms(false);241        setselectedInputs(false);242        setselectedMenus(false);243        setselectedModals(false);244        setselectedNavs(false);245        setselectedNotifications(true);246        setselectedPagination(false);247        setselectedProgresses(false);248        setselectedScrolls(false);249        setselectedSpinners(false);250        setselectedTables(false);251    }252    const renderPagination =()=>{253        setselectedAvatars(false);254        setSelectedButtons(false);255        setselectedCards(false);256        setselectedCharts(false);257        setselectedContainers(false);258        setselectedDropdowns(false);259        setselectedForms(false);260        setselectedInputs(false);261        setselectedMenus(false);262        setselectedModals(false);263        setselectedNavs(false);264        setselectedNotifications(false);265        setselectedPagination(true);266        setselectedProgresses(false);267        setselectedScrolls(false);268        setselectedSpinners(false);269        setselectedTables(false);270    } 271    const renderProgresses =()=>{272        setselectedAvatars(false);273        setSelectedButtons(false);274        setselectedCards(false);275        setselectedCharts(false);276        setselectedContainers(false);277        setselectedDropdowns(false);278        setselectedForms(false);279        setselectedInputs(false);280        setselectedMenus(false);281        setselectedModals(false);282        setselectedNavs(false);283        setselectedNotifications(false);284        setselectedPagination(false);285        setselectedProgresses(true);286        setselectedScrolls(false);287        setselectedSpinners(false);288        setselectedTables(false);289    }290    const renderScrolls =()=>{291        setselectedAvatars(false);292        setSelectedButtons(false);293        setselectedCards(false);294        setselectedCharts(false);295        setselectedContainers(false);296        setselectedDropdowns(false);297        setselectedForms(false);298        setselectedInputs(false);299        setselectedMenus(false);300        setselectedModals(false);301        setselectedNavs(false);302        setselectedNotifications(false);303        setselectedPagination(false);304        setselectedProgresses(false);305        setselectedScrolls(true);306        setselectedSpinners(false);307        setselectedTables(false);308    }309    const renderSpinners =()=>{310        setselectedAvatars(false);311        setSelectedButtons(false);312        setselectedCards(false);313        setselectedCharts(false);314        setselectedContainers(false);315        setselectedDropdowns(false);316        setselectedForms(false);317        setselectedInputs(false);318        setselectedMenus(false);319        setselectedModals(false);320        setselectedNavs(false);321        setselectedNotifications(false);322        setselectedPagination(false);323        setselectedProgresses(false);324        setselectedScrolls(false);325        setselectedSpinners(true);326        setselectedTables(false);327    }328    const renderTables =()=>{329        setselectedAvatars(false);330        setSelectedButtons(false);331        setselectedCards(false);332        setselectedCharts(false);333        setselectedContainers(false);334        setselectedDropdowns(false);335        setselectedForms(false);336        setselectedInputs(false);337        setselectedMenus(false);338        setselectedModals(false);339        setselectedNavs(false);340        setselectedNotifications(false);341        setselectedPagination(false);342        setselectedProgresses(false);343        setselectedScrolls(false);344        setselectedSpinners(false);345        setselectedTables(true);346    }347    const allRenders ={348        renderAvatars,349        renderButtons,350        renderCards,351        renderCharts,352        renderContainers,353        renderDropdowns,354        renderForms,355        renderInputs,356        renderMenus,357        renderModals,358        renderNavigations,359        renderNotifications, 360        renderPagination,361        renderProgresses,362        renderScrolls, 363        renderSpinners,364        renderTables365    }366    const showComponents ={367        selectedAvatars,368        selectedButtons,369        selectedCards,370        selectedCharts,371        selectedContainers,372        selectedDropdowns,373        selectedForms,374        selectedInputs,375        selectedMenus,376        selectedModals,377        selectedNavs,378        selectedNotifications,379        selectedPagination,380        selectedProgresses,381        selectedScrolls,382        selectedSpinners,383        selectedTables384    }385    return (386        <div>387            <SideNavigation allRenders={allRenders}/>388            <ItemsLayout showComponents={showComponents}/>389        </div>390    )391}...

Layout.js

Source:Layout.js

1import React, { useState, useEffect } from "react";2import { Layout, Menu, Avatar, Dropdown } from "antd";3import axios from "axios";4import {5  MenuUnfoldOutlined,6  SettingOutlined,7  CameraOutlined,8  MessageOutlined,9  MenuFoldOutlined,10  VideoCameraOutlined,11  UserOutlined,12  HomeOutlined,13  ContainerOutlined,14  UsergroupAddOutlined,15  UserSwitchOutlined,16  LogoutOutlined,17  NotificationOutlined,18} from "@ant-design/icons";19import { Link } from "react-router-dom";20const { Header, Sider, Content } = Layout;21const AdminLayout = ({ children }) => {22  const [collapsed, setcollapsed] = useState(false);23  const [selectedKey, setselectedKey] = useState("0");24  const [loading, setLoading] = useState(true);25  const [profile, setProfile] = useState({26    first_name: "",27    last_name: "",28    address: "",29    phone_number: "",30    picture: null,31    gender: "",32    password: "",33  });34  useEffect(() => {35    axios36      .post("http://localhost:5000/users/fetchusersettngs", {37        email: localStorage.getItem("useremail"),38      })39      .then((response) => {40        console.log(response);41        setLoading(false);42        setProfile({43          first_name: response.data[0].first_name,44          last_name: response.data[0].last_name,45          address: response.data[0].address,46          phone_number: response.data[0].phone_number,47          picture: response.data[0].picture,48          gender: response.data[0].gender,49        });50      })51      .catch((err) => {52        console.log(err);53        return err;54      });55  }, []);56  const shiftprofile = () => {57    setselectedKey("2");58    if (localStorage.getItem("profile") === "admin") {59      localStorage.setItem("profile", "normal");60      window.location.reload();61    } else if (localStorage.getItem("profile") === "normal") {62      localStorage.setItem("profile", "admin");63      window.location.reload();64    }65  };66  const toggle = () => {67    setcollapsed(!collapsed);68  };69  const menu = (70    <Menu style={{ padding: "10px", borderRadius: "2px" }}>71      <Menu.Item72        key="1"73        icon={74          <LogoutOutlined75            style={{ fontSize: "1.2em", verticalAlign: "0.05em" }}76          />77        }78      >79        <Link to="/logout" style={{ fontSize: "1rem" }}>80          Logout81        </Link>82      </Menu.Item>83    </Menu>84  );85  return (86    <Layout>87      <Sider trigger={null} collapsible collapsed={collapsed}>88        <div className="logo">89          <img src={require("../../assets/locked-white.png")} alt="logo" />90        </div>91        <Menu theme="dark" mode="inline" selectedKeys={[selectedKey]}>92          {localStorage.getItem("admin") === "true" && (93            <Menu.Item94              key="1"95              icon={<UserSwitchOutlined />}96              onClick={() => shiftprofile()}97            >98              Shift To Normal99            </Menu.Item>100          )}101          <Menu.Item102            key="2"103            icon={<HomeOutlined />}104            onClick={() => setselectedKey("2")}105          >106            <Link to="/dashboard" onClick={() => setselectedKey("2")}>107              Dashboard108            </Link>109          </Menu.Item>110          <Menu.Item111            key="3"112            icon={<VideoCameraOutlined />}113            onClick={() => setselectedKey("3")}114          >115            <Link to="/allvideos" onClick={() => setselectedKey("3")}>116              All Videos117            </Link>118          </Menu.Item>119          <Menu.Item120            key="4"121            icon={<VideoCameraOutlined />}122            onClick={() => setselectedKey("4")}123          >124            <Link to="/allsuspvid" onClick={() => setselectedKey("4")}>125              All Suspicious Videos126            </Link>127          </Menu.Item>128          <Menu.Item129            key="5"130            icon={<VideoCameraOutlined />}131            onClick={() => setselectedKey("5")}132          >133            <Link to="/allstaticvid" onClick={() => setselectedKey("5")}>134              All Static Videos135            </Link>136          </Menu.Item>137          <Menu.Item138            key="6"139            icon={<VideoCameraOutlined />}140            onClick={() => setselectedKey("6")}141          >142            <Link to="/allnormalvid" onClick={() => setselectedKey("6")}>143              All Normal Videos144            </Link>145          </Menu.Item>146          <Menu.Item147            key="7"148            icon={<UserOutlined />}149            onClick={() => setselectedKey("7")}150          >151            <Link to="/allusers" onClick={() => setselectedKey("7")}>152              All Users153            </Link>154          </Menu.Item>155          <Menu.Item156            key="8"157            icon={<ContainerOutlined />}158            onClick={() => setselectedKey("8")}159          >160            <Link to="/allcontacts" onClick={() => setselectedKey("8")}>161              All Contact Queries162            </Link>163          </Menu.Item>164          <Menu.Item165            key="9"166            icon={<UsergroupAddOutlined />}167            onClick={() => setselectedKey("9")}168          >169            <Link to="/allrequests" onClick={() => setselectedKey("9")}>170              All Requests171            </Link>172          </Menu.Item>173          <Menu.Item174            key="10"175            icon={<MessageOutlined />}176            onClick={() => setselectedKey("10")}177          >178            <Link to="/allmessages" onClick={() => setselectedKey("10")}>179              All Messages180            </Link>181          </Menu.Item>182          <Menu.Item183            key="11"184            icon={<CameraOutlined />}185            onClick={() => setselectedKey("11")}186          >187            <Link to="/allcctvs" onClick={() => setselectedKey("11")}>188              All CCTV Cams189            </Link>190          </Menu.Item>191          <Menu.Item192            key="12"193            icon={<NotificationOutlined />}194            onClick={() => setselectedKey("12")}195          >196            <Link to="/allnotifications" onClick={() => setselectedKey("12")}>197              All Notifications198            </Link>199          </Menu.Item>200          <Menu.Item201            key="13"202            icon={<SettingOutlined />}203            onClick={() => setselectedKey("13")}204          >205            <Link to="/settings" onClick={() => setselectedKey("13")}>206              Settings207            </Link>208          </Menu.Item>209        </Menu>210      </Sider>211      <Layout className="site-layout">212        <Header className="navbar" style={{ padding: 0 }}>213          {React.createElement(214            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,215            {216              className: "trigger",217              onClick: toggle,218            }219          )}220          <Dropdown overlay={menu} trigger={["click"]}>221            <Avatar222              loading={loading}223              icon={<UserOutlined />}224              style={{ margin: "0px 50px", cursor: "pointer" }}225              size="large"226              onClick={(e) => e.preventDefault()}227              src={"http://localhost:5000/" + profile?.picture}228            />229          </Dropdown>230        </Header>231        <Content232          className="site-layout-background"233          style={{234            margin: "24px 16px",235            padding: 24,236            minHeight: 280,237          }}238        >239          <main className="app">{children}</main>240        </Content>241      </Layout>242    </Layout>243  );244};...

WebLayout.js

Source:WebLayout.js

1import React, { useState, useEffect } from "react";2import { Layout, Menu, Avatar, Dropdown } from "antd";3import axios from "axios";4import {5  MenuUnfoldOutlined,6  UserSwitchOutlined,7  MenuFoldOutlined,8  VideoCameraOutlined,9  UserOutlined,10  HomeOutlined,11  LogoutOutlined,12  UserAddOutlined,13  MessageOutlined,14  CameraOutlined,15  SettingOutlined,16  NotificationOutlined,17} from "@ant-design/icons";18import { Link } from "react-router-dom";19const { Header, Sider, Content } = Layout;20const WebLayout = ({ children }) => {21  const [collapsed, setcollapsed] = useState(false);22  const [selectedKey, setselectedKey] = useState("0");23  const [loading, setLoading] = useState(true);24  const [profile, setProfile] = useState({25    first_name: "",26    last_name: "",27    address: "",28    phone_number: "",29    picture: null,30    gender: "",31    password: "",32  });33  useEffect(() => {34    axios35      .post("http://localhost:5000/users/fetchusersettngs", {36        email: localStorage.getItem("useremail"),37      })38      .then((response) => {39        setLoading(false);40        setProfile({41          first_name: response.data[0].first_name,42          last_name: response.data[0].last_name,43          address: response.data[0].address,44          phone_number: response.data[0].phone_number,45          picture: response.data[0].picture,46          gender: response.data[0].gender,47        });48      })49      .catch((err) => {50        console.log(err);51        return err;52      });53  }, []);54  const shiftprofile = () => {55    setselectedKey("2");56    if (localStorage.getItem("profile") === "admin") {57      localStorage.setItem("profile", "normal");58      window.location.reload();59    } else if (localStorage.getItem("profile") === "normal") {60      localStorage.setItem("profile", "admin");61      window.location.reload();62    }63  };64  const toggle = () => {65    setcollapsed(!collapsed);66  };67  const menu = (68    <Menu style={{ padding: "10px", borderRadius: "2px" }}>69      <Menu.Item70        key="1"71        icon={72          <LogoutOutlined73            style={{ fontSize: "1.2em", verticalAlign: "0.05em" }}74          />75        }76      >77        <Link to="/logout" style={{ fontSize: "1rem", margin: "10px 0px" }}>78          Logout79        </Link>80      </Menu.Item>81    </Menu>82  );83  return (84    <Layout>85      <Sider trigger={null} collapsible collapsed={collapsed}>86        <div className="logo">87          <img src={require("../../assets/locked-white.png")} alt="logo" />88        </div>89        <Menu theme="dark" mode="inline" selectedKeys={[selectedKey]}>90          <Menu.Item91            key="1"92            icon={<UserOutlined />}93            onClick={() => setselectedKey("1")}94          >95            <Link to="/profile" onClick={() => setselectedKey("1")}>96              Profile97            </Link>98          </Menu.Item>99          {localStorage.getItem("admin") === "true" && (100            <Menu.Item101              key="2"102              icon={<UserSwitchOutlined />}103              onClick={() => shiftprofile()}104            >105              Shift To Admin106            </Menu.Item>107          )}108          <Menu.Item109            key="3"110            icon={<HomeOutlined />}111            onClick={() => setselectedKey("3")}112          >113            <Link to="/main" onClick={() => setselectedKey("3")}>114              Main115            </Link>116          </Menu.Item>117          <Menu.Item118            key="4"119            icon={<VideoCameraOutlined />}120            onClick={() => setselectedKey("4")}121          >122            <Link to="/videos" onClick={() => setselectedKey("4")}>123              Videos124            </Link>125          </Menu.Item>126          <Menu.Item127            key="5"128            icon={<VideoCameraOutlined />}129            onClick={() => setselectedKey("5")}130          >131            <Link to="/favvideos" onClick={() => setselectedKey("5")}>132              Fav Videos133            </Link>134          </Menu.Item>135          <Menu.Item136            key="6"137            icon={<VideoCameraOutlined />}138            onClick={() => setselectedKey("6")}139          >140            <Link to="/suspiciousvideos" onClick={() => setselectedKey("6")}>141              Suspicious Videos142            </Link>143          </Menu.Item>144          <Menu.Item145            key="7"146            icon={<VideoCameraOutlined />}147            onClick={() => setselectedKey("7")}148          >149            <Link to="/staticvideos" onClick={() => setselectedKey("7")}>150              Static Videos151            </Link>152          </Menu.Item>153          <Menu.Item154            key="8"155            icon={<VideoCameraOutlined />}156            onClick={() => setselectedKey("8")}157          >158            <Link to="/normalvideos" onClick={() => setselectedKey("8")}>159              Normal Videos160            </Link>161          </Menu.Item>162          <Menu.Item163            key="9"164            icon={<MessageOutlined />}165            onClick={() => setselectedKey("9")}166          >167            <Link to="/usermessages" onClick={() => setselectedKey("9")}>168              Messages169            </Link>170          </Menu.Item>171          <Menu.Item172            key="10"173            icon={<CameraOutlined />}174            onClick={() => setselectedKey("10")}175          >176            <Link to="/usercctvs" onClick={() => setselectedKey("10")}>177              Manage CCTV's178            </Link>179          </Menu.Item>180          <Menu.Item181            key="11"182            icon={<UserAddOutlined />}183            onClick={() => setselectedKey("11")}184          >185            <Link186              to="/request-admin-access"187              onClick={() => setselectedKey("11")}188            >189              Admin Access190            </Link>191          </Menu.Item>192          <Menu.Item193            key="12"194            icon={<NotificationOutlined />}195            onClick={() => setselectedKey("12")}196          >197            <Link to="/notifications" onClick={() => setselectedKey("12")}>198              Notifications199            </Link>200          </Menu.Item>201          <Menu.Item202            key="13"203            icon={<SettingOutlined />}204            onClick={() => setselectedKey("13")}205          >206            <Link to="/settings" onClick={() => setselectedKey("13")}>207              Settings208            </Link>209          </Menu.Item>210        </Menu>211      </Sider>212      <Layout className="site-layout">213        <Header className="navbar" style={{ padding: 0 }}>214          {React.createElement(215            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,216            {217              className: "trigger",218              onClick: toggle,219            }220          )}221          <Dropdown overlay={menu} trigger={["click"]}>222            <Avatar223              loading={loading}224              icon={<UserOutlined />}225              style={{ margin: "0px 50px", cursor: "pointer" }}226              size="large"227              onClick={(e) => e.preventDefault()}228              src={"http://localhost:5000/" + profile?.picture}229            />230          </Dropdown>231        </Header>232        <Content233          className="site-layout-background"234          style={{235            margin: "24px 16px",236            padding: 24,237            minHeight: 280,238          }}239        >240          <main className="app">{children}</main>241        </Content>242      </Layout>243    </Layout>244  );245};...

App.js

Source:App.js

1import React, { useState } from "react";2import { BrowserRouter, Switch, Route } from "react-router-dom";3// Add a general theme4import { ThemeProvider } from "@material-ui/core/styles";5import theme from "../components/ui/theme";6import Header from "../components/ui/Header";7import Footer from "../components/ui/Footer";8import BackToTop from "../components/ui/BackToTop";9import LandingPage from "../components/LandingPage";10import Services from "../components/Services";11import CustomSoftware from "../components/CustomSoftware";12import MobileApps from "../components/MobileApps";13import Websites from "../components/Websites";14import Revolution from "../components/Revolution";15import Contact from "../components/Contact";16import Estimate from "../components/Estimate";17function App() {18  // useState to change the value when changing the tab in header19  const [tabValue, setTabValue] = useState(0);20  // Indicator to be used when selecting the menu item in header21  const [selectedMenuItemIndex, setselectedMenuItemIndex] = useState(0);22  return (23    <ThemeProvider theme={theme}>24      <BrowserRouter>25        <Header26          tabValue={tabValue}27          setTabValue={setTabValue}28          selectedMenuItemIndex={selectedMenuItemIndex}29          setselectedMenuItemIndex={setselectedMenuItemIndex}30        />31        <BackToTop />32        <Switch>33          <Route34            exact35            path="/"36            render={(props) => (37              <LandingPage38                {...props}39                setTabValue={setTabValue}40                setselectedMenuItemIndex={setselectedMenuItemIndex}41              />42            )}43          />44          <Route45            exact46            path="/services"47            render={(props) => (48              <Services49                {...props}50                setTabValue={setTabValue}51                setselectedMenuItemIndex={setselectedMenuItemIndex}52              />53            )}54          />55          <Route56            exact57            path="/customsoftware"58            render={(props) => (59              <CustomSoftware60                {...props}61                setTabValue={setTabValue}62                setselectedMenuItemIndex={setselectedMenuItemIndex}63              />64            )}65          />66          <Route67            exact68            path="/mobileapps"69            render={(props) => (70              <MobileApps71                {...props}72                setTabValue={setTabValue}73                setselectedMenuItemIndex={setselectedMenuItemIndex}74              />75            )}76          />77          <Route78            exact79            path="/websites"80            render={(props) => (81              <Websites82                {...props}83                setTabValue={setTabValue}84                setselectedMenuItemIndex={setselectedMenuItemIndex}85                selectedMenuItemIndex={selectedMenuItemIndex}86              />87            )}88          />89          <Route90            exact91            path="/revolution"92            render={(props) => <Revolution {...props} />}93          />94          <Route exact path="/about" component={() => <div>about</div>} />95          <Route96            exact97            path="/contact"98            render={(props) => (99              <Contact100                {...props}101                setTabValue={setTabValue}102                setselectedMenuItemIndex={setselectedMenuItemIndex}103                selectedMenuItemIndex={selectedMenuItemIndex}104              />105            )}106          />107          <Route108            exact109            path="/estimate"110            render={(props) => <Estimate {...props} />}111          />112        </Switch>113        <Footer114          tabValue={tabValue}115          setTabValue={setTabValue}116          selectedMenuItemIndex={selectedMenuItemIndex}117          setselectedMenuItemIndex={setselectedMenuItemIndex}118        />119      </BrowserRouter>120    </ThemeProvider>121  );122}...

Sidebar.js

Source:Sidebar.js

1import {VscTwitter} from 'react-icons/vsc'2import SidebarOptions from '../SidebarOptions/SidebarOptions'3import { useState } from 'react';4import {RiHome7Line , RiHome7Fill ,RiFileList2Fill} from 'react-icons/ri'5import {FiBell , FiMoreHorizontal} from 'react-icons/fi'6import {HiOutlineMail,HiMail} from 'react-icons/hi'7import {FaRegListAlt,FaHashtag,FaBell} from 'react-icons/fa'8import {CgMoreO} from 'react-icons/cg';9import {BiHash} from 'react-icons/bi'10import {BsPersonFill,BsPerson,BsBookmarkFill,BsBookmark} from 'react-icons/bs'11const style = {12  wrapper : `flex-[0.7] px-8 flex flex-col`,13  twitterIconContainer : `text-3xl m-4`,14  tweetButton: `bg-[#1d9bf0] hover:bg-[#1b8cd8] flex items-center justify-center font-bold rounded-3xl h-[50px] mt-[20px] cursor-pointer`,15  navContainer : `flex-1`,16  profileButton : `flex items-center mb-6 cursor-pointer hover:bg-[#333c45] rounded-full`,17  profileLeft : `flex items-center justify-center mr-4`,18  profileImage : `height-22 w-12 rounded-full`,19  profileRight : `flex-1 flex`,20  details : `flex-1`,21  name : `text-lg`,22  handle : `text-[#8899a6]`,23  moreContainer : `flex items-center mr-2`24}25 26export default function Sidebar({initialSelectionIcon = 'Home'}) {27  const [selected,setSelected] = useState(initialSelectionIcon);28  return (29    <div className={style.wrapper}>30      <div className={style.twitterIconContainer}>31        <VscTwitter />32      </div>33      <div className={style.navContainer}>34       <SidebarOptions 35        text={'Home'}36        Icon={selected === 'Home' ? RiHome7Fill  : RiHome7Line }37        isActive={Boolean(selected === 'Home')}38        setSelected={setSelected}39        redirect={'/'}40       />41        <SidebarOptions 42        text={'Explore'}43        Icon={selected === 'Explore' ? FaHashtag  : BiHash }44        isActive={Boolean(selected === 'Explore')}45        setSelected={setSelected}46        redirect={'/explore'}47       />48      <SidebarOptions 49        text={'Notification'}50        Icon={selected === 'Notification' ? FaBell  : FiBell }51        isActive={Boolean(selected === 'Notification')}52        setSelected={setSelected}53        redirect={'/notification'}54       />55          <SidebarOptions 56        text={'Messages'}57        Icon={selected === 'Messages' ? HiMail  : HiOutlineMail }58        isActive={Boolean(selected === 'Messages')}59        setSelected={setSelected}60        redirect={'/messages'}61       />62            <SidebarOptions 63        text={'Bookmarks'}64        Icon={selected === 'Bookmarks' ? BsBookmarkFill  : BsBookmark }65        isActive={Boolean(selected === 'Bookmarks')}66        setSelected={setSelected}67        redirect={'/bookmarks'}68       />69          <SidebarOptions 70        text={'Lists'}71        Icon={selected === 'Lists' ? RiFileList2Fill  : FaRegListAlt }72        isActive={Boolean(selected === 'Lists')}73        setSelected={setSelected}74        redirect={'/lists'}75       />76        <SidebarOptions 77        text={'Profile'}78        Icon={selected === 'Profile' ? BsPersonFill  : BsPerson }79        isActive={Boolean(selected === 'Profile')}80        setSelected={setSelected}81        redirect={'/profile'}82       />83       <SidebarOptions text={'More'} Icon={CgMoreO} 84        setSelected={setSelected}85       86       />87      <div className={style.tweetButton}>88        Mint89      </div>90      </div>91      <div className={style.profileButton}>92        <div className={style.profileLeft}>93        </div>94        <div className={style.profileRight}>95          <div className={style.details}>96            <div className={style.name}>sakthi</div>97            <div className={style.handle}>@Ox25F...Jx95f</div>98          </div>99        </div>100        <div className={style.moreContainer}>101          <FiMoreHorizontal />102      </div>103      </div>104     105     106    </div>107  )...

product.js

Source:product.js

1import React from 'react'2import { useState } from "react";3import "./product.css"4import Dropdown1 from '../components/layout/dropdown1'5import Carousel from './carousel';6import Carousel2 from './carousel2';7import imgG from "../images/visual1.png";8function Product() {9    const [selected, setSelected] = useState("");10    return (11        <div className="main-container">12            <div className="left"> 13              <h2>600+ Pieces</h2>14              <Dropdown1 selected={selected} setSelected={setSelected}/>15              <Dropdown1 selected={selected} setSelected={setSelected}/>16              <Dropdown1 selected={selected} setSelected={setSelected}/>17              <Dropdown1 selected={selected} setSelected={setSelected}/>18              <Dropdown1 selected={selected} setSelected={setSelected}/>19              <Dropdown1 selected={selected} setSelected={setSelected}/>20              <Dropdown1 selected={selected} setSelected={setSelected}/>21              <Dropdown1 selected={selected} setSelected={setSelected}/>22               <Dropdown1 selected={selected} setSelected={setSelected}/>23            </div>24            <div className="right">25                <div className="shop">26                 <h2>Shop Women</h2>27                 28                  <Carousel/>29                 </div>30                 <div className="shop">31                 <h2>Shop MEN</h2>32                 <Carousel/>33                 </div>34                 <div className="bagimg">35                  <img src={imgG}/>36                 </div>37                 <div className="sell">38                 <h3>Top Selling</h3>39                 <Carousel2/>40                 </div>41                 <div className="new">42                 <h3>New IN</h3>43                 <Carousel2/> 44                  </div>45            </div>46        </div>47    )48}...

Nav.js

Source:Nav.js

1import React from "react";2import "./Nav.css";3import requests from "./request";4function Nav({ setselectedOption }) {5  return (6    <div className="nav">7      <h2 onClick={() => setselectedOption(requests.fetchTrending)}>8        Trending9      </h2>10      <h2 onClick={() => setselectedOption(requests.fetchTopRated)}>11        Top Rated12      </h2>13      <h2 onClick={() => setselectedOption(requests.fetchActionMovies)}>14        Action15      </h2>16      <h2 onClick={() => setselectedOption(requests.fetchComedyMovies)}>17        Comedy18      </h2>19      <h2 onClick={() => setselectedOption(requests.fetchHorrorMovies)}>20        Horror21      </h2>22      <h2 onClick={() => setselectedOption(requests.fetchRomanceMovies)}>23        Romance24      </h2>25      <h2 onClick={() => setselectedOption(requests.fetchMystery)}>Mystery</h2>26      <h2 onClick={() => setselectedOption(requests.fetchSciFi)}>Sci-fi</h2>27      <h2 onClick={() => setselectedOption(requests.fetchWestern)}>Western</h2>28      <h2 onClick={() => setselectedOption(requests.fetchAnimation)}>29        Animation30      </h2>31      <h2 onClick={() => setselectedOption(requests.fetchTV)}>TV Movie</h2>32    </div>33  );34}...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.evaluate(() => {7    document.querySelector('input[name="q"]').setSelected(true);8  });9  await page.screenshot({ path: 'google.png' });10  await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14  const browser = await chromium.launch();15  const context = await browser.newContext();16  const page = await context.newPage();17  await page.evaluate(() => {18    document.querySelector('input[name="q"]').setSelected(false);19  });20  await page.screenshot({ path: 'google.png' });21  await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25  const browser = await chromium.launch();26  const context = await browser.newContext();27  const page = await context.newPage();28  await page.evaluate(() => {29    document.querySelector('input[name="q"]').setSelected(true);30    document.querySelector('input[name="q"]').setSelected(false);31  });32  await page.screenshot({ path: 'google.png' });33  await browser.close();34})();35const { chromium } = require('playwright');36(async () => {37  const browser = await chromium.launch();38  const context = await browser.newContext();39  const page = await context.newPage();40  await page.evaluate(() => {41    document.querySelector('input[name="q"]').setSelected(true);42    document.querySelector('input[name="q"]').setSelected(false);43    document.querySelector('input[name="q"]').setSelected(true);44    document.querySelector('input[name="q"]').setSelected(false);45  });46  await page.screenshot({ path: 'google.png' });47  await browser.close();48})();49const { chromium } =

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const element = await page.$('h1');7  await element.evaluate(element => element.setSelected(true));8  await browser.close();9})();10const { chromium } = require('playwright');11const internalChromium = chromium._internalApi;12const { chromium } = require('playwright');13const internalChromium = chromium._internalApi;14const { chromium } = require('playwright');15const internalChromium = chromium._internalApi;16const { chromium } = require('playwright');17const internalChromium = chromium._internalApi;18const { chromium } = require('playwright');19const internalChromium = chromium._internalApi;20const { chromium } = require('playwright');21const internalChromium = chromium._internalApi;22const {

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('input[title="Search"]');7  await page.keyboard.type('Hello World');8  await page.keyboard.press('Enter');9  await page.waitForNavigation();10  await page.click('input[title="Search"]');11  await page.keyboard.down('Shift');12  await page.keyboard.press('Home');13  await page.keyboard.up('Shift');14  await page.keyboard.press('Delete');15  await page.keyboard.type('Hello World');16  await page.keyboard.press('Enter');17  await page.waitForNavigation();18  await page.click('input[title="Search"]');19  await page.keyboard.down('Shift');20  await page.keyboard.press('Home');21  await page.keyboard.up('Shift');22  await page.keyboard.press('Delete');23  await page.keyboard.type('Hello World');24  await page.keyboard.press('Enter');25  await page.waitForNavigation();26  await page.click('input[title="Search"]');27  await page.keyboard.down('Shift');28  await page.keyboard.press('Home');29  await page.keyboard.up('Shift');30  await page.keyboard.press('Delete');31  await page.keyboard.type('Hello World');32  await page.keyboard.press('Enter');33  await page.waitForNavigation();34  await page.click('input[title="Search"]');35  await page.keyboard.down('Shift');36  await page.keyboard.press('Home');37  await page.keyboard.up('Shift');38  await page.keyboard.press('Delete');39  await page.keyboard.type('Hello World');40  await page.keyboard.press('Enter');41  await page.waitForNavigation();42  await page.click('input[title="Search"]');43  await page.keyboard.down('Shift');44  await page.keyboard.press('Home');45  await page.keyboard.up('Shift');46  await page.keyboard.press('Delete');47  await page.keyboard.type('Hello World');48  await page.keyboard.press('Enter');49  await page.waitForNavigation();50  await page.click('input[title="Search"]');51  await page.keyboard.down('Shift');52  await page.keyboard.press('Home');53  await page.keyboard.up('Shift');54  await page.keyboard.press('Delete');55  await page.keyboard.type('Hello World');56  await page.keyboard.press('Enter');57  await page.waitForNavigation();58  await page.click('input[title="Search"]');

Using AI Code Generation

1await page._client.send('Input.dispatchMouseEvent', {2});3await page._client.send('Input.dispatchMouseEvent', {4});5await page._client.send('Input.dispatchMouseEvent', {6});7await page._client.send('Input.dispatchMouseEvent', {8});9await page._client.send('Input.dispatchMouseEvent', {10});11await page._client.send('Input.dispatchMouseEvent', {12});13await page._client.send('Input.dispatchKeyEvent', {14});15await page._client.send('Input.dispatchKeyEvent', {16});17await page._client.send('Input.dispatchKeyEvent', {

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.selectOption('select', 'Volvo');7  await page.waitForTimeout(10000);8  await browser.close();9})();

Using AI Code Generation

1const {chromium} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  await page.click('input[title="Search"]');6  await page.keyboard.type('Hello World');7  await page.keyboard.down('Shift');8  await page.keyboard.press('ArrowLeft');9  await page.keyboard.press('ArrowLeft');10  await page.keyboard.press('ArrowLeft');11  await page.keyboard.up('Shift');12  await page.keyboard.press('Backspace');13  await page.keyboard.type('Playwright');14  await page.keyboard.press('Enter');15  await page.waitForSelector('text="Playwright - Google Search"');16  await browser.close();17})();

Using AI Code Generation

1const { _electron } = require('playwright');2const { app } = require('electron');3const { BrowserWindow } = require('electron');4const { dialog } = require('electron');5(async () => {6  const browser = await _electron.launch({ headless: false });7  const page = await browser.newPage();8  const [fileChooser] = await Promise.all([9    page.waitForEvent('filechooser'),10  ]);11  await fileChooser.setFiles('/home/username/Desktop/my-file.pdf');12  await browser.close();13})();14const { test, expect } = require('@playwright/test');15test('file upload', async ({ page }) => {16  const [fileChooser] = await Promise.all([17    page.waitForEvent('filechooser'),18  ]);19  await fileChooser.setFiles('/home/username/Desktop/my-file.pdf');20});

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.