update get list profile

src/components/Profile/DetailProfile.js

 import React, { useState } from "react";
-
-// reactstrap components
-import { Card, CardImg, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap";
+import { connect, useDispatch } from "react-redux";
 import { useHistory } from 'react-router-dom';
+
+import { Card, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap";
 import QRCode from 'react-qr-code';
 
 
@@ -11,15 +11,14 @@ import MainBanner from "components/Generals/MainBanner.js";
 import Sologan from "components/Generals/Sologan";
 import DemoNavbar from "components/Navbars/DemoNavbar.js";
 import SimpleFooter from "components/Footers/SimpleFooter.js";
-import dummyData from "data/index.json";
 
 import './detail-profile.css';
 
-const DetailProfile = () => {
+const DetailProfile = (props) => {
   const history = useHistory();
   const state = { ...history.location.state };
   const code_name = state.code_name;
-  const listData = dummyData.data.filter(item => item.code === code_name);
+  const listData = props.listProfile.filter(item => item.code === code_name);
 
   return (
     <>
@@ -74,7 +73,7 @@ const DetailProfile = () => {
                       }
                       return (
                         <Col lg={6} md={12} className="my-3">
-                          <Card className="w-100 hover-shadow" onClick={onHandleTraceCode}>
+                          <Card className="w-100 h-100 hover-shadow" onClick={onHandleTraceCode}>
                             <CardHeader className="h5 mb-3">{product.name}</CardHeader>
                             <CardBody>
                               <div className="d-flex justify-content-around">
@@ -101,6 +100,24 @@ const DetailProfile = () => {
   );
 }
 
-export default DetailProfile;
+const mapStateToProps = (state) => {
+  return {
+    listProfile: state.profileReducer.listProfile,
+    // currentPage: state.profileReducer.currentPage,
+    // limit: state.profileReducer.limit,
+    // nextPage: state.profileReducer.nextPage,
+    // previosPage: state.profileReducer.previosPage,
+    // total: state.profileReducer.total
+  };
+};
+const mapDispatchToProps = (dispatch) => ({
+  // onLoadListProfile: (profile) => dispatch(listProfile(profile)),
+  // onLoadPreviousPage: (profile) => dispatch(previousAction(profile)),
+  // onLoadNextPage: (profile) => dispatch(nextAction(profile)),
+  // onDeleteProfile: (profile) => dispatch(deleteProfile(profile)),
+  // onAddProfile: (profile) => dispatch(addProfile(profile))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DetailProfile);
 
 

src/components/Profile/SearchProfile.js

@@ -14,7 +14,6 @@ import { listProfile, addProfile, deleteProfile, previousAction, nextAction } fr
 import { ProfileTable } from "../../views/IndexSections/Table";
 
 
-
 const SearchProfile = (props) => {
   const [searchProfile, setSearchProfile] = useState("");
   const history = useHistory();
@@ -27,7 +26,7 @@ const SearchProfile = (props) => {
   const onHandleSearch = (event) => {
     event.preventDefault();
     if (!searchProfile) return;
-    const nameCode = props.listProfile.data.map(item => item.code);
+    const nameCode = props.listProfile.map(item => item.code);
     const checkSearch = nameCode.indexOf(searchProfile);
     if (checkSearch !== -1) {
       history.push({
@@ -43,7 +42,7 @@ const SearchProfile = (props) => {
     dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
   }, []);
 
-  console.log("props.listProfile", props.listProfile);
+
 
   return (
     <>

src/data/index.json

@@ -23,26 +23,31 @@
           "created_at": 1624870109921,
           "product_chain_diary": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -50,11 +55,13 @@
           ],
           "product_certification": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -74,26 +81,31 @@
           "created_at": 1624870109921,
           "product_chain_diary": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -101,11 +113,13 @@
           ],
           "product_certification": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -125,26 +139,31 @@
           "created_at": 1624870109921,
           "product_chain_diary": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -152,11 +171,13 @@
           ],
           "product_certification": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
@@ -171,7 +192,7 @@
       "name": "Tập đoàn FPT",
       "logo": "/image/logo/kis-academy.jpg",
       "address": "Khu công nghệ cao Láng Hòa Lạc",
-      "phone_number": "024 2222222",
+      "phone_number": "0242222222",
       "qr_code": "/image/qrcode/qr-code.png",
       "created_at": 1624870109921,
       "profile_product": [
@@ -187,26 +208,31 @@
           "growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
           "product_chain_diary": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Bắt đầu nuôi trồng",
               "date": 1616300741111
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Vinashin",
               "description": "Thu hoạch",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Thu mua, nhập kho đông lạnh Cần Thơ",
               "date": 1626841541222
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Trưng bày siêu thị",
               "date": 1627014341333
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "company": "Công ty Coopmart",
               "description": "Bán cho người tiêu dùng",
               "date": 1627619141213
@@ -214,11 +240,13 @@
           ],
           "product_certification": [
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 1",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921
             },
             {
+              "id": "a57e6b29-fbb9-4dd3-af84-8247efe74a92",
               "certification_information": "Chứng nhận certificate 2",
               "image": "/image/certificate/certificate.jpg",
               "date": 1624870109921

src/services/Signin.js

@@ -124,7 +124,7 @@ export default () => {
                               <i className="ni ni-email-83" />
                             </InputGroupText>
                           </InputGroupAddon>
-                          <Input placeholder="Email" type="text"
+                          <Input placeholder="Example@company.com" type="text"
                             value={email} onChange={(e) => setEmail(e.target.value)} />
                           <FormFeedback invalid>{validEmail ? "Không đúng định dạng email" : ""}</FormFeedback>
                         </InputGroup>
@@ -137,7 +137,7 @@ export default () => {
                             </InputGroupText>
                           </InputGroupAddon>
                           <Input
-                            placeholder="Password"
+                            placeholder="Mật khẩu"
                             type="password"
                             autoComplete="off"
                             value={password}
@@ -151,7 +151,7 @@ export default () => {
                           color="primary"
                           type="submit"
                         >
-                          Sign in
+                          Đăng nhập
                         </Button>
                       </div>
                       
@@ -163,14 +163,14 @@ export default () => {
                     <Link
                       to={Routes.Signup.path}
                       className="text-light">
-                      <small>Forgot password?</small>
+                      <small>Đổi mật khẩu?</small>
                     </Link>
                   </Col>
                   <Col className="text-right" xs="6">
                     <Link
                       to={Routes.Signup.path}
                       className="text-light">
-                      <small>Create new account</small>
+                      <small>Tạo tài khoản</small>
                     </Link>
                   </Col>
                 </Row>

src/store/sagas/ProfileSaga.js

@@ -11,6 +11,7 @@ export function* loadListProfileSaga(action) {
     const statusCode = response.data.statusCode;
     if(statusCode === 200){
       const dataListProfile = JSON.parse(response.data.body);
+      console.log("dataListProfile", dataListProfile);
       yield put(loadListProfile(dataListProfile.data));
     }else {
       yield put(loadListProfile([]));

src/views/IndexSections/Table.js

-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useDispatch } from "react-redux";
-import { Table, Card, CardHeader, Row, Col, Button, UncontrolledDropdown, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import { Table, Card, CardHeader, Row, Col, Button, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink } from "reactstrap";
 import { profileFormatDateTime } from "constans";
 
 export const ProfileTable = (props) => {
@@ -25,9 +25,6 @@ export const ProfileTable = (props) => {
     // dispatch(props.onDeleteProfile(profileId));
   }
 
-  useEffect(() => {
-    // dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
-  }, []);
 
   const items = [];
   const totalItem = props.total;
@@ -70,7 +67,11 @@ export const ProfileTable = (props) => {
 
   const TableRow = (props) => {
     const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
-    const productName = profile_product ? profile_product.map(item => item.name) : "";
+    const productName = profile_product ? profile_product.map(item => item.name) : [];
+    let listProductName = [];
+    for(let i=0; i<productName.length; i++){
+      listProductName += productName[i] + '<br />';
+    }
 
     return (
       <tr>
@@ -79,7 +80,7 @@ export const ProfileTable = (props) => {
         <td><img src={window.location.origin + logo} alt="logo" width={50} height={50} /></td>
         <td>{phone_number}</td>
         <td>{address}</td>
-        <td>{productName}</td>
+        <td dangerouslySetInnerHTML={{__html: listProductName}}></td>
         <td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
         <td><img src={window.location.origin + qr_code} alt="qr-code" width={50} height={50} /></td>
         <td key={id}>
@@ -166,8 +167,8 @@ export const ProfileTable = (props) => {
 export const ProductTable = (props) => {
   const history = useHistory();
   // const dispatch = useDispatch();
+  console.log("props", props);
 
-  console.log("listProduct", props.listProduct);
 
   const onHandleClickAdd = () => {
     history.push("/profile/add");
@@ -186,13 +187,8 @@ export const ProductTable = (props) => {
     // dispatch(props.onDeleteProfile(profileId));
   }
 
-  useEffect(() => {
-    // dispatch(props.onLoadListProfile( { currentPage: props.currentPage, limit: props.limit } ));
-
-  }, []);
-
   const items = [];
-  const totalItem = "15";
+  const totalItem = props.listProduct ? props.listProduct.length : 1;
   let pageSize = totalItem / 10;
 
   const getPageItem = () => {