Merge pull request #16 from udohjeremiah/dev

Refactor website code and components.

src/app/(dashboard)/[storeId]/billboards/[billboardId]/page.tsx

@@ -80,12 +80,12 @@ export default async function BillboardPage({ params }: BillboardPageProps) {
           description={`Manage this billboard for your ${store?.name} store.`}
         />
         <DeleteBillboardDialog
+          defaultState={true}
           billboard={{
             id: billboard.id,
             label: billboard.label,
             createdAt: format(billboard.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />

src/app/(dashboard)/[storeId]/categories/[categoryId]/page.tsx

@@ -89,13 +89,13 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
           description={`Manage the ${category.name} category for your ${store?.name} store.`}
         />
         <DeleteCategoryDialog
+          defaultState={true}
           category={{
             id: category.id,
             name: category.name,
             billboardLabel: category.Billboard.label,
             createdAt: format(category.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />

src/app/(dashboard)/[storeId]/colors/[colorId]/page.tsx

@@ -80,23 +80,23 @@ export default async function ColorPage({ params }: ColorPageProps) {
         )}
       >
         <Heading
-          title={`${store?.name} Store Billboard`}
-          description={`Manage this billboard for your ${store?.name} store.`}
+          title={`${store?.name} Store Color`}
+          description={`Manage this color for your ${store?.name} store.`}
         />
         <DeleteColorDialog
+          defaultState={true}
           color={{
             id: color.id,
             name: color.name,
             value: color.value,
             createdAt: format(color.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />
       <ColorForm color={color} />
       <Separator />
-      <Heading title="API" description="API calls for billboard" />
+      <Heading title="API" description="API calls for colors" />
       <APIList
         apis={[
           {

src/app/(dashboard)/[storeId]/layout.tsx

@@ -4,14 +4,12 @@ import { auth, ClerkProvider } from "@clerk/nextjs";
 
 import "@/styles/globals.css";
 
-import CreateStoreDialog from "@/components/dialogs/CreateStoreDialog";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import { Toaster } from "@/components/ui/sonner";
 
 import prisma from "@/lib/prisma";
 
-import CreateStoreProvider from "@/providers/CreateStoreProvider";
 import ThemeProvider from "@/providers/ThemeProvider";
 
 interface DashboardLayoutProps {
@@ -47,13 +45,10 @@ export default async function DashboardLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <CreateStoreProvider>
-              <Header />
-              {children}
-              <Footer />
-              <CreateStoreDialog />
-              <Toaster closeButton richColors />
-            </CreateStoreProvider>
+            <Header />
+            {children}
+            <Footer />
+            <Toaster closeButton richColors />
           </ThemeProvider>
         </body>
       </html>

src/app/(dashboard)/[storeId]/products/[productId]/page.tsx

@@ -102,6 +102,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           description={`Manage this product for your ${store?.name} store.`}
         />
         <DeleteProductDialog
+          defaultState={true}
           product={{
             id: product.id,
             name: product.name,
@@ -116,7 +117,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
             color: product.Color.value,
             createdAt: format(product.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />

src/app/(dashboard)/[storeId]/sizes/[sizeId]/page.tsx

@@ -84,13 +84,13 @@ export default async function SizePage({ params }: SizePageProps) {
           description={`Manage this billboard for your ${store?.name} store.`}
         />
         <DeleteSizeDialog
+          defaultState={true}
           size={{
             id: size.id,
             name: size.name,
             value: size.value,
             createdAt: format(size.createdAt, "MMMM do, yyyy"),
           }}
-          triggerBtnClassName="w-max"
         />
       </div>
       <Separator />

src/app/(root)/layout.tsx

@@ -6,7 +6,6 @@ import "@/styles/globals.css";
 
 import { Toaster } from "@/components/ui/sonner";
 
-import CreateStoreProvider from "@/providers/CreateStoreProvider";
 import ThemeProvider from "@/providers/ThemeProvider";
 
 interface RootLayoutProps {
@@ -30,10 +29,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
             enableSystem
             disableTransitionOnChange
           >
-            <CreateStoreProvider>
-              {children}
-              <Toaster closeButton richColors />
-            </CreateStoreProvider>
+            {children}
+            <Toaster closeButton richColors />
           </ThemeProvider>
         </body>
       </html>

src/app/(root)/page.tsx

@@ -19,5 +19,5 @@ export default async function RootPage() {
     redirect(`/${store.id}`);
   }
 
-  return <CreateStoreDialog initialState={true} />;
+  return <CreateStoreDialog defaultState={true} />;
 }

src/components/StoreSwitcher.tsx

@@ -12,6 +12,7 @@ import {
   StoreIcon,
 } from "lucide-react";
 
+import CreateStoreDialog from "@/components/dialogs/CreateStoreDialog";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -28,83 +29,88 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 
-import { useCreateStore } from "@/hooks/use-create-store";
-
 interface StoreSwitcherProps {
   stores: Store[];
 }
 
 export default function StoreSwitcher({ stores = [] }: StoreSwitcherProps) {
   const params = useParams();
 
-  const [open, setOpen] = useState(false);
   const [currentStore, setCurrentStore] = useState(
     stores.find((store) => store.id === params.storeId)?.id,
   );
+  const [open, setOpen] = useState(false);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
 
   const router = useRouter();
 
-  const { setCreateStore } = useCreateStore();
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-label="Select a store"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          <StoreIcon className="mr-2 h-4 w-4" />
-          {currentStore
-            ? stores.find((store) => store.id === currentStore)?.name
-            : "Select store..."}
-          <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search store..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>No store found.</CommandEmpty>
-            <CommandGroup heading="Stores">
-              {stores.map((store) => (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-label="Select a store"
+            aria-expanded={open}
+            className="w-[200px] justify-between"
+          >
+            <StoreIcon className="mr-2 h-4 w-4" />
+            {currentStore
+              ? stores.find((store) => store.id === currentStore)?.name
+              : "Select store..."}
+            <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder="Search store..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>No store found.</CommandEmpty>
+              <CommandGroup heading="Stores">
+                {stores.map((store) => (
+                  <CommandItem
+                    key={store.id}
+                    value={store.name}
+                    onSelect={() => {
+                      setCurrentStore(store.id);
+                      setOpen(false);
+                      router.push(`/${store.id}`);
+                    }}
+                  >
+                    <StoreIcon className="mr-2 h-4 w-4" />
+                    {store.name}
+                    {currentStore === store.id && (
+                      <CheckIcon className="ml-auto h-4 w-4" />
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
                 <CommandItem
-                  key={store.id}
-                  value={store.name}
                   onSelect={() => {
-                    setCurrentStore(store.id);
                     setOpen(false);
-                    router.push(`/${store.id}`);
+                    setShowCreateDialog(true);
                   }}
+                  className="p-0"
                 >
-                  <StoreIcon className="mr-2 h-4 w-4" />
-                  {store.name}
-                  {currentStore === store.id && (
-                    <CheckIcon className="ml-auto h-4 w-4" />
-                  )}
+                  <Button variant="default" className="w-full">
+                    <CirclePlusIcon className="mr-2 h-4 w-4" />
+                    Create Store
+                  </Button>
                 </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup>
-              <CommandItem
-                onSelect={() => {
-                  setOpen(false);
-                  setCreateStore(true);
-                }}
-                className="p-0"
-              >
-                <Button variant="default" className="w-full">
-                  <CirclePlusIcon className="mr-2 h-4 w-4" />
-                  Create Store
-                </Button>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {showCreateDialog && (
+        <CreateStoreDialog
+          open={showCreateDialog}
+          setOpen={setShowCreateDialog}
+        />
+      )}
+    </>
   );
 }