Refactor auth section into AuthSection component and integrate transl…

…ation hook for login button text. Fix translation key formatting by replacing hyphens with underscores. Update login loader to use dynamic language setting.
jamalsoueidan · Jun 13, 2024 · 1288328 · 1288328
1 parent 691af21
commit 1288328
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 58 deletions.
diff --git a/app/components/LayoutWrapper.tsx b/app/components/LayoutWrapper.tsx
@@ -33,7 +33,7 @@ import {
   IconShoppingCartPlus,
 } from '@tabler/icons-react';
 import {Suspense, type ReactNode} from 'react';
-import {TranslationProvider} from '~/providers/Translation';
+import {TranslationProvider, useTranslations} from '~/providers/Translation';
 import {type loader} from '~/root';
 import {Footer} from './Footer';
 import logo from '/Artboard4.svg';
@@ -159,61 +159,7 @@ export function LayoutWrapper({children}: {children: ReactNode}) {
                 );
               })}
           </Flex>
-          <Flex
-            justify="flex-end"
-            align="center"
-            gap="sm"
-            visibleFrom="sm"
-            miw="150px"
-          >
-            <Suspense>
-              <Await resolve={data.isLoggedIn}>
-                {(isLoggedIn) =>
-                  isLoggedIn ? (
-                    <ActionIcon
-                      variant="outline"
-                      size="lg"
-                      color="black"
-                      component={Link}
-                      to="/account"
-                      data-testid="login-button"
-                    >
-                      <IconKey />
-                    </ActionIcon>
-                  ) : (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      color="black"
-                      component={Link}
-                      to="/account"
-                      data-testid="login-button"
-                    >
-                      Log ind
-                    </Button>
-                  )
-                }
-              </Await>
-            </Suspense>
-            <Suspense>
-              <Await resolve={data.cart}>
-                {(cart) =>
-                  cart?.totalQuantity && cart?.totalQuantity > 0 ? (
-                    <ActionIcon
-                      variant="outline"
-                      size="lg"
-                      color="black"
-                      component={Link}
-                      to="/cart"
-                      data-testid="cart-button"
-                    >
-                      <IconShoppingCartPlus />
-                    </ActionIcon>
-                  ) : null
-                }
-              </Await>
-            </Suspense>
-          </Flex>
+          <AuthSection />
         </AppShell.Header>
 
         <AppShell.Navbar px={4}>
@@ -292,3 +238,66 @@ export function LayoutWrapper({children}: {children: ReactNode}) {
     </TranslationProvider>
   );
 }
+
+function AuthSection() {
+  const data = useLoaderData<typeof loader>();
+  const {t} = useTranslations();
+
+  return (
+    <Flex
+      justify="flex-end"
+      align="center"
+      gap="sm"
+      visibleFrom="sm"
+      miw="150px"
+    >
+      <Suspense>
+        <Await resolve={data.isLoggedIn}>
+          {(isLoggedIn) =>
+            isLoggedIn ? (
+              <ActionIcon
+                variant="outline"
+                size="lg"
+                color="black"
+                component={Link}
+                to="/account"
+                data-testid="login-button"
+              >
+                <IconKey />
+              </ActionIcon>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                color="black"
+                component={Link}
+                to="/account"
+                data-testid="login-button"
+              >
+                {t('login')}
+              </Button>
+            )
+          }
+        </Await>
+      </Suspense>
+      <Suspense>
+        <Await resolve={data.cart}>
+          {(cart) =>
+            cart?.totalQuantity && cart?.totalQuantity > 0 ? (
+              <ActionIcon
+                variant="outline"
+                size="lg"
+                color="black"
+                component={Link}
+                to="/cart"
+                data-testid="cart-button"
+              >
+                <IconShoppingCartPlus />
+              </ActionIcon>
+            ) : null
+          }
+        </Await>
+      </Suspense>
+    </Flex>
+  );
+}
diff --git a/app/providers/Translation.tsx b/app/providers/Translation.tsx
@@ -55,7 +55,7 @@ const convertJsonStructure = (data?: TranslationsFragment[] | null) => {
   const result: Record<string, string> = {};
 
   data?.forEach((node) => {
-    const key = node.handle;
+    const key = node.handle.replace(/-/g, '_');
     const value = node.value?.value;
     if (key && value) {
       result[key] = value;

diff --git a/app/routes/account_.login.tsx b/app/routes/account_.login.tsx
@@ -2,6 +2,6 @@ import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
 export async function loader({context}: LoaderFunctionArgs) {
   return context.customerAccount.login({
-    uiLocales: 'DA',
+    uiLocales: context.storefront.i18n.language,
   });
 }