feat(use-i18n): make the provider compatible with server side rendering (#1320)

Author: ModuloM

.changeset/shiny-hairs-decide.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/use-i18n': minor
+---
+
+feat(use-i18n): make the provider compatible with server side rendering

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -237,7 +237,7 @@ describe('i18n hook', () => {
     })
   })
 
-  it('should set current locale from navigator languages', async () => {
+  it('should set current locale from defaultLocale', async () => {
     const { result } = renderHook(() => useI18n(), {
       wrapper: wrapper({
         defaultLocale: 'fr',
@@ -250,6 +250,91 @@ describe('i18n hook', () => {
     })
   })
 
+  describe('getCurrentLocale', () => {
+    it('should set current locale from localStorage', async () => {
+      jest.spyOn(global, 'navigator', 'get').mockReturnValueOnce({
+        languages: ['fr'],
+      } as unknown as Navigator)
+      const mockGetItem = jest.fn().mockImplementation(() => 'en')
+      const mockSetItem = jest.fn()
+      const localStorageMock = jest
+        .spyOn(global, 'localStorage', 'get')
+        .mockReturnValue({
+          getItem: mockGetItem,
+          setItem: mockSetItem,
+          clear: jest.fn(),
+        } as unknown as Storage)
+
+      const { result } = renderHook(() => useI18n(), {
+        wrapper: wrapper({
+          defaultLocale: 'es',
+          supportedLocales: ['en', 'fr', 'es'],
+        }),
+      })
+
+      await waitFor(() => {
+        expect(result.current.currentLocale).toEqual('en')
+        expect(mockGetItem).toHaveBeenCalledTimes(2)
+        expect(mockGetItem).toHaveBeenCalledWith(LOCALE_ITEM_STORAGE)
+      })
+      localStorageMock.mockRestore()
+    })
+
+    it('should set current locale from navigator', async () => {
+      jest.spyOn(global, 'navigator', 'get').mockReturnValueOnce({
+        languages: ['fr'],
+      } as unknown as Navigator)
+      const mockGetItem = jest.fn()
+      const mockSetItem = jest.fn()
+      const localStorageMock = jest
+        .spyOn(global, 'localStorage', 'get')
+        .mockReturnValueOnce({
+          getItem: mockGetItem,
+          setItem: mockSetItem,
+          clear: jest.fn(),
+        } as unknown as Storage)
+
+      const { result } = renderHook(() => useI18n(), {
+        wrapper: wrapper({
+          defaultLocale: 'es',
+          supportedLocales: ['en', 'fr', 'es'],
+        }),
+      })
+
+      await waitFor(() => {
+        expect(result.current.currentLocale).toEqual('fr')
+      })
+      localStorageMock.mockRestore()
+    })
+
+    it('should set current locale from defaultLocale', async () => {
+      jest.spyOn(global, 'navigator', 'get').mockReturnValueOnce({
+        languages: [],
+      } as unknown as Navigator)
+      const mockGetItem = jest.fn()
+      const mockSetItem = jest.fn()
+      const localStorageMock = jest
+        .spyOn(global, 'localStorage', 'get')
+        .mockReturnValueOnce({
+          getItem: mockGetItem,
+          setItem: mockSetItem,
+          clear: jest.fn(),
+        } as unknown as Storage)
+
+      const { result } = renderHook(() => useI18n(), {
+        wrapper: wrapper({
+          defaultLocale: 'es',
+          supportedLocales: ['en', 'fr', 'es'],
+        }),
+      })
+
+      await waitFor(() => {
+        expect(result.current.currentLocale).toEqual('es')
+      })
+      localStorageMock.mockRestore()
+    })
+  })
+
   it('should switch locale', async () => {
     const { result } = renderHook(() => useI18n(), {
       wrapper: wrapper({
@@ -266,22 +351,25 @@ describe('i18n hook', () => {
 
     await waitFor(() => {
       expect(result.current.currentLocale).toEqual('fr')
-      expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('fr')
     })
+    expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('fr')
 
     act(() => {
       result.current.switchLocale('es')
     })
 
     await waitFor(() => {
       expect(result.current.currentLocale).toEqual('es')
-      expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('es')
     })
+    expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('es')
 
     act(() => {
       result.current.switchLocale('test')
     })
-    expect(result.current.currentLocale).toEqual('es')
+
+    await waitFor(() => {
+      expect(result.current.currentLocale).toEqual('es')
+    })
     expect(localStorage.getItem(LOCALE_ITEM_STORAGE)).toBe('es')
   })
 

packages/use-i18n/src/usei18n.tsx

@@ -50,17 +50,21 @@ const getCurrentLocale = ({
   supportedLocales: string[]
   localeItemStorage: string
 }): string => {
-  const { languages } = navigator
-  const browserLocales = [...new Set(languages.map(getLocaleFallback))]
-  const localeStorage = localStorage.getItem(localeItemStorage)
-
-  return (
-    localeStorage ||
-    browserLocales.find(
-      locale => locale && supportedLocales.includes(locale),
-    ) ||
-    defaultLocale
-  )
+  if (typeof window !== 'undefined') {
+    const { languages } = navigator
+    const browserLocales = [...new Set(languages.map(getLocaleFallback))]
+    const localeStorage = localStorage.getItem(localeItemStorage)
+
+    return (
+      localeStorage ||
+      browserLocales.find(
+        locale => locale && supportedLocales.includes(locale),
+      ) ||
+      defaultLocale
+    )
+  }
+
+  return defaultLocale
 }
 
 type Context<Locale extends BaseLocale> = {