From 0f1df659198ac07cf4ea0085a27e462fd805cdb5 Mon Sep 17 00:00:00 2001
From: merto <mertenercan@gmail.com>
Date: Thu, 14 Sep 2023 14:43:30 +0300
Subject: [PATCH]  - orders page template

---
 actions/order.ts                              |  5 ++-
 app/api/user/orders/route.ts                  | 22 ++++++++++++
 app/orders/page.tsx                           | 34 +++++++++++++++++++
 components/Cards/OrderCard/index.tsx          | 23 +++++++++++++
 components/Header/index.tsx                   |  2 +-
 components/Header/user-actions/index.tsx      |  8 ++---
 .../form-section/items/index.tsx              | 12 +++++--
 .../orders-page/orders-section/index.tsx      | 24 +++++++++++++
 .../orders-page/title-section/index.tsx       | 17 ++++++++++
 .../product-page/item-section/index.tsx       | 32 +++++++++--------
 libs/endpoints.ts                             |  5 +++
 .../migrations/20230914090140_/migration.sql  |  8 +++++
 .../migrations/20230914091101_/migration.sql  |  2 ++
 .../migrations/20230914091541_/migration.sql  |  9 +++++
 prisma/schema.prisma                          |  1 +
 services/dateTimeFormatter.ts                 | 13 +++++++
 types/Order.ts                                | 10 ++++++
 types/User.ts                                 |  1 +
 18 files changed, 205 insertions(+), 23 deletions(-)
 create mode 100644 app/api/user/orders/route.ts
 create mode 100644 app/orders/page.tsx
 create mode 100644 components/Cards/OrderCard/index.tsx
 create mode 100644 containers/orders-page/orders-section/index.tsx
 create mode 100644 containers/orders-page/title-section/index.tsx
 create mode 100644 prisma/migrations/20230914090140_/migration.sql
 create mode 100644 prisma/migrations/20230914091101_/migration.sql
 create mode 100644 prisma/migrations/20230914091541_/migration.sql
 create mode 100644 services/dateTimeFormatter.ts
 create mode 100644 types/Order.ts

diff --git a/actions/order.ts b/actions/order.ts
index b8a8c2c..dc9b636 100644
--- a/actions/order.ts
+++ b/actions/order.ts
@@ -12,21 +12,24 @@ export const orderHandler = async (user: TUser) => {
         },
       });
       if (targetUser) {
+
         const res = await prisma.order.create({
           data: {
             products: user.basket,
             userId: targetUser.id,
             price: targetUser.totalPrice,
+            date: new Date()
           },
         });
         if (res.id) {
+          let test = user.basket.length = 0
           const updatedUser = await prisma.user.update({
             where: {
               email: user.email,
             },
             data: {
               totalPrice: 0,
-              basket: [],
+              basket: []
             },
           });
           return updatedUser;
diff --git a/app/api/user/orders/route.ts b/app/api/user/orders/route.ts
new file mode 100644
index 0000000..d0709c2
--- /dev/null
+++ b/app/api/user/orders/route.ts
@@ -0,0 +1,22 @@
+import { prisma } from "@/db/client";
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: NextRequest) {
+  const { userId } = await request.json();
+  try {
+    const res = await prisma.order.findMany({
+      where: {
+        userId: userId,
+      },
+    });
+
+    return NextResponse.json({ data: res });
+  } catch (err) {
+    console.log(err);
+  } finally {
+    await prisma.$disconnect();
+  }
+}
diff --git a/app/orders/page.tsx b/app/orders/page.tsx
new file mode 100644
index 0000000..c0be65b
--- /dev/null
+++ b/app/orders/page.tsx
@@ -0,0 +1,34 @@
+import OrdersOrdersSection from "@/containers/orders-page/orders-section";
+import OrdersTitleSection from "@/containers/orders-page/title-section";
+import React, { FC } from "react";
+import createClient from "@/db/client";
+import axios from "axios";
+import { redirect } from "next/navigation";
+import { getOrders } from "@/libs/endpoints";
+
+interface OrdersPageProps {}
+
+const getUserOrders = async (id: string) => {
+  const { data } = await axios.post(getOrders, {});
+  return data;
+};
+const OrdersPage: FC<OrdersPageProps> = async ({}) => {
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    redirect("/");
+  }
+  const { data } = await getUserOrders(user.email ?? user.user_metadata.email);
+
+  return (
+    <main>
+      <OrdersTitleSection />
+      <OrdersOrdersSection orders={data} />
+    </main>
+  );
+};
+
+export default OrdersPage;
diff --git a/components/Cards/OrderCard/index.tsx b/components/Cards/OrderCard/index.tsx
new file mode 100644
index 0000000..0af0678
--- /dev/null
+++ b/components/Cards/OrderCard/index.tsx
@@ -0,0 +1,23 @@
+import { TOrder } from '@/types/Order';
+import React, { FC } from 'react'
+
+interface OrderCardProps {
+  order:TOrder
+}
+
+const OrderCard: FC<OrderCardProps> = ({ order }) => {
+  return (
+    <div className='w-max h-max rounded-lg shadow-lg p-6'>
+        <div>
+            <h1 className='text-black text-base'>{order.date.toString(
+
+            )}</h1>
+        </div>
+        <div>
+
+        </div>
+    </div>
+  )
+}
+
+export default OrderCard;
\ No newline at end of file
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 38052e1..96c3eec 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -44,7 +44,7 @@ const Header: FC<HeaderProps> = async ({ user }) => {
             <HeaderNav key={_i} value={el.value} id={el.id} href={el.href} />
           ))}
         </nav>
-        {targetUser && <HeaderUserActions targetUser={targetUser} />}
+        <HeaderUserActions targetUser={targetUser} />
         <div className="flex lg:hidden">
           <HamburgerButton />
         </div>
diff --git a/components/Header/user-actions/index.tsx b/components/Header/user-actions/index.tsx
index 2340dcf..d908bd5 100644
--- a/components/Header/user-actions/index.tsx
+++ b/components/Header/user-actions/index.tsx
@@ -3,18 +3,16 @@ import PrimaryButton from "@/components/Buttons/PrimaryButton";
 import { Basket } from "@/components/Icons/Basket";
 import { Profile } from "@/components/Icons/Profile";
 import { handleSignOut } from "@/db/auth";
-import { postBasket } from "@/libs/endpoints";
 import { useUserStore } from "@/store/useUserStore";
 import { TUser } from "@/types/User";
 import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
-import axios from "axios";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React, { FC, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
 interface HeaderUserActionsProps {
-  targetUser: TUser;
+  targetUser?: TUser;
 }
 
 const HeaderUserActions: FC<HeaderUserActionsProps> = ({ targetUser }) => {
@@ -32,7 +30,7 @@ const HeaderUserActions: FC<HeaderUserActionsProps> = ({ targetUser }) => {
   };
 
   const getUser = async () => {
-    if (!user) {
+    if (!user&&targetUser) {
       handleUser(targetUser);
     }
   };
@@ -54,7 +52,7 @@ const HeaderUserActions: FC<HeaderUserActionsProps> = ({ targetUser }) => {
   }, []);
   return (
     <div className={`gap-6 w-40 justify-end hidden lg:flex `}>
-      <div className="flex relative flex-col">
+      <div className={`flex relative flex-col ${user ? 'flex' : 'hidden'}`}>
         <Link href={"/checkout"}>
           <div className="flex">
             <Basket />
diff --git a/containers/checkout-page/form-section/items/index.tsx b/containers/checkout-page/form-section/items/index.tsx
index 4bbadd5..98fac20 100644
--- a/containers/checkout-page/form-section/items/index.tsx
+++ b/containers/checkout-page/form-section/items/index.tsx
@@ -2,17 +2,22 @@
 import { orderHandler } from "@/actions/order";
 import PrimaryButton from "@/components/Buttons/PrimaryButton";
 import BasketCard from "@/components/Cards/BasketCard";
+import useCreateQueryString from "@/hooks/useQueryString";
 import { postBasket } from "@/libs/endpoints";
 import { useUserStore } from "@/store/useUserStore";
 import axios from "axios";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { FC } from "react";
+import { toast } from "react-toastify";
 
 interface BasketItemsProps {}
 
 const BasketItems: FC<BasketItemsProps> = ({}) => {
   const { user, handleUser } = useUserStore();
   const router = useRouter();
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+  const createQueryString = useCreateQueryString()
   const removeBasketItems = async () => {
     const { data } = await axios.post(postBasket, {
       action: "wipe",
@@ -40,6 +45,9 @@ const BasketItems: FC<BasketItemsProps> = ({}) => {
     const updatedUser = await orderHandler(user);
     if (updatedUser) {
       handleUser(updatedUser);
+      router.push(pathname + "?" + createQueryString('complate','true'))
+    }else{
+       toast.error('error')
     }
   };
   return (
@@ -49,7 +57,7 @@ const BasketItems: FC<BasketItemsProps> = ({}) => {
       </div>
       <div className="flex flex-wrap justify-between self-start">
         {user?.basket.map((el, _i) => (
-          <BasketCard item={el} />
+          <BasketCard key={_i} item={el} />
         ))}
       </div>
       <div className="flex gap-2">
diff --git a/containers/orders-page/orders-section/index.tsx b/containers/orders-page/orders-section/index.tsx
new file mode 100644
index 0000000..9a2d73f
--- /dev/null
+++ b/containers/orders-page/orders-section/index.tsx
@@ -0,0 +1,24 @@
+import OrderCard from '@/components/Cards/OrderCard';
+import { TBasketItem } from '@/types/BasketItem';
+import { TOrder } from '@/types/Order';
+import React, { FC } from 'react'
+
+interface OrdersOrdersSectionProps {
+  orders:TOrder[]
+}
+
+// WHAT A COMPONENT NAME LOL
+const OrdersOrdersSection: FC<OrdersOrdersSectionProps> = ({ orders }) => {
+console.log(orders)
+  return (
+    <section className="flex w-full justify-center">
+      <div className="flex flex-col py-10 md:py-28 items-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
+        {orders.map((el,_i) => (
+            <OrderCard key={_i} order={el}/>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default OrdersOrdersSection;
\ No newline at end of file
diff --git a/containers/orders-page/title-section/index.tsx b/containers/orders-page/title-section/index.tsx
new file mode 100644
index 0000000..b443f81
--- /dev/null
+++ b/containers/orders-page/title-section/index.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react'
+
+interface OrdersTitleSectionProps {
+  
+}
+
+const OrdersTitleSection: FC<OrdersTitleSectionProps> = ({  }) => {
+  return (
+    <section className="flex w-full justify-center">
+      <div className="flex flex-col py-10 md:py-28 items-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
+        <h1 className="text-2xl lg:text-6xl text-black font-bold">Your Orders</h1>
+      </div>
+    </section>
+  )
+}
+
+export default OrdersTitleSection;
\ No newline at end of file
diff --git a/containers/product-page/item-section/index.tsx b/containers/product-page/item-section/index.tsx
index a976955..938e09d 100644
--- a/containers/product-page/item-section/index.tsx
+++ b/containers/product-page/item-section/index.tsx
@@ -34,20 +34,24 @@ const ItemSection: FC<ItemSectionProps> = ({ item }) => {
       (color) => color === selectedColor
     ).length;
     if (isValidColor > 0) {
-      const { data } = await axios.post(postBasket, {
-        action: "add",
-        user: user,
-        payload: {
-          item: item,
-          id: cryptoRandomString({ length: 15 }),
-          color: selectedColor,
-        },
-      });
-      if (data) {
-        toast.success(item.name+'Successfully added to your basket!')
-        return handleUser(data.result);
-      } else {
-        return toast.error("Something Went Wrong");
+      try {
+        const { data } = await axios.post(postBasket, {
+          action: "add",
+          user: user,
+          payload: {
+            item: item,
+            id: cryptoRandomString({ length: 15 }),
+            color: selectedColor,
+          },
+        });
+        if (data) {
+          toast.success(item.name + "Successfully added to your basket!");
+          return handleUser(data.result);
+        } else {
+          return toast.error("Something Went Wrong");
+        }
+      } catch (err) {
+        return toast.error("You need to Login first");
       }
     }
     return toast.error("Wrong color");
diff --git a/libs/endpoints.ts b/libs/endpoints.ts
index 398c77e..489f53c 100644
--- a/libs/endpoints.ts
+++ b/libs/endpoints.ts
@@ -16,3 +16,8 @@ export const postBasket =
   (process.env.NEXT_PUBLIC_SITE_URL ??
     process?.env?.NEXT_PUBLIC_VERCEL_URL ??
     "http://localhost:3000") + "/api/user/basket";
+
+export const getOrders =
+  (process.env.NEXT_PUBLIC_SITE_URL ??
+    process?.env?.NEXT_PUBLIC_VERCEL_URL ??
+    "http://localhost:3000") + "/api/user/orders";
diff --git a/prisma/migrations/20230914090140_/migration.sql b/prisma/migrations/20230914090140_/migration.sql
new file mode 100644
index 0000000..6841f6c
--- /dev/null
+++ b/prisma/migrations/20230914090140_/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `date` to the `Order` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Order" ADD COLUMN     "date" TIMESTAMP(3) NOT NULL;
diff --git a/prisma/migrations/20230914091101_/migration.sql b/prisma/migrations/20230914091101_/migration.sql
new file mode 100644
index 0000000..970f95a
--- /dev/null
+++ b/prisma/migrations/20230914091101_/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Order" ALTER COLUMN "date" SET DATA TYPE TEXT;
diff --git a/prisma/migrations/20230914091541_/migration.sql b/prisma/migrations/20230914091541_/migration.sql
new file mode 100644
index 0000000..2501cb3
--- /dev/null
+++ b/prisma/migrations/20230914091541_/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - Changed the type of `date` on the `Order` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "Order" DROP COLUMN "date",
+ADD COLUMN     "date" TIMESTAMP(3) NOT NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 4e49993..6db00d7 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -46,6 +46,7 @@ model Order {
   user      User    @relation(fields: [userId], references: [id])
   userId    Int
   price Float
+  date  DateTime
 }
 
 enum Category {
diff --git a/services/dateTimeFormatter.ts b/services/dateTimeFormatter.ts
new file mode 100644
index 0000000..8a7eb5c
--- /dev/null
+++ b/services/dateTimeFormatter.ts
@@ -0,0 +1,13 @@
+export const formatDateToSQLDateTime = (date: Date) : string => {
+    // Get the ISO string of the Date object
+    const isoString = date.toISOString();
+  
+    // Extract the date and time components
+    const datePart = isoString.slice(0, 10);
+    const timePart = isoString.slice(11, 19);
+  
+    // Combine them in the SQL datetime format
+    const sqlDateTime = `${datePart} ${timePart}`;
+  
+    return sqlDateTime;
+}
\ No newline at end of file
diff --git a/types/Order.ts b/types/Order.ts
new file mode 100644
index 0000000..bde35c6
--- /dev/null
+++ b/types/Order.ts
@@ -0,0 +1,10 @@
+import { TBasketItem } from "./BasketItem"
+
+
+export type TOrder = {
+    id:number,
+    userId:number,
+    products:TBasketItem[],
+    price:number,
+    date:Date
+}
\ No newline at end of file
diff --git a/types/User.ts b/types/User.ts
index 7796014..e331e29 100644
--- a/types/User.ts
+++ b/types/User.ts
@@ -2,6 +2,7 @@
 
 import { JsonValue } from "@prisma/client/runtime/library";
 import { TProduct } from "./Product";
+import { TBasketItem } from "./BasketItem";
 
 export type TUser = TPureUser | null;