LanguageFood on develop branch

rogue-thi-app/components/cards/FoodCard.jsx

@@ -21,11 +21,14 @@ export default function FoodCard () {
   const [foodError, setFoodError] = useState(null)
   const {
     selectedRestaurants,
+    selectedLanguageFood,
     preferencesSelection,
     allergenSelection
   } = useContext(FoodFilterContext)
   const { i18n, t } = useTranslation(['dashboard', 'food'])
 
+  const languageFood = (selectedLanguageFood && selectedLanguageFood !== 'default') ? selectedLanguageFood : i18n.languages[0]
+
   useEffect(() => {
     async function load () {
       const restaurants = localStorage.selectedRestaurants
@@ -76,19 +79,19 @@ export default function FoodCard () {
           setFoodEntries([])
         } else if (todayEntries.length > 2) {
           setFoodEntries([
-            todayEntries[0].name[i18n.languages[0]],
+            todayEntries[0].name[languageFood],
             `${t('food.text.additional', { count: todayEntries.length - 1 })}`
           ])
         } else {
-          setFoodEntries(todayEntries.map(x => x.name[i18n.languages[0]]))
+          setFoodEntries(todayEntries.map(x => x.name[languageFood]))
         }
       } catch (e) {
         console.error(e)
         setFoodError(e)
       }
     }
     load()
-  }, [selectedRestaurants, preferencesSelection, allergenSelection, t, i18n])
+  }, [selectedRestaurants, preferencesSelection, allergenSelection, t, i18n, languageFood])
 
   const placeholder = (
     <ListGroup variant='flush' >

rogue-thi-app/components/modal/LanguageModal.jsx

@@ -1,5 +1,6 @@
 import { useContext, useRef } from 'react'
-import { ShowLanguageModal } from '../../pages/_app'
+
+import { FoodFilterContext, ShowLanguageModal } from '../../pages/_app'
 
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
@@ -22,6 +23,8 @@ export default function LanguageModal () {
 
   const { t, i18n } = useTranslation('personal')
 
+  const { selectedLanguageFood, toggleSelectedLanguageFood } = useContext(FoodFilterContext)
+
   /**
    * Changes the current language.
    * @param {string} languageKey Language key
@@ -56,6 +59,33 @@ export default function LanguageModal () {
             </Button>
           ))}
         </Form>
+
+        <hr/>
+        <div>
+          <h6>
+            {t('personal.modals.languageFood.title')}
+          </h6>
+        </div>
+
+        <Form.Check
+          id='languageFood-default'
+          label={t('personal.modals.languageFood.default')}
+          checked={selectedLanguageFood === 'default'}
+          onChange={() => toggleSelectedLanguageFood('default')}
+          type={'radio'}
+        />
+
+        {languages.map((language, i) => (
+          <Form.Check
+            key={i}
+            id={`languageFood-${language.key}`}
+            label={language.name[i18n.languages[0]]}
+            checked={selectedLanguageFood === language.key}
+            onChange={() => toggleSelectedLanguageFood(language.key)}
+            type={'radio'}
+          />
+        ))}
+
       </Modal.Body>
     </Modal>
   )

rogue-thi-app/lib/hooks/food-filter.js

@@ -5,9 +5,11 @@ import { useEffect, useState } from 'react'
  * @property {(value: (((prevState: {}) => {}) | {})) => void} setAllergenSelection - A function that sets the selected allergens.
  * @property {{}} allergenSelection - An object containing the selected allergens.
  * @property {toggleSelectedRestaurant} toggleSelectedRestaurant - A function that toggles the selection of a restaurant.
+ * @property {toggleSelectedLanguageFood} toggleSelectedLanguageFood - A function that sets the selected LanguageFood.
  * @property {{}} preferencesSelection - An object containing the selected preferences.
  * @property {(value: (((prevState: {}) => {}) | {})) => void} setPreferencesSelection - A function that sets the selected preferences.
  * @property {string[]} selectedRestaurants - An array containing the selected restaurants.
+ * @property {string[]} selectedLanguageFood - Contains the selected LanguageFood.
  * @property {savePreferencesSelection} savePreferencesSelection - A function that saves the selected preferences.
  * @property {saveAllergenSelection} saveAllergenSelection - A function that saves the selected allergens.
  */
@@ -18,6 +20,12 @@ import { useEffect, useState } from 'react'
  * @returns {void}
  */
 
+/**
+ * @callback toggleSelectedLanguageFood
+ * @param {string} language - The language of LanguageFood to set.
+ * @returns {void}
+ */
+
 /**
  * @callback savePreferencesSelection
  * @param {{}} preferences - An object containing the preferences to save.
@@ -30,6 +38,7 @@ import { useEffect, useState } from 'react'
  * @returns {void}
  */
 export function useFoodFilter () {
+  const [selectedLanguageFood, setSelectedLanguageFood] = useState('default')
   const [selectedRestaurants, setSelectedRestaurants] = useState(['mensa', 'reimanns', 'reimanns-static'])
   const [preferencesSelection, setPreferencesSelection] = useState({})
   const [allergenSelection, setAllergenSelection] = useState({})
@@ -45,6 +54,9 @@ export function useFoodFilter () {
     if (localStorage.selectedRestaurants) {
       setSelectedRestaurants(JSON.parse(localStorage.selectedRestaurants))
     }
+    if (localStorage.selectedLanguageFood) {
+      setSelectedLanguageFood(JSON.parse(localStorage.selectedLanguageFood))
+    }
   }, [])
 
   /**
@@ -62,6 +74,15 @@ export function useFoodFilter () {
     localStorage.selectedRestaurants = JSON.stringify(newSelection)
   }
 
+  /**
+   * Sets the Language for the food menu.
+   * @param {string} name language name (either `default`, `de` or `en`)
+   */
+  function toggleSelectedLanguageFood (name) {
+    setSelectedLanguageFood(name)
+    localStorage.selectedLanguageFood = JSON.stringify(name)
+  }
+
   /**
    * Persists the preferences selection to localStorage
    */
@@ -78,11 +99,13 @@ export function useFoodFilter () {
 
   return {
     selectedRestaurants,
+    selectedLanguageFood,
     preferencesSelection,
     setPreferencesSelection,
     allergenSelection,
     setAllergenSelection,
     toggleSelectedRestaurant,
+    toggleSelectedLanguageFood,
     savePreferencesSelection,
     saveAllergenSelection,
     showFoodFilterModal,

rogue-thi-app/pages/food.jsx

@@ -46,6 +46,7 @@ Object.keys(allergenMap)
 export default function Mensa () {
   const {
     selectedRestaurants,
+    selectedLanguageFood,
     preferencesSelection,
     allergenSelection,
     setShowFoodFilterModal
@@ -59,7 +60,8 @@ export default function Mensa () {
   const userKind = useUserKind()
   const router = useRouter()
   const { i18n, t } = useTranslation('food')
-  const currentLocale = i18n.languages[0]
+
+  const currentLocale = (selectedLanguageFood && selectedLanguageFood !== 'default') ? selectedLanguageFood : i18n.languages[0]
 
   useEffect(() => {
     async function load () {
@@ -173,7 +175,7 @@ export default function Mensa () {
         <ListGroup className={styles.variations}>
           {meal?.variations?.map((variant, idx) => (
             <ListGroupItem
-              title={variant.name[i18n.languages[0]]}
+              title={variant.name[currentLocale]}
               content={`${variant.additional ? '+ ' : ''}${getUserSpecificPrice(variant)}`}
               key={idx}
             />
@@ -203,7 +205,7 @@ export default function Mensa () {
         <div>
           <div className={styles.variation}>
             <div className={styles.name}>
-              {meal.name[i18n.languages[0]]}
+              {meal.name[currentLocale]}
             </div>
 
             <div className={styles.details}>
@@ -341,7 +343,7 @@ export default function Mensa () {
     )
   }
 
-  const isTranslated = (meal) => meal?.originalLanguage !== i18n.languages[0]
+  const isTranslated = (meal) => meal?.originalLanguage !== currentLocale
 
   return (
     <AppContainer>
@@ -380,7 +382,7 @@ export default function Mensa () {
           </Modal.Header>
 
           <Modal.Body>
-            <h4 className={styles.modalTitle}>{showMealDetails?.name[i18n.languages[0]]}</h4>
+            <h4 className={styles.modalTitle}>{showMealDetails?.name[currentLocale]}</h4>
 
             <h6>{t('foodModal.flags.title')}</h6>
             {showMealDetails?.flags === null && (
@@ -400,7 +402,7 @@ export default function Mensa () {
                   {' '}
                   <strong>{flag}</strong>
                   {' – '}
-                  {flagMap[flag]?.[currentLocale] || `${t('foodModal.allergens.fallback')}`}
+                  {flagMap[flag]?.[i18n.languages[0]] || `${t('foodModal.allergens.fallback')}`}
                 </li>
               ))}
             </ul>
@@ -424,7 +426,7 @@ export default function Mensa () {
                   {' '}
                   <strong>{key}</strong>
                   {' – '}
-                  {allergenMap[key]?.[currentLocale] || `${t('foodModal.allergens.fallback')}`}
+                  {allergenMap[key]?.[i18n.languages[0]] || `${t('foodModal.allergens.fallback')}`}
                 </li>
               ))}
             </ul>
@@ -543,7 +545,7 @@ export default function Mensa () {
                 </li>
                 <li>
                   <strong>{t('foodModal.translation.translatedName')}</strong>:{' '}
-                  {showMealDetails?.name[i18n.languages[0]]}
+                  {showMealDetails?.name[currentLocale]}
                 </li>
               </ul>
             )}

rogue-thi-app/public/locales/de/personal.json

@@ -26,6 +26,10 @@
             "language": {
                 "title": "Sprache"
             },
+            "languageFood":{
+                "title":"Sprache für den Speiseplan",
+                "default":"Standard"
+            },
             "personalData": {
                 "matriculationNumber": "Matrikelnummer",
                 "libraryNumber": "Bibliotheksnummer",

rogue-thi-app/public/locales/en/personal.json

@@ -26,6 +26,10 @@
             "language": {
                 "title": "Language"
             },
+            "languageFood":{
+                "title":"Language for food menu",
+                "default":"Default"
+            },
             "personalData": {
                 "matriculationNumber": "Matriculation Number",
                 "libraryNumber": "Library Number",