Main

app/admin/layout.tsx

@@ -1,11 +1,32 @@
+"use client"
 import Link from 'next/link';
 import { FunctionComponent, ReactNode } from 'react';
+import { useSession } from 'next-auth/react';
+import Loading from '@/react/components/loading';
+import { redirect } from 'next/navigation';
 
 interface LayoutShopProps {
   children: ReactNode;
 }
 
+// export async function getServerSideProps() {
+//   const res ='bxnmcbvnxmcbv'
+// console.log(res);
+//   return {
+//     props: { res }
+//   }
+// }
+
 const LayoutShop: FunctionComponent<LayoutShopProps> = ({ children }) => {
+  const {data:session, status}=useSession();
+
+  if(status=='loading'){
+    return  <Loading/>
+  }
+  if(status=='unauthenticated'){
+    redirect('/auth')
+  }
+if(status=='authenticated')
   return (
     <div className="container flex py-15">
       <ul className="mr-8 w-[300px] shrink-0 rounded border border-eatly-violet-200">
@@ -17,26 +38,33 @@ const LayoutShop: FunctionComponent<LayoutShopProps> = ({ children }) => {
             User
           </Link>
         </li>
-        <li>
-          <Link
-            className="mt-[-1px] block border-b border-eatly-violet-200 p-2 text-lg font-medium"
-            href="../../admin/shop"
-          >
-            Shop
-          </Link>
-          <ul className="pl-6">
-            <li className="border-b border-eatly-violet-200 p-2 font-medium">
-              <Link href="../../admin/shop/types">Types</Link>
-            </li>
-            <li className="border-b border-eatly-violet-200 p-2 font-medium">
-              <Link href="../../admin/shop/categories">Categories</Link>
-            </li>
-          </ul>
-        </li>
+        {
+         session&&session.user && session.user.role==="ADMIN"&& <li>
+            <Link
+              className="mt-[-1px] block border-b border-eatly-violet-200 p-2 text-lg font-medium"
+              href="../../admin/shop"
+            >
+              Shop
+            </Link>
+            <ul className="pl-6">
+              <li className="border-b border-eatly-violet-200 p-2 font-medium">
+                <Link href="../../admin/shop/types">Types</Link>
+              </li>
+              <li className="border-b border-eatly-violet-200 p-2 font-medium">
+                <Link href="../../admin/shop/categories">Categories</Link>
+              </li>
+              <li className="border-b border-eatly-violet-200 p-2 font-medium">
+                <Link href="../../admin/shop/products">Products</Link>
+              </li>
+            </ul>
+          </li>
+        }
+
       </ul>
       <div className="grow">{children}</div>
     </div>
   );
+return <p>Error</p>
 };
 
 export default LayoutShop;

app/admin/shop/categories/page.tsx

@@ -1,31 +1,57 @@
 'use client';
 import { productCategoryController } from '@/controllers';
-import BtnRemove from '@/react/components/buttons/btn-remove';
-import CategoryItem from '@/react/components/search/category-item';
+import Loading from '@/react/components/loading';
 import CategoryForm from '@/react/sections/admin/category-page/category-form';
+import CategoryItemsAdmin from '@/react/sections/admin/category-page/category-items-admin';
 import { Category } from '@/types';
 import { FunctionComponent, useEffect, useState } from 'react';
 
 const CategoriesAdmin: FunctionComponent = () => {
   const [fakeUrlImg, setFakeUrlImg] = useState<string>('');
-  const [category, setCategory] = useState<Category>();
+  const [category, setCategory] = useState<Category | null>(null);
   const [categories, setCategories] = useState<Category[]>();
+  const [errorRequest, setErrorRequest] = useState<string>();
+  const [isLoadingCategories, setIsLoadingCategories] = useState(false);
+
+  function getCategories() {
+    if (!categories) setIsLoadingCategories(true);
+    productCategoryController.getAll().then(
+      (data) => {
+        setCategories(data.data);
+        setIsLoadingCategories(false);
+      },
+      () => {
+        setIsLoadingCategories(false);
+      },
+    );
+  }
   useEffect(() => {
-    productCategoryController.getAll().then((data) => {
-      setCategories(data);
-      console.log(data);
-    });
+    getCategories();
   }, []);
   useEffect(() => {
     if (category) setCategory({ ...category, image: fakeUrlImg });
   }, [fakeUrlImg]);
+  useEffect(() => {
+    if (errorRequest) {
+      setTimeout(() => {
+        setErrorRequest('');
+      }, 4000);
+    }
+  }, [errorRequest]);
   return (
     <div>
       <CategoryForm
         imgFakeUrl={fakeUrlImg}
-        onSave={async (data) => {
-          const result = await productCategoryController.create(data);
-          console.log(result);
+        onSave={(data) => {
+          productCategoryController.create(data).then(
+            () => {
+              getCategories();
+              setCategory(null);
+            },
+            (data) => {
+              setErrorRequest(data.message);
+            },
+          );
         }}
         onChange={(data) => {
           if (data) setCategory({ ...data, image: fakeUrlImg });
@@ -34,28 +60,20 @@ const CategoriesAdmin: FunctionComponent = () => {
           setFakeUrlImg(url);
         }}
       />
-      {category && (
-        <>
-          <p className="mb-2 mt-10 text-xl font-bold text-eatly-black-100">Preview</p>
-          <CategoryItem item={category} isSelect={true} className="max-w-28" />
-        </>
-      )}
-      {categories && categories.length > 0 ? (
-        <div className="flex flex-wrap">
-          {categories.map((category) => (
-            <div key={category.id} className="relative">
-              <BtnRemove
-                className="absolute right-3 top-3 hover:scale-110"
-                onClick={() => {
-                  if (category.id) productCategoryController.remove(category.id);
-                }}
-              />
-              {/* <CategoryItem className="m-2 w-[108px]" item={{ ...category, image: undefined }} /> */}
-            </div>
-          ))}
-        </div>
+      {errorRequest && <p className="text-red-400">{errorRequest}</p>}
+
+      {isLoadingCategories ? (
+        <Loading className="mt-9" />
       ) : (
-        <div></div>
+        categories && (
+          <CategoryItemsAdmin
+            categories={categories}
+            onRemove={(category) => {
+              productCategoryController.remove(category.id!);
+              getCategories();
+            }}
+          />
+        )
       )}
     </div>
   );

app/admin/shop/products/page.tsx

@@ -0,0 +1,16 @@
+'use client'
+import React from 'react';
+import ProductForm from '@/react/sections/admin/product-page/product-form';
+import { ProductController } from '@/controllers/product_controller';
+
+const Products = () => {
+  return (
+    <div>
+      <ProductForm onSave={(data)=>{
+        ProductController.create(data);
+      }}/>
+    </div>
+  );
+};
+
+export default Products;

app/admin/shop/types/page.tsx

@@ -6,28 +6,33 @@ import { TypeDTO } from '@/types';
 import { FunctionComponent, useEffect, useState } from 'react';
 
 const AdminTypesPage: FunctionComponent = () => {
-  const [typesData, setTypesData] = useState<{ types: TypeDTO[]; status: number }>();
+  const [typesData, setTypesData] = useState<{ types?: TypeDTO[]; status: number }>();
   const [selectType, setSelectType] = useState<TypeDTO>();
   const getTypes = () => {
-    productTypeController.getAll().then((resp) => {
-      setTypesData({ status: resp.status, types: resp.data });
-    });
+    productTypeController.getAll().then(
+      (resp) => {
+        setTypesData({ status: resp.status, types: resp.data });
+      },
+      (data) => {
+        setTypesData({ status: data.status });
+      },
+    );
   };
 
   useEffect(() => {
     getTypes();
   }, []);
+  useEffect(() => {
+    console.log(typesData);
+  }, [typesData]);
   return (
     <div className="">
       <TypeForm
         className="mb-6"
         type={selectType}
         onSave={(type) => {
-          console.log(type);
           if (type.id) {
-            console.log('edit');
             productTypeController.update(type).then((data) => {
-              console.log(data);
               if (data.status === 200) {
                 getTypes();
               }