refactor(auth, feedback): implement login and feedback modals with Zustand state management

Author: tyronejosee

src/app/layout.tsx

@@ -3,12 +3,14 @@ import type { Metadata, Viewport } from "next";
 import { Outfit, Roboto_Mono } from "next/font/google";
 import { Navbar, Sidebar } from "@/components/layout";
 import { BackToTop } from "@/components/ui";
-// import { ResourceFilters } from "@/components/resources";
+import { getCategories } from "@/actions/categories";
+import { LoginModal } from "@/components/auth";
+import { FeedbackModal } from "@/components/feedback";
 import { PROJECT_NAME, PROJECT_DESCRIPTION } from "@/config/constants";
 import Providers from "./providers";
 
+import "prismjs/themes/prism-tomorrow.css";
 import "../styles/globals.css";
-import { getCategories } from "@/actions/categories";
 
 const outfit = Outfit({
   variable: "--font-outfit",
@@ -49,10 +51,11 @@ export default async function RootLayout({ children }: Props) {
             <Sidebar categories={categories} />
             <div className="w-full">
               <Navbar />
-              {/* <ResourceFilters /> */}
               {children}
             </div>
             <BackToTop />
+            <LoginModal />
+            <FeedbackModal />
           </div>
         </Providers>
       </body>

src/components/auth/index.ts

@@ -1,4 +1,4 @@
 export { default as GitHubButton } from "./github-button";
 export { default as GoogleButton } from "./google-button";
-export { default as ModalLoginContext } from "./login-modal";
+export { default as LoginModal } from "./login-modal";
 export { default as UserProfile } from "./user-profile";

src/components/auth/login-modal.tsx

@@ -1,68 +1,34 @@
 "use client";
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-  ReactNode,
-} from "react";
 import { Modal, ModalContent, ModalHeader, ModalBody } from "@heroui/react";
 import { GoogleButton, GitHubButton } from "@/components/auth";
+import { useLoginModal } from "@/stores/use-login-modal";
 
-type ModalContextType = {
-  open: () => void;
-  close: () => void;
-};
-
-const ModalLoginContext = createContext<ModalContextType | undefined>(
-  undefined,
-);
-
-export const useLoginModal = () => {
-  const context = useContext(ModalLoginContext);
-  if (!context) {
-    throw new Error("useLoginModal must be used within a ModalLoginProvider");
-  }
-  return context;
-};
-
-type Props = {
-  children: ReactNode;
-};
-
-export default function ModalLoginProvider({ children }: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
+export default function ModalLoginProvider() {
+  const { isOpen, onOpenChange } = useLoginModal();
 
   return (
-    <ModalLoginContext.Provider value={{ open, close }}>
-      {children}
-
-      <Modal isOpen={isOpen} onOpenChange={setIsOpen} backdrop="blur">
-        <ModalContent>
-          <>
-            <ModalHeader>
-              <div className="flex flex-col gap-2">
-                <h2 className="text-2xl font-semibold tracking-tight">
-                  Welcome back
-                </h2>
-                <p className="text-sm text-neutral-500">
-                  Sign in to continue with your account
-                </p>
-              </div>
-            </ModalHeader>
-            <ModalBody>
-              <section className="flex flex-col gap-2 pb-10">
-                <GoogleButton />
-                <GitHubButton />
-              </section>
-            </ModalBody>
-          </>
-        </ModalContent>
-      </Modal>
-    </ModalLoginContext.Provider>
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange} backdrop="blur">
+      <ModalContent>
+        <>
+          <ModalHeader>
+            <div className="flex flex-col gap-2">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                Welcome back
+              </h2>
+              <p className="text-sm text-neutral-500">
+                Sign in to continue with your account
+              </p>
+            </div>
+          </ModalHeader>
+          <ModalBody>
+            <section className="flex flex-col gap-2 pb-10">
+              <GoogleButton />
+              <GitHubButton />
+            </section>
+          </ModalBody>
+        </>
+      </ModalContent>
+    </Modal>
   );
 }

src/components/feedback/feedback-form.tsx

@@ -7,12 +7,14 @@ import { useRouter } from "next/navigation";
 import { Input, Textarea, Button, addToast } from "@heroui/react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useFeedbackModal } from "@/stores/use-feedback-modal";
 import { feedbackSchema } from "@/lib/zod";
 import { HOME_PATH } from "@/config/constants";
 
 export default function FeedbackForm() {
   const router = useRouter();
   const [apiError, setApiError] = useState<string | null>(null);
+  const { onOpenChange } = useFeedbackModal();
 
   const {
     register,
@@ -36,10 +38,11 @@ export default function FeedbackForm() {
       addToast({
         title: "Thank you for your feedback!",
         description:
-          "We appreciate your feedback and will use it to continuously improve. Your opinion is valuable to us.",
+          "We appreciate your feedback and will use it to continuously improve.",
       });
 
       reset();
+      onOpenChange(false);
       router.push(HOME_PATH);
     } catch (error) {
       console.error(error);

src/components/feedback/feedback-modal.tsx

@@ -1,74 +1,38 @@
 "use client";
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-  ReactNode,
-} from "react";
 import { Modal, ModalContent, ModalHeader, ModalBody } from "@heroui/react";
+import { useFeedbackModal } from "@/stores/use-feedback-modal";
 import FeedbackForm from "./feedback-form";
 
-type ModalContextType = {
-  open: () => void;
-  close: () => void;
-};
-
-const ModalFeedbackContext = createContext<ModalContextType | undefined>(
-  undefined,
-);
-
-export const useFeedbackModal = () => {
-  const context = useContext(ModalFeedbackContext);
-  if (!context) {
-    throw new Error(
-      "useFeedbackModal must be used within a ModalFeedbackProvider",
-    );
-  }
-  return context;
-};
-
-type Props = {
-  children: ReactNode;
-};
-
-export default function ModalFeedbackProvider({ children }: Props) {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
+export default function FeedbackModal() {
+  const { isOpen, onOpenChange } = useFeedbackModal();
 
   return (
-    <ModalFeedbackContext.Provider value={{ open, close }}>
-      {children}
-
-      <Modal
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        backdrop="blur"
-        classNames={{
-          base: "bg-white dark:bg-neutral-950 border-2 border-neutral-200 dark:border-neutral-800",
-        }}
-      >
-        <ModalContent>
-          <>
-            <ModalHeader>
-              <div className="flex flex-col gap-2">
-                <h2 className="text-2xl font-semibold tracking-tight">
-                  Feedback
-                </h2>
-                <p className="text-sm text-neutral-500">
-                  Let us know what you think about our project.
-                </p>
-              </div>
-            </ModalHeader>
-            <ModalBody>
-              <FeedbackForm />
-            </ModalBody>
-          </>
-        </ModalContent>
-      </Modal>
-    </ModalFeedbackContext.Provider>
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      backdrop="blur"
+      classNames={{
+        base: "bg-white dark:bg-neutral-950 border-2 border-neutral-200 dark:border-neutral-800",
+      }}
+    >
+      <ModalContent>
+        <>
+          <ModalHeader>
+            <div className="flex flex-col gap-2">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                Feedback
+              </h2>
+              <p className="text-sm text-neutral-500">
+                Let us know what you think about our project.
+              </p>
+            </div>
+          </ModalHeader>
+          <ModalBody>
+            <FeedbackForm />
+          </ModalBody>
+        </>
+      </ModalContent>
+    </Modal>
   );
 }

src/components/feedback/index.ts

@@ -1 +1 @@
-export { default as ModalFeedbackContext } from "./feedback-modal";
+export { default as FeedbackModal } from "./feedback-modal";

src/components/layout/navbar.tsx

@@ -8,14 +8,14 @@ import { Breadcrumbs, ThemeSwitcher } from "@/components/ui";
 import { UserProfile } from "@/components/auth";
 import { Discord } from "@/components/icons";
 import { SidebarMobile } from "@/components/layout";
-import { DISCORD_INVITATION_LINK } from "@/config/constants";
+import { useLoginModal } from "@/stores/use-login-modal";
 import { useAuthUser } from "@/hooks/use-auth-user";
-import { useLoginModal } from "../auth/login-modal";
+import { DISCORD_INVITATION_LINK } from "@/config/constants";
 
 export default function Navbar() {
   const router = useRouter();
   const { user } = useAuthUser();
-  const { open } = useLoginModal();
+  const { onOpen: loginOnOpen } = useLoginModal();
 
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
@@ -56,7 +56,7 @@ export default function Navbar() {
         ) : (
           <Button
             size="sm"
-            onPress={open}
+            onPress={loginOnOpen}
             variant="solid"
             className="bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 font-medium"
           >

src/components/layout/sidebar.tsx

@@ -14,14 +14,14 @@ import {
 } from "@heroui/react";
 import { Folder, Origami } from "lucide-react";
 import { Footer, SearchBar } from "@/components/layout";
+import { useFeedbackModal } from "@/stores/use-feedback-modal";
+import { useActiveLink } from "@/hooks/use-active-link";
 import {
   DASHBOARD_ITEMS,
   HOME_PATH,
   PROJECT_NAME,
   SIDEBAR_ITEMS,
 } from "@/config/constants";
-import { useFeedbackModal } from "../feedback/feedback-modal";
-import { useActiveLink } from "@/hooks/use-active-link";
 
 type SidebarListProps = {
   items: Array<{
@@ -35,7 +35,7 @@ type SidebarListProps = {
 
 function SidebarList({ items }: SidebarListProps) {
   const { linkClass } = useActiveLink();
-  const { open } = useFeedbackModal();
+  const { onOpen } = useFeedbackModal();
 
   const base = "flex items-center gap-3 pr-3 text-sm transition-colors";
   const active = "text-neutral-950 dark:text-white font-medium";
@@ -49,7 +49,7 @@ function SidebarList({ items }: SidebarListProps) {
           <Link
             href={item.path}
             className={linkClass(item.path, base, active, inactive)}
-            {...(item.onclick && { onClick: open })}
+            {...(item.onclick && { onClick: onOpen })}
           >
             <item.icon size={16} />
             <span>{item.title}</span>

src/stores/use-feedback-modal.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type FeedbackModalState = {
+  isOpen: boolean;
+  onOpen: () => void;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const useFeedbackModal = create<FeedbackModalState>((set) => ({
+  isOpen: false,
+  onOpen: () => set({ isOpen: true }),
+  onOpenChange: (open: boolean) => set({ isOpen: open }),
+}));

src/stores/use-login-modal.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type LoginModalState = {
+  isOpen: boolean;
+  onOpen: () => void;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const useLoginModal = create<LoginModalState>((set) => ({
+  isOpen: false,
+  onOpen: () => set({ isOpen: true }),
+  onOpenChange: (open: boolean) => set({ isOpen: open }),
+}));