feat: easter language toggle

README.md

@@ -1,15 +1,28 @@
 # Open bus ranking app
 
 ## Welcome!
-This is the official repository of the open bus (תחב"צ פתוחה) project - also known as "ShameBus".
+This is the official repository of the open bus (תחב"צ פתוחה / דאטאבוס) project - also known as "ShameBus".
 [link to the project](https://open-bus-map-search.hasadna.org.il/dashboard)
-- While in the site, type "storybook" (in lowercase) to see a secret 😉
 
 Please feel free to submit pull requests and contribute to the project (see the "contribution" section).
 
 ## View video (Hebrew language):
 [![video (hebrew) about the project](https://img.youtube.com/vi/6H6jkJCVhgk/0.jpg)](https://www.youtube.com/watch?v=6H6jkJCVhgk)
 
+# Easter eggs
+We've hidden a couple of fun surprises in our web app, just for you. Discovering them is as easy as typing a few magic words on your keyboard.
+
+## How to Find the Easter Eggs
+1. Open our [web app](https://open-bus-map-search.hasadna.org.il/dashboard)
+2. **Unleash the Magic Words:**
+   To reveal the hidden gems, use your keyboard to type the following commands:
+
+   - **Type "storybook":**
+     Watch the magic unfold as you type "storybook" on your keyboard. You might just stumble upon our Storybook, a treasure trove of UI components showcasing the beauty and functionality of our app.
+   - **Type "english":**
+     Feel like switching up the language? Type "english" and see the language toggle in action. Our app is multilingual, and you can experience it by triggering this secret command.
+
+
 ## deployments
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/d3ef62c2-b5bb-48ac-8299-71e5bd22b211/deploy-status)](https://app.netlify.com/sites/open-bus/deploys)

src/App.tsx

@@ -18,9 +18,8 @@ import { heIL as heILmui } from '@mui/x-date-pickers/locales'
 import { ThemeProvider, createTheme } from '@mui/material'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
-
+import { EasterEgg, Envelope } from './pages/EasterEgg/EasterEgg'
 import { usePages } from './routes'
-import { EasterEgg } from './pages/EasterEgg/EasterEgg'
 import MainLayout from './layout'
 
 const theme = createTheme(
@@ -105,7 +104,11 @@ const App = () => {
 const RoutedApp = () => (
   <Router>
     <App />
-    <EasterEgg />
+    <EasterEgg code="storybook">
+      <a href="/storybook/index.html">
+        <Envelope />
+      </a>
+    </EasterEgg>
   </Router>
 )
 export default RoutedApp

src/layout/sidebar/menu/Menu.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useReducer, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import './menu.scss'
 import { useTranslation } from 'react-i18next'
 import { usePages } from 'src/routes'
 
 import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
+import { Button } from '@mui/material'
+import { EasterEgg } from 'src/pages/EasterEgg/EasterEgg'
 
 type MenuItem = Required<MenuProps>['items'][number]
 function getItem(
@@ -22,19 +24,33 @@ function getItem(
   } as MenuItem
 }
 
-const MainMenu = () => {
+const LanguageToggle = () => {
   const { t, i18n } = useTranslation()
+  const [, handleChangeLanguage] = useReducer((state: string) => {
+    const newLanguage = { he: 'en', en: 'he' }[state]
+    i18n.changeLanguage(newLanguage)
+    return newLanguage!
+  }, 'he')
+
+  return (
+    <EasterEgg code="english">
+      <Button
+        onClick={handleChangeLanguage}
+        variant="contained"
+        style={{ margin: 'auto', display: 'block' }}>
+        {t('Change Language')}
+      </Button>
+    </EasterEgg>
+  )
+}
+
+const MainMenu = () => {
+  const { t } = useTranslation()
   const pages = usePages()
   const items: MenuItem[] = pages.map((itm) => {
     return getItem(<Link to={t(itm.path)}>{t(itm.label)}</Link>, itm.path, itm.icon)
   })
-  const [currentLanguage, setCurrentLanguage] = useState('en')
 
-  const handleChangeLanguage = () => {
-    const newLanguage = currentLanguage === 'en' ? 'he' : 'en'
-    setCurrentLanguage(newLanguage)
-    i18n.changeLanguage(newLanguage)
-  }
   const location = useLocation()
   const [current, setCurrent] = useState(
     location.pathname === '/' || location.pathname === '' ? '/dashboard' : location.pathname,
@@ -60,7 +76,7 @@ const MainMenu = () => {
         mode="inline"
         items={items}
       />
-      {null && <button onClick={handleChangeLanguage}>Change Language</button>}
+      {<LanguageToggle />}
     </>
   )
 }

src/locale/en.json

@@ -70,6 +70,7 @@
   "migdal_company": "\"A tower in the community\"",
   "and_smaller_donors": "And other small contributions from my friends and fans of the workshop.",
   "github_link": "Go to GitHub",
+  "Change Language":"שנה שפה",
   "bug_title": "Title/Summary",
   "bug_title_message": "Please enter a title/summary!",
   "bug_description": "Description",

src/locale/he.json

@@ -70,6 +70,7 @@
   "and_smaller_donors": "ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.",
   "gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
   "github_link": "למעבר אל GitHub",
+  "Change Language":"Change Language",
   "bug_title": "כותרת/סיכום",
   "bug_title_message": "אנא הזן כותרת/סיכום!",
   "bug_description": "תיאור",

src/pages/EasterEgg/EasterEgg.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { createContext, useContext, useState } from 'react'
 import styled from 'styled-components'
 import useKonami from 'use-konami'
 
@@ -202,32 +202,38 @@ const EnvelopeWrapper = styled.div`
     }
   }
 `
-const Envelope = ({ fade }: { fade: boolean }) => (
-  <EnvelopeWrapper>
-    <div className={fade ? 'letter-image fade-out' : 'letter-image'}>
-      <div className="animated-mail">
-        <div className="back-fold"></div>
-        <div className="letter">
-          <div className="letter-border"></div>
-          <div className="letter-title"></div>
-          <div className="letter-context"></div>
-          <div className="letter-favicon">
-            <img src="/favicon.ico" alt="busFavicon" />
-          </div>
-          <div className="letter-stamp">
-            <div className="letter-stamp-inner"></div>
+
+const FadeContext = createContext(false)
+
+export const Envelope = () => {
+  const fade = useContext(FadeContext)
+  return (
+    <EnvelopeWrapper>
+      <div className={fade ? 'letter-image fade-out' : 'letter-image'}>
+        <div className="animated-mail">
+          <div className="back-fold"></div>
+          <div className="letter">
+            <div className="letter-border"></div>
+            <div className="letter-title"></div>
+            <div className="letter-context"></div>
+            <div className="letter-favicon">
+              <img src="/favicon.ico" alt="busFavicon" />
+            </div>
+            <div className="letter-stamp">
+              <div className="letter-stamp-inner"></div>
+            </div>
           </div>
+          <div className="top-fold"></div>
+          <div className="body"></div>
+          <div className="left-fold"></div>
         </div>
-        <div className="top-fold"></div>
-        <div className="body"></div>
-        <div className="left-fold"></div>
+        <div className="shadow"></div>
       </div>
-      <div className="shadow"></div>
-    </div>
-  </EnvelopeWrapper>
-)
+    </EnvelopeWrapper>
+  )
+}
 
-export function EasterEgg() {
+export function EasterEgg({ children, code }: { children?: React.ReactNode; code: string }) {
   const [show, setShow] = useState(false)
   const [fade, setFade] = useState(false)
   useKonami({
@@ -241,13 +247,7 @@ export function EasterEgg() {
         setFade(false)
       }, 10000)
     },
-    sequence: 'storybook'.split(''),
+    sequence: code.split(''),
   })
-  return (
-    show && (
-      <a href="/storybook/index.html">
-        <Envelope fade={fade} />
-      </a>
-    )
-  )
+  return show && <FadeContext.Provider value={fade}>{children}</FadeContext.Provider>
 }