feat: added comfirm dialog

anamulhaque22 · Nov 30, 2024 · ee2fadc · ee2fadc
1 parent 6f4a9fa
commit ee2fadc
Show file tree

Hide file tree

Showing 33 changed files with 727 additions and 378 deletions.
diff --git a/admin-client/app/(with-dashboard-layout)/categories/page.js b/admin-client/app/(with-dashboard-layout)/categories/page.js
@@ -1,9 +1,11 @@
 import Categories from "@/views/categories";
 
+export function generateMetadata() {
+  return {
+    title: "Categories",
+  };
+}
+
 export default function InternalPage() {
-  return (
-    <div className="bg-content-bg px-5 py-3 rounded-xl border border-bc">
-      <Categories />
-    </div>
-  );
+  return <Categories />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/dashboard/page.js b/admin-client/app/(with-dashboard-layout)/dashboard/page.js
diff --git a/admin-client/app/(with-dashboard-layout)/orders/details/[id]/page.js b/admin-client/app/(with-dashboard-layout)/orders/details/[id]/page.js
@@ -1,5 +1,11 @@
 import OrderDetails from "@/views/order-details";
 
+export function generateMetadata() {
+  return {
+    title: "Order Details",
+  };
+}
+
 export default function InternalOrderDetailsPage() {
   return <OrderDetails />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/orders/page.js b/admin-client/app/(with-dashboard-layout)/orders/page.js
@@ -1,5 +1,11 @@
 import OrderListContent from "./page-content";
 
+export function generateMetadata() {
+  return {
+    title: "Orders",
+  };
+}
+
 export default function InternalOrderListPage() {
   return <OrderListContent />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/page.js b/admin-client/app/(with-dashboard-layout)/page.js
@@ -1,5 +1,11 @@
 import Dashboard from "@/views/dashboard";
 
+export function generateMetadata() {
+  return {
+    title: "Dashboard",
+  };
+}
+
 export default function DashboardPage() {
   return <Dashboard />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/products/edit/[id]/page.js b/admin-client/app/(with-dashboard-layout)/products/edit/[id]/page.js
@@ -1,4 +1,11 @@
 import EditProduct from "@/views/edit-product";
+
+export function generateMetadata() {
+  return {
+    title: "Edit Product",
+  };
+}
+
 export default function InternalPage() {
   return <EditProduct />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/products/page.js b/admin-client/app/(with-dashboard-layout)/products/page.js
@@ -1,5 +1,11 @@
 import AllProductList from "@/views/all-product";
 
+export function generateMetadata() {
+  return {
+    title: "Products",
+  };
+}
+
 export default function InternalPage() {
   return (
     <div className="bg-content-bg px-5 py-3 rounded-xl border border-bc">

diff --git a/admin-client/app/(with-dashboard-layout)/users/create/page.js b/admin-client/app/(with-dashboard-layout)/users/create/page.js
@@ -1,9 +1,11 @@
 import AddUser from "@/views/add-user";
 
+export function generateMetadata() {
+  return {
+    title: "Add User",
+  };
+}
+
 export default function page() {
-  return (
-    <div className="bg-content-bg px-5 py-3 rounded-xl border border-bc">
-      <AddUser />
-    </div>
-  );
+  return <AddUser />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/users/details/[id]/page.js b/admin-client/app/(with-dashboard-layout)/users/details/[id]/page.js
@@ -1,5 +1,11 @@
 import UserDetails from "@/views/user-details";
 
+export function generateMetadata() {
+  return {
+    title: "User Details",
+  };
+}
+
 export default function InternalUserDetailsPage() {
   return <UserDetails />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/users/edit/[id]/page.js b/admin-client/app/(with-dashboard-layout)/users/edit/[id]/page.js
@@ -1,5 +1,11 @@
 import EditUser from "@/views/edit-user";
 
+export function generateMetadata() {
+  return {
+    title: "Edit User",
+  };
+}
+
 export default function InternalPage() {
   return <EditUser />;
 }
diff --git a/admin-client/app/(with-dashboard-layout)/users/page.js b/admin-client/app/(with-dashboard-layout)/users/page.js
@@ -1,5 +1,11 @@
 import UserListView from "@/views/user-list";
 
+export function generateMetadata() {
+  return {
+    title: "Users",
+  };
+}
+
 export default function InternalPage() {
   return <UserListView />;
 }
diff --git a/admin-client/app/layout.js b/admin-client/app/layout.js
@@ -1,6 +1,7 @@
 import { ThemeProviders } from "@/contexts/ThemeContext";
 import AuthProvider from "@/services/auth/auth-provider";
 // import { Head } from "next/document";
+import ConfirmDialogProvider from "@/components/confirm-dialog/confirm-dialog-provider";
 import SnackbarProvider from "@/components/snackbar-provider";
 import queryClient from "@/services/react-query/query-client";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -19,11 +20,13 @@ export default function RootLayout({ children }) {
       </Head> */}
       <body className={`${inter.className} ${public_sans.className}`}>
         <SnackbarProvider maxSnack={3}>
-          <QueryClientProvider client={queryClient}>
-            <AuthProvider>
-              <ThemeProviders>{children}</ThemeProviders>
-            </AuthProvider>
-          </QueryClientProvider>
+          <ConfirmDialogProvider>
+            <QueryClientProvider client={queryClient}>
+              <AuthProvider>
+                <ThemeProviders>{children}</ThemeProviders>
+              </AuthProvider>
+            </QueryClientProvider>
+          </ConfirmDialogProvider>
         </SnackbarProvider>
       </body>
     </html>

diff --git a/admin-client/app/loading.jsx b/admin-client/app/loading.jsx
@@ -1,5 +1,9 @@
 function Loading() {
-  return <span className="loading loading-infinity loading-lg"></span>;
+  return (
+    <div className="h-screen w-screen flex items-center justify-center">
+      <span className="loading loading-infinity loading-lg"></span>
+    </div>
+  );
 }
 
 export default Loading;
diff --git a/admin-client/components/confirm-dialog/confirm-dialog-context.js b/admin-client/components/confirm-dialog/confirm-dialog-context.js
@@ -0,0 +1,7 @@
+"use client";
+
+import { createContext } from "react";
+
+export const ConfirmDialogActionsContext = createContext({
+  confirmDialog: () => Promise.reject(false),
+});
diff --git a/admin-client/components/confirm-dialog/confirm-dialog-provider.jsx b/admin-client/components/confirm-dialog/confirm-dialog-provider.jsx
@@ -0,0 +1,95 @@
+"use client";
+import { useCallback, useMemo, useRef, useState } from "react";
+
+const { ConfirmDialogActionsContext } = require("./confirm-dialog-context");
+
+function ConfirmDialogProvider({ children }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const resolveRef = useRef();
+
+  const defaultConfirmDialogInfo = useMemo(
+    () => ({
+      title: "title",
+      message: "message",
+      successButtonText: "Yes",
+      cancelButtonText: "No",
+    }),
+    []
+  );
+
+  const [confirmDialogInfo, setConfirmDialogInfo] = useState(
+    defaultConfirmDialogInfo
+  );
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const onCancel = () => {
+    setIsOpen(false);
+    resolveRef.current?.(false);
+  };
+
+  const onSuccess = () => {
+    setIsOpen(false);
+    resolveRef.current?.(true);
+  };
+
+  const confirmDialog = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setConfirmDialogInfo({
+          ...defaultConfirmDialogInfo,
+          ...options,
+        });
+        setIsOpen(true);
+        resolveRef.current = resolve;
+      });
+    },
+    [defaultConfirmDialogInfo]
+  );
+
+  const contextActions = useMemo(
+    () => ({
+      confirmDialog,
+    }),
+    [confirmDialog]
+  );
+  return (
+    <>
+      <ConfirmDialogActionsContext.Provider value={contextActions}>
+        {children}
+      </ConfirmDialogActionsContext.Provider>
+
+      {isOpen && (
+        <dialog id="my_modal" className="modal" open>
+          <div className="modal-box">
+            <h3 className="font-bold text-lg">{confirmDialogInfo.title}</h3>
+            <p className="py-4">{confirmDialogInfo.message}</p>
+            <div className="modal-action">
+              <button className="btn" onClick={onCancel}>
+                {confirmDialogInfo.cancelButtonText}
+              </button>
+              <button className="btn btn-primary" onClick={onSuccess}>
+                {confirmDialogInfo.successButtonText}
+              </button>
+            </div>
+          </div>
+          <form
+            method="dialog"
+            className="modal-backdrop"
+            onClick={(e) => {
+              e.stopPropagation();
+              onCancel();
+            }}
+          >
+            <button>close</button>
+          </form>
+        </dialog>
+      )}
+    </>
+  );
+}
+
+export default ConfirmDialogProvider;
diff --git a/admin-client/components/confirm-dialog/use-confirm-dialog.js b/admin-client/components/confirm-dialog/use-confirm-dialog.js
@@ -0,0 +1,10 @@
+"use client";
+
+import { useContext } from "react";
+import { ConfirmDialogActionsContext } from "./confirm-dialog-context";
+
+const useConfirmDialog = () => {
+  return useContext(ConfirmDialogActionsContext);
+};
+
+export default useConfirmDialog;
diff --git a/admin-client/components/containers/Header.jsx b/admin-client/components/containers/Header.jsx
@@ -1,20 +1,19 @@
 "use client";
+import useAuth from "@/services/auth/use-auth";
+import useAuthActions from "@/services/auth/use-auth-actions";
 import Image from "next/image";
 import Link from "next/link";
 import { HiBars3 } from "react-icons/hi2";
 import ThemeSwitch from "../ThemeSwitch";
 
 function Header() {
+  const { logOut } = useAuthActions();
+  const { user } = useAuth();
   function logoutUser() {
-    logout();
-    // localStorage.clear();
-    // window.location.href = "/";
+    logOut();
   }
-  //   useEffect(() => {
-  //     if (!checkUser()) {
-  //       router.push("/login");
-  //     }
-  //   }, []);
+
+  console.log({ user });
 
   return (
     <>
@@ -27,7 +26,7 @@ function Header() {
           >
             <HiBars3 className="h-5 inline-block w-5" />
           </label>
-          <h1 className="text-2xl font-semibold ml-2">{"pageTitle"}</h1>
+          {/* <h1 className="text-2xl font-semibold ml-2">{"pageTitle"}</h1> */}
         </div>
 
         <div className="flex-none">
@@ -37,30 +36,25 @@ function Header() {
 
           {/* Profile icon, opening menu on click */}
           <div className="dropdown dropdown-end ml-4">
-            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+            <label tabIndex={0} className="btn btn-primary btn-circle avatar">
               <div className="w-10 rounded-full">
                 <Image
-                  src={"/images/avatar-placeholder.png"}
+                  src={
+                    !!user ? user.photo.url : "/images/avatar-placeholder.png"
+                  }
                   height={130}
                   width={130}
                   className="rounded-full  object-fill"
                   alt="avatar"
                 />
-                {/* <img src="https://placeimg.com/80/80/people" alt="profile" /> */}
               </div>
             </label>
             <ul
               tabIndex={0}
               className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
             >
               <li className="justify-between">
-                <Link href={"/app/settings-profile"}>
-                  Profile Settings
-                  <span className="badge">New</span>
-                </Link>
-              </li>
-              <li className="">
-                <Link href={"/app/settings-billing"}>Bill History</Link>
+                <Link href={`/users/edit/${user?.id}`}>Profile Settings</Link>
               </li>
               <div className="divider mt-0 mb-0"></div>
               <li>