replace Qr code in table

src/components/Profile/AddProfile.js

@@ -27,8 +27,6 @@ const AddProfile = () => {
   const [profileAddress, setProfileAddress] = useState(profileId ? detailProfile.address : "");
   const [validPhoneNumber, setValidPhoneNumber] = useState(false);
 
-  console.log("phoneNumber", typeof(phoneNumber));
-
   const onHandleBack = () => {
     history.push("/");
   }

src/views/IndexSections/Table.js

@@ -6,6 +6,7 @@ import {
   UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Pagination, PaginationItem, PaginationLink,
   Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, InputGroup, InputGroupAddon, InputGroupText, Input
 } from "reactstrap";
+import QRCode from 'qrcode.react';
 import { profileFormatDateTime } from "constans";
 
 export const ProfileTable = (props) => {
@@ -71,7 +72,7 @@ export const ProfileTable = (props) => {
 
   let count = 0;
   const TableRow = (props) => {
-    const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
+    const { id, address, logo, name, phone_number, profile_product, created_at, code } = props;
     count++;
     
     const productName = profile_product ? profile_product.map(item => item.name) : [];
@@ -84,12 +85,23 @@ export const ProfileTable = (props) => {
       <tr>
         <th scope="row">{count}</th>
         <td>{name}</td>
-        <td><img src={window.location.origin + logo} alt="logo" width={100} height={50} /></td>
         <td>{phone_number}</td>
         <td>{address}</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>
+          <QRCode
+            size={120}
+            includeMargin
+            value={`http://trace.aqbits.net/${code}`}
+            imageSettings={{
+              width: 60,
+              height: 40,
+              src: window.location.origin + logo,
+              excavate: true,
+            }}
+          />
+        </td>
         <td key={id}>
           <UncontrolledDropdown nav>
             <DropdownToggle nav>
@@ -127,7 +139,6 @@ export const ProfileTable = (props) => {
             <tr >
               <th>{"STT"}</th>
               <th>{"Tên doanh nghiệp"}</th>
-              <th>{"Logo"}</th>
               <th>{"Số điện thoại"}</th>
               <th>{"Địa chỉ"}</th>
               <th>{"Tên sản phẩm"}</th>
@@ -144,7 +155,7 @@ export const ProfileTable = (props) => {
           <Col>
             <nav>
               <Pagination aria-label="Page navigation example">
-                <PaginationItem>
+                <PaginationItem disabled={props.currentPage === 1}>
                   <PaginationLink first href="#" />
                 </PaginationItem>
                 <PaginationItem disabled={props.currentPage === 1} onClick={onPrevItem}>
@@ -154,7 +165,7 @@ export const ProfileTable = (props) => {
                 <PaginationItem disabled={props.currentPage === Math.ceil(pageSize)} onClick={onNextItem}>
                   <PaginationLink next href="#" />
                 </PaginationItem>
-                <PaginationItem>
+                <PaginationItem disabled={props.currentPage === Math.ceil(pageSize)}>
                   <PaginationLink last href="#" />
                 </PaginationItem>
               </Pagination>
@@ -237,8 +248,20 @@ export const ProductTable = (props) => {
         <td>{origin}</td>
         <td>{description}</td>
         <td>{growing_conditions}</td>
-        <td><img src={window.location.origin + image} alt="product" width={50} height={50} /></td>
-        <td><img src={window.location.origin + qr_code} alt="qr-code" width={50} height={50} /></td>
+        <td>
+          <QRCode
+            size={120}
+            includeMargin
+            value={`http://trace.aqbits.net/trace-code/${qr_code}`}
+            imageSettings={{
+              width: 60,
+              height: 40,
+              src: window.location.origin + image,
+              excavate: true,
+            }}
+          />
+          {/* <img src={window.location.origin + qr_code} alt="qr-code" width={50} height={50} /> */}
+        </td>
         <td>{created_at ? profileFormatDateTime(created_at) : ""}</td>
         <td key={product_id}>
           <UncontrolledDropdown nav>
@@ -282,7 +305,6 @@ export const ProductTable = (props) => {
               <th>{"Xuất xứ"}</th>
               <th>{"Mô tả"}</th>
               <th>{"Điều kiện nuôi trồng"}</th>
-              <th>{"Ảnh"}</th>
               <th>{"QR code"}</th>
               <th>{"Ngày tạo"}</th>
               <th></th>