show fav list and remove from fav

app/controllers/UserController.js

@@ -12,7 +12,7 @@ const UserController = {
   async index(req, res) {
     let userAll = await db.user.findMany();
     db.$disconnect();
-    for(let i = 0; i < userAll.length; i++) {
+    for (let i = 0; i < userAll.length; i++) {
       delete userAll[i].google_token;
       delete userAll[i].rank;
       delete userAll[i].password;
@@ -52,6 +52,7 @@ const UserController = {
           name,
           email,
           phone,
+          address: "",
           photo,
           username,
           password,

app/controllers/WishlistController.js

@@ -58,8 +58,8 @@ const WishlistController = {
           user_id: Number(req.user.id),
         },
       });
-      if(!wishlist_find)throw 400;
-      await db.wishlist.delete({where: {id: wishlist_find.id}})
+      if (!wishlist_find) throw 400;
+      await db.wishlist.delete({ where: { id: wishlist_find.id } });
       await db.$disconnect();
       res.json({ status: 401, message: "remove fav success" });
     } catch (err) {

prisma/migrations/20231002144825_dev/migration.sql

+/*
+  Warnings:
+
+  - Added the required column `count` to the `order_detail` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE `order` ADD COLUMN `address` LONGTEXT NOT NULL DEFAULT '';
+
+-- AlterTable
+ALTER TABLE `order_detail` ADD COLUMN `count` INTEGER NOT NULL;
+
+-- AlterTable
+ALTER TABLE `user` ADD COLUMN `address` LONGTEXT NOT NULL DEFAULT '';

prisma/schema.prisma

@@ -15,7 +15,7 @@ model user {
   name          String
   email         String
   phone         String
-  address       String         @db.LongText
+  address       String         @db.LongText @default("")
   photo         String         @db.LongText
   google_token  String
   username      String         @unique
@@ -74,7 +74,7 @@ model order {
   user           user           @relation(fields: [user_id], references: [id])
   total_price    Int
   product_count  Int
-  address        String         @db.LongText
+  address        String         @db.LongText @default("")
   date           DateTime       @default(now())
   shipping_price Int
   pay_status     Int

src/pages/login.js

-import { Box, Button, Divider, Grid, TextField } from "@mui/material";
+import { Box, Button, Divider, Grid, Paper, TextField } from "@mui/material";
 import { Snackbar } from "@mui/material";
 import React from "react";
 import { useContext } from "react";
@@ -20,7 +20,9 @@ export default function Login() {
   if (user.value?.name)
     return (
       <div>
-        <h3>{user.value.name}</h3>
+        <Paper className="m-auto" sx={{ p: 1, maxWidth: 200  }}>
+          <h3 className="text-center">คุณเข้าสู่ระบบแล้ว</h3>
+        </Paper>
       </div>
     );
 
@@ -35,8 +37,8 @@ export default function Login() {
     if (response.data.status === 201) {
       const usrsto = new userCookie();
       usrsto.store(response.data.token);
-      window.location.href = '/'
-   } else if (response.data.status === 203) {
+      window.location.href = "/";
+    } else if (response.data.status === 203) {
       setErrorMessage("ชื่อผู้ใช้หรือระหัสผ่านไม่ถูกต้อง");
       setTimeout(() => {
         setErrorMessage("");

src/pages/register.js

@@ -8,8 +8,10 @@ import { Google } from "@mui/icons-material";
 import { useState } from "react";
 import axios from "axios";
 import Head from "next/head";
+import { useRouter } from "next/router";
 
 export default function Login() {
+  const router = useRouter();
   const [errorMessage, setErrorMessage] = useState("");
   const [successMessage, setSuccessMessage] = useState("");
   const user = useContext(UserContext);
@@ -20,13 +22,9 @@ export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
-  if (user.value?.name)
-    return (
-      <div>
-        <h3>{user.value.name}</h3>
-      </div>
-    );
-
+  if (user.value?.name) {
+    router.push({ pathname: "/" });
+  }
   /**
    *
    * @param {FormDataEvent} e
@@ -46,12 +44,12 @@ export default function Login() {
       setTimeout(() => {
         setSuccessMessage("");
       }, 3000);
-      setName("")
-      setEmail("")
-      setPhone("")
-      setImage("")
-      setUsername("")
-      setPassword("")
+      setName("");
+      setEmail("");
+      setPhone("");
+      setImage("");
+      setUsername("");
+      setPassword("");
     } else if (response.data.status === 202) {
       setErrorMessage("ชื่อผู้ใช้งานนี้ถูกใช้แล้ว กรุณาลองใหม่อีกครั้ง");
       setTimeout(() => {

src/pages/wishlist.js

+import {
+  Box,
+  Button,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import React, { useContext, useEffect, useState } from "react";
+import { UserContext, WishlistContext } from "./_app";
+import { useRouter } from "next/router";
+import axios from "axios";
+import { Delete } from "@mui/icons-material";
+import { ShoppingCart } from "@mui/icons-material";
+import PopupAlert from "@/components/PopupAlert";
+
+export default function Wishlist() {
+  const user = useContext(UserContext);
+  const wishlist = useContext(WishlistContext);
+  const [products, setProducts] = useState([]);
+  const [message, setMessage] = useState({ error: false, message: "" });
+  const router = useRouter();
+  const [wishlistProduct, setWishlistProduct] = useState([]);
+
+  const removeFromWishlist = async (id) => {
+    try {
+      let response = await axios.delete(`/api/u/wishlist?id=${id}`, {
+        headers: { token: user.value.token },
+      });
+      fetchWishlist();
+      setMessage({ message: "นำออกจากรายการแล้ว", error: false });
+      setTimeout(() => {
+        setMessage({ message: "", error: false });
+      }, 2000);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const fetchWishlist = async () => {
+    try {
+      let response = await axios.get("/api/u/wishlist", {
+        headers: { token: user.value.token },
+      });
+      wishlist.set(response.data.wishlists);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const fetchProduct = async () => {
+    try {
+      let product = await axios.get("/api/product");
+      setProducts(product.data);
+    } catch (err) {}
+  };
+
+  useEffect(() => {
+    fetchProduct();
+  }, []);
+
+  useEffect(() => {
+    console.log(wishlist.value);
+    setWishlistProduct(
+      wishlist.value.map(
+        (wish) => products.filter((pd) => pd.id === wish.product_id)[0]
+      )
+    );
+  }, [wishlist, products]);
+
+  return (
+    <Box>
+      <PopupAlert
+        open={!!message.message.length}
+        isError={message.error}
+        message={message.message}
+      />
+      <Paper sx={{ p: 1, overflowX: "scroll" }}>
+        {wishlist.value.length > 0 ? (
+          <Table>
+            <TableHead>
+              <TableRow>
+                {[
+                  "ลำดับ",
+                  "รูปภาพ",
+                  "ชื่อสินค้า",
+                  "รายละเอียด",
+                  "ราคา",
+                  "เพิ่มลงตระกร้า",
+                  "นำออกจากรายการ",
+                ].map((label, idx) => (
+                  <TableCell key={idx}>{label}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {wishlistProduct.map(
+                (pdt, idx) =>
+                  pdt && (
+                    <TableRow key={idx}>
+                      <TableCell>{idx + 1}</TableCell>
+                      <TableCell>
+                        <img
+                          width={100}
+                          src={pdt.image?.length ? pdt.image : "/empty.jpg"}
+                          alt="รูปสินค้า"
+                        />
+                      </TableCell>
+                      <TableCell>{pdt.name}</TableCell>
+                      <TableCell>
+                        <div className="max-h-10  overflow-scroll">
+                          {pdt.detail}
+                        </div>
+                      </TableCell>
+                      <TableCell>{pdt.price}</TableCell>
+                      <TableCell>
+                        <Button color="warning">
+                          <ShoppingCart />
+                        </Button>
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          color="error"
+                          onClick={() => removeFromWishlist(pdt.id)}
+                        >
+                          <Delete />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  )
+              )}
+            </TableBody>
+          </Table>
+        ) : (
+          <div className="text-center">รายการว่างเปล่า</div>
+        )}
+      </Paper>
+    </Box>
+  );
+}