update UI profile, trace-code

src/App.js

@@ -10,17 +10,17 @@ import TraceCode from "./components/TraceCode/index";
 function App() {
   return (
     <Router>
-        <Switch>
-          <Route exact path="/">
-            <Home />
-          </Route>
-          <Route path={Routes.Profile.path}>
-            <Profile />
-          </Route>
-          <Route path={Routes.TraceCode.path}>
-            <TraceCode />
-          </Route>
-        </Switch>
+      <Switch>
+        <Route exact path="/">
+          <Home />
+        </Route>
+        <Route path={Routes.Profile.path}>
+          <Profile />
+        </Route>
+        <Route path={Routes.TraceCode.path}>
+          <TraceCode />
+        </Route>
+      </Switch>
     </Router>
   );
 }

src/components/Home/index.js

 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Routes } from '../../routes';
+import dummyData from '../../data/index.json';
 
 const Home = () => {
   return (
     <ul>
-      <Link to={Routes.Profile.path}>Profile</Link>
+      <Link to={Routes.Profile.path + `/${dummyData.data.map(data => data.code)}` }>Profile</Link>
     </ul>
   );
 }

src/components/Profile/index.js

@@ -10,7 +10,7 @@ const Profile = () => {
     dummyData.data && dummyData.data.length > 0 ?
       dummyData.data.map((data, key) => {
         return (
-          <Card className="px-0 px-md-4 py-0 border-0">
+          <Card className="px-0 px-md-4 py-0 border-0" key={key}>
             <Card.Body>
               <Row className="mb-2">
                 <Col xs={8}>
@@ -36,7 +36,7 @@ const Profile = () => {
                     <div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
                       const onHandleTraceCode = () => {
                         history.push({
-                          pathname: Routes.TraceCode.path,
+                          pathname: Routes.TraceCode.path + `/${product.trace_code}`,
                           state: { product }
                         });
                       }

src/components/TraceCode/index.js

@@ -8,21 +8,20 @@ const TraceCode = () => {
   const history = useHistory();
   let state = { ...history.location.state };
   const product = state.product;
-  console.log("product", product);
   return (
-    <Card className="px-0 px-md-4 py-0 border-0">
+    <Card className="px-0 px-md-4 py-0 border-0" key={product.product_id}>
       <Card.Header>
         <div className="text-center">
           <img className="mb-3" src={window.location.origin + product.image} alt="product" />
           <div className="h4 font-weight-bold mb-3">{product.name}</div>
-          <div className="mb-3">Mã sản phẩm {product.trace_code}</div>
-          <div className="mb-3">Xuất xứ {product.origin}</div>
+          <div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
+          <div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
           <div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
         </div>
       </Card.Header>
       <Card.Body>
         <div className="main-container">
-          <Row className="wrapper-search py-4">
+          <div className="wrapper-search py-4">
             <Tab.Container defaultActiveKey="general-information">
               <Row>
                 <Col xs={12}>
@@ -59,16 +58,20 @@ const TraceCode = () => {
                     <Tab.Pane eventKey="product-chain-diary">
                       {product.product_chain_diary.map(diary => (
                         <div>
-                          <Row className="h6 mt-3">{diary.company}</Row>
+                          <div className="h6 mt-3">{diary.company}</div>
                           <Row className="mb-3">
                             <Col>{formatDateTime(diary.date)}</Col>
                             <Col>{diary.description}</Col>
+                            <Col></Col>
+                            <Col></Col>
+                            <Col></Col>
+                            <Col></Col>
                           </Row>
                         </div>
                       ))}
                     </Tab.Pane>
                     <Tab.Pane eventKey="product-certification">
-                    {product.product_certification.map(certificate => (
+                    {product.product_certification.map((certificate) => (
                         <div>
                           <div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
                           <img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
@@ -79,10 +82,10 @@ const TraceCode = () => {
                 </Col>
               </Row>
             </Tab.Container>
-          </Row>
+          </div>
         </div>
       </Card.Body>
-    </Card>
+    </Card> 
   );
 }
 

src/routes.js

 
 export const Routes = {
     Profile: { path: "/profile" },
-    TraceCode: { path: `/trace-code/` }
+    TraceCode: { path: "/trace-code" }
 };
\ No newline at end of file