Merge pull request #72 from partio-scout/feat/translations

Feat/translations
partio-scout · Jan 14, 2022 · 32140a5 · 32140a5
2 parents d4a15f2 + 88abd5d
commit 32140a5
Show file tree

Hide file tree

Showing 24 changed files with 160 additions and 312 deletions.
diff --git a/src/App.js b/src/App.js
@@ -47,12 +47,11 @@ const App = () => {
   const language = useSelector((state) => state.selectedLanguage)
   const activityGroups = useSelector((state) => state.activityGroups)
   const itemsByGuid = useSelector((state) => state.itemsByGuid)
-
   const fetchContent = (language) => {
     fetchAgeGroups(language).then((ageGroups) => {
       dispatch(setInitialData(ageGroups))
     })
-    fetchTranslations().then((translations) =>
+    fetchTranslations(language).then((translations) =>
       dispatch(setTranslations(translations))
     )
     fetchActivityGroups(language).then((activityGroups) =>

diff --git a/src/api/index.js b/src/api/index.js
@@ -53,10 +53,8 @@ export const fetchTaskDetails = async (guid, lang) => {
   return await res.json()
 }
 
-export const fetchTranslations = async () => {
-  const res = await fetch(
-    'https://pof-backend.partio.fi/tag-translations-json/'
-  )
+export const fetchTranslations = async (lang) => {
+  const res = await fetch(`${PARTIO_API_URL}/settings/translations/${lang}`)
   return await res.json()
 }
 

diff --git a/src/components/AgeGroupItem/index.js b/src/components/AgeGroupItem/index.js
@@ -49,8 +49,8 @@ const Status = styled.div`
 const AgeGroupItem = ({
   ageGroup,
   language,
-  translations,
   user,
+  translations,
   activityGroups,
   userTasks,
 }) => {
@@ -59,7 +59,6 @@ const AgeGroupItem = ({
       ? getAgeGroupStatus(ageGroup, userTasks)
       : null
   const icon = ageGroup.logo.url
-
   return (
     <StyledAgeGroupItem>
       <AgeGroupLink to={`/guid/${ageGroup.wp_guid}?lang=${language}`}>
@@ -70,18 +69,14 @@ const AgeGroupItem = ({
         {status && (
           <>
             <Status>
-              {`${getTermInLanguage(
-                translations,
-                'mandatory_plural',
-                language
-              )} ${status.mandatory}`}
+              {`${getTermInLanguage(translations, 'pakolliset')} ${
+                status.mandatory
+              }`}
             </Status>
             <Status>
-              {`${getTermInLanguage(
-                translations,
-                'optional_plural',
-                language
-              )} ${status.optional}`}
+              {`${getTermInLanguage(translations, 'valinnaiset')} ${
+                status.optional
+              }`}
             </Status>
           </>
         )}

diff --git a/src/components/Notifications/TaskNotification.js b/src/components/Notifications/TaskNotification.js
@@ -4,10 +4,7 @@ import { Link } from 'react-router-dom'
 
 import { useSelector } from 'react-redux'
 import { getTaskUrl, getTimestamp } from './utils'
-import {
-  determineLanguageFromUrl,
-  getTermInLanguage,
-} from 'helpers'
+import { getTermInLanguage } from 'helpers'
 
 const Container = styled.div`
   display: flex;
@@ -25,32 +22,30 @@ const StyledLink = styled(Link)`
     color: #c86418;
   }
 `
-
-// TODO: Refactor when we have translations
-
-
 const TaskNotification = ({ notification, markRead }) => {
-  const language = determineLanguageFromUrl(window.location)
-  const generalTranslations = useSelector(state => state.translations.yleiset)
-  const itemsByGuid = useSelector(state => state.itemsByGuid)
+  const translations = useSelector((state) => state.translations)
+  const itemsByGuid = useSelector((state) => state.itemsByGuid)
   const task = itemsByGuid[notification.item_guid]
   const timestamp = getTimestamp(notification.created_at)
 
-  const getStateMessage = state => {
+  const getStateMessage = (state) => {
     switch (state) {
       case 'ACCEPTED':
-        return getTermInLanguage(generalTranslations, 'accepted', language)
+        return getTermInLanguage(translations, 'hyvaksynyt')
       default:
-        return getTermInLanguage(generalTranslations, 'accepted', language)
+        return getTermInLanguage(translations, 'hyvaksynyt')
     }
   }
 
   return (
     <Container>
       <Message>
         <span>
-          {getTermInLanguage(generalTranslations, 'group_leader', language)} {notification.group_leader_name} {getTermInLanguage(generalTranslations, 'has', language)} {' '}
-          {getStateMessage(notification.notification_type)} {getTermInLanguage(generalTranslations, 'your_task', language)} {' '}
+          {getTermInLanguage(translations, 'ryhmanjohtaja')}{' '}
+          {notification.group_leader_name}{' '}
+          {getTermInLanguage(translations, 'on')}{' '}
+          {getStateMessage(notification.notification_type)}{' '}
+          {getTermInLanguage(translations, 'tehtavasi')}{' '}
         </span>
         <StyledLink to={getTaskUrl(task)} onClick={markRead}>
           {task.item.title}

diff --git a/src/components/Notifications/index.js b/src/components/Notifications/index.js
@@ -12,10 +12,7 @@ import {
   markNotificationRead,
   toggleShowNotifications,
 } from '../../redux/actionCreators'
-import {
-  determineLanguageFromUrl,
-  getTermInLanguage,
-} from 'helpers'
+import { getTermInLanguage } from 'helpers'
 
 const BUTTON_HEIGHT = '1rem'
 
@@ -78,21 +75,20 @@ const MarkAllRead = styled.div`
   padding: 0rem;
   padding-top: 0.3rem;
 `
-const containsUnread = notifications => {
+const containsUnread = (notifications) => {
   if (!notifications) return false
 
-  const unread = notifications.find(notification => !notification.viewed)
+  const unread = notifications.find((notification) => !notification.viewed)
 
   return !!unread
 }
 
 const Notifications = () => {
   const containerRef = useRef()
-  const language = determineLanguageFromUrl(window.location)
   const [hasUnread, setHasUnread] = useState(false)
-  const generalTranslations = useSelector(state => state.translations.yleiset)
-  const notifications = useSelector(state => state.notifications.list)
-  const showDropdown = useSelector(state => state.notifications.show)
+  const notifications = useSelector((state) => state.notifications.list)
+  const showDropdown = useSelector((state) => state.notifications.show)
+  const translations = useSelector((state) => state.translations)
   const dispatch = useDispatch()
   const [hasMore, setHasMore] = useState(true)
   const [displayNotifications, setDisplayNotifications] = useState([])
@@ -112,7 +108,7 @@ const Notifications = () => {
       notifications
         .slice(0, slice)
         .sort((a, b) => (a.viewed > b.viewed ? 1 : -1))
-        .map(notification => (
+        .map((notification) => (
           <Notification
             key={notification.id}
             notification={notification}
@@ -134,7 +130,7 @@ const Notifications = () => {
   const nextSlice = () => {
     return notifications
       .slice(slice, slice + 10)
-      .map(notification => (
+      .map((notification) => (
         <Notification
           key={notification.id}
           notification={notification}
@@ -153,7 +149,7 @@ const Notifications = () => {
     }
   }
 
-  const markSingleNotificationRead = async notification => {
+  const markSingleNotificationRead = async (notification) => {
     const result = await markNotificationViewed(notification.id)
     if (result.success) {
       dispatch(markNotificationRead(notification.id))
@@ -172,7 +168,11 @@ const Notifications = () => {
         <Dropdown>
           <ArrowUp />
           <NotificationsContainer id="scrollableDiv">
-            {displayNotifications.length === 0 && <h4><span>{getTermInLanguage(generalTranslations, 'no_notifications', language)}</span></h4>}
+            {displayNotifications.length === 0 && (
+              <h4>
+                <span>{getTermInLanguage(translations, 'ei-ilmoituksia')}</span>
+              </h4>
+            )}
             {displayNotifications && (
               <InfiniteScroll
                 dataLength={displayNotifications.length}
@@ -186,7 +186,9 @@ const Notifications = () => {
             )}
           </NotificationsContainer>
           <MarkAllRead onClick={markNotificationsRead}>
-            <span>{getTermInLanguage(generalTranslations, 'mark_all_read', language)}</span>
+            <span>
+              {getTermInLanguage(translations, 'merkitse-kaikki-luetuksi')}
+            </span>
           </MarkAllRead>
         </Dropdown>
       )}

diff --git a/src/components/TaskActions/GroupLeaderActions.js b/src/components/TaskActions/GroupLeaderActions.js
@@ -8,7 +8,7 @@ import {
 import { COMPLETION_STATUS } from '../../consts'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import { determineLanguageFromUrl, getTermInLanguage } from '../../helpers'
+import { getTermInLanguage } from '../../helpers'
 
 const Overlay = styled.div`
   width: 100%;
@@ -78,13 +78,8 @@ const GroupLeaderActions = ({
   const { groupId } = useParams()
   const { memberId } = useParams()
 
-  const language = determineLanguageFromUrl(window.location)
-
   const groupsData = useSelector((state) => state.user.userGroups)
-  const generalTranslations = useSelector((state) => state.translations.yleiset)
-  const apiTypeTranslations = useSelector(
-    (state) => state.translations.api_type
-  )
+  const translations = useSelector((state) => state.translations)
 
   const group = groupsData.find(
     (groups) => groups.id.toString() === groupId.toString()
@@ -111,28 +106,26 @@ const GroupLeaderActions = ({
           <ActivityItem onClick={acceptCompletionRequest}>
             <StyledAcceptIcon />
             <span>
-              {getTermInLanguage(generalTranslations, 'accept', language)}{' '}
-              {getTermInLanguage(apiTypeTranslations, 'task', language)}
+              {getTermInLanguage(translations, 'hyvaksy')}{' '}
+              {getTermInLanguage(translations, 'aktiviteetti')}
             </span>
           </ActivityItem>
         )}
         {isCompleted === true && (
           <ActivityItem onClick={rejectMemberTask}>
             <StyleActiveIcon />
-            <span>Siirrä takaisin työn alle</span>
+            <span>{getTermInLanguage(translations, 'siirra-tyon-alle')}</span>
           </ActivityItem>
         )}
         <ActivityItem onClick={removeMemberTask}>
           <StyledDeleteIcon />
           <span>
-            {getTermInLanguage(generalTranslations, 'delete', language)}{' '}
-            {getTermInLanguage(apiTypeTranslations, 'task', language)}
+            {getTermInLanguage(translations, 'poista')}{' '}
+            {getTermInLanguage(translations, 'aktiviteetti')}
           </span>
         </ActivityItem>
         <ActivityItem onClick={onCancel}>
-          <span>
-            {getTermInLanguage(generalTranslations, 'cancel', language)}
-          </span>
+          <span>{getTermInLanguage(translations, 'peruuta')}</span>
         </ActivityItem>
       </Content>
     </>

diff --git a/src/components/TaskActions/OpenTaskActions.js b/src/components/TaskActions/OpenTaskActions.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { StyledCompletedIcon } from '../TaskActionsIcons'
 import { useSelector } from 'react-redux'
-import { determineLanguageFromUrl, getTermInLanguage } from '../../helpers'
+import { getTermInLanguage } from '../../helpers'
 import { Link } from 'react-router-dom'
 
 const Overlay = styled.div`
@@ -48,7 +48,7 @@ const Content = styled.div`
 const ActivityItem = styled.div`
   display: flex;
   align-items: center;
-  ${props => (props.disabled ? 'opacity: 0.5;' : '')}
+  ${(props) => (props.disabled ? 'opacity: 0.5;' : '')}
 
   > span {
     padding: 1rem;
@@ -72,18 +72,17 @@ const StyledLink = styled(Link)`
 
 const OpenTaskActions = ({ guid, onCancel }) => {
   const [disabled, setDisabled] = useState(false)
-  const generalTranslations = useSelector(state => state.translations.yleiset)
-  const language = determineLanguageFromUrl(window.location)
+  const translations = useSelector((state) => state.translations)
 
-  const getOnClick = onClick =>
+  const getOnClick = (onClick) =>
     disabled
       ? () => {}
       : () => {
           setDisabled(true)
           onClick()
         }
 
-  const getTaskUrl = guid => {
+  const getTaskUrl = (guid) => {
     return `/guid/${guid}`
   }
 
@@ -95,16 +94,12 @@ const OpenTaskActions = ({ guid, onCancel }) => {
           <StyledCompletedIcon />
           <span>
             <StyledLink to={getTaskUrl(guid)}>
-              <span>
-              {getTermInLanguage(generalTranslations, 'open_task', language)}
-            </span>
-              </StyledLink>
+              <span>{getTermInLanguage(translations, 'aukaise-tehtava')}</span>
+            </StyledLink>
           </span>
         </ActivityItem>
         <ActivityItem onClick={getOnClick(onCancel)} disabled={disabled}>
-          <span>
-            {getTermInLanguage(generalTranslations, 'cancel', language)}
-          </span>
+          <span>{getTermInLanguage(translations, 'peruuta')}</span>
         </ActivityItem>
       </Content>
     </>