Add local storage and fix language switcher

Author: goanpeca

public/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://xarray.dev/blog</id>
     <title>Xarray Blog Feed</title>
-    <updated>2025-05-02T04:24:09.201Z</updated>
+    <updated>2025-05-03T18:37:55.874Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <link rel="alternate" href="https://xarray.dev/blog"/>
     <link rel="self" href="https://xarray.dev/atom.xml"/>

public/rss.xml

@@ -4,7 +4,7 @@
         <title>Xarray Blog Feed</title>
         <link>https://xarray.dev/blog</link>
         <description>The latest news, insights, and practices about Xarray from the Xarray team</description>
-        <lastBuildDate>Fri, 02 May 2025 04:24:09 GMT</lastBuildDate>
+        <lastBuildDate>Sat, 03 May 2025 18:37:55 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

src/components/dashboard/timeseries-agg-stats-card.js

@@ -4,6 +4,7 @@ import { Spinner, Text } from '@chakra-ui/react'
 import * as d3 from 'd3'
 import { isWithinInterval, lastDayOfMonth, startOfMonth } from 'date-fns'
 import useSWR from 'swr'
+import { useLingui } from '@lingui/react/macro'
 
 export const TimeseriesAggStatsCard = ({ query, title, icon }) => {
   let { data, error } = useSWR(query, fetcher)

src/components/donate.js

@@ -37,18 +37,18 @@ export const Donate = () => {
             position={'relative'}
           >
             <Text fontSize={'lg'}>
-              {t`Xarray is a Sponsored Project of NumFOCUS, a `}
+              {t`Xarray is a NumFOCUS Sponsored Project, a `}
               <Text
                 as={Link}
                 href={'https://en.wikipedia.org/wiki/501(c)(3)_organization'}
                 color={'blue.400'}
                 useExternalIcon
               >
-                {t`501(c)(3) nonprofit charity`}
+                501(c)(3) nonprofit charity
               </Text>{' '}
               {t`in the United States. NumFOCUS provides Xarray with fiscal, legal,
               and administrative support to help ensure the health and
-              sustainability of the project. Visit `}
+              sustainability of the project. For more information, visit `}
               <Text
                 as={Link}
                 useExternalIcon
@@ -57,7 +57,6 @@ export const Donate = () => {
               >
                 numfocus.org
               </Text>{' '}
-              {t`for more information.`}
               <br />
               <br />
               {t`If you like Xarray and want to support our mission, please consider making a donation to support our efforts.`}

src/components/header.js

@@ -19,9 +19,7 @@ import React from 'react'
 import { LanguageSwitcher } from './language-switcher'
 
 export const Header = () => {
-  let menuItems = getMenuItems()
-  const navItems = React.useMemo(() => menuItems, [])
-
+  let navItems = getMenuItems()
   const { isOpen, onToggle } = useDisclosure()
   const { colorMode, toggleColorMode } = useColorMode()
 

src/components/language-switcher.js

@@ -1,19 +1,40 @@
+'use client'
 import { Select } from '@chakra-ui/react'
 import { useLingui } from '@lingui/react/macro'
-import { i18n } from "@lingui/core";
-import { useRouter } from 'next/navigation'
+import { i18n } from '@lingui/core'
+import { useRouter, usePathname } from 'next/navigation'
+import { useState, useEffect } from 'react'
 
 export const LanguageSwitcher = () => {
   const { t } = useLingui()
+  const router = useRouter()
+  const pathname = usePathname()
+  const [selectedValue, setSelectedValue] = useState('')
 
-  async function dynamicActivate(event) {
-    const locale = event.target.value
-    const catalog = await import(`../locales/${locale}/messages.js`)
-    i18n.load(locale, catalog.messages);
-    i18n.activate(locale);
+  async function changeLocale(event) {
+    const localeString = event.target.value
+    setSelectedValue(localeString)
+    localStorage.setItem('locale', localeString)
+    const catalog = await import(`../locales/${localeString}/messages.js`)
+    i18n.load(localeString, catalog.messages)
+    i18n.activate(localeString)
+    router.push(pathname, { locale: localeString })
   }
+
+  useEffect(() => {
+    const storedLocale = localStorage.getItem('locale')
+    if (storedLocale && storedLocale !== router.locale) {
+      changeLocale({ target: { value: storedLocale } })
+    }
+  }, [])
   return (
-    <Select variant='flushed' size='xs' defaultValue="en" onChange={dynamicActivate}>
+    <Select
+      name='selectedLocale'
+      variant='flushed'
+      size='xs'
+      value={selectedValue}
+      onChange={changeLocale}
+    >
       <option value='en'>{t`English`}</option>
       <option value='es'>{t`Spanish`}</option>
       <option value='pt'>{t`Portuguese`}</option>

src/components/layout.js

@@ -4,7 +4,7 @@ import { Header } from '@/components/header'
 import { Link } from '@/components/mdx'
 import { Box, Flex } from '@chakra-ui/react'
 import Head from 'next/head'
-import { Trans, useLingui } from '@lingui/react/macro'
+import { useLingui } from '@lingui/react/macro'
 import { useRouter } from 'next/router'
 
 export const Layout = ({
@@ -79,7 +79,6 @@ export const Layout = ({
           )}
           {children}
         </Box>
-
         <Footer />
       </Flex>
     </>

src/components/mobile-nav.js

@@ -98,6 +98,7 @@ export const MobileNav = ({ navItems, isOpen }) => {
       {navItems.map((navItem) => (
         <MobileNavItem key={navItem.label} {...navItem} />
       ))}
+      <LanguageSwitcher></LanguageSwitcher>
     </Stack>
   )
 }