Merge branch 'main' into shipper

UyLeQuoc · Feb 19, 2023 · 0a55f94 · 0a55f94
2 parents 69b2a28 + bbf9df3
commit 0a55f94
Show file tree

Hide file tree

Showing 17 changed files with 307 additions and 112 deletions.
diff --git a/components/LandingUI.tsx b/components/LandingUI.tsx
@@ -3,40 +3,31 @@ import Image from "next/image"
 import Product from "./Product/Product"
 import { FieldTimeOutlined } from '@ant-design/icons';
 import Hero from '../public/main/hero.png'
-const products = [
-  {
-    id: 1,
-    name: 'Combo 2 Nem Nướng Xiên Que Giảm 4,000',
-    price: 24000,
-    image: 'https://salt.tikicdn.com/cache/280x280/ts/product/1c/1c/1c/0e6b4b1b1b2b1b1b1b1b1b1b1b1b1b1b.jpg'
-  },
-  {
-    id: 2,
-    name: 'Combo Cơm Trộn Poke , Tàu Hũ Singapore & 1 Chai Nuớc',
-    price: 65000,
-    image: 'https://salt.tikicdn.com/cache/280x280/ts/product/1c/1c/1c/0e6b4b1b1b2b1b1b1b1b1b1b1b1b1b1b.jpg'
-  },
-  {
-    id: 3,
-    name: 'Combo Cơm Trộn Poke , Tàu Hũ Singapore & 1 Chai Nuớc',
-    price: 65000,
-    image: 'https://salt.tikicdn.com/cache/280x280/ts/product/1c/1c/1c/0e6b4b1b1b2b1b1b1b1b1b1b1b1b1b1b.jpg'
-  },
-  {
-    id: 4,
-    name: 'Combo Cơm Trộn Poke , Tàu Hũ Singapore & 1 Chai Nuớc',
-    price: 65000,
-    image: 'https://salt.tikicdn.com/cache/280x280/ts/product/1c/1c/1c/0e6b4b1b1b2b1b1b1b1b1b1b1b1b1b1b.jpg'
-  },
-]
-
+import { TypeAnimation } from "react-type-animation";
 function LandingUI({products} : any) : JSX.Element {
   return (
-    <Row className="landing-ui">
+    <Row className="landing-ui mt-18">
       <Col span={14} className="slogan">
         <div className="badge font-semibold mb-1">Delivery <FieldTimeOutlined className="ml-1"/></div>
         {/* The Best */}
-        <div className="text-[72px] font-bold">The Fastest</div> 
+        <TypeAnimation
+          className=" font-bold"
+          sequence={[
+            'The Fastest', 
+            3000, 
+            'The Best', 
+            3000, 
+            'The Cheapest',
+            3000,
+            () => {
+              console.log('Done typing!'); // Place optional callbacks anywhere in the array
+            }
+          ]}
+          wrapper="div"
+          cursor={true}
+          repeat={Infinity}
+          style={{ fontSize: '36px', marginTop: '8px' }}
+        />
         <div className="text-[72px] font-bold">Delivery in</div>
         <div className="text-[72px] font-bold text-[#FF4206]">Your University</div>
       </Col>

diff --git a/components/MainNavigation.tsx b/components/MainNavigation.tsx
@@ -9,11 +9,27 @@ import { signOut } from 'firebase/auth'
 import { auth } from '../utils/firebase'
 import { useAuthState } from 'react-firebase-hooks/auth'
 import CartIcon from './CartIcon'
-function MainNavigation({user} : any) : JSX.Element {
+import { IProduct } from '../interfaces'
+import { useState } from 'react'
+import ProductList from './Product/ProductList'
+function MainNavigation({user, products} : any) : JSX.Element {
+  if(!products){
+    return <></>
+  }
   const [loggedInUser, loading, error] = useAuthState(auth);
 
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearch = (event : any) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const filteredProducts = products.filter((product: IProduct) => {
+    return product.name.toLowerCase().includes(searchTerm.toLowerCase())
+  });
+
   return (
-    <div className='main-navigation'>
+    <div className='main-navigation fixed bg-white top-0 left-0 right-0 z-50'>
       <div className='left'>
         <Link href='/' className='logo'>
           <Image src={Logo} alt='logo' width={33} height={41} />
@@ -26,8 +42,17 @@ function MainNavigation({user} : any) : JSX.Element {
           },
         }}
         >
-          <Input className='search-bar' placeholder="Search..." prefix={<SearchOutlined />} />
+            <Input className='search-bar' placeholder="Search..." prefix={<SearchOutlined />} value={searchTerm} onChange={handleSearch}/>
         </ConfigProvider>
+        {
+          searchTerm && (
+            <div className='search-result'>
+              {
+                <ProductList products={filteredProducts} category="Search Result"/>
+              }
+            </div>
+          )
+        }
       </div>
       {/* User */}
       <div className='right'>

diff --git a/components/Order/OrderItemComponent.tsx b/components/Order/OrderItemComponent.tsx
@@ -21,7 +21,7 @@ function OrderItemComponent(props:Props) {
   return (
     <Row className="my-[2vh]">
       <Col span={6}>
-        <Image src={product.product.image.src} />
+        <Image src={product.product.image.src} width={100} height={100}/>
       </Col>
       <Col span={6}>
         <InputNumber

diff --git a/components/Product/Product.tsx b/components/Product/Product.tsx
@@ -1,9 +1,10 @@
-import { Button, ConfigProvider, Tooltip, Typography } from "antd"
+import { Button, Col, ConfigProvider, message, Modal, notification, Row, Tooltip, Typography } from "antd"
 import Image from "next/image"
 import ProductImage from '../../public/resource/product/product.png'
 import { PlusOutlined } from '@ant-design/icons';
 import convertToDongString from "../../utils/convert";
 import { store } from "../../store";
+import { useState } from "react";
 
 type IProps = {
   product: any,
@@ -13,28 +14,81 @@ function Product({product}: IProps) : JSX.Element {
 
   const handleAddProduct = () => {
     dispatch.user.addProductCart(product);
+    notification.success({
+      message: 'Thêm sản phẩm thành công',
+      description: 'Bạn đã thêm sản phẩm ' + product.name + ' vào giỏ hàng',
+      duration: 2,
+    });
   }
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
-    product && <div className="product-card">
-    <Image src={product.image.src} width={150} height={150} alt={"product"} />
-    <div className="w-full">
-      <Typography.Title level={5}>{product.name}</Typography.Title>
-      <div className="info w-full">
-        <Typography.Title level={5}>{convertToDongString(product.price)}</Typography.Title>
-        <Tooltip title="Mua ngay">
-          <ConfigProvider
-          theme={{
-            token: {
-              colorPrimary: '#FF4206',
-            },
-          }}
-          >
-            <Button type="primary" shape="circle" icon={<PlusOutlined />} onClick={handleAddProduct}/>
-          </ConfigProvider>
-        </Tooltip>
-      </div>
-    </div>
-  </div>
+    <>
+      {
+        product && (<div className="product-card">
+          <Tooltip title="Xem chi tiết">
+            <Image src={product.image.src} width={150} height={150} alt={"product"} onClick={showModal}/>
+          </Tooltip>
+        <div className="w-full">
+          <Typography.Title level={5}>{product.name}</Typography.Title>
+          <div className="info w-full">
+            <Typography.Title level={5}>{convertToDongString(product.price)}</Typography.Title>
+            <Tooltip title="Mua ngay">
+              <ConfigProvider
+              theme={{
+                token: {
+                  colorPrimary: '#FF4206',
+                },
+              }}
+              >
+                <Button type="primary" shape="circle" icon={<PlusOutlined />} onClick={handleAddProduct}/>
+              </ConfigProvider>
+            </Tooltip>
+          </div>
+        </div>
+      </div>)
+      }
+    {
+      product && (
+        <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} closable={false} footer={false}>
+        <Row>
+          <Col span={12}>
+            <Image src={product.image.src} width={150} height={150} alt={"product"} onClick={showModal}/>
+          </Col>
+          <Col span={12}>
+            <Typography.Title level={5}>Tên sản phẩm: {product.name}</Typography.Title>
+            <Typography.Title level={5}>Số lượng: {product.quantity}</Typography.Title>
+            <Typography.Title level={5}>Nhà cung cấp: {product.shop}</Typography.Title>
+            <Typography.Title level={5}>Đơn giá: {convertToDongString(product.price)}</Typography.Title>
+            <ConfigProvider
+              theme={{
+                token: {
+                  colorPrimary: '#FF4206',
+                },
+              }}
+              >
+            <Button type="primary"icon={<PlusOutlined />} onClick={handleAddProduct}>Thêm vào giỏ hàng</Button>
+              </ConfigProvider>
+
+          </Col>
+        </Row>
+      </Modal>
+      )
+    }
+    </>
   )
 }
 

diff --git a/components/Product/ProductList.tsx b/components/Product/ProductList.tsx
@@ -1,24 +1,36 @@
 import { Skeleton, Typography } from "antd"
 import { useEffect, useState } from "react"
-import { getProductsFromFirebaseBasedOnCategory } from "../../utils/firebase"
+import { getProductsFromFirebaseBasedOnShop } from "../../utils/firebase"
 import Product from "./Product"
 
-function ProductList({category, products} : any) : JSX.Element {
+function ProductList({category, products, loadingSkeleton=true} : any) : JSX.Element {
   return (
-    <div className="product-list bg-white">
-      <div className="product-list-title">{category}<div></div></div>
-      <div className="product-list-content">
-      {
-        products.length == 0 ? <Skeleton /> : (
-          products.map((product : any) => {
-            return (
-              <Product key={product.id} product={product} />
+    <>
+    {loadingSkeleton && (
+        <div className="product-list bg-white">
+          <div className="product-list-title">{category}<div></div></div>
+            <Skeleton loading={loadingSkeleton}/> 
+        </div>
+        ) }
+    {
+      products.length !== 0 && (
+        <div className="product-list bg-white">
+          <div className="product-list-title">{category}<div></div></div>
+          <div className="product-list-content">
+          {
+            products.length == 0 ? <Skeleton /> : (
+              products.map((product : any) => {
+                return (
+                  <Product key={product.id} product={product} />
+                )
+              })
             )
-          })
+          }
+          </div>
+        </div>
         )
       }
-      </div>
-    </div>
+    </>
   )
 }
 

diff --git a/container/HomeContainer.tsx b/container/HomeContainer.tsx
@@ -4,35 +4,71 @@ import ProductList from '../components/Product/ProductList'
 
 import { useEffect, useState } from 'react';
 import { getAllProductsFromFirebase } from '../utils/firebase';
-import { message } from 'antd';
+import { Avatar, message, Segmented } from 'antd';
 import { collection, onSnapshot } from 'firebase/firestore';
 import { db } from '../utils/firebase';
-function HomeContainer({ user, setUser,products,loading }: any): JSX.Element {
+import { UserOutlined } from '@ant-design/icons';
+function HomeContainer({ user, setUser,products,loading, setShopSelect, loadingSkeleton }: any): JSX.Element {
 
 
 
   const filterCategoryProducts = (category: string) => {
     return products.filter((product: any) => product.category === category)
   }
 
+
   const randomProducts = products
     .sort(() => Math.random() - 0.5) // Shuffle the array
     .slice(0, 4); // Take the first 4 elements
 
 
   const CategoryTitle = ["Đồ Ăn", "Đồ Uống", "Khác"];
   return (
-    <>
+    <div className='bg-white'>
       <LandingUI products={randomProducts} />
+      <div className='flex justify-center my-10'>
+      <Segmented
+      className='bg-white'
+      onChange={(value) => setShopSelect(value)}
+      options={[
+        {
+          label: (
+            <div style={{ padding: 4 }}>
+              <Avatar src="https://firebasestorage.googleapis.com/v0/b/candup-622d8.appspot.com/o/download%20(1).png?alt=media&token=91ed63fb-6467-4375-9a40-4a7d37af6cd5" />
+              <div>711</div>
+            </div>
+          ),
+          value: '711',
+        },
+        {
+          label: (
+            <div style={{ padding: 4 }}>
+              <Avatar src="https://firebasestorage.googleapis.com/v0/b/candup-622d8.appspot.com/o/download.png?alt=media&token=97b3d33f-3e32-4a42-b856-1d1b9dbc53e1"/>
+              <div>Laha Coffee</div>
+            </div>
+          ),
+          value: 'Laha Coffee',
+        },
+        {
+          label: (
+            <div style={{ padding: 4 }}>
+              <Avatar src="https://firebasestorage.googleapis.com/v0/b/candup-622d8.appspot.com/o/download.jfif?alt=media&token=26ed692c-7b20-4233-9381-e4f83ee7441a" />
+              <div>Passio</div>
+            </div>
+          ),
+          value: 'Passio',
+        },
+      ]}
+    />
+      </div>
       {
         CategoryTitle.map((category) => {
-          console.log("category", category)
           return (
-            <ProductList category={category} products={filterCategoryProducts(category)} loading={loading} />
+            <ProductList category={category} products={filterCategoryProducts(category)} loading={loading} loadingSkeleton={loadingSkeleton}/>
           )
         })
       }
-    </>
+    </div>
   )
 }