adjustments to model and frontend

airqo-platform · Feb 7, 2024 · 6224873 · 6224873
1 parent 813725c
commit 6224873
Show file tree

Hide file tree

Showing 12 changed files with 198 additions and 188 deletions.
diff --git a/website/backend/assets/cleanair/resources/Screenshot_2024-02-06_121827.png b/website/backend/assets/cleanair/resources/Screenshot_2024-02-06_121827.png
diff --git a/website/backend/assets/publications/Screenshot_2024-02-06_121611.png b/website/backend/assets/publications/Screenshot_2024-02-06_121611.png
diff --git a/website/backend/publications/admin.py b/website/backend/publications/admin.py
@@ -1,6 +1,6 @@
+from modeltranslation.admin import TranslationAdmin
 from django.contrib import admin
 from .models import Publication
-from modeltranslation.admin import TranslationAdmin
 from .translation import *
 
 

diff --git a/website/frontend/locales/en/translation.json b/website/frontend/locales/en/translation.json
@@ -236,6 +236,10 @@
     },
     "publications": {
       "title": "RESOURCE <br /> <2>CENTER</2>",
+      "card": {
+        "download": "Download",
+        "readmore": "Read more"
+      },
       "navs": {
         "toolkits": "toolkits",
         "reports": "technical reports",

diff --git a/website/frontend/locales/fr/translation.json b/website/frontend/locales/fr/translation.json
@@ -235,6 +235,10 @@
     },
     "publications": {
       "title": "RESSOURCE <br /> <2>CENTER</2>",
+      "card": {
+        "download": "Télécharger",
+        "readmore": "Lire la suite"
+      },
       "navs": {
         "toolkits": "boîtes à outils",
         "reports": "rapports techniques",

diff --git a/website/frontend/reduxStore/CleanAirNetwork/CleanAir.js b/website/frontend/reduxStore/CleanAirNetwork/CleanAir.js
@@ -1,5 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import { getAllCleanAirApi } from '../../apis';
+import i18n from 'i18next';
 
 export const fetchCleanAirData = createAsyncThunk('tabs/fetchCleanAirData', async (_, thunkAPI) => {
   const lang = thunkAPI.getState().eventsNavTab.languageTab;
@@ -9,7 +10,7 @@ export const fetchCleanAirData = createAsyncThunk('tabs/fetchCleanAirData', asyn
 
 const initialState = {
   activeTab: 0,
-  activeResource: 'toolkits',
+  activeResource: i18n.t('cleanAirSite.publications.navs.toolkits'),
   airData: [],
   loading: false,
   error: null

diff --git a/website/frontend/src/components/CleanAir/cards/CardComponent.js b/website/frontend/src/components/CleanAir/cards/CardComponent.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { FileDownloadOutlined } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
 
 const CardComponent = ({ title, authors, link, linkTitle, downloadLink }) => {
+  const { t } = useTranslation();
   return (
     <div className="card-container article">
       <div className="title">
@@ -11,15 +13,16 @@ const CardComponent = ({ title, authors, link, linkTitle, downloadLink }) => {
       <div className="cta-links">
         {link !== null ? (
           <a className="link" href={link} target="_blank" rel="noreferrer noopener">
-            <small>{linkTitle || 'Read More'}</small>
+            <small>{linkTitle || t('cleanAirSite.publications.card.readmore')}</small>
           </a>
         ) : (
           <span />
         )}
         {downloadLink !== null ? (
           <a className="link" href={downloadLink} target="_blank">
             <small>
-              Download <FileDownloadOutlined />{' '}
+              {t('cleanAirSite.publications.card.download')}
+              <FileDownloadOutlined />{' '}
             </small>
           </a>
         ) : (

diff --git a/website/frontend/src/components/CleanAir/cards/ReportComponent.js b/website/frontend/src/components/CleanAir/cards/ReportComponent.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { FileDownloadOutlined } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
 
 const ReportComponent = ({ title, authors, link, linkTitle, showSecondAuthor, resourceFile }) => {
+  const { t } = useTranslation();
   return (
     <div className="report-card">
       <div>
@@ -19,7 +21,7 @@ const ReportComponent = ({ title, authors, link, linkTitle, showSecondAuthor, re
           {link !== null ? (
             <div className="link">
               <a href={link} target="_blank" rel="noopener noreferrer">
-                <span>{linkTitle || 'Read More'}</span>
+                <span>{linkTitle || t('cleanAirSite.publications.card.readmore')}</span>
               </a>
             </div>
           ) : (
@@ -29,7 +31,7 @@ const ReportComponent = ({ title, authors, link, linkTitle, showSecondAuthor, re
             <div className="link">
               <a href={resourceFile} target="_blank" rel="noopener noreferrer">
                 <span>
-                  Download <FileDownloadOutlined />{' '}
+                  {t('cleanAirSite.publications.card.download')} <FileDownloadOutlined />{' '}
                 </span>
               </a>
             </div>

diff --git a/website/frontend/src/pages/CleanAir/CleanAirPublications.js b/website/frontend/src/pages/CleanAir/CleanAirPublications.js
@@ -1,16 +1,15 @@
 import React, { useEffect, useState, useRef } from 'react';
 import SEO from 'utilities/seo';
 import { useInitScrollTop } from 'utilities/customHooks';
-import { isEmpty } from 'underscore';
 import { useDispatch, useSelector } from 'react-redux';
 import { setActiveResource } from 'reduxStore/CleanAirNetwork/CleanAir';
 import { ReportComponent } from 'components/CleanAir';
-import { getAllCleanAirApi } from 'apis/index.js';
 import ListIcon from '@mui/icons-material/List';
 import CloseIcon from '@mui/icons-material/Close';
 import useWindowSize from 'utilities/customHooks';
 import Loadspinner from 'src/components/LoadSpinner/SectionLoader';
 import { useTranslation, Trans } from 'react-i18next';
+import { fetchCleanAirData } from 'reduxStore/CleanAirNetwork/CleanAir';
 
 const ResourceMenuItem = ({ activeResource, resource, dispatch, setToggle }) => {
   const { width } = useWindowSize();
@@ -36,7 +35,8 @@ const CleanAirPublications = () => {
   const menuRef = useRef(null);
   const dispatch = useDispatch();
   const [toggle, setToggle] = useState(false);
-  const [cleanAirResources, setCleanAirResources] = useState([]);
+  const cleanAirResources = useSelector((state) => state.cleanAirData.airData);
+  const loading = useSelector((state) => state.cleanAirData.loading);
   const activeResource = useSelector((state) => state.cleanAirData.activeResource);
   const resources = [
     t('cleanAirSite.publications.navs.toolkits'),
@@ -45,26 +45,12 @@ const CleanAirPublications = () => {
     t('cleanAirSite.publications.navs.research')
   ];
   const { width } = useWindowSize();
-  const [loading, setLoading] = useState(false);
+  const language = useSelector((state) => state.eventsNavTab.languageTab);
 
   useEffect(() => {
-    if (isEmpty(activeResource)) {
-      dispatch(setActiveResource(t('cleanAirSite.publications.navs.toolkits')));
-    }
-  }, [activeResource]);
-
-  useEffect(() => {
-    setLoading(true);
-    getAllCleanAirApi()
-      .then((response) => {
-        setCleanAirResources(response);
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.log(error);
-        setLoading(false);
-      });
-  }, []);
+    dispatch(setActiveResource(t('cleanAirSite.publications.navs.toolkits')));
+    dispatch(fetchCleanAirData());
+  }, [language]);
 
   useEffect(() => {
     const resourceMenuItem = document.querySelector('.menu-wrapper');

diff --git a/website/frontend/src/pages/Publications/Publications.js b/website/frontend/src/pages/Publications/Publications.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useInitScrollTop } from 'utilities/customHooks';
 import SEO from 'utilities/seo';
 import { loadPublicationsData } from '../../../reduxStore/Publications/operations';
@@ -15,6 +15,7 @@ const PublicationsPage = () => {
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState('Research');
   const onClickTabItem = (tab) => setSelectedTab(tab);
+  const language = useSelector((state) => state.eventsNavTab.languageTab);
 
   const dispatch = useDispatch();
   const publicationsData = usePublicationsData();
@@ -48,7 +49,7 @@ const PublicationsPage = () => {
 
   useEffect(() => {
     dispatch(loadPublicationsData());
-  }, [publicationsData.length]);
+  }, [publicationsData.length, language]);
 
   return (
     <Page>