add assignements

package.json

@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.2.4",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -2,11 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -14,7 +9,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #CCCCCC;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.js

-import logo from './logo.svg';
+// import Assignment01 from "./Assignment01";
+import Assignment02 from "./Assignment02";
+
 import './App.css';
 
-function App() {
+function App(props) {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+  <div>
+    {/* <Assignment01 /> */}
+    <Assignment02 />
+  </div>
   );
 }
 

src/Assignment01/PatientList/index.js

+import React, { useEffect,useRef } from "react";
+import { Heading } from '@chakra-ui/react'
+
+function PatientsList(props) {
+    useEffect(() => {
+        console.log("component did mount PatientsList");
+        return () => {
+          console.log("component un mount PatientsList");
+        };
+      }, []);
+      useEffect(() => {
+        console.log("component will update PatientsList");
+        return () => {
+          console.log("component un mount PatientsList");
+        };
+      });
+  return (
+    <div>
+      <Heading>Patients</Heading>
+    </div>
+  );
+}
+
+export default PatientsList;
\ No newline at end of file

src/Assignment01/index.js

+
+import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
+import { Heading } from '@chakra-ui/react'
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  useMatch,
+  useParams
+} from "react-router-dom";
+import { Divider } from "@chakra-ui/react";
+import PatientsList from "./PatientList";
+
+function Assignment01() {
+    return (
+        <div className='App-header'>
+        <Router>
+          <div>
+            <ul style={{display: "inline-flex"}}>
+              <li style={{display: "inline-table", padding: "10px",}}><Link to="/">Home</Link></li>
+              <li style={{display: "inline-table", padding: "10px",}}><Link to="/about">About</Link></li>
+              <li style={{display: "inline-table", padding: "10px",}}><Link to="/topics">Patients</Link></li>
+            </ul>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/topics" element={<PatientsList />} />
+            </Routes>
+          </div>
+        </Router>
+        </div>
+      );
+}
+function Home() {
+    return <div><Heading>Home</Heading></div>;
+  }
+  function About() {
+    return <div><Heading>About</Heading></div>;
+  }
+  
+  export default Assignment01;
\ No newline at end of file

src/Assignment02/HOC.js

+import React, {Component} from 'react';
+
+export default function Hoc(HocComponent, data) {
+    return class extends Component {
+        constructor(props) {
+            super(props);
+            this.state = { data: data };
+        }
+        render() {
+            return ( <HocComponent data={this.state.data} {...this.props} />);
+        }
+    }
+}
\ No newline at end of file

src/Assignment02/ProductList.js

+import React from "react";
+import { OrderedList, ListItem } from "@chakra-ui/react";
+import { Heading, Box } from '@chakra-ui/react';
+
+const ProductList = (props) => {
+  return (
+    <div>
+      <Box border='3px' borderColor='gray.200'>
+        <Heading as='h6' size='xs'>Product List</Heading>
+        <OrderedList>
+          {props.data.map((data) => {
+            return ( <ListItem key={data.id}> {data.name} ({data.designation}) </ListItem> );
+          })}
+        </OrderedList>
+        </Box>
+    </div>
+  );
+};
+
+export default ProductList;
\ No newline at end of file

src/Assignment02/UserList.js

+import React from 'react';
+import { OrderedList, ListItem } from "@chakra-ui/react";
+import { Heading } from '@chakra-ui/react';
+
+function UserList(props) {
+    return (
+        <div>
+            <Heading as='h2' size='xl'>Users List</Heading>
+            <OrderedList>
+              {props.data.map((data) => {
+                return (
+                  <ListItem key={data.id}>
+                    {data.name}
+                  </ListItem>
+                );
+              })}
+            </OrderedList>
+        </div>
+      );
+}
+
+export default UserList;
\ No newline at end of file

src/Assignment02/index.js

+import React, {Component} from 'react';
+
+import UserList from "./UserList.js";
+import ProductList from "./ProductList.js";
+import Hoc from "./HOC";
+
+const userData = [
+    {id: 1, name: "Shahzad Bhatti", email: "sbhatti@nisum.com"},
+    {id: 2, name: "Saad Iqbal", email: "siqbal@nisum.com"},
+    {id: 3, name: "Aneeb Immadudin", email: "aimmad@nisum.com"},
+    {id: 4, name: "Anwar Baig", email: "abaig@nisum.com"}
+];
+const productData = [
+    {id: 1, name: "Shahzad Bhatti", designation: "Principal SE"},
+    {id: 2, name: "Zain Ahmad", designation: "SSE"},
+    {id: 3, name: "Muhammad Anas", designation: "SSE"},
+    {id: 4, name: "Anwar Baig", designation: "SSE"},
+];
+
+const Users = Hoc(UserList, userData);
+const Products = Hoc(ProductList, productData);
+
+
+class Assignment02 extends Component {
+    render() {
+        return (
+          <div>
+            <Users></Users>
+            <Products></Products>
+          </div>
+        )
+      }
+}
+
+export default Assignment02;
\ No newline at end of file