locales betternments

Author: MatiasSinisalo

src/client/V2/AppV2.tsx

@@ -17,6 +17,7 @@ import TextFeedbackV2 from './components/TextFeedbackV2'
 import { CourseRecommendation } from '../../common/types'
 import AdminModal from './components/AdminModal'
 import LanguageSelector from './components/LanguageSelector'
+import { useTranslation } from 'react-i18next'
 
 const desktopDrawerWidth = '33.333vw' // 1/3 of the viewport width
 const mobileDrawerWidth = '80vw' // 80% of the viewport width for mobile
@@ -26,7 +27,8 @@ const OneThirdDrawerLayout = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const [open, setOpen] = useState(!isMobile) 
   const [adminModalOpen, setAdminModalOpen] = useState(false)
-  const { modalOpen, setModalOpen, finalRecommendedCourses } = useFilterContext() 
+  const { modalOpen, setModalOpen, finalRecommendedCourses } = useFilterContext()
+  const { t } = useTranslation()
   useEffect(() => {
     setOpen(!isMobile) 
   }, [isMobile])
@@ -40,7 +42,9 @@ const OneThirdDrawerLayout = () => {
     return (
       <Stack direction='column' sx={{width: '100vw', height: '100vh'}}>
         <Typography variant='h2' sx={{marginLeft: 'auto', marginRight: 'auto'}}>Apparaatti</Typography> 
-        <Typography sx={{marginLeft: 'auto', marginRight: 'auto'}}>Please log in: <a href="/api/login">here</a></Typography>
+        <Typography sx={{marginLeft: 'auto', marginRight: 'auto'}}>
+          {t('v2:loginPrompt')} <a href="/api/login">{t('v2:loginLink')}</a>
+        </Typography>
 
       </Stack>
     )
@@ -81,12 +85,12 @@ const OneThirdDrawerLayout = () => {
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-            Course Finder
+            {t('v2:appTitle')}
           </Typography>
           <LanguageSelector />
           {user?.isAdmin && (
             <Button color="inherit" onClick={() => setAdminModalOpen(true)} sx={{ ml: 2 }}>
-              ADMIN
+              {t('v2:adminButton')}
             </Button>
           )}
         </Toolbar>

src/client/V2/FilterRenderer.tsx

@@ -3,7 +3,6 @@ import { pickVariant, updateVariantToDisplayId } from '../hooks/useQuestions'
 import FilterAccordion from './FilterAccordion'
 import { useFilterContext, filterConfigMap } from './filterContext'
 import Filter from './filters/filter'
-import { filterTitles } from './sideBarContent'
 
 const FilterRenderer = ({ filter }: { filter: any }) => {
   const filters = useFilterContext()
@@ -16,7 +15,7 @@ const FilterRenderer = ({ filter }: { filter: any }) => {
     const setState = config ? config.setState : () => {}
     const displayType = config && config.displayType ? config.displayType : 'singlechoice'
     const superToggle = config && config.superToggle !== undefined ? config.superToggle : true
-    const shortName = config ? config.shortName : ''
+    const shortName = filter.shortName || filter.id
 
     const skipInSideBar = config ? config.hideInFilterSideBar : false
     return {...filter, displayType, state, setState, superToggle, shortName, skipInSideBar}
@@ -32,7 +31,7 @@ const FilterRenderer = ({ filter }: { filter: any }) => {
   return (
     <FilterAccordion
       key={filter.id}
-      title={filterToRender.shortName || filterTitles[filter.id] || filter.id}
+      title={filterToRender.shortName}
     >
       <Filter variant={variant} filter={filterToRender} />
     </FilterAccordion>

src/client/V2/currentFilterDisplay.tsx

@@ -46,6 +46,7 @@ const ActiveFilterCard = ({ filterId }: {filterId: string}) => {
   const cfg = filterConfigMap(filterContext).get(filterId)
   const hide = cfg?.hideInCurrentFiltersDisplay != undefined ? cfg.hideInCurrentFiltersDisplay : false
   const variant = getFilterVariant(filterContext, filterId)
+  const question = filterContext.filters.find((q: any) => q.id === filterId)
 
   const handleClearFilter = () => {
     if (!cfg) return
@@ -65,7 +66,7 @@ const ActiveFilterCard = ({ filterId }: {filterId: string}) => {
   return (
     <Stack direction="row" alignItems="center" spacing={1}>
       <Typography variant="body1">
-        <strong>{cfg?.shortName}: </strong>
+        <strong>{question?.shortName || filterId}: </strong>
       </Typography>
       <Stack direction="row" spacing={1} flexWrap="wrap">
         <FilterValueRenderer cfg={cfg} variant={variant}/>

src/client/V2/filterContext.tsx

@@ -68,7 +68,6 @@ interface FilterContextType {
 
 export const filterConfigMap = (filters: any) => new Map([
   ['study-field-select', {
-    shortName: 'Opinto-oikeus',
     state: filters.studyField,
     setState: filters.setStudyField,
     displayType: 'dropdownselect',
@@ -77,83 +76,70 @@ export const filterConfigMap = (filters: any) => new Map([
     hideInRecommendationReasons: true
   }],
   ['primary-language', {
-    shortName: 'Koulukieli',
     state: filters.primaryLanguage,
     setState: filters.setPrimaryLanguage,
     hideInCurrentFiltersDisplay: false,
     hideInRecommendationReasons: true
   }],
   ['lang', {
-    shortName: 'Kurssi',
     state: filters.language,
     setState: filters.setLanguage,
     hideInRecommendationReasons: true
   }],
   ['primary-language-specification', {
-    shortName: 'Viestintä',
     state: filters.primaryLanguageSpecification,
     setState: filters.setPrimaryLanguageSpecification,
     hideInRecommendationReasons: true
   }],
   ['previusly-done-lang', {
-    shortName: 'Aikaisemmat opinnot',
     state: filters.previouslyDoneLang,
     setState: filters.setPreviouslyDoneLang,
     superToggle: false,
     hideInCurrentFiltersDisplay: true,
     hideInRecommendationReasons: true
   }],
   ['replacement', {
-    shortName: 'Korvaava',
     state: filters.replacement,
     setState: filters.setReplacement,
     superToggle: false
   }],
   ['mentoring', {
-    shortName: 'Valmentava',
     state: filters.mentoring,
     setState: filters.setMentoring,
     superToggle: false
   }],
   ['finmu', {
-    shortName: 'Finmu',
     state: filters.finmu,
     setState: filters.setFinmu,
     superToggle: false
   }],
   ['challenge', {
-    shortName: 'Edistynyt',
     state: filters.challenge,
     setState: filters.setChallenge,
     superToggle: false
   }],
   ['graduation', {
-    shortName: 'Valmistuville',
     state: filters.graduation,
     setState: filters.setGraduation,
     superToggle: false
   }],
   ['integrated', {
-    shortName: 'Integroitu',
     state: filters.integrated,
     setState: filters.setIntegrated,
     superToggle: false
   }],
   ['independent', {
-    shortName: 'Itsenäinen',
     state: filters.independent,
     setState: filters.setIndependent,
     superToggle: false
   }],
   ['study-place', {
-    shortName: 'Opetusmuoto',
     state: filters.studyPlace,
     setState: filters.setStudyPlace,
     displayType: 'multichoice',
     superToggle: true
   }],
   ['study-year', {
-    shortName: 'Lukuvuosi',
     state: filters.studyYear,
     setState: filters.setStudyYear,
     displayType: 'singlechoice',
@@ -162,14 +148,12 @@ export const filterConfigMap = (filters: any) => new Map([
     hideInFilterSideBar: true
   }],
   ['study-period', {
-    shortName: 'Periodi',
     state: filters.studyPeriod,
     setState: filters.setStudyPeriod,
     displayType: 'multichoice',
     superToggle: false
   }],
   ['mooc', {
-    shortName: 'MOOC',
     state: filters.mooc,
     setState: filters.setMooc,
     superToggle: true
@@ -198,12 +182,11 @@ export const getCoordinateDisplayName = (coordinateKey: string, filterContext: a
   const filterId = coordinateKeyToFilterId[coordinateKey]
   if (!filterId) return coordinateKey
 
-  const filterConfig = filterConfigMap(filterContext)
-  const filterCfg = filterConfig.get(filterId)
+  const question = filterContext.filters.find((q: any) => q.id === filterId)
 
-  if (!filterCfg?.shortName) return coordinateKey
+  if (!question?.shortName) return coordinateKey
 
-  return t(`filterShortName:${filterCfg.shortName}`)
+  return question.shortName
 }
 
 

src/client/V2/sideBarContent.tsx

@@ -4,29 +4,12 @@ import { useTranslation } from 'react-i18next'
 import ActionButtonV2 from './components/ActionButtonV2'
 import { Box } from '@mui/material'
 
-export const filterTitles: { [key: string]: string } = {
-  'study-field-select': 'Study Field',
-  'primary-language': 'Primary Language',
-  lang: 'Language of Study',
-  'primary-language-specification': 'Language Skills',
-  'previusly-done-lang': 'Previous Language Studies',
-  replacement: 'Replacement Courses',
-  mentoring: 'Mentoring',
-  finmu: 'Finmu',
-  challenge: 'Extra Challenge',
-  graduation: 'Close to Graduation',
-  'study-place': 'Study Method',
-  'study-period': 'Study Period',
-  integrated: 'Integrated Studies',
-  independent: 'Independent Study',
-}
-
 const SidebarContent = () => {
   const { filters, isLoading, setModalOpen } = useFilterContext()
   const { t } = useTranslation()
 
   if (isLoading) {
-    return <p>Loading filters...</p>
+    return <p>{t('v2:loadingFilters')}</p>
   }
 
   const filtersToShow = filters.filter(

src/client/hooks/useQuestions.tsx

@@ -133,6 +133,7 @@ const useQuestions = () => {
       mandatory: true,
       effects: 'org',
       id: 'study-field-select',
+      shortName: t('filterShortName:Opinto-oikeus'),
       type: 'studyphase',
       variants: [
         {
@@ -146,6 +147,7 @@ const useQuestions = () => {
       mandatory: true,
       effects: 'lang',
       id: 'primary-language',
+      shortName: t('filterShortName:Koulukieli'),
       type: 'primary-language',
       explanation: t('form:primaryLanguageExplanation'),
       variants: [
@@ -165,6 +167,7 @@ const useQuestions = () => {
       mandatory: true,
       effects: 'lang',
       id: 'lang',
+      shortName: t('filterShortName:Kurssi'),
       type: 'language',
       explanation: t('form:searchedLanguageExplanation'),
       variants: [
@@ -185,6 +188,7 @@ const useQuestions = () => {
       mandatory: true,
       effects: 'lang',
       id: 'primary-language-specification',
+      shortName: t('filterShortName:Viestintä'),
       isSubQuestionForQuestionId: 'lang',
       type: 'primary-language-specification',
 
@@ -205,6 +209,7 @@ const useQuestions = () => {
       effects: 'none',
       mandatory: false,
       id: 'previusly-done-lang',
+      shortName: t('filterShortName:Aikaisemmat opinnot'),
       type: 'previusly-done-lang',
       explanation: t('form:previoslyDoneLangExplanation'),
       extraInfo:  t('question:checkInstructionsCrediting'),
@@ -221,6 +226,7 @@ const useQuestions = () => {
       mandatory: false,
       effects: 'date',
       id: 'study-year',
+      shortName: t('filterShortName:Lukuvuosi'),
       type: 'period-date',
       variants: [
         {
@@ -239,6 +245,7 @@ const useQuestions = () => {
       mandatory: false,
       effects: 'date',
       id: 'study-period',
+      shortName: t('filterShortName:Periodi'),
       type: 'period-date',
       // explanation: 'Mistä periodista haluat kursseja?',
       variants: [
@@ -266,6 +273,7 @@ const useQuestions = () => {
       mandatory: false,
       effects: 'none',
       id: 'replacement',
+      shortName: t('filterShortName:Korvaava'),
       type: 'multi',
       variants: [
         {
@@ -305,6 +313,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'mentoring',
+      shortName: t('filterShortName:Valmentava'),
       effects: 'mentoring',
       type: 'multi',
 
@@ -336,6 +345,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'finmu',
+      shortName: t('filterShortName:Finmu'),
       effects: 'finmu',
       type: 'multi',
       variants: [
@@ -357,6 +367,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'challenge',
+      shortName: t('filterShortName:Edistynyt'),
       effects: 'challenge',
       type: 'multi',
       variants: [
@@ -404,6 +415,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'graduation',
+      shortName: t('filterShortName:Valmistuville'),
       type: 'multi',
 
       effects: 'graduation',
@@ -419,6 +431,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'study-place',
+      shortName: t('filterShortName:Opetusmuoto'),
       effects: 'studyPlace',
       type: 'study-place',
       variants: [
@@ -439,6 +452,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'integrated',
+      shortName: t('filterShortName:Integroitu'),
       effects: 'integrated',
       type: 'multi',
       variants: [
@@ -464,6 +478,7 @@ const useQuestions = () => {
       number: '',
       mandatory: false,
       id: 'independent',
+      shortName: t('filterShortName:Itsenäinen'),
       effects: 'independent',
       type: 'multi',
       variants: [

src/client/locales/en.ts

@@ -90,7 +90,12 @@ export default {
       'title': 'No courses found',
       'description': 'Try changing your selections to see courses.',
       'resetButton': 'Reset'
-    }
+    },
+    'appTitle': 'Course Finder',
+    'adminButton': 'ADMIN',
+    'loginPrompt': 'Please log in:',
+    'loginLink': 'here',
+    'loadingFilters': 'Loading filters...'
   },
   'course': {
     'show': 'Show',

src/client/locales/fi.ts

@@ -90,7 +90,12 @@ export default {
       'title': 'Kursseja ei löytynyt',
       'description': 'Yritä muuttaa valintojasi nähdäksesi kursseja.',
       'resetButton': 'Nollaa'
-    }
+    },
+    'appTitle': 'Kurssihakukone',
+    'adminButton': 'ADMIN',
+    'loginPrompt': 'Ole hyvä ja kirjaudu sisään:',
+    'loginLink': 'täältä',
+    'loadingFilters': 'Ladataan suodattimia...'
   },
   'course': {
     'show': 'Näytä',