Merge pull request #44 from accso/NikAcc/fix-language-reload

Fix language dropdown to trigger page reload

Author: marcus67

frontend/src/components/DropdownMenu.tsx

@@ -55,4 +55,4 @@ const dropdownStyle = (props: DropdownProps, backgroundColor: string) => {
     }
 }
 
-export default DropdownMenu
+export default DropdownMenu

frontend/src/components/ImageDropDown.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {colors, ListItemIcon, ListItemText, MenuItem, Select} from "@mui/material";
+import {ListItemText, MenuItem, Select} from "@mui/material";
 import KeyboardDoubleArrowDownRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowDownRounded";
 import {ImageDropdownProps} from "../utilities/interfaces/ImageDropdownProps";
 
@@ -24,25 +24,22 @@ const ImageDropDown: React.FunctionComponent<ImageDropdownProps> = (props: Image
     currentValue = e.target.value;
     props.localStorageItemKey ? localStorage.setItem(props.localStorageItemKey, currentValue) : gotImageURLs = gotImageURLs /* Do nothing */;
     currentIndex = props.values.indexOf(currentValue);
-    setText(props.texts[currentIndex]);
+    const currText = props.texts[currentIndex]
+    setText(currText);
     props.imageURLs ? setImageURL(props.imageURLs[currentIndex]) : setImageURL("");
     props.colors ? setBackgroundColor(props.colors[currentIndex]) : setBackgroundColor(currentBackgroundColor);
+    props.onSelectionChange?.(currText, currentValue)
   }
 
   return (
       <Select
           sx={imageDropDownStyle(currentBackgroundColor)}
           IconComponent={KeyboardDoubleArrowDownRoundedIcon}
           onChange={handleChange}
-          value={props.texts}
-          renderValue={() => (
-              <MenuItem sx={menuItemStyle} value={currentValue}>
-                <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={currentText}/>
-              </MenuItem>
-          )}
+          value={currentValue}
       >
-        {props.texts.map((value) => (
-            <MenuItem sx={menuItemStyle} value={props.values[props.texts.indexOf(value)]}>
+        {props.texts.map((value, index) => (
+            <MenuItem key={value} sx={menuItemStyle} value={props.values[index]}>
               <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={value}/>
             </MenuItem>
         ))}

frontend/src/components/LoginBox.tsx

@@ -41,7 +41,7 @@ const LoginBox: React.FunctionComponent = () => {
                     username: username,
                     password: password,
                     keepMeLoggedIn: stayLoggedIn,
-                }).then(navigateAfterLogin).catch(() => {
+                }).then(reloadPage).catch(() => {
                     notification.error(localization.notificationMessage.incorrectLogin)
                 })
             } else {
@@ -50,7 +50,7 @@ const LoginBox: React.FunctionComponent = () => {
         }
     }
 
-    const navigateAfterLogin = () => {
+    const reloadPage = () => {
         window.location.reload();
     }
 
@@ -64,6 +64,7 @@ const LoginBox: React.FunctionComponent = () => {
                                imagesOnly={false}
                                localStorageItemKey={localStorageItemKeys.selectedLanguage}
                                defaultIndex={defaultLanguageIndex != -1 ? defaultLanguageIndex : 0}
+                               onSelectionChange={reloadPage}
                 />
         </Stack>
         <Stack sx={headlineContainer}>

frontend/src/utilities/interfaces/ImageDropdownProps.tsx

@@ -39,4 +39,8 @@ export interface ImageDropdownProps {
      * Show images only (no text)
      */
     imagesOnly?: boolean
+    /**
+     * Triggered whenever the selection changes
+     */
+    onSelectionChange?: (text: string, value: string) => void
 }