From bd46f2dc397d4aae36a345cdf3031b013181d84b Mon Sep 17 00:00:00 2001
From: Somnath  More <somnath.more@zemosolabs.com>
Date: Tue, 26 Sep 2023 08:43:19 +0530
Subject: [PATCH] reactpractise

---
 frontend/package.json                         | 67 ++++++++-------
 frontend/src/App.tsx                          | 83 ++++++++++++++++++-
 .../src/components/organisms/Accordian.tsx    |  9 ++
 .../components/organisms/NonUseContext.tsx    |  9 ++
 .../src/components/organisms/Usecontext.tsx   |  9 ++
 .../organisms/nonusecontext/Four.tsx          | 12 +++
 .../organisms/nonusecontext/One.tsx           | 16 ++++
 .../organisms/nonusecontext/Three.tsx         | 16 ++++
 .../organisms/nonusecontext/Two.tsx           | 16 ++++
 .../components/organisms/usecontext/Four.tsx  | 13 +++
 .../components/organisms/usecontext/One.tsx   | 28 +++++++
 .../components/organisms/usecontext/Three.tsx | 14 ++++
 .../components/organisms/usecontext/Two.tsx   | 14 ++++
 .../src/components/pages/ReactLearn/About.tsx | 23 +++++
 .../components/pages/ReactLearn/Filter.tsx    | 32 +++++++
 .../src/components/pages/ReactLearn/Home.tsx  | 25 ++++++
 .../pages/ReactLearn/USeContext.tsx           | 53 ++++++++++++
 .../pages/ReactLearn/UseEffectPage.tsx        | 18 ++++
 18 files changed, 421 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/organisms/Accordian.tsx
 create mode 100644 frontend/src/components/organisms/NonUseContext.tsx
 create mode 100644 frontend/src/components/organisms/Usecontext.tsx
 create mode 100644 frontend/src/components/organisms/nonusecontext/Four.tsx
 create mode 100644 frontend/src/components/organisms/nonusecontext/One.tsx
 create mode 100644 frontend/src/components/organisms/nonusecontext/Three.tsx
 create mode 100644 frontend/src/components/organisms/nonusecontext/Two.tsx
 create mode 100644 frontend/src/components/organisms/usecontext/Four.tsx
 create mode 100644 frontend/src/components/organisms/usecontext/One.tsx
 create mode 100644 frontend/src/components/organisms/usecontext/Three.tsx
 create mode 100644 frontend/src/components/organisms/usecontext/Two.tsx
 create mode 100644 frontend/src/components/pages/ReactLearn/About.tsx
 create mode 100644 frontend/src/components/pages/ReactLearn/Filter.tsx
 create mode 100644 frontend/src/components/pages/ReactLearn/Home.tsx
 create mode 100644 frontend/src/components/pages/ReactLearn/USeContext.tsx
 create mode 100644 frontend/src/components/pages/ReactLearn/UseEffectPage.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 3a98b43..ab7b0fd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,43 +4,46 @@
     "description": "",
     "main": "index.js",
     "scripts": {
-      "start": "webpack serve --config webpack/webpack.config.ts --open",
-      "test": "jest",
-      "coverage": "npm test -- --coverage --watchAll --collectCoverageFrom='src/**/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'"
+        "start": "webpack serve --config webpack/webpack.config.ts --open",
+        "test": "jest",
+        "coverage": "npm test -- --coverage --watchAll --collectCoverageFrom='src/**/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx}'"
     },
     "keywords": [],
     "author": "Somnath More <somnath.more@zemosolabs.com> ",
     "license": "MIT",
     "dependencies": {
-      "react": "^17.0.1",
-      "react-dom": "^17.0.1",
-      "ts-node": "^10.9.1"
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/material": "^5.14.6",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
+        "react-router-dom": "^6.15.0",
+        "ts-node": "^10.9.1"
     },
     "devDependencies": {
-      "@babel/core": "^7.21.4",
-      "@babel/plugin-transform-runtime": "^7.21.4",
-      "@babel/preset-env": "^7.21.4",
-      "@babel/preset-react": "^7.18.6",
-      "@babel/preset-typescript": "^7.21.4",
-      "@testing-library/jest-dom": "^5.16.5",
-      "@testing-library/react": "^14.0.0",
-      "@types/react": "^18.0.33",
-      "@types/react-dom": "^18.0.11",
-      "babel-jest": "^29.5.0",
-      "babel-loader": "^9.1.2",
-      "css-loader": "^6.7.3",
-      "html-webpack-plugin": "^5.5.0",
-      "jest": "^29.5.0",
-      "jest-environment-jsdom": "^29.5.0",
-      "jest-svg-transformer": "^1.0.0",
-      "react-test-renderer": "^18.2.0",
-      "style-loader": "^3.3.2",
-      "ts-jest": "^29.1.0",
-      "ts-loader": "^9.4.2",
-      "typescript": "^5.0.3",
-      "webpack": "^5.78.0",
-      "webpack-cli": "^5.0.1",
-      "webpack-dev-server": "^4.13.2"
+        "@babel/core": "^7.21.4",
+        "@babel/plugin-transform-runtime": "^7.21.4",
+        "@babel/preset-env": "^7.21.4",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.4",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^14.0.0",
+        "@types/react": "^18.0.33",
+        "@types/react-dom": "^18.0.11",
+        "babel-jest": "^29.5.0",
+        "babel-loader": "^9.1.2",
+        "css-loader": "^6.7.3",
+        "html-webpack-plugin": "^5.5.0",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "jest-svg-transformer": "^1.0.0",
+        "react-test-renderer": "^18.2.0",
+        "style-loader": "^3.3.2",
+        "ts-jest": "^29.1.0",
+        "ts-loader": "^9.4.2",
+        "typescript": "^5.0.3",
+        "webpack": "^5.78.0",
+        "webpack-cli": "^5.0.1",
+        "webpack-dev-server": "^4.13.2"
     }
-  }
-  
\ No newline at end of file
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2018065..70db43e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,84 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Home from "./components/pages/ReactLearn/Home";
+import About from "./components/pages/ReactLearn/About";
+import UseEffectPage from "./components/pages/ReactLearn/UseEffectPage";
+import { Component1, Component5 } from "./components/pages/ReactLearn/USeContext";
+import { useState, createContext, useContext } from "react";
+import One from "./components/organisms/nonusecontext/One";
+import USECONTEXT from "./components/organisms/usecontext/One";
 const App = () => {
     return (
-      <>
-        <h1>Hello,World</h1>
-      </>
+      <BrowserRouter>
+      <Routes>
+        <Route  path="/" element={<Home/>}/>
+        <Route  path="/nonusecontext" element={<One user={"Somnath"}/>}/>
+        <Route  path="/usecontext" element={<USECONTEXT/>}/>
+        <Route  path="/about" element={<About/>}/>
+        <Route path="/UseEffectPage" element={<UseEffectPage/>}/>
+        <Route path="/component1" element={<Component1/>}/>
+        <Route path="/component5" element={<Component5/>}/>
+      </Routes>
+      </BrowserRouter>
+    
     )
   }
   
-  export default App;
\ No newline at end of file
+  export default App;
+// import React, { useState, useEffect } from 'react';
+// import { servicesVersion } from "typescript";
+
+// interface ItemListProps {
+//   items: string[];
+// }
+
+// const ItemList: React.FC<ItemListProps> = ({ items }) => {
+//   const [searchQuery ,setSearchQuery]=useState('');
+// const [filteredItems,setFilteredItems]=useState<string[]>([])
+// useEffect(()=>{
+//     const updatedFilteredItems=items.filter(item=>
+//       item.toLowerCase().includes(searchQuery.toLowerCase()
+//       ));
+//        setFilteredItems(updatedFilteredItems)
+// },[items,searchQuery])
+
+//   return (
+//     <div>
+
+//         <input
+//         type="text"
+//         placeholder="Search..."
+//         value={searchQuery}
+//         onChange={(e) => setSearchQuery(e.target.value)}
+//       />
+//         <ul>
+//          { filteredItems.map((item,index)=>(
+//             <li key={index} >{item}</li>
+//           ))}
+//         </ul>
+
+      
+//     </div>
+
+//   );
+// };
+
+// const App: React.FC = () => {
+//   const items = [
+//     'Apple',
+//     'Banana',
+//     'Orange',
+//     'Grapes',
+//     'Strawberry',
+//     'Kiwi',
+//     'Mango'
+//   ];
+
+//   return (
+//     <div>
+//       <h1>Searchable Item List</h1>
+//       <ItemList items={items} />
+//     </div>
+//   );
+// };
+
+// export default App;
diff --git a/frontend/src/components/organisms/Accordian.tsx b/frontend/src/components/organisms/Accordian.tsx
new file mode 100644
index 0000000..019dcc0
--- /dev/null
+++ b/frontend/src/components/organisms/Accordian.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Accordian = () => {
+  return (
+    <div>Accordian</div>
+  )
+}
+
+export default Accordian
\ No newline at end of file
diff --git a/frontend/src/components/organisms/NonUseContext.tsx b/frontend/src/components/organisms/NonUseContext.tsx
new file mode 100644
index 0000000..7fc91e1
--- /dev/null
+++ b/frontend/src/components/organisms/NonUseContext.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const NonUseContext = () => {
+  return (
+    <div>NonUseContext</div>
+  )
+}
+
+export default NonUseContext
\ No newline at end of file
diff --git a/frontend/src/components/organisms/Usecontext.tsx b/frontend/src/components/organisms/Usecontext.tsx
new file mode 100644
index 0000000..18a8261
--- /dev/null
+++ b/frontend/src/components/organisms/Usecontext.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Usecontextpractise = () => {
+  return (
+    <div>Usecontext</div>
+  )
+}
+
+export default Usecontextpractise
\ No newline at end of file
diff --git a/frontend/src/components/organisms/nonusecontext/Four.tsx b/frontend/src/components/organisms/nonusecontext/Four.tsx
new file mode 100644
index 0000000..371b740
--- /dev/null
+++ b/frontend/src/components/organisms/nonusecontext/Four.tsx
@@ -0,0 +1,12 @@
+import { Typography } from '@mui/material';
+import React from 'react'
+interface FourProps{
+    user:string;
+}
+const Four :React.FC<FourProps>= ({user}) => {
+  return (
+   <Typography variant="h6">{`Final USer Got it ${user}`}</Typography>
+  )
+}
+
+export default Four
\ No newline at end of file
diff --git a/frontend/src/components/organisms/nonusecontext/One.tsx b/frontend/src/components/organisms/nonusecontext/One.tsx
new file mode 100644
index 0000000..88cb89f
--- /dev/null
+++ b/frontend/src/components/organisms/nonusecontext/One.tsx
@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+import React from 'react'
+import Two from './Two';
+interface OneProps{
+     user:string;
+}
+const One:React.FC<OneProps>= ({user}) => {
+  return (
+    <>
+    <Typography variant="body1">{`Hello this is ${user} No:1`}</Typography>
+     <Two user={user}/>
+    </>
+  )
+}
+
+export default One;
\ No newline at end of file
diff --git a/frontend/src/components/organisms/nonusecontext/Three.tsx b/frontend/src/components/organisms/nonusecontext/Three.tsx
new file mode 100644
index 0000000..fe9f387
--- /dev/null
+++ b/frontend/src/components/organisms/nonusecontext/Three.tsx
@@ -0,0 +1,16 @@
+import { Typography, typographyClasses } from '@mui/material';
+import React from 'react'
+import Four from './Four';
+interface ThreeProps{
+    user:string;
+}
+const Three:React.FC<ThreeProps> = ({user}) => {
+  return (
+    <>
+   <Typography variant='body1'>{`This is user three dont required data why still i need to pass user`}</Typography>
+   <Four user={user}/>
+   </>
+  )
+}
+
+export default Three
\ No newline at end of file
diff --git a/frontend/src/components/organisms/nonusecontext/Two.tsx b/frontend/src/components/organisms/nonusecontext/Two.tsx
new file mode 100644
index 0000000..ad1a956
--- /dev/null
+++ b/frontend/src/components/organisms/nonusecontext/Two.tsx
@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+import Three from './Three';
+interface TwoProps{
+    user:string;
+}
+const Two:React.FC<TwoProps> = ({user}) => {
+  return (
+    <>
+    <Typography variant="h1" >{`This is user 2 data ${user}`}</Typography>
+    <Three user={user} />
+    </>
+  )
+}
+
+export default Two
\ No newline at end of file
diff --git a/frontend/src/components/organisms/usecontext/Four.tsx b/frontend/src/components/organisms/usecontext/Four.tsx
new file mode 100644
index 0000000..64314ae
--- /dev/null
+++ b/frontend/src/components/organisms/usecontext/Four.tsx
@@ -0,0 +1,13 @@
+import { Typography } from '@mui/material';
+import React, { createContext, useContext } from 'react'
+import { UserContext } from './One';
+
+const Four = () => {
+const data= useContext(UserContext);
+    console.log(data);
+  return (
+   <Typography variant="h6">{`Final User Got it ${data?.user}`}</Typography>
+  )
+}
+
+export default Four
\ No newline at end of file
diff --git a/frontend/src/components/organisms/usecontext/One.tsx b/frontend/src/components/organisms/usecontext/One.tsx
new file mode 100644
index 0000000..2e15766
--- /dev/null
+++ b/frontend/src/components/organisms/usecontext/One.tsx
@@ -0,0 +1,28 @@
+import { Typography } from '@mui/material';
+import React, { createContext, useState } from 'react';
+import Two from './Two';
+
+export interface UserContextProps {
+  user: string;
+}
+
+export const UserContext = createContext<UserContextProps | undefined>(undefined);
+
+const USECONTEXT = () => {
+
+  const [user, setUser] = useState("Jesse Hall");
+
+  const contextValue: UserContextProps = { user };
+
+  return (
+    <>
+      <UserContext.Provider value={contextValue}>
+      <Typography variant="body1">{"This is user context Value Practise"}</Typography>
+        <Typography variant="body1">{`Hello this is ${user} No:1`}</Typography>
+        <Two />
+      </UserContext.Provider>
+    </>
+  );
+};
+
+export default USECONTEXT;
diff --git a/frontend/src/components/organisms/usecontext/Three.tsx b/frontend/src/components/organisms/usecontext/Three.tsx
new file mode 100644
index 0000000..3b06499
--- /dev/null
+++ b/frontend/src/components/organisms/usecontext/Three.tsx
@@ -0,0 +1,14 @@
+import { Typography, typographyClasses } from '@mui/material';
+import React from 'react'
+import Four from './Four';
+
+const Three = () => {
+  return (
+    <>
+   <Typography variant='body1'>{`This is user three dont required data why still i need to pass user`}</Typography>
+   <Four />
+   </>
+  )
+}
+
+export default Three
\ No newline at end of file
diff --git a/frontend/src/components/organisms/usecontext/Two.tsx b/frontend/src/components/organisms/usecontext/Two.tsx
new file mode 100644
index 0000000..278ceb8
--- /dev/null
+++ b/frontend/src/components/organisms/usecontext/Two.tsx
@@ -0,0 +1,14 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+import Three from './Three';
+
+const Two= () => {
+  return (
+    <>
+    <Typography variant="h1" >{`This is user 2 data `}</Typography>
+    <Three />
+    </>
+  )
+}
+
+export default Two
\ No newline at end of file
diff --git a/frontend/src/components/pages/ReactLearn/About.tsx b/frontend/src/components/pages/ReactLearn/About.tsx
new file mode 100644
index 0000000..bdc04ff
--- /dev/null
+++ b/frontend/src/components/pages/ReactLearn/About.tsx
@@ -0,0 +1,23 @@
+import { Button } from '@mui/material'
+import React, { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+
+const About = () => {
+  const [color,setColor]=useState("gunna");
+  const navigate=useNavigate();
+  return (
+    <div>
+      About
+      <h1>I am this type of color {color}</h1>
+      <Button onClick={()=>setColor('red')} >Red</Button>
+      <Button onClick={()=>setColor("green")} >Green</Button>
+      <Link to={'/UseEffectPage'}>
+      <Button >UseEffectPageSnnippet</Button>
+      </Link>
+      <Button onClick={()=>navigate(-1)} >Go to Home</Button>
+        
+    </div>
+  )
+}
+
+export default About
\ No newline at end of file
diff --git a/frontend/src/components/pages/ReactLearn/Filter.tsx b/frontend/src/components/pages/ReactLearn/Filter.tsx
new file mode 100644
index 0000000..2acdb51
--- /dev/null
+++ b/frontend/src/components/pages/ReactLearn/Filter.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+interface ItemListProps{
+    items:string[];
+}
+// const ItemList: React.FC<ItemListProps>=({items})=>{
+      
+//     return(
+            
+//     );
+// }
+const Filter = () => {
+    const items = [
+        'Apple',
+        'Banana',
+        'Orange',
+        'Grapes',
+        'Strawberry',
+        'Kiwi',
+        'Mango'
+      ];
+    
+ 
+  return (
+    <div>
+      <h1>Searchable Item List</h1>
+      {/* <ItemList items={items} /> */}
+    </div>
+  );
+  
+}
+
+export default Filter
\ No newline at end of file
diff --git a/frontend/src/components/pages/ReactLearn/Home.tsx b/frontend/src/components/pages/ReactLearn/Home.tsx
new file mode 100644
index 0000000..518a43e
--- /dev/null
+++ b/frontend/src/components/pages/ReactLearn/Home.tsx
@@ -0,0 +1,25 @@
+import { Button, Grid } from '@mui/material';
+import React from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+const Home = () => {
+  const navigate =useNavigate();
+  return (
+    <div>
+        <h1>Home</h1>
+        <Button onClick={()=>navigate('/about')} >Go to About</Button>
+        <Grid >
+          Hello i am going to about page
+          <Link to="/about">Home</Link>
+        </Grid>
+        <Button onClick={()=>navigate("/UseEffectPage")}>Goto UseEffect</Button>
+        <Button onClick={()=>navigate("/component1")}>Component1</Button>
+        <Button onClick={()=>navigate("/component5")}>Component5</Button>
+
+       {/* Non use context */}
+       <Button onClick={()=>navigate("/nonusecontext")}>NonUseContext</Button>
+       <Button onClick={()=>navigate("/usecontext")}>UseContext</Button>
+    </div>
+  )
+}
+
+export default Home
\ No newline at end of file
diff --git a/frontend/src/components/pages/ReactLearn/USeContext.tsx b/frontend/src/components/pages/ReactLearn/USeContext.tsx
new file mode 100644
index 0000000..6e10d5c
--- /dev/null
+++ b/frontend/src/components/pages/ReactLearn/USeContext.tsx
@@ -0,0 +1,53 @@
+import { useState, createContext, useContext } from "react";
+import ReactDOM from "react-dom";
+
+const UserContext = createContext("");
+
+export function Component1() {
+  const [user, setUser] = useState("Jesse Hall");
+
+  return (
+    <UserContext.Provider value={user}>
+      <h1>{`Hello ${user}!`}</h1>
+      <Component2 />
+    </UserContext.Provider>
+  );
+}
+
+export function Component2() {
+  return (
+    <>
+      <h1>Component 2</h1>
+      <Component3 />
+    </>
+  );
+}
+
+function Component3() {
+  return (
+    <>
+      <h1>Component 3</h1>
+      <Component4 />
+    </>
+  );
+}
+
+function Component4() {
+  return (
+    <>
+      <h1>Component 4</h1>
+      <Component5 />
+    </>
+  );
+}
+
+export function Component5() {
+  const user1 = useContext(UserContext);
+   console.log("Hello"+user1)
+  return (
+    <>
+      <h1>Component 5</h1>
+      <h2>{`Hello ${user1} again!`}</h2>
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/ReactLearn/UseEffectPage.tsx b/frontend/src/components/pages/ReactLearn/UseEffectPage.tsx
new file mode 100644
index 0000000..577ba73
--- /dev/null
+++ b/frontend/src/components/pages/ReactLearn/UseEffectPage.tsx
@@ -0,0 +1,18 @@
+import Typography from '@mui/material/Typography';
+import React, { useEffect, useState } from 'react'
+
+const UseEffectPage = () => {
+    const [count,setCount]=useState(1);
+    useEffect(()=>{
+          setTimeout(()=>{
+               setCount((count)=>count+1);
+          },1000)
+    },[])
+  return (
+    <>
+      <Typography>{`I have Counter this times${count} `}</Typography>
+    </>
+  )
+}
+
+export default UseEffectPage