Merge branch 'shipper' of https://github.com/UyLeQuoc/Hackathon-Candup …

…into shipper
UyLeQuoc · Feb 18, 2023 · 1212a78 · 1212a78
2 parents 12f495c + 6636ea6
commit 1212a78
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 56 deletions.
diff --git a/components/Table/ShipperReciveOrders.tsx b/components/Table/ShipperReciveOrders.tsx
@@ -1,41 +1,31 @@
-import React from "react";
-import { Button, Space, Table, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+import { Button, message, Space, Table, Tag } from "antd";
 import type { ColumnsType } from "antd/es/table";
+import { Shipper } from "../../types/shipper.types";
+import { getAllOrdersFromFirebase, getUserFromFirebase } from "../../utils/firebase";
+import { useRouter } from "next/router";
+import { Users } from "../../types/user.types";
 
-interface DataType {
-  key: string;
-  date: string;
-  userId: string;
-  status: string;
-  total: number;
-}
-const columns: ColumnsType<DataType> = [
+const columns: ColumnsType<Shipper> = [
     {
       title: "Ngày",
-      dataIndex: "date",
-      key: "date",
-      render: (date) => {
+      dataIndex: "create",
+      key: "create",
+      render: (create) => {
+        const day = new Date(create.seconds);
         return (
             <div style={{minWidth: "200px"}}>
-              <h2>{date}</h2>
+              <h2>{day.toDateString()}</h2>
             </div>
         );
       },
     },
-    {
-      title: "Tên",
-      dataIndex: "userId",
-      key: "userId",
-      render: (userId) => {
-        return <h2>{userId}</h2>;
-      },
-    },
     {
         title: "Tổng tiền",
-        dataIndex: "total",
-        key: "total",
-        render: (total) => {
-          return <h2>{total}</h2>;
+        dataIndex: "totalPrice",
+        key: "totalPrice",
+        render: (totalPrice) => {
+          return <h2>{totalPrice}</h2>;
         },
       },
     {
@@ -46,13 +36,26 @@ const columns: ColumnsType<DataType> = [
         return <h2>{status}</h2>;
       },
     },
+    {
+      title: "Time left",
+      dataIndex: "expired",
+      key: "expired",
+      render: (expired) => {
+        const expiredDay = new Date(expired.seconds);
+        const currentDay = new Date();
+        const timeLeft = expiredDay.getMinutes() - currentDay.getMinutes(); 
+        if (expiredDay<currentDay) timeLeft ===0;
+        return <h2>{timeLeft}min</h2>;
+      },
+    },
     {
         title:"Action",
-        dataIndex:"key",
-        key: "key",
-        render:(key) =>{
+        dataIndex:"id",
+        key: "id",
+        render:(id) =>{
+          const router = useRouter();
             const handleOnClick = () => {
-                    console.log(key);              
+                router.push("/shipper/"+id);      
             }
             return (
                 <div>
@@ -67,29 +70,32 @@ const columns: ColumnsType<DataType> = [
         },
     },
   ];
-  const data: DataType[] = [
-    {
-      key: "1",
-      date: "day",
-      userId: "1",
-      status: "pending",
-      total: 33,
-    },
-    {
-      key: "2",
-      date: "day22222222222222222222222",
-      userId: "2",
-      status: "pending",
-      total: 34,
-    },
-  ];
-  const ShipperReciveOrders: React.FC = () => (
-    <Table
-      style={{ minHeight:"400px"}}
-      pagination={false}
-      columns={columns}
-      dataSource={data}    
-    />
-  );
+
+  const ShipperReciveOrders: React.FC = () => {
+    const [data, setOrders] = useState<Shipper[]>([]);
+
+    useEffect(() => {
+      (async () => {
+        try {
+          const orders = await getAllOrdersFromFirebase();
+          const x = orders.map(order =>( {...order.data, id:order.id}));
+          setOrders(x);
+        } catch (error) {
+          console.log(error); 
+        }
+      })();
+    }, []);
+
+    return (
+      <div className="container mx-auto">
+      <Table
+        style={{ minHeight:"600px"}}
+        pagination={false}
+        columns={columns}
+        dataSource={data}    
+      />
+      </div>
+    );
+  };
 
   export default ShipperReciveOrders;
diff --git a/pages/shipper/management/index.tsx b/pages/shipper/management/index.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ShipperOrderDetailHeader from "../../../components/Header/ShipperOrderDetail.header";
 import MainFooter from "../../../components/MainFooter";
 import MainNavigation from "../../../components/MainNavigation";
 import ShipperReciveOrders from "../../../components/Table/ShipperReciveOrders";
 import OrderContainer from "../../../container/OrderContainer";
+import { Shipper } from "../../../types/shipper.types";
+import { getAllOrdersFromFirebase, getUserFromFirebase } from "../../../utils/firebase";
 
 function ShipperManagementPage() : JSX.Element {
   return (

diff --git a/types/user.types.ts b/types/user.types.ts
@@ -9,7 +9,6 @@ export interface Users {
   defaultName: string;
   cart: Cart;
 }
-
 export interface LastSeen {
   seconds: number;
   nanoseconds: number;

diff --git a/utils/firebase.js b/utils/firebase.js
@@ -163,6 +163,20 @@ export const getAllProductsFromFirebase = async () => {
   return output;
 };
 
+export const getAllOrdersFromFirebase = async() => {
+  const queryQuestion = query(collection(db,"Orders"));
+  const output = [];
+  const querySnapshot = await getDocs(queryQuestion);
+  querySnapshot.forEach((doc) => {
+    // doc.data() is never undefined for query doc snapshots
+   const x = {
+    id: doc.id,
+    data: doc.data()
+   }
+    output.push(x);
+  });
+  return output;
+}
 export const getProductsFromFirebaseBasedOnCategory = async (category) => {
   const queryQuestion = query(
     collection(db, "Products"),