From f61392978dcfa0d0822a9c1512567caba08632d2 Mon Sep 17 00:00:00 2001 From: Amit Raikwar Date: Wed, 6 Dec 2023 19:06:44 +0530 Subject: [PATCH] 3. Show the implementation and working of useRef Code. - Implement scroll functionality using the useRef hook. - Implement the infinite scroll functionality using the useRef hook & intersection event listener - Implement the infinite scroll functionality using the useRef hook and useReducer along with Intersection event listener. --- src/App.test.tsx | 10 +- src/App.tsx | 8 +- src/assets/success.png | Bin 0 -> 7765 bytes src/hooks/useref/UseRefHook.tsx | 49 +++++++++ .../useref/component/InfiniteScrollView.tsx | 65 +++++++++++ .../component/InfiniteScrollViewCorrected.tsx | 103 ++++++++++++++++++ src/hooks/useref/component/ListComponent.tsx | 73 +++++++++++++ src/hooks/useref/component/data/ListData.tsx | 73 +++++++++++++ src/index.tsx | 14 +-- 9 files changed, 379 insertions(+), 16 deletions(-) create mode 100644 src/assets/success.png create mode 100644 src/hooks/useref/UseRefHook.tsx create mode 100644 src/hooks/useref/component/InfiniteScrollView.tsx create mode 100644 src/hooks/useref/component/InfiniteScrollViewCorrected.tsx create mode 100644 src/hooks/useref/component/ListComponent.tsx create mode 100644 src/hooks/useref/component/data/ListData.tsx diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616..585ff6e 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; +import React from "react"; +import { render, screen } from "@testing-library/react"; +import Apps from "./App"; -test('renders learn react link', () => { - render(); +test("renders learn react link", () => { + render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); diff --git a/src/App.tsx b/src/App.tsx index 5349b8e..f34941f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import ReactUseRefHooks from "./hooks/useref/UseRefHook"; function App() { return ( -
- +
+
); } diff --git a/src/assets/success.png b/src/assets/success.png new file mode 100644 index 0000000000000000000000000000000000000000..3e10f2556167c04631f4ab113d63421915de2158 GIT binary patch literal 7765 zcmb_>c|4Ts`@bP%4>Q&fj%7wNV=N(M8#IPyvo9g*h(aPtwy_h3DO;Htj2T;qgQ%En zXA-if(GgOXEXmUT8|U-={Qmm>`F*|a=YFpHdhX?V?(JIM8E6L^5kWaYE-o&S^R`x4 zE-t|O;d7LS!_oK>#$j+(p;34Q=MBgP0P+EVQUHMb-$VrfIH~f#Ifvk+s(j=M)sHDtsB^3=V9k_w zxWv?q+`FX|T0=|6vtHKd^xV7mE1$N%9DJ{|Q8MM?QUIT~GRMaNKJ}zspJj3Lj#eaf z7X_5$0LE*BEXKb6z7Y3f+b%5g{!qFs?8K)W;ilsc@eTNp-Pj7uLr1MU@BjR8B3fe| zTfcio=7MzXr?cq?jIEaa>8us^-yM!xZi91j4__&u?#7!1YuwgXxVEYo(I2@sQbAPu z>`QqTvo__qgz|GPAE;FYnKTT{W#*K@%KF!a?lA0^M!ePxBBq@-9DWpm)7uKdWIME) zYJMWR@w{2_lNP7^Nxwc1)t=V*?kLnz2<+UEe7LH&89TTVpl@v=*Q2C=a;YWUWG8{o z=;f?vgdFhki}e1CyCb|yg^;c~Upa_Zl+Yk};o4nTj+C~EXoU2mlAS!m6J@5ZgPznM z*Oy+N&Q;8}8@%;)tN-$2(TLBG0{E5D8(4FP%(>TF0inhQ5!9}C8HS%uf60@?+(&fX zcvY9mKIc*|ve`=`vMq{e=m4*ZhNEGbm`Z;DEHfP98bqT zM#%}$K{%@o!|R*9aeAC8q)F2)MTE}aPg?7ur}0$&cgLug-&?lxz9Yi>P4qbxicN)Y zlrKmx#lM=}akwux__MBS;mPdXyzd!1QrliHLzm*m*gIZ*x0d1;UfyUMwqJ_>EU^{# zi8c7Mx@F;~+vCBX-n$lWA2t!$Vq)@MjyKP4ME|

H5&{P5rYsO3CRpR-Q}0b|iG8 zw!=G%MB_eHuUhsnH7;*bzD=x%Xk>j-4u}{qjyM-%M_XxsAZon(C$E50(_2~8G(YQ& zRQ`9$EnnnbR+~d#KW`Z_uzjWvXc(RMeYjYc_to{;S`&0H;~DBNafC3ZW^+Z@_pc#y zsS(%f4d3i+G7Tcmby-ai3|C@C=`#-wevCC`vZFVW

NMV&E;~ano~;cJsbBJgz?V zs%AeONV@2(d>h`D|9!)VsyGn*#(cGG>Pv4qr|02fOxE*upLfW*ZwK9C82*k;#hZky zGLu*RcefLl7`g1|3jmT3O+<*VQLZ3LpkveP5=2VpjX}h6Qy~8G^nM;Zzm0<3UJx*X zJBs30pj&xx{0@p}5GrJZ+x3M=j?@kohgkVD&kGnuzK*Ps5EdGg9rDEGd(W!`>W);) zRX@!td!@LCUpR9uAO2=BA7WL(tvkGSC0d$bSsQBx3PAXkPP+AWO&oPICE~q35&gTl zU2I`DeM_&fe=MeQ=-sR&hx&ABq3;H|!zGx+dY=1k;yMO8Dr;qGpqaQ)hQbcEQ^U{8 z$Bs8w?673t zL0%M`=@Metb1C7v707yY1vZbEQd>&+Py`twk3Y}9m;OyE!mJ!wcQR<{(+z>&;znGS zkftbd{@RX&q`Xmg2|D8mf6ltT&asw!9`Bd*-W7nHYowRAyM<`N6S9O4$T;UlVn)t! zu0Vv^g8H>pSVvzTz)&-|ym)ly@C` zqP0QqXC_(i-93*`Sb7Tn#OUu&b%<1ts!`p4`8<)ZE;zbEI{#IT^GS)`zXC8e?L!5< zSJ{8Lm`_O2|M=w?lu}G&80I1lqme6a(RR6c&`eu~T7^q^d&>_~EkjWW}&|{SZiBKX0LLy=loJ`dtYEJA^ zKlhValnR~GMgmQ$ z;;rwJlssB9cq`@%hE&h<jsO+wg+;ZQY=}E`ALe3N4=5dGEoPRj@q!dFT5`ovi z!J*3h-d4n${NP5h!pKv~{PQHi`$${MJAXbN1bjqO+7tCoYp`5Z_{riJigcx~nb8N8 zi0(^fM4By89z6_?FxxgG8W><<8fEa?2tZuaH?KMAo8e(pZj|h=_Y@0EG-+*T;EuY?BT(- zQc}7RG}jQwq*V>85N7q4J!9h7iX6tm#f-K~pI}+k)TyeW@`5kG9F2i_4eDyWYJRUR z%}7)^tU+~(QS;C?V?qeKoKlFkysJ&05Ds2LGx=N%$k?aJE!tp8j&KNu5h)w2)eDSn z%=3H?ClM^uf&mxfC@FyE7jqZ}?Apg|*^BNNk0s?!DLf&>GTC|v^c0^C4$EC%#WBc7 zM35S~r{=XhkwGUOmB2^@3!VXuzXNajpAR?jo3b>kdP{y@wt4p;Ngm^&o>tUoVs+S+O&Bq1(~TTb+=;oP2~r%`TtFs`zho&*nGav>6}C64Kg4eh|G>{_S8c zlbI{kJg~>WqmyFyQp;Ty45x~jv_Ud>l3<=Ja4zz%ty;Oh)_hZi8vR5*&-jMSi%+mF zOD7^(%B0VsbZ3FD9nL=p<~~|}xr;bPqwua^T)a=>MPA^Pv$LB(E=Rk~>fK^HIfiT)ZVH!3vunP32IL`0Y73aW_v{p{6w!pfVbK?=m^So%3!kW)F|c$Wj3kaP^>TS2ZuEhzVuRnkTDGp58x6U*N^BE}3VUBDA-9s_DEF zkrp-0^=A1X&f?$UMSMLthMka~2*KQs39=+APL@~{C?kjm{S}R(6Q$THPlbD0X?Vh> zS%E0=MvQZHqu_)Iw!SGx$kiPJnx@#1n5!|<6evGyl0Msz`a+m7b!_%DaH^;CEJA@Z z-K;)KA!&L)=Wv>r^B{J&!z?f%^bfe?P}z*vCWkBXs)VW@(^g3b7iwX$wq(!eFr37U z?ZJeM=(C7jipQOjlY+KO8H9TBWCHbOmyl)+&wHnd_h=jLjR#0x#g6;4KP>*@_fWia6fM0 zAw1GHN58YJ+7tcaj>ao>7g1@Wv=)j%wQ=td9q(ZyNCWC~L#yb@Uz$>3Q5lbqy{dFm zt@N?Q;JAb`SIw)dC0k|P4>b18s&2{$f5c31cb8CSM_KN;(yHX!#aKprCjOcxfv3Bg zuJO_T38u6@?O6!6UU_WW3UfBW6fsG5hm%jG+5E_f<6M@+YZICTu@hvvZcE%2!)~7 zdb0APEk>;nOt|w!nEryz-28@zKveDHG9eWf7?Vo60=A$k=OX7inzX684sby`#x3R5~Yfn``IHGBE z(}unWJAA0Cpu-uk!q|A^=vQouo@!X&%o0#@HG8c|UC&c;I-Ex5KAxEwZhuAZjj*!> zu8=2-dD&w;LEQv&Rl$JhYG#E|Y^b@A+#0T?h(K_0XF?Vqdj;32HB_N6fWs|t)!$TZ z)uXqSBfi+-KJjqB6R`S@@IaHr-$1DdPWI80&upeX!g5L!AWNu>MSvUw_kyiX-0~*M}=gT%zKtobD_w4(^1#Lqiix)7d_LM$7TGxYYB_1 z#|78sJ?}Fi&=-ZyEzDg<&AQxZMPihwooZw7J{S{j8FNK=hZ0q+4pZw`8@8&!lS1B|VqhYs>IOlXGX9vWIl#_j2N`2bmrhxBa-mfe%|j%^BZdwy~%aUt`d zH@8l7U@Wo=BYjJE@lR##al*))-HPXgEeqE?dvSw zn|J&R_*BF;QLXRORUWA>mmf#R*EPd39$o`e06QcLF9P?to+c&hA<#Fobdj&?vxPZ; zR*duT=)UI!l)eEiZ+-9Y56ClH40)~kU$wYbRvf3;( zCyLzOp76{CYawsgZK~TLl08mKQTs)+6p&{pi5Ao{Ps<}e&R;3ZlOVM7hN$Z&hZ72q z86VUdsSSk-L0|;}S5kt>=Fr=(O6 zZ_9AJfNt%W0ErQ(gK}kx_^&FItRvK$0;d=R+h;g))275YpPxi7b;Wr zPeI5Gh-g-DE6cNFII#inqR6r=wx7?}xG?GC}e=9Y13JCEjRHhn;=|4v8O4ki&7XW3hcAtT>($5?%#UMe3KGrbzqG}`< zo?eS($r)0Bm_f;*N3=r7AD1<&h^0_!I%sH|S}5YzqUj&FCNxZ| z*-58<)A$z)RgnT7e?U1tX;@_@aRz@JxnSU38$KYk8Tkoiy?!7ZI3togyC zSETX!kIXAQdVTQs!g<+|)H1a&^LrPAnWyboMn<-DoAaJ*u8@(DQ17x+YP)%bx5#CY z0*3R&*1y%~ zsq$?}l6R4T|I4ckU)%HM0{vPkKPHc)f_V#pQsGU9Q307NLl;vNhkUPqL(*Toj^lI^ z(^qs(z6UDFntg*N+XpMiT@qLW3m8@PjdH=v?aW=xg4E;#Hp%G{-BuM1`l9 ze(!o0ioVyUjFyd2jfFq#lqQQ5OsFDDE!8$r!POE&Q|}B%pyyYtf&;~nrnm>2%%G{n zKlY`B7rqtl3-?VGwl#aVD4xIWeJliVBZR(p4Et8tI?|!?O3w*6OGt_AaYvx5Cy1w6 zB)JQgs5tS+07d3605P?N$1ZWp3(1{HL6Lb1a!R2#X#y!?qYFdwL4000t9G+YKRjM^kJv`QGxMB8c3aTNkR(6M5QeM{YLQEp8VW4D(`;CNdb<2C+ zWvPZiuN`i4dD(H%n8enc+K5|TzP_rK>jFCOI@@)xjMyFA8O*jRzc&-t{y0rlM|@Y? zFKO~lOvWOQ@RrP$%9?~Oxn&uVWFtdS{H*ff)P~poP*zHm%mR4H-${+#I+l4)pxiq< zp!Y@D#j68e!(FI}6mw22w&m2K18KSoJ&}Z&h3NoALfOi3GTRp6@~OcCT@ww7o#Qjx z*l_v&U_{qUS9&M5Y{wTP#797Mxy-bM8?MI>W+Aj?7_y%uzDsRbg^au)+RLnhE4kMo z8)i}Vyi5(5T17O`Rot-QbcLX~0$t;T+4tfvkxMh5{84=i&TM*h0*iM%m6yjQ zC)n(Lk_Nkuzg+IPwZ4aI=ruCmFP^X>c!gA2_;V)7C1*R)ZRj}ruMg?5$E!p68IiN& zs=MhA!gp%oRwe3V@7TV&bOnUDcMBBV?TM~<-m<97>lGMFwic4!f2T%u>O4P?Z0!}; zT;cReXv5myW^Qk1`mxCS^>1r8FU(yBvBd*fK&v;w4>!!jtKXJ}snWbx=byG*K>Z!R zJ;j)5Pw-sn(%wV;&B*Co)Gnqi#u^7r+e!W5QWYBq^;9aRRi(v!ImASK9u*1y7Za&t zTJAFDliF|%?qmP1N47`n03!cLmi9|9 z49txbdp*jAFYejL9^U9n!UM^65J_8}vv*|t3MJ*eMuilzK(d>QN#2Rv|& zdMWJcoF7`R0Qa4?SazM`fzOY&=JBjgOK!4PCapJ;O^(J4aJB&ZHru@01SIUS6#rh- zq06$G!zyP_^K1^in?!6xUXLCyX{-jrW}EiSu}JX|0c@tOTW?pjxPaX?NE f#_2Mc`y1f&7HV)W%;Gi&cI7&caIk8y@J{-FR+3p^ literal 0 HcmV?d00001 diff --git a/src/hooks/useref/UseRefHook.tsx b/src/hooks/useref/UseRefHook.tsx new file mode 100644 index 0000000..f9a9ceb --- /dev/null +++ b/src/hooks/useref/UseRefHook.tsx @@ -0,0 +1,49 @@ +import InfiteScrollView from "./component/InfiniteScrollView"; +import InfiteScrollViewCorrected from "./component/InfiniteScrollViewCorrected"; +import ListComponent from "./component/ListComponent"; + +export interface ReactUseStateHooksProps {} + +export default function ReactUseRefHooks(props: ReactUseStateHooksProps) { + return ( +

+ + + +
+ ); +} + +function Row1() { + return ( + <> +
+ 1. List scroll component with useRef hook +
+ + + ); +} + +function Row2() { + return ( + <> +
+ 2. Infinite List implementation using the useRef hook. +
+ + + ); +} + +function Row3() { + return ( + <> +
+ 3. Infinite list implementation using the useRef and UseReducer to + correct the loading. +
+ + + ); +} diff --git a/src/hooks/useref/component/InfiniteScrollView.tsx b/src/hooks/useref/component/InfiniteScrollView.tsx new file mode 100644 index 0000000..05b4a15 --- /dev/null +++ b/src/hooks/useref/component/InfiniteScrollView.tsx @@ -0,0 +1,65 @@ +import { Button, CircularProgress, TextField } from "@mui/material"; +import { dataList, DataType } from "./data/ListData"; +import { Ref, useCallback, useEffect, useRef, useState } from "react"; + +export interface InfiteScrollViewProps {} + +type RefType = HTMLDivElement | null; + +// Infinite scroll without useReducer it causes issue with loading spinner visibility. +export default function InfiteScrollViewCorrected( + props: InfiteScrollViewProps +) { + const [dataListCurrent, setDataListCurrent] = useState([]); + const [loading, setLoading] = useState(false); + const [hasMore, setHasMore] = useState(true); + + const lastIndexRef = useRef(0); + const lastListItemRef = useRef(null); + + // Data fetch mock code + useEffect(() => { + const observer = new IntersectionObserver((enteries) => { + if (enteries[0].isIntersecting && hasMore) { + setLoading(true); + //Code to mock the network request. + setTimeout(() => { + setDataListCurrent([...dataList.slice(0, lastIndexRef.current + 15)]); + lastIndexRef.current = lastIndexRef.current + 15; + if (lastIndexRef.current >= dataList.length - 1) { + setHasMore(false); + } + setLoading(false); + }, 2000); + } + }); + if (lastListItemRef.current) { + observer.observe(lastListItemRef.current); + } + + return () => { + if (lastListItemRef.current) observer.unobserve(lastListItemRef.current); + }; + }, [lastListItemRef]); + + return ( +
+
    + {dataListCurrent.map((data: DataType) => ( +
    + {data.name} +
    + ))} + {loading && ( +
    + +
    + )} +
    +
+
+ ); +} diff --git a/src/hooks/useref/component/InfiniteScrollViewCorrected.tsx b/src/hooks/useref/component/InfiniteScrollViewCorrected.tsx new file mode 100644 index 0000000..839cf07 --- /dev/null +++ b/src/hooks/useref/component/InfiniteScrollViewCorrected.tsx @@ -0,0 +1,103 @@ +import { CircularProgress, Icon, SvgIcon, TextField } from "@mui/material"; +import { dataList, DataType } from "./data/ListData"; +import { useEffect, useReducer, useRef, useState } from "react"; +import Success from "../../../assets/success.png"; +export interface InfiteScrollViewProps {} + +type RefType = HTMLDivElement | null; + +enum Type { + LOADING = "loading", + DATA = "data", +} + +/** + * Type definition of the action type of the action for component. + */ +interface ActionType { + type: Type; + lastIndex: number; +} + +interface State { + data: DataType[]; + loading: boolean; +} + +/** + * Reducer function to manage the states and actions. + * + * @param state Total number of the states to manage. + * @param action Action related to the state we have to manage. + * @returns + */ +function reducerFunction(state: State, action: ActionType) { + console.log(action.type); + switch (action.type) { + case Type.LOADING: + console.log(state.loading); + return { data: state.data, loading: !state.loading }; + case Type.DATA: + return { + data: [...dataList.slice(0, action.lastIndex + 15)], + loading: state.loading, + }; + } +} + +const initialState: State = { data: [], loading: false }; + +// Infinite scroll without useReducer it causes issue with loading spinner visibility. +export default function InfiteScrollView(props: InfiteScrollViewProps) { + const [state, dispatch] = useReducer(reducerFunction, initialState); + + const lastIndexRef = useRef(0); + const lastListItemRef = useRef(null); + + // Data fetch mock code + useEffect(() => { + const observer = new IntersectionObserver((enteries) => { + if (enteries[0].isIntersecting) { + dispatch({ type: Type.LOADING, lastIndex: lastIndexRef.current }); + //Code to mock the network request. + setTimeout(() => { + dispatch({ type: Type.DATA, lastIndex: lastIndexRef.current }); + dispatch({ type: Type.LOADING, lastIndex: lastIndexRef.current }); + lastIndexRef.current = lastIndexRef.current + 15; + if (lastIndexRef.current >= dataList.length - 1) { + } + }, 3000); + } + }); + if (lastListItemRef.current) { + observer.observe(lastListItemRef.current); + } + + return () => { + if (lastListItemRef.current) observer.unobserve(lastListItemRef.current); + }; + }, [lastListItemRef]); + + return ( +
+
    + {state.data.map((data: DataType) => ( +
    + {data.name} +
    + ))} +
    +
+
+ {state.loading ? ( + + ) : ( + + )} +
+
+ ); +} diff --git a/src/hooks/useref/component/ListComponent.tsx b/src/hooks/useref/component/ListComponent.tsx new file mode 100644 index 0000000..6e094d2 --- /dev/null +++ b/src/hooks/useref/component/ListComponent.tsx @@ -0,0 +1,73 @@ +import { Button, TextField } from "@mui/material"; +import { dataList, DataType } from "./data/ListData"; +import { useRef, useState } from "react"; +import { text } from "stream/consumers"; + +export interface IListComponentProps {} + +type RefType = HTMLUListElement | null; + +export default function ListComponent(props: IListComponentProps) { + const [index, setIndex] = useState(0); + + function scrollToIndex(index: number) { + const listNode: RefType = listRef.current; + const childNode = listNode!.querySelectorAll("ul > div")[index]; + childNode.scrollIntoView({ + behavior: "smooth", + block: "end", + inline: "center", + }); + } + + const listRef = useRef(null); + + const handleFirstButtonClick = () => { + scrollToIndex(0); + }; + + const handleScrollToIndexButtonClick = () => { + scrollToIndex(index); + }; + + const handleSecondButtonClick = () => { + scrollToIndex(dataList.length - 1); + }; + + return ( +
+
+ + + { + setIndex(e.target.value); + }} + label="Index" + /> + + +
+
    + {dataList.map((data: DataType) => ( +
    + {data.name} +
    + ))} +
+
+ ); +} diff --git a/src/hooks/useref/component/data/ListData.tsx b/src/hooks/useref/component/data/ListData.tsx new file mode 100644 index 0000000..62d0409 --- /dev/null +++ b/src/hooks/useref/component/data/ListData.tsx @@ -0,0 +1,73 @@ +/** + * Type definition for the data string. + */ +export interface DataType { + id: number; + name: string; +} + +/** + * Data list to show the infinite list thing. + */ +export const dataList: DataType[] = [ + { id: 1, name: "Services1" }, + { id: 2, name: "Engineering" }, + { id: 3, name: "Services2" }, + { id: 4, name: "Training" }, + { id: 5, name: "Support" }, + { id: 6, name: "Research and Development" }, + { id: 7, name: "Training" }, + { id: 8, name: "Human Resources" }, + { id: 9, name: "Services2" }, + { id: 10, name: "Legal1" }, + { id: 11, name: "Sales" }, + { id: 12, name: "Legal2" }, + { id: 13, name: "Accounting" }, + { id: 14, name: "Business Development" }, + { id: 15, name: "Accounting" }, + { id: 16, name: "Services3" }, + { id: 17, name: "Training" }, + { id: 18, name: "Research and Development" }, + { id: 19, name: "Human Resources" }, + { id: 20, name: "Legal3" }, + { id: 21, name: "Research and Development" }, + { id: 22, name: "Human Resources" }, + { id: 23, name: "Services4" }, + { id: 24, name: "Research and Development" }, + { id: 25, name: "Research and Development" }, + { id: 26, name: "Accounting" }, + { id: 27, name: "Product Management" }, + { id: 28, name: "Human Resources" }, + { id: 29, name: "Legal4" }, + { id: 30, name: "Legal5" }, + { id: 31, name: "Services5" }, + { id: 32, name: "Engineering1" }, + { id: 33, name: "Services6" }, + { id: 34, name: "Training" }, + { id: 35, name: "Support" }, + { id: 36, name: "Research and Development" }, + { id: 37, name: "Training" }, + { id: 38, name: "Human Resources" }, + { id: 39, name: "Services7" }, + { id: 40, name: "Legal6" }, + { id: 41, name: "Sales" }, + { id: 42, name: "Legal7" }, + { id: 43, name: "Accounting" }, + { id: 44, name: "Business Development" }, + { id: 45, name: "Accounting" }, + { id: 46, name: "Services7" }, + { id: 47, name: "Training" }, + { id: 48, name: "Research and Development" }, + { id: 49, name: "Human Resources" }, + { id: 50, name: "Legal8" }, + { id: 51, name: "Research and Development" }, + { id: 52, name: "Human Resources" }, + { id: 53, name: "Services8" }, + { id: 54, name: "Research and Development" }, + { id: 55, name: "Research and Development" }, + { id: 56, name: "Accounting" }, + { id: 57, name: "Product Management" }, + { id: 58, name: "Human Resources" }, + { id: 59, name: "Legal9" }, + { id: 60, name: "Legal10" }, +]; diff --git a/src/index.tsx b/src/index.tsx index 032464f..bfb6316 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,15 +1,15 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import Apps from "./App"; +import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById("root") as HTMLElement ); root.render( - + );