reactpractise

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 <[email protected]> ",
     "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"
     }
-  }
-
+}

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;
+  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;

frontend/src/components/organisms/Accordian.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Accordian = () => {
+  return (
+    <div>Accordian</div>
+  )
+}
+
+export default Accordian

frontend/src/components/organisms/NonUseContext.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const NonUseContext = () => {
+  return (
+    <div>NonUseContext</div>
+  )
+}
+
+export default NonUseContext

frontend/src/components/organisms/Usecontext.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Usecontextpractise = () => {
+  return (
+    <div>Usecontext</div>
+  )
+}
+
+export default Usecontextpractise

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

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;

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

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

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

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;

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

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

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