feat(native-app): add useLocale hook (#16357)

* feat: add useLocale hook and use for all applications queries * feat: add to document detail query --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Oct 15, 2024 · 020a316 · 020a316
1 parent 9a11ba4
commit 020a316
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 17 deletions.
diff --git a/apps/native/app/src/hooks/use-locale.ts b/apps/native/app/src/hooks/use-locale.ts
@@ -0,0 +1,6 @@
+import { usePreferencesStore } from '../stores/preferences-store'
+
+export const useLocale = () => {
+  const locale = usePreferencesStore(({ locale }) => locale)
+  return locale === 'is-IS' ? 'is' : 'en'
+}
diff --git a/apps/native/app/src/screens/applications/applications-completed.tsx b/apps/native/app/src/screens/applications/applications-completed.tsx
@@ -7,8 +7,8 @@ import {
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { useLocale } from '../../hooks/use-locale'
 import { ApplicationsList } from './components/applications-list'
-import { usePreferencesStore } from '../../stores/preferences-store'
 
 const { useNavigationOptions, getNavigationOptions } =
   createNavigationOptionHooks(
@@ -33,7 +33,6 @@ export const ApplicationsCompletedScreen: NavigationFunctionComponent = ({
 }) => {
   useNavigationOptions(componentId)
   const [refetching, setRefetching] = useState(false)
-  const { locale } = usePreferencesStore()
 
   const applicationsRes = useListApplicationsQuery({
     variables: {
@@ -44,7 +43,7 @@ export const ApplicationsCompletedScreen: NavigationFunctionComponent = ({
           ApplicationResponseDtoStatusEnum.Approved,
         ],
       },
-      locale: locale === 'is-IS' ? 'is' : 'en',
+      locale: useLocale(),
     },
   })
 

diff --git a/apps/native/app/src/screens/applications/applications-in-progress.tsx b/apps/native/app/src/screens/applications/applications-in-progress.tsx
@@ -7,8 +7,8 @@ import {
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { useLocale } from '../../hooks/use-locale'
 import { ApplicationsList } from './components/applications-list'
-import { usePreferencesStore } from '../../stores/preferences-store'
 
 const { useNavigationOptions, getNavigationOptions } =
   createNavigationOptionHooks(
@@ -33,14 +33,13 @@ export const ApplicationsInProgressScreen: NavigationFunctionComponent = ({
 }) => {
   useNavigationOptions(componentId)
   const [refetching, setRefetching] = useState(false)
-  const { locale } = usePreferencesStore()
 
   const applicationsRes = useListApplicationsQuery({
     variables: {
       input: {
         status: [ApplicationResponseDtoStatusEnum.Inprogress],
       },
-      locale: locale === 'is-IS' ? 'is' : 'en',
+      locale: useLocale(),
     },
   })
 

diff --git a/apps/native/app/src/screens/applications/applications-incomplete.tsx b/apps/native/app/src/screens/applications/applications-incomplete.tsx
@@ -7,8 +7,8 @@ import {
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { useLocale } from '../../hooks/use-locale'
 import { ApplicationsList } from './components/applications-list'
-import { usePreferencesStore } from '../../stores/preferences-store'
 
 const { useNavigationOptions, getNavigationOptions } =
   createNavigationOptionHooks(
@@ -33,14 +33,13 @@ export const ApplicationsIncompleteScreen: NavigationFunctionComponent = ({
 }) => {
   useNavigationOptions(componentId)
   const [refetching, setRefetching] = useState(false)
-  const { locale } = usePreferencesStore()
 
   const applicationsRes = useListApplicationsQuery({
     variables: {
       input: {
         status: [ApplicationResponseDtoStatusEnum.Draft],
       },
-      locale: locale === 'is-IS' ? 'is' : 'en',
+      locale: useLocale(),
     },
   })
 

diff --git a/apps/native/app/src/screens/applications/applications.tsx b/apps/native/app/src/screens/applications/applications.tsx
@@ -14,11 +14,11 @@ import {
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { useLocale } from '../../hooks/use-locale'
 import { testIDs } from '../../utils/test-ids'
 import { isIos } from '../../utils/devices'
 import { ApplicationsPreview } from './components/applications-preview'
 import { BottomTabsIndicator } from '../../components/bottom-tabs-indicator/bottom-tabs-indicator'
-import { usePreferencesStore } from '../../stores/preferences-store'
 
 const { useNavigationOptions, getNavigationOptions } =
   createNavigationOptionHooks(
@@ -102,12 +102,9 @@ export const ApplicationsScreen: NavigationFunctionComponent = ({
   const theme = useTheme()
   const [refetching, setRefetching] = useState(false)
   const [hiddenContent, setHiddenContent] = useState(isIos)
-  const { locale } = usePreferencesStore()
-
-  const queryLocale = locale === 'is-IS' ? 'is' : 'en'
 
   const applicationsRes = useListApplicationsQuery({
-    variables: { locale: queryLocale },
+    variables: { locale: useLocale() },
   })
 
   const applications = useMemo(

diff --git a/apps/native/app/src/screens/document-detail/document-detail.tsx b/apps/native/app/src/screens/document-detail/document-detail.tsx
@@ -30,10 +30,10 @@ import {
 } from '../../graphql/types/schema'
 import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
 import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { useLocale } from '../../hooks/use-locale'
 import { toggleAction } from '../../lib/post-mail-action'
 import { authStore } from '../../stores/auth-store'
 import { useOrganizationsStore } from '../../stores/organizations-store'
-import { usePreferencesStore } from '../../stores/preferences-store'
 import { ButtonRegistry } from '../../utils/component-registry'
 import { getButtonsForActions } from './utils/get-buttons-for-actions'
 import { useBrowser } from '../../lib/use-browser'
@@ -230,7 +230,6 @@ export const DocumentDetailScreen: NavigationFunctionComponent<{
   const client = useApolloClient()
   const intl = useIntl()
   const htmlStyles = useHtmlStyles()
-  const { locale } = usePreferencesStore()
   const { openBrowser } = useBrowser()
   const { getOrganizationLogoUrl } = useOrganizationsStore()
   const [accessToken, setAccessToken] = useState<string>()
@@ -293,7 +292,7 @@ export const DocumentDetailScreen: NavigationFunctionComponent<{
         // If the document is urgent we need to check if the user needs to confirm reception of it before fetching the document data
         includeDocument: shouldIncludeDocument,
       },
-      locale: locale === 'is-IS' ? 'is' : 'en',
+      locale: useLocale(),
     },
     fetchPolicy: 'no-cache',
     onCompleted: async (data) => {