chore(review): support direction in views

Author: rhahao

src/features/language_switcher/useLanguage.tsx

@@ -52,7 +52,6 @@ const useLanguage = () => {
   };
 
   const handleLangChange = async (ui_lang: string) => {
-    console.log(ui_lang);
     handleClose();
 
     const findLanguage = LANGUAGE_LIST.find(

src/features/reports/meeting_attendance/export_S88/useExportS88.tsx

@@ -472,7 +472,9 @@ const useExportS88 = () => {
           }),
       };
 
-      const blob = await pdf(<TemplateS88 attendance={finalData} />).toBlob();
+      const blob = await pdf(
+        <TemplateS88 attendance={finalData} lang={lang} />
+      ).toBlob();
 
       const filename = `S-88.pdf`;
 

src/layouts/navbar/index.tsx

@@ -461,7 +461,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
                         '& svg': {
                           transform:
                             theme.direction === 'rtl'
-                              ? 'translateX(-4px) scaleX(-1)'
+                              ? 'translateX(4px) scaleX(-1)'
                               : 'translateX(-4px)',
                         },
                       },

src/main.tsx

@@ -30,7 +30,7 @@ const getInitialTheme = () => {
 };
 
 const getInitialDirection = () => {
-  const savedLang = localStorage.getItem('appLang') || 'eng';
+  const savedLang = localStorage.getItem('ui_lang') || 'eng';
   const direction = LANGUAGE_LIST.find(
     (record) => record.threeLettersCode === savedLang
   )?.direction;

src/views/activities/upcoming_events/index.tsx

@@ -12,8 +12,8 @@ const TemplateUpcomingEvents = ({
   const { t } = useAppTranslation();
 
   return (
-    <Document title={t('tr_upcomingEvents')}>
-      <Page lang={lang}>
+    <Document title={t('tr_upcomingEvents')} lang={lang}>
+      <Page>
         <PageContent>
           <PageHeader
             variant="secondary"

src/views/components/document/index.tsx

@@ -1,16 +1,26 @@
 import { Document as ReactPDFDocument } from '@react-pdf/renderer';
 import { PDFDocumentType } from './index.types';
+import { LANGUAGE_LIST } from '@constants/index';
 import registerFonts from '@views/registerFonts';
 
 registerFonts();
 
-const Document = ({ title, children }: PDFDocumentType) => {
+const Document = ({ title, children, lang }: PDFDocumentType) => {
+  const font =
+    LANGUAGE_LIST.find((record) => record.threeLettersCode === lang)?.font ??
+    'Inter';
+
+  const direction = (LANGUAGE_LIST.find(
+    (record) => record.threeLettersCode === lang
+  )?.direction ?? 'ltr') as 'ltr' | 'rtl';
+
   return (
     <ReactPDFDocument
       author="sws2apps"
       title={title}
       creator="Organized"
       producer="sws2apps (by react-pdf)"
+      style={{ fontFamily: font, direction }}
     >
       {children}
     </ReactPDFDocument>

src/views/components/document/index.types.ts

@@ -4,4 +4,5 @@ import { ReactNode } from 'react';
 export type PDFDocumentType = {
   title: string;
   children: ReactNode;
+  lang: string;
 };

src/views/components/page/index.tsx

@@ -1,25 +1,17 @@
 import { Page as ReactPDFPage } from '@react-pdf/renderer';
-import { LANGUAGE_LIST } from '@constants/index';
 import { PageType } from './index.types';
 
-const Page = ({ lang, children }: PageType) => {
-  const font =
-    LANGUAGE_LIST.find((record) => record.threeLettersCode === lang)?.font ||
-    'Inter';
-
+const Page = ({ children }: PageType) => {
   return (
     <ReactPDFPage
       size="A4"
-      style={[
-        {
-          padding: '20px',
-          backgroundColor: '#FFFFFF',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-        },
-        { fontFamily: font },
-      ]}
+      style={{
+        padding: '20px',
+        backgroundColor: '#FFFFFF',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
     >
       {children}
     </ReactPDFPage>

src/views/components/page/index.types.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 
 export type PageType = {
-  lang: string;
   children: ReactNode;
 };

src/views/congregation/field_service_groups/index.tsx

@@ -14,8 +14,8 @@ const TemplateFieldServiceGroups = ({
   const { t } = useAppTranslation();
 
   return (
-    <Document title={t('tr_fieldServiceGroups')}>
-      <Page lang={lang}>
+    <Document title={t('tr_fieldServiceGroups')} lang={lang}>
+      <Page>
         <PageContent gap={10}>
           <PageHeader
             congregationName={congregation}