chore(voucher): integrate currency list fetching and validation in cu…

…rrency context
GaloyMoney · May 11, 2024 · ade9637 · ade9637
1 parent 028b9bd
commit ade9637
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 22 deletions.
diff --git a/apps/voucher/app/layout.tsx b/apps/voucher/app/layout.tsx
@@ -12,23 +12,26 @@ const { NEXT_PUBLIC_CORE_URL, NEXT_PUBLIC_VOUCHER_URL } = env
 
 const inter = Inter_Tight({ subsets: ["latin"], display: "auto" })
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const coreGqlUrl = NEXT_PUBLIC_CORE_URL
+  const voucherUrl = NEXT_PUBLIC_VOUCHER_URL
+
   return (
     <SessionProvider>
       <ApolloWrapper
         config={{
-          coreGqlUrl: NEXT_PUBLIC_CORE_URL,
-          voucherUrl: NEXT_PUBLIC_VOUCHER_URL,
+          coreGqlUrl,
+          voucherUrl,
         }}
       >
-        <html lang="en">
-          <CurrencyProvider>
+        <CurrencyProvider>
+          <html lang="en">
             <body className={inter.className}>
               <Navigation />
               {children}
             </body>
-          </CurrencyProvider>
-        </html>
+          </html>
+        </CurrencyProvider>
       </ApolloWrapper>
     </SessionProvider>
   )

diff --git a/apps/voucher/components/nav-bar/navigation.tsx b/apps/voucher/components/nav-bar/navigation.tsx
@@ -26,7 +26,6 @@ import {
 
 import { Separator } from "@/components/separator"
 
-import { useDisplayCurrency } from "@/hooks/useDisplayCurrency"
 import { useCurrency } from "@/context/currency-context"
 
 const Navigation: React.FC = () => {
@@ -121,8 +120,7 @@ const NavMenu = ({ username }: { username: string }) => {
 }
 
 export const CurrencySwitcher = () => {
-  const currencies = useDisplayCurrency()
-  const { currency: selectedCurrency, changeCurrency } = useCurrency()
+  const { currency: selectedCurrency, changeCurrency, currencyList } = useCurrency()
 
   return (
     <div className="w-11/12 m-auto">
@@ -132,7 +130,7 @@ export const CurrencySwitcher = () => {
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            {currencies.currencyList.map((currency) => (
+            {currencyList.map((currency) => (
               <SelectItem key={currency.id} value={currency.id}>
                 {currency.name} ({currency.id})
               </SelectItem>

diff --git a/apps/voucher/context/currency-context.tsx b/apps/voucher/context/currency-context.tsx
@@ -1,16 +1,28 @@
 "use client"
-import React, { createContext, useContext, useState, useEffect, ReactNode } from "react"
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  ReactNode,
+} from "react"
 
-interface CurrencyContextProps {
+import { useDisplayCurrency } from "@/hooks/useDisplayCurrency"
+
+type CurrencyContextProps = {
   currency: string
   changeCurrency: (newCurrency: string) => void
+  currencyList: { id: string; name: string }[]
 }
 
 const defaultCurrencyState: CurrencyContextProps = {
   currency: "USD",
   changeCurrency: (newCurrency: string) => {
     console.log(newCurrency)
   },
+  currencyList: [],
 }
 
 const CurrencyContext = createContext<CurrencyContextProps>(defaultCurrencyState)
@@ -21,23 +33,36 @@ interface CurrencyProviderProps {
 
 export const CurrencyProvider = ({ children }: CurrencyProviderProps) => {
   const [currency, setCurrency] = useState("USD")
+  const { currencyList } = useDisplayCurrency()
 
   useEffect(() => {
     const storedCurrency = localStorage.getItem("currency")
-    if (storedCurrency) {
+    if (storedCurrency && currencyList.some((c) => c.id === storedCurrency)) {
       setCurrency(storedCurrency)
     }
-  }, [])
+  }, [currencyList])
+
+  const changeCurrency = useCallback(
+    (newCurrency: string) => {
+      if (currencyList.some((c) => c.id === newCurrency)) {
+        setCurrency(newCurrency)
+        localStorage.setItem("currency", newCurrency)
+      }
+    },
+    [currencyList],
+  )
 
-  const changeCurrency = (newCurrency: string) => {
-    setCurrency(newCurrency)
-    localStorage.setItem("currency", newCurrency)
-  }
+  const providerValue = useMemo(
+    () => ({
+      currency,
+      changeCurrency,
+      currencyList,
+    }),
+    [currency, currencyList, changeCurrency],
+  )
 
   return (
-    <CurrencyContext.Provider value={{ currency, changeCurrency }}>
-      {children}
-    </CurrencyContext.Provider>
+    <CurrencyContext.Provider value={providerValue}>{children}</CurrencyContext.Provider>
   )
 }