assignment-2

src/Blogs/index.js

-import React from "react";
-import { Heading } from "@chakra-ui/react";
-
-function Blogs(props) {
-  return (
-    <>
-      <Heading>Blogs</Heading>
-      <p>There are {props.number} blogs.</p>
-    </>
-  );
-}
-
-export default Blogs;

src/Careers/index.js

-import React from "react";
-import { Heading } from "@chakra-ui/react";
-
-function Careers(props) {
-  return (
-    <>
-      <Heading>Careers</Heading>
-      <p>There are {props.jobs} jobs.</p>
-    </>
-  );
-}
-
-export default Careers;

src/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} />;
+    }
+  };
+}

src/Home/index.js

-import React from "react";
-import { Heading } from "@chakra-ui/react";
-function Home() {
-  return (
-    <div>
-      <Heading>Home</Heading>
-      <p>Welcome to home.</p>
-    </div>
-  );
-}
-export default Home;

src/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="h2" size="xl">
+          Product List
+        </Heading>
+        <OrderedList>
+          {props.data.map((data) => {
+            return (
+              <ListItem key={data.id}>
+                {data.name} ({data.color})
+              </ListItem>
+            );
+          })}
+        </OrderedList>
+      </Box>
+    </div>
+  );
+};
+
+export default ProductList;

src/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;

src/main.js

-import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
-import { Heading } from "@chakra-ui/react";
-import Blogs from "./Blogs";
-import Careers from "./Careers";
-import Home from "./Home";
+import React, { Component } from "react";
+import UserList from "./UserList.js";
+import ProductList from "./ProductList.js";
+import Hoc from "./HOC";
 
-function Main() {
-  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="/careers">Careers</Link>
-            </li>
-            <li style={{ display: "inline-table", padding: "10px" }}>
-              <Link to="/blog">Blogs</Link>
-            </li>
-          </ul>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/careers" element={<Careers jobs="10" />} />
-            <Route path="/blog" element={<Blogs number="50" />} />
-          </Routes>
-        </div>
-      </Router>
-    </div>
-  );
+const productData = [
+  { id: 1, name: "Car", color: "Red" },
+  { id: 2, name: "Phone", color: "black" },
+  { id: 3, name: "Laptop", color: "silver" },
+];
+const userData = [
+  { id: 1, name: "Jack", email: "jack@gmail.com" },
+  { id: 2, name: "Alice", email: "alice@gmail.com" },
+  { id: 3, name: "Steve", email: "steve@gmail.com" },
+];
+
+const Users = Hoc(UserList, userData);
+const Products = Hoc(ProductList, productData);
+
+class Main extends Component {
+  render() {
+    return (
+      <div>
+        <Users></Users>
+        <Products></Products>
+      </div>
+    );
+  }
 }
 
 export default Main;