Tested to add algolia search

2025-07-23 04:36:49 +00:00 · 2023-08-10 20:49:53 +02:00
parent 04477fe83a
commit dc2856c4c8
17 changed files with 486 additions and 316 deletions
--- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
+++ b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
@@ -1,88 +1,94 @@
 'use client';

-import BlurbSection from '@/components/modules/blurb-section/blurb-section';
-import FilteredProductList from '@/components/modules/filtered-product-list/filtered-product-list';
+import dynamic from 'next/dynamic';
+
 import Hero from '@/components/modules/hero';
-import ReusableSection from '@/components/modules/reusable-section/reusable-section';
-import Slider from '@/components/modules/slider/slider';
-import USPSection from '@/components/modules/usp-section/usp-section';
+const BlurbSection = dynamic(() => import('@/components/modules/blurb-section/blurb-section'));
+const FilteredProductList = dynamic(
+  () => import('@/components/modules/filtered-product-list/filtered-product-list')
+);
+const ReusableSection = dynamic(
+  () => import('@/components/modules/reusable-section/reusable-section')
+);
+const Slider = dynamic(() => import('@/components/modules/slider/slider'));
+const USPSection = dynamic(() => import('@/components/modules/usp-section/usp-section'));
+
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import { Suspense } from 'react';

-// interface getContentComponentProps {
-//   _type: string;
-//   _key: number;
-//   disabled: boolean;
-// }
+interface getContentComponentProps {
+  _type: string;
+  _key: number;
+  disabled: boolean;
+}

-// const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
-//   let Component: any;
+const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
+  let Component: any;

-//   switch (_type) {
-//     case 'hero':
-//       if (disabled !== true) {
-//         Component = Hero;
-//       } else {
-//         return;
-//       }
-//       break;
-//     case 'slider':
-//       if (disabled !== true) {
-//         Component = Slider;
-//       } else {
-//         return;
-//       }
-//       break;
-//     case 'filteredProductList':
-//       if (disabled !== true) {
-//         Component = FilteredProductList;
-//       } else {
-//         return;
-//       }
-//       break;
-//     case 'blurbSection':
-//       if (disabled !== true) {
-//         Component = BlurbSection;
-//       } else {
-//         return;
-//       }
-//       break;
-//     case 'uspSection':
-//       if (disabled !== true) {
-//         Component = USPSection;
-//       } else {
-//         return;
-//       }
-//       break;
-//     case 'reusableSection':
-//       if (disabled !== true) {
-//         Component = ReusableSection;
-//       } else {
-//         return;
-//       }
-//       break;
-//     default:
-//       return (
-//         <div
-//           className={`px-4 lg:px-8 2xl:px-16 ${
-//             process.env.NODE_ENV === 'production' ? 'hidden' : ''
-//           }`}
-//           key={`index-${_key}`}
-//         >
-//           <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-//             <InformationCircleIcon className="mr-1" />
-//             {`No matching component (Type: ${_type})`}
-//           </span>
-//         </div>
-//       );
-//   }
+  switch (_type) {
+    case 'hero':
+      if (disabled !== true) {
+        Component = Hero;
+      } else {
+        return;
+      }
+      break;
+    case 'slider':
+      if (disabled !== true) {
+        Component = Slider;
+      } else {
+        return;
+      }
+      break;
+    case 'filteredProductList':
+      if (disabled !== true) {
+        Component = FilteredProductList;
+      } else {
+        return;
+      }
+      break;
+    case 'blurbSection':
+      if (disabled !== true) {
+        Component = BlurbSection;
+      } else {
+        return;
+      }
+      break;
+    case 'uspSection':
+      if (disabled !== true) {
+        Component = USPSection;
+      } else {
+        return;
+      }
+      break;
+    case 'reusableSection':
+      if (disabled !== true) {
+        Component = ReusableSection;
+      } else {
+        return;
+      }
+      break;
+    default:
+      return (
+        <div
+          className={`px-4 lg:px-8 2xl:px-16 ${
+            process.env.NODE_ENV === 'production' ? 'hidden' : ''
+          }`}
+          key={`index-${_key}`}
+        >
+          <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
+            <InformationCircleIcon className="mr-1" />
+            {`No matching component (Type: ${_type})`}
+          </span>
+        </div>
+      );
+  }

-//   return Component ? (
-//     <Component key={`${_key}`} {...rest} />
-//   ) : (
-//     <div key={`${_key}`}>Something else</div>
-//   );
-// };
+  return Component ? (
+    <Component key={`${_key}`} {...rest} />
+  ) : (
+    <div key={`${_key}`}>Something else</div>
+  );
+};

 interface dynamicContentManagerProps {
  content: [] | any;
@@ -90,91 +96,7 @@ interface dynamicContentManagerProps {

 const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
  return (
-    <div className="dynamic-content overflow-x-hidden">
-      {/* {content?.map(getContentComponent)} */}
-
-      {content.map(
-        (
-          component: { _type: string; _key: number; disabled: boolean; rest: any } | any,
-          index: number
-        ) => {
-          const { _type, _key, disabled, ...rest } = component;
-
-          let Component: any;
-
-          switch (_type) {
-            case 'hero':
-              if (disabled !== true) {
-                Component = Hero;
-              } else {
-                return;
-              }
-              break;
-            case 'slider':
-              if (disabled !== true) {
-                Component = Slider;
-              } else {
-                return;
-              }
-              break;
-            case 'filteredProductList':
-              if (disabled !== true) {
-                Component = FilteredProductList;
-              } else {
-                return;
-              }
-              break;
-            case 'blurbSection':
-              if (disabled !== true) {
-                Component = BlurbSection;
-              } else {
-                return;
-              }
-              break;
-            case 'uspSection':
-              if (disabled !== true) {
-                Component = USPSection;
-              } else {
-                return;
-              }
-              break;
-            case 'reusableSection':
-              if (disabled !== true) {
-                Component = ReusableSection;
-              } else {
-                return;
-              }
-              break;
-            default:
-              return (
-                <div
-                  className={`px-4 lg:px-8 2xl:px-16 ${
-                    process.env.NODE_ENV === 'production' ? 'hidden' : ''
-                  }`}
-                  key={`index-${_key}`}
-                >
-                  <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-                    <InformationCircleIcon className="mr-1" />
-                    {`No matching component (Type: ${_type})`}
-                  </span>
-                </div>
-              );
-          }
-
-          if (Component && index === 0) {
-            return <Component key={`${_key}`} {...rest} />;
-          } else if (Component) {
-            return (
-              <Suspense key={`${_key}`}>
-                <Component {...rest} />
-              </Suspense>
-            );
-          } else {
-            <div key={`${_key}`}>Something else</div>;
-          }
-        }
-      )}
-    </div>
+    <div className="dynamic-content overflow-x-hidden">{content?.map(getContentComponent)}</div>
  );
 };

--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,29 +1,33 @@
+import { categoriesQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import HeaderRoot from './header-root';
-import MainMenu from './main-menu/main-menu';
 import MobileMenuModal from './mobile-menu/modal';
 import OpenMobileMenu from './mobile-menu/open-mobile-menu';
 import SearchModal from './search/modal';
 import OpenSearch from './search/open-search';
 import UserModal from './user-menu/modal';
 import OpenUserMenu from './user-menu/open-user-menu';
-
 interface HeaderProps {
  locale: string;
 }
+export default async function Header({ locale }: HeaderProps) {
+  const params = {
+    locale: locale
+  };
+  const mainMenu = await clientFetch(categoriesQuery, params);

-const Header = ({ locale }: HeaderProps) => {
  return (
    <HeaderRoot>
      <div className="relative flex flex-col border-b border-ui-border bg-app">
        <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
          <div className="-translate-x-3 transform md:hidden">
            <Suspense fallback={<OpenMobileMenu />}>
-              <MobileMenuModal locale={locale} />
+              <MobileMenuModal items={mainMenu} />
            </Suspense>
          </div>

@@ -38,9 +42,19 @@ const Header = ({ locale }: HeaderProps) => {
          </div>

          <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
-            <MainMenu locale={locale} />
+            <ul className="flex gap-6">
+              {mainMenu.map((item: { title: string; slug: string }, i: number) => {
+                return (
+                  <li key={i}>
+                    <Link className="font-medium" href={`/category/${item.slug}`}>
+                      {item.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
          </div>
-          <div className="flex translate-x-3 transform justify-end space-x-1">
+          <div className="flex translate-x-2 transform justify-end space-x-1">
            <Suspense fallback={<OpenSearch />}>
              <SearchModal />
            </Suspense>
@@ -55,6 +69,4 @@ const Header = ({ locale }: HeaderProps) => {
      </div>
    </HeaderRoot>
  );
-};
-
-export default Header;
+}
--- a/components/layout/header/main-menu/main-menu.tsx
+++ b/components/layout/header/main-menu/main-menu.tsx
@@ -1,33 +0,0 @@
-import { categoriesQuery } from '@/lib/sanity/queries';
-import { clientFetch } from '@/lib/sanity/sanity.client';
-import Link from 'next/link';
-
-interface MainMenuProps {
-  locale: string;
-}
-
-export default async function MainMenu({ locale }: MainMenuProps) {
-  const params = {
-    locale: locale
-  };
-
-  const categories = await clientFetch(categoriesQuery, params);
-
-  if (!categories) {
-    return;
-  }
-
-  return (
-    <ul className="flex flex-col gap-4 lg:flex-row lg:gap-6">
-      {categories.map((category: { slug: string } | any, index: number) => {
-        return (
-          <li className="font-medium" key={index}>
-            <Link className="hover:underline" href={`/category/${category.slug}`}>
-              {category.title}
-            </Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
--- a/components/layout/header/mobile-menu/modal.tsx
+++ b/components/layout/header/mobile-menu/modal.tsx
@@ -1,15 +1,15 @@
 'use client';

 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import Link from 'next/link';
 import { useState } from 'react';
-import MainMenu from '../main-menu/main-menu';
 import OpenMobileMenu from './open-mobile-menu';

 interface MobileMenuModalProps {
-  locale: string;
+  items: [];
 }

-export default function MobileMenuModal({ locale }: MobileMenuModalProps) {
+export default function MobileMenuModal({ items }: MobileMenuModalProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
@@ -23,7 +23,17 @@ export default function MobileMenuModal({ locale }: MobileMenuModalProps) {
            <SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
          </SheetHeader>
          <div className="mt-4">
-            <MainMenu locale={locale} />
+            <ul className="flex flex-col gap-2">
+              {items.map((item: { title: string; slug: string }, i: number) => {
+                return (
+                  <li key={i}>
+                    <Link onClick={() => setIsOpen(false)} href={`/category/${item.slug}`}>
+                      {item.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
          </div>
        </SheetContent>
      </Sheet>
--- a/components/layout/header/search/modal.tsx
+++ b/components/layout/header/search/modal.tsx
@@ -1,5 +1,6 @@
 'use client';

+import Search from '@/components/search/search';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -19,6 +20,7 @@ export default function SearchModal() {
          <SheetHeader>
            <SheetTitle className="text-lg font-semibold">{t('search')}</SheetTitle>
          </SheetHeader>
+          <Search />
        </SheetContent>
      </Sheet>
    </>
--- a/components/layout/header/search/open-search.tsx
+++ b/components/layout/header/search/open-search.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';

 export default function OpenSearch({ className }: { className?: string }) {
  return (
-    <div className="relative flex h-11 w-11 items-center justify-center text-high-contrast">
+    <div className="relative flex h-10 w-10 items-center justify-center text-high-contrast">
      <MagnifyingGlassIcon
        className={clsx('h-5 transition-all ease-in-out hover:scale-110 ', className)}
      />
--- a/components/layout/header/user-menu/modal.tsx
+++ b/components/layout/header/user-menu/modal.tsx
@@ -5,8 +5,6 @@ import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import OpenUserMenu from './open-user-menu';

-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
 export default function UserModal() {
  const [isOpen, setIsOpen] = useState(false);
  const t = useTranslations('auth');
@@ -21,15 +19,6 @@ export default function UserModal() {
          <SheetHeader>
            <SheetTitle className="text-lg font-semibold">{t('login.logIn')}</SheetTitle>
          </SheetHeader>
-
-          <Tabs defaultValue="login" className="mt-4 w-full">
-            <TabsList>
-              <TabsTrigger value="login">{t('login.logIn')}</TabsTrigger>
-              <TabsTrigger value="register">{t('signUp.register')}</TabsTrigger>
-            </TabsList>
-            <TabsContent value="login">Log in to your account here.</TabsContent>
-            <TabsContent value="register">Register for account here.</TabsContent>
-          </Tabs>
        </SheetContent>
      </Sheet>
    </>
--- a/components/layout/header/user-menu/open-user-menu.tsx
+++ b/components/layout/header/user-menu/open-user-menu.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';

 export default function OpenUserMenu({ className }: { className?: string }) {
  return (
-    <div className="relative flex h-11 w-11 items-center justify-center text-high-contrast">
+    <div className="relative flex h-10 w-10 items-center justify-center text-high-contrast">
      <UserCircleIcon
        className={clsx(
          'h-5 stroke-current transition-all ease-in-out hover:scale-110 ',