add hero context (#108)

jekabolt · Jul 10, 2024 · 49a05a5 · 49a05a5
1 parent 917dadf
commit 49a05a5
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 29 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import RootLayoutComponent from "@/components/layouts/RootLayout";
 import { FeatureMono } from "../fonts";
+import HeroContextLayout from "@/components/layouts/HeroContextLayout";
+
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -16,7 +18,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={FeatureMono.className}>
-        <RootLayoutComponent>{children}</RootLayoutComponent>
+        <HeroContextLayout>
+          <RootLayoutComponent>{children}</RootLayoutComponent>
+        </HeroContextLayout>
       </body>
     </html>
   );

diff --git a/src/components/contexts/HeroContext.tsx b/src/components/contexts/HeroContext.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from "react";
+import type { GetHeroResponse } from "@/api/proto-http/frontend";
+
+const HeroContext = createContext<
+  GetHeroResponse & {
+    selectedCurrency: string;
+    setSelectedCurrency: Dispatch<SetStateAction<string>>;
+  }
+>({
+  hero: undefined,
+  dictionary: undefined,
+  rates: undefined,
+  selectedCurrency: "",
+  setSelectedCurrency: () => {},
+});
+
+export function HeroContextProvider({
+  children,
+  ...props
+}: GetHeroResponse & { children: ReactNode }) {
+  const [selectedCurrency, setSelectedCurrency] = useState(
+    props.dictionary?.baseCurrency || "",
+  );
+
+  return (
+    <HeroContext.Provider
+      value={{ ...props, selectedCurrency, setSelectedCurrency }}
+    >
+      {children}
+    </HeroContext.Provider>
+  );
+}
+
+export const useHeroContext = () => useContext(HeroContext);
diff --git a/src/components/global/Footer/CurrencyPopover.tsx b/src/components/global/Footer/CurrencyPopover.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useHeroContext } from "@/components/contexts/HeroContext";
+import GenericPopover from "@/components/ui/Popover";
+import { cn } from "@/lib/utils";
+
+export default function Component() {
+  const { rates, selectedCurrency, setSelectedCurrency } = useHeroContext();
+
+  if (!rates?.currencies) return null;
+
+  return (
+    <GenericPopover
+      title="currency"
+      openElement={
+        <span className="bg-textColor px-2 py-1 text-buttonTextColor">
+          {`Currency: ${selectedCurrency}`}
+        </span>
+      }
+    >
+      <div className="space-y-2 px-12 pb-7">
+        {Object.entries(rates.currencies).map(([k, v]) => (
+          <button
+            key={k}
+            onClick={() => {
+              setSelectedCurrency(k);
+            }}
+            className={cn("flex items-center gap-1 text-sm", {
+              underline: k === selectedCurrency,
+            })}
+          >
+            {v.description} {JSON.stringify(v.rate)}
+          </button>
+        ))}
+      </div>
+    </GenericPopover>
+  );
+}
diff --git a/src/components/global/Footer/index.tsx b/src/components/global/Footer/index.tsx
@@ -1,10 +1,10 @@
+import Link from "next/link";
 import { FOOTER_LINKS as links, FOOTER_YEAR as year } from "@/constants";
 import { serviceClient } from "@/lib/api";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
-import FooterForm from "../../forms/NewslatterForm";
-import GenericPopover from "@/components/ui/Popover";
 import Button from "@/components/ui/Button";
+import FooterForm from "../../forms/NewslatterForm";
+import CurrencyPopover from "./CurrencyPopover";
 
 // todo: sync with BE
 const currencyNameMap = {
@@ -32,6 +32,7 @@ export default function Footer({
 }) {
   async function formSubmitClick(data: FormData): Promise<void> {
     "use server";
+
     try {
       const payload: { email: string; name: string } = {
         email: data.get("email") as string,
@@ -72,28 +73,7 @@ export default function Footer({
               <Link href="privacy-policy">privacy policy</Link>
             </Button>
           </div>
-          <div>
-            <GenericPopover
-              title="currency"
-              openElement={
-                <span className="bg-textColor px-2 py-1 text-buttonTextColor">
-                  {`Currency: ${currentCurrency}`}
-                </span>
-              }
-            >
-              <div className="space-y-2 px-12 pb-7">
-                {Object.entries(currencyNameMap).map(([k, v]) => (
-                  <button
-                    key={k + v}
-                    className="flex items-center gap-1 text-sm first:underline"
-                  >
-                    <span>{k}</span>
-                    <span>{v}</span>
-                  </button>
-                ))}
-              </div>
-            </GenericPopover>
-          </div>
+          <CurrencyPopover />
         </div>
       </div>
     </footer>

diff --git a/src/components/layouts/HeroContextLayout.tsx b/src/components/layouts/HeroContextLayout.tsx
@@ -0,0 +1,12 @@
+import { serviceClient } from "@/lib/api";
+import { HeroContextProvider } from "../contexts/HeroContext";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default async function Layout({ children }: Props) {
+  const heroData = await serviceClient.GetHero({});
+
+  return <HeroContextProvider {...heroData}>{children}</HeroContextProvider>;
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -17,9 +17,7 @@ interface ProtoMetaParams {
 
 const fetchParams: Object = {
   GetHero: {
-    next: {
-      revalidate: 15,
-    },
+    cache: "no-store",
   },
   GetProduct: {
     next: {