locales improvements

Author: MatiasSinisalo

src/client/V2/AppV2.tsx

@@ -16,6 +16,7 @@ import CurrentFilterDisplay from './currentFilterDisplay'
 import TextFeedbackV2 from './components/TextFeedbackV2'
 import { CourseRecommendation } from '../../common/types'
 import AdminModal from './components/AdminModal'
+import LanguageSelector from './components/LanguageSelector'
 
 const desktopDrawerWidth = '33.333vw' // 1/3 of the viewport width
 const mobileDrawerWidth = '80vw' // 80% of the viewport width for mobile
@@ -82,8 +83,9 @@ const OneThirdDrawerLayout = () => {
           <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
             Course Finder
           </Typography>
+          <LanguageSelector />
           {user?.isAdmin && (
-            <Button color="inherit" onClick={() => setAdminModalOpen(true)}>
+            <Button color="inherit" onClick={() => setAdminModalOpen(true)} sx={{ ml: 2 }}>
               ADMIN
             </Button>
           )}

src/client/V2/components/LanguageSelector.tsx

@@ -0,0 +1,38 @@
+import { Select, MenuItem, SelectChangeEvent } from '@mui/material'
+import { useContext } from 'react'
+import { LanguageContext } from '../../contexts/languageContext'
+
+const LanguageSelector = () => {
+  const { language, setAppLanguage } = useContext(LanguageContext)
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAppLanguage(event.target.value)
+  }
+
+  return (
+    <Select
+      value={language}
+      onChange={handleChange}
+      size="small"
+      sx={{
+        color: 'inherit',
+        '& .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'rgba(0, 0, 0, 0.23)',
+        },
+        '&:hover .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'rgba(0, 0, 0, 0.87)',
+        },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'primary.main',
+        },
+        minWidth: 80,
+      }}
+    >
+      <MenuItem value="fi">Suomi</MenuItem>
+      <MenuItem value="en">English</MenuItem>
+      <MenuItem value="sv">Svenska</MenuItem>
+    </Select>
+  )
+}
+
+export default LanguageSelector

src/client/V2/components/NoRecommendationsInfo.tsx

@@ -1,6 +1,40 @@
-import { Box, Typography, Paper } from '@mui/material'
+import { Box, Typography, Paper, Button } from '@mui/material'
+import { useFilterContext } from '../filterContext'
+import { useTranslation } from 'react-i18next'
 
 const NoRecommendationsInfo = () => {
+  const { t } = useTranslation()
+  const {
+    setPreviouslyDoneLang,
+    setReplacement,
+    setMentoring,
+    setFinmu,
+    setChallenge,
+    setGraduation,
+    setStudyPlace,
+    setStudyPeriod,
+    setIntegrated,
+    setIndependent,
+    setMooc,
+    setStrictFilters,
+  } = useFilterContext()
+
+  const handleReset = () => {
+    // Reset all non-mandatory filters to their default values
+    setPreviouslyDoneLang('')
+    setReplacement('')
+    setMentoring('')
+    setFinmu('')
+    setChallenge('')
+    setGraduation('')
+    setStudyPlace([])
+    setStudyPeriod([])
+    setIntegrated('')
+    setIndependent('')
+    setMooc('')
+    setStrictFilters([])
+  }
+
   return (
     <Paper
       elevation={2}
@@ -13,11 +47,25 @@ const NoRecommendationsInfo = () => {
     >
       <Box>
         <Typography variant="h6" component="h2" gutterBottom>
-          Kursseja ei löytynyt
+          {t('v2:noRecommendations.title')}
         </Typography>
-        <Typography variant="body1" color="textSecondary">
-          Yritä muuttaa valintojasi nähdäksesi kursseja.
+        <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
+          {t('v2:noRecommendations.description')}
         </Typography>
+        <Button
+          variant="outlined"
+          onClick={handleReset}
+          sx={{
+            borderColor: '#90caf9',
+            color: 'black',
+            '&:hover': {
+              backgroundColor: '#2196f3',
+              color: 'white',
+            },
+          }}
+        >
+          {t('v2:noRecommendations.resetButton')}
+        </Button>
       </Box>
     </Paper>
   )

src/client/locales/en.ts

@@ -85,7 +85,12 @@ export default {
     },
     'retakeQuestions': 'Answer starting questions',
     'done': 'Done',
-    'welcomeText': 'First, answer a few initial questions. You can modify these later.'
+    'welcomeText': 'First, answer a few initial questions. You can modify these later.',
+    'noRecommendations': {
+      'title': 'No courses found',
+      'description': 'Try changing your selections to see courses.',
+      'resetButton': 'Reset'
+    }
   },
   'course': {
     'show': 'Show',

src/client/locales/fi.ts

@@ -85,7 +85,12 @@ export default {
     },
     'retakeQuestions': 'Vastaa alkukysymyksiin',
     'done': 'Valmis',
-    'welcomeText': 'Vastaa ensin muutamaan alkukysymykseen. Voit muokata näitä myöhemmin.'
+    'welcomeText': 'Vastaa ensin muutamaan alkukysymykseen. Voit muokata näitä myöhemmin.',
+    'noRecommendations': {
+      'title': 'Kursseja ei löytynyt',
+      'description': 'Yritä muuttaa valintojasi nähdäksesi kursseja.',
+      'resetButton': 'Nollaa'
+    }
   },
   'course': {
     'show': 'Näytä',

src/client/locales/sv.ts

@@ -85,7 +85,12 @@ export default {
     },
     'retakeQuestions': 'Svara på startfrågorna',
     'done': 'Klar',
-    'welcomeText': 'Svara först på några inledande frågor. Du kan ändra dessa senare.'
+    'welcomeText': 'Svara först på några inledande frågor. Du kan ändra dessa senare.',
+    'noRecommendations': {
+      'title': 'Inga kurser hittades',
+      'description': 'Försök ändra dina val för att se kurser.',
+      'resetButton': 'Återställ'
+    }
   },
   'course': {
     'show': 'Visa',