Add new files and update existing files

apps/admin/src/components/product/table-toolbar.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { Table } from "@tanstack/react-table";
-import React, { useCallback } from "react";
+import React from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { Button, Input } from "..";
 import ProductTableFilter from "./table-faceted-filter";
 import { Archive, CheckCircle, NotebookPen } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export const statuses = [
   {

apps/admin/src/types/index.ts

@@ -8,5 +8,5 @@ export * from "./mail";
 export * from "./product";
 export * from "./category";
 export * from "./toast";
-export * from "./image";
+export * from "./file";
 export * from "./attribute";

apps/web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
+    "@hookform/resolvers": "^3.3.4",
     "@icons-pack/react-simple-icons": "^9.2.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -33,13 +34,15 @@
     "animate.css": "^4.1.1",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
+    "cloudinary": "^2.0.1",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.294.0",
     "next": "14.0.4",
     "next-sitemap": "^4.2.3",
     "nextjs-toploader": "^1.6.4",
+    "query-string": "^8.2.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",
@@ -48,9 +51,11 @@
     "react-use": "^17.4.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.1",
+    "sweetalert2": "^11.10.5",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",

apps/web/src/api/index.ts

@@ -1,7 +1,7 @@
-import { capitalize, isArray } from 'lodash';
-import axios, { AxiosResponse } from 'axios';
-import toast from 'react-hot-toast';
-export const baseURL = process.env.NEXT_PUBLIC_API_URL;
+import { capitalize, isArray } from "lodash";
+import axios, { AxiosResponse } from "axios";
+import toast from "react-hot-toast";
+export const baseURL = process.env.NEXT_PUBLIC_API_URL + "/";
 
 const api = axios.create({
   baseURL,

apps/web/src/components/header/index.tsx

@@ -12,7 +12,7 @@ import {
 import { Navigation } from "./navigation";
 import { UserMenu } from "../menu";
 import { useReadLocalStorage } from "usehooks-ts";
-import { LOGGED_IN } from "@/constant";
+import { LOGGED_IN } from "@/constants";
 import { useProfile } from "@/hooks";
 
 export const Header = () => {

apps/web/src/hooks/index.ts

@@ -1,3 +1,7 @@
-export * from './useAuth';
-export * from './useProfile';
-export * from './useAddress';
+export * from "./useAuth";
+export * from "./useProfile";
+export * from "./useAddress";
+export * from "./useCategory";
+export * from "./useBrand";
+export * from "./useProduct";
+export * from "./useUploader";

apps/web/src/hooks/useAddress.ts

@@ -3,7 +3,7 @@
 import { useReadLocalStorage } from "usehooks-ts";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { LOGGED_IN } from "../constant";
+import { LOGGED_IN } from "../constants";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { IAddress } from "@/types";

apps/web/src/hooks/useAuth.tsx

@@ -1,31 +1,31 @@
-'use client';
+"use client";
 
-import toast from 'react-hot-toast';
-import { useForm } from 'react-hook-form';
-import { AUTH_API } from '../services';
-import { ILogin, IRegister } from '@/types';
-import { useLocalStorage } from 'usehooks-ts';
-import { LOGGED_IN } from '../constant';
-import { useRouter } from 'next/navigation';
-import { useQueryClient } from '@tanstack/react-query';
+import toast from "react-hot-toast";
+import { useForm } from "react-hook-form";
+import { AUTH_API } from "../services";
+import { ILogin, IRegister } from "@/types";
+import { useLocalStorage } from "usehooks-ts";
+import { LOGGED_IN } from "../constants";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
 
 export const useAuth = () => {
   const { push } = useRouter();
   const [, setLoggedIn] = useLocalStorage(LOGGED_IN, false);
   const queryClient = useQueryClient();
 
   const { handleSubmit, ...form } = useForm<ILogin & IRegister>({
-    mode: 'all',
+    mode: "all",
   });
 
   const login = handleSubmit(async (data: ILogin) => {
     try {
       toast.promise(AUTH_API.login(data), {
-        loading: 'Logging in...',
+        loading: "Logging in...",
         success: (data) => {
           setLoggedIn(true);
-          push('/dashboard');
-          return 'Logged in!';
+          push("/dashboard");
+          return "Logged in!";
         },
         error: (err) => {
           return err.message;
@@ -39,15 +39,15 @@ export const useAuth = () => {
   const signUp = handleSubmit(async (data: IRegister) => {
     try {
       toast.promise(AUTH_API.register(data), {
-        loading: 'Registering...',
+        loading: "Registering...",
         success: (message) => {
-          push('/login');
+          push("/login");
 
           return message;
         },
         error: (message) => {
           console.log(message);
-          return message || 'Something went wrong';
+          return message || "Something went wrong";
         },
       });
     } catch (error) {
@@ -58,12 +58,12 @@ export const useAuth = () => {
   const logout = async () => {
     try {
       toast.promise(AUTH_API.logout(), {
-        loading: 'Logging out...',
+        loading: "Logging out...",
         success: () => {
           setLoggedIn(false);
-          push('/');
-          queryClient.removeQueries({ queryKey: ['me'], exact: true });
-          return 'Logged out!';
+          push("/");
+          queryClient.removeQueries({ queryKey: ["me"], exact: true });
+          return "Logged out!";
         },
         error: (err) => {
           console.log(err);

apps/web/src/hooks/useBrand.tsx

@@ -0,0 +1,25 @@
+import { BRANDS } from "@/constants";
+import { BRAND_API } from "@/services";
+import { useQuery } from "@tanstack/react-query";
+import { omit } from "lodash";
+
+type UseBrandOptions = {
+  fetch?: boolean;
+};
+
+export const useBrand = (options?: UseBrandOptions) => {
+  const { fetch = false } = options || {};
+
+  const query = useQuery({
+    queryKey: [BRANDS],
+    queryFn: BRAND_API.getBrands,
+    enabled: fetch,
+  });
+
+  return {
+    data: {
+      brands: query.data || [],
+      ...omit(query, ["data"]),
+    },
+  };
+};

apps/web/src/hooks/useCategory.tsx

@@ -0,0 +1,24 @@
+import { CATEGORIES } from "@/constants";
+import { CATEGORY_API } from "@/services/category";
+import { useQuery } from "@tanstack/react-query";
+import { omit } from "lodash";
+
+type UseCategoryOptions = {
+  fetch?: boolean;
+};
+
+export const useCategory = (options?: UseCategoryOptions) => {
+  const { fetch = false } = options || {};
+  const query = useQuery({
+    queryKey: [CATEGORIES],
+    queryFn: CATEGORY_API.getCategories,
+    enabled: fetch,
+  });
+
+  return {
+    data: {
+      categories: query.data || [],
+      ...omit(query, ["data"]),
+    },
+  };
+};

apps/web/src/hooks/useProduct.tsx

@@ -0,0 +1,28 @@
+import { PRODUCTS } from "@/constants";
+import { PRODUCT_API } from "@/services";
+import { useQuery } from "@tanstack/react-query";
+import { omit } from "lodash";
+import { useSearchParams } from "next/navigation";
+import { getQueries } from "@/utils";
+
+type UseProductOptions = {
+  fetch?: boolean;
+};
+
+export const useProduct = (options?: UseProductOptions) => {
+  const searchParams = useSearchParams();
+  const { fetch = false } = options || {};
+
+  const query = useQuery({
+    queryKey: [PRODUCTS, getQueries(searchParams)],
+    queryFn: async () => await PRODUCT_API.getProducts(searchParams.toString()),
+    enabled: fetch,
+  });
+
+  return {
+    data: {
+      products: query.data || [],
+      ...omit(query, ["data"]),
+    },
+  };
+};

apps/web/src/hooks/useProfile.ts

@@ -3,7 +3,7 @@
 import { useReadLocalStorage } from "usehooks-ts";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { LOGGED_IN } from "../constant";
+import { LOGGED_IN } from "../constants";
 import { USERS_API } from "../services";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";

apps/web/src/hooks/useUploader.tsx

@@ -0,0 +1,25 @@
+import { UPLOAD_API } from "@/services/upload";
+import { useMutation } from "@tanstack/react-query";
+
+export const useUploader = () => {
+  const uploadFile = useMutation({
+    mutationKey: ["UPLOAD_FILE"],
+    mutationFn: UPLOAD_API.uploadFile,
+  });
+
+  const uploadFiles = useMutation({
+    mutationKey: ["UPLOAD_FILES"],
+    mutationFn: UPLOAD_API.uploadFiles,
+  });
+
+  const deleteFiles = useMutation({
+    mutationKey: ["DELETE_FILES"],
+    mutationFn: UPLOAD_API.deleteFiles,
+  });
+
+  return {
+    uploadFile,
+    uploadFiles,
+    deleteFiles,
+  };
+};

apps/web/src/libs/index.ts

@@ -0,0 +1 @@
+export * from "./toast";

apps/web/src/libs/toast.ts

@@ -0,0 +1,14 @@
+import { IToastOptions } from "@/types";
+import Swal from "sweetalert2";
+
+export const toast = (options: IToastOptions) => {
+  const { position = "top-end", icon = "success", title } = options;
+  Swal.fire({
+    position,
+    icon,
+    toast: true,
+    title,
+    showConfirmButton: false,
+    timer: 3000,
+  });
+};

apps/web/src/services/addresses/index.ts

@@ -1,6 +1,6 @@
 import { IAddress } from "@/types";
 import { api } from "../../api";
-import { ADDRESSES_ROUTE } from "../../constant";
+import { ADDRESSES_ROUTE } from "../../constants";
 
 export const ADDRESSES_API = {
   create: async (data: IAddress): Promise<string> =>

apps/web/src/services/auth/index.ts

@@ -1,6 +1,6 @@
 import { ILogin, IRegister } from "@/types";
 import { api } from "../../api";
-import { AUTH_ROUTE } from "../../constant";
+import { AUTH_ROUTE } from "../../constants";
 
 export const AUTH_API = {
   login: async (data: ILogin) => await api.post(`${AUTH_ROUTE}/login`, data),

apps/web/src/services/brand/index.ts

@@ -0,0 +1,7 @@
+import { api } from "@/api";
+import { BRANDS } from "@/constants";
+import { IBrand } from "@/types";
+
+export const BRAND_API = {
+  getBrands: async (): Promise<IBrand[]> => await api.get(BRANDS),
+};

apps/web/src/services/category/index.ts

@@ -0,0 +1,7 @@
+import { api } from "@/api";
+import { CATEGORIES } from "@/constants";
+import { ICategory } from "@/types";
+
+export const CATEGORY_API = {
+  getCategories: async (): Promise<ICategory[]> => await api.get(CATEGORIES),
+};

apps/web/src/services/index.ts

@@ -1,2 +1,5 @@
-export * from './auth';
-export * from './users';
+export * from "./auth";
+export * from "./users";
+export * from "./category";
+export * from "./brand";
+export * from "./product";

apps/web/src/services/product/index.ts

@@ -0,0 +1,8 @@
+import { api } from "@/api";
+import { PRODUCTS } from "@/constants";
+import { IProduct } from "@/types";
+
+export const PRODUCT_API = {
+  getProducts: async (searchQuery?: string): Promise<IProduct[]> =>
+    await api.get(PRODUCTS + "?" + searchQuery),
+};

apps/web/src/services/upload/index.ts

@@ -0,0 +1,20 @@
+import { api } from "@/api";
+import { UPLOAD } from "@/constants";
+import { TFile } from "@/types";
+
+export const UPLOAD_API = {
+  uploadFile: async (data: FormData): Promise<TFile> =>
+    await api.post(UPLOAD + "/file", data, {
+      headers: { "Content-Type": "multipart/form-data" },
+    }),
+
+  uploadFiles: async (data: FormData): Promise<TFile[]> =>
+    await api.post(UPLOAD + "/files", data, {
+      headers: { "Content-Type": "multipart/form-data" },
+    }),
+
+  deleteFiles: async (files: TFile[]): Promise<any> =>
+    await api.put(UPLOAD + "/files", {
+      public_ids: files.map((file) => file.public_id),
+    }),
+};

apps/web/src/services/users/index.ts

@@ -1,6 +1,6 @@
 import { IUser } from "@/types";
 import { api } from "../../api";
-import { USERS_ROUTE } from "../../constant";
+import { USERS_ROUTE } from "../../constants";
 
 export const USERS_API = {
   getMe: async (): Promise<IUser> => await api.get(`${USERS_ROUTE}/me`),