Add translate dialog for users with other languages

frontend/src/App.jsx

@@ -1,62 +0,0 @@
-import { useState, useEffect, useCallback, Suspense } from 'react'
-import { Route, Routes } from 'react-router-dom'
-
-import * as Pages from '/src/pages'
-import { Settings, Loading, Egg, TranslateDialog } from '/src/components'
-
-import { useSettingsStore, useTranslateStore } from '/src/stores'
-
-const EGG_PATTERN = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']
-
-const App = () => {
-  const [eggCount, setEggCount] = useState(0)
-  const [eggVisible, setEggVisible] = useState(false)
-  const [eggKey, setEggKey] = useState(0)
-
-  const languageSupported = useTranslateStore(state => state.navigatorSupported)
-  const translateDialogDismissed = useTranslateStore(state => state.translateDialogDismissed)
-
-  const eggHandler = useCallback(e => {
-    if (EGG_PATTERN.indexOf(e.key) < 0 || e.key !== EGG_PATTERN[eggCount]) return setEggCount(0)
-    setEggCount(eggCount+1)
-    if (EGG_PATTERN.length === eggCount+1) {
-      setEggKey(eggKey+1)
-      setEggCount(0)
-      setEggVisible(true)
-    }
-  }, [eggCount, eggKey])
-
-  useEffect(() => {
-    document.addEventListener('keyup', eggHandler, false)
-    return () => document.removeEventListener('keyup', eggHandler, false)
-  }, [eggHandler])
-
-  // Use user theme preference
-  const theme = useSettingsStore(state => state.theme)
-  useEffect(() => {
-    document.body.classList.toggle('light', theme === 'Light')
-    document.body.classList.toggle('dark', theme === 'Dark')
-  }, [theme])
-
-  return (
-    <>
-      {!languageSupported && !translateDialogDismissed && <TranslateDialog />}
-
-      <Suspense fallback={<Loading />}>
-        <Settings />
-
-        <Routes>
-          <Route path="/" element={<Pages.Home />} />
-          <Route path="/how-to" element={<Pages.Help />} />
-          <Route path="/privacy" element={<Pages.Privacy />} />
-          <Route path="/create" element={<Pages.Create />} />
-          <Route path="/:id" element={<Pages.Event />} />
-        </Routes>
-      </Suspense>
-
-      {eggVisible && <Egg eggKey={eggKey} onClose={() => setEggVisible(false)} />}
-    </>
-  )
-}
-
-export default App

frontend/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next'
 
 import Egg from '/src/components/Egg/Egg'
 import Settings from '/src/components/Settings/Settings'
+import TranslateDialog from '/src/components/TranslateDialog/TranslateDialog'
 import { fallbackLng } from '/src/i18n/options'
 import { useTranslation } from '/src/i18n/server'
 
@@ -33,6 +34,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <Settings />
       {children}
       <Egg />
+      <TranslateDialog />
     </body>
   </html>
 }

frontend/src/components/Egg/Egg.module.scss

@@ -5,11 +5,15 @@
   outline: none;
   width: 100%;
   height: 100%;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   overflow: visible;
 
+  &[open] {
+    display: flex;
+  }
+
   &::backdrop {
     background: rgba(0,0,0,.6);
   }

frontend/src/components/TranslateDialog/TranslateDialog.module.scss

@@ -1,9 +1,7 @@
-import { styled } from 'goober'
-
-export const Wrapper = styled('div')`
+.popup {
   position: fixed;
-  top: 20px;
-  left: 20px;
+  bottom: 20px;
+  right: 20px;
   background-color: var(--background);
   border: 1px solid var(--surface);
   z-index: 900;
@@ -28,9 +26,9 @@ export const Wrapper = styled('div')`
   @media (max-width: 400px) {
     display: block;
   }
-`
+}
 
-export const ButtonWrapper = styled('div')`
+.buttons {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -44,4 +42,4 @@ export const ButtonWrapper = styled('div')`
     margin: 20px 0 0;
     white-space: normal;
   }
-`
+}

frontend/src/components/TranslateDialog/TranslateDialog.tsx

@@ -1,32 +1,52 @@
-import { Button } from '/src/components'
+'use client'
 
-import { useTranslateStore } from '/src/stores'
+import { useEffect, useState } from 'react'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 
-import {
-  Wrapper,
-  ButtonWrapper,
-} from './TranslateDialog.styles'
+import Button from '/src/components/Button/Button'
+import { languages } from '/src/i18n/options'
+import { useStore } from '/src/stores'
+
+import styles from './TranslateDialog.module.scss'
+
+interface TranslateStore {
+  translateDialogDismissed: boolean
+  dismissDialog: () => void
+}
+
+const useTranslateStore = create<TranslateStore>()(persist(
+  set => ({
+    translateDialogDismissed: false,
+    dismissDialog: () => set({ translateDialogDismissed: true }),
+  }),
+  { name: 'crabfit-translate' },
+))
 
 const TranslateDialog = () => {
-  const navigatorLang = useTranslateStore(state => state.navigatorLang)
-  const setDialogDismissed = useTranslateStore(state => state.setDialogDismissed)
+  const [isSupported, setIsSupported] = useState(true)
+  const store = useStore(useTranslateStore, state => state)
 
-  return (
-    <Wrapper>
-      <div>
-        <h2>Translate Crab Fit</h2>
-        <p>Crab Fit hasn't been translated to your language yet.</p>
-      </div>
-      <ButtonWrapper>
-        <Button
-          target="_blank"
-          rel="noreferrer noopener"
-          href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigatorLang)}`}
-        >Help translate!</Button>
-        <Button secondary onClick={() => setDialogDismissed(true)}>Close</Button>
-      </ButtonWrapper>
-    </Wrapper>
-  )
+  // Check if current language has translations
+  useEffect(() => {
+    setIsSupported((languages as readonly string[]).includes(navigator.language.substring(0, 2)))
+  }, [])
+
+  return (store?.translateDialogDismissed === false && !isSupported) ? <div className={styles.popup}>
+    <div>
+      <h2>Translate Crab Fit</h2>
+      <p>Crab Fit hasn't been translated to your language yet.</p>
+    </div>
+
+    <div className={styles.buttons}>
+      <Button
+        target="_blank"
+        rel="noreferrer noopener"
+        href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigator.language)}`}
+      >Help translate!</Button>
+      <Button isSecondary onClick={() => store.dismissDialog()}>Close</Button>
+    </div>
+  </div> : null
 }
 
 export default TranslateDialog

frontend/src/stores/localeUpdateStore.ts

@@ -1,13 +0,0 @@
-import { create } from 'zustand'
-
-interface LocaleUpdateStore {
-  locale: string
-  setLocale: (locale: string) => void
-}
-
-const useLocaleUpdateStore = create<LocaleUpdateStore>()(set => ({
-  locale: 'en',
-  setLocale: locale => set({ locale }),
-}))
-
-export default useLocaleUpdateStore

frontend/src/stores/translateStore.ts

@@ -1,28 +0,0 @@
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-
-import locales from '/src/i18n/locales'
-
-interface TranslateStore {
-  navigatorLang: string
-  navigatorSupported: boolean
-  translateDialogDismissed: boolean
-
-  setDialogDismissed: (isDismissed: boolean) => void
-}
-
-const useTranslateStore = create<TranslateStore>()(persist(
-  set => ({
-    navigatorLang: navigator.language,
-    navigatorSupported: Object.keys(locales).includes(navigator.language.substring(0, 2)),
-    translateDialogDismissed: false,
-
-    setDialogDismissed: isDismissed => set({ translateDialogDismissed: isDismissed }),
-  }),
-  {
-    name: 'crabfit-translate',
-    partialize: state => ({ translateDialogDismissed: state.translateDialogDismissed }),
-  },
-))
-
-export default useTranslateStore

frontend/src/stores/twaStore.ts

@@ -1,14 +0,0 @@
-import { create } from 'zustand'
-
-interface TWAStore {
-  /** Is the site running in a trusted web activity? */
-  isTWA: boolean | undefined
-  setIsTWA: (isTWA: boolean | undefined) => void
-}
-
-const useTWAStore = create<TWAStore>()(set => ({
-  isTWA: undefined,
-  setIsTWA: isTWA => set({ isTWA }),
-}))
-
-export default useTWAStore