Bulk translation (#2357)

Author: navins94

frontend/src/modules/project-detail/project-detail.jsx

@@ -113,7 +113,9 @@ const ProjectDetail = ({ data: inData, isModal, setVisible }) => {
     <div className={styles.detailView}>
       <div className={classNames('container', { isModal })}>
         <div className="head">
-          <h5 className="h-caps-m">project</h5>
+          <h5 className="h-caps-m">
+            <Trans>Project</Trans>
+          </h5>
           {data?.reviewStatus === 'SUBMITTED' && (
             <div className="pending">
               <h5>Pending Approval</h5>
@@ -205,21 +207,29 @@ const ProjectDetail = ({ data: inData, isModal, setVisible }) => {
                   </SwiperSlide>
                 ))}
             </Swiper>
-            <h3 className="h-m w-bold">Background</h3>
+            <h3 className="h-m w-bold">
+              <Trans>Background</Trans>
+            </h3>
             <p className="two-cols">{data?.background}</p>
-            <h3 className="h-m w-bold">Purpose</h3>
+            <h3 className="h-m w-bold">
+              <Trans>Purpose</Trans>
+            </h3>
             <p className="two-cols">{data?.purpose}</p>
             <div className="cols">
               <div className="col outcomes">
-                <h3 className="h-m w-bold">Expected Outcomes</h3>
+                <h3 className="h-m w-bold">
+                  <Trans>Expected Outcomes</Trans>
+                </h3>
                 <ul>
                   {data?.outcomes?.map((it) => (
                     <li>{it}</li>
                   ))}
                 </ul>
               </div>
               <div className="col highlights">
-                <h3 className="h-m w-bold">Key Highlights</h3>
+                <h3 className="h-m w-bold">
+                  <Trans>Key Highlights</Trans>
+                </h3>
                 <ul>
                   {data?.highlights?.map((it) => {
                     if (it.url && it.url !== '') {
@@ -263,7 +273,9 @@ const ProjectDetail = ({ data: inData, isModal, setVisible }) => {
             </div>
             <div className="cols">
               <div className="col">
-                <h3 className="h-m w-bold">Life Cycle Stage</h3>
+                <h3 className="h-m w-bold">
+                  <Trans>Life Cycle Stage</Trans>
+                </h3>
                 <div className="tag-list">
                   {lifecycleTagsToShow?.map((tag) => (
                     <div className="tag-item" key={tag?.tag}>
@@ -280,7 +292,9 @@ const ProjectDetail = ({ data: inData, isModal, setVisible }) => {
                 </div>
               </div>
               <div className="col">
-                <h3 className="h-m w-bold">Tags</h3>
+                <h3 className="h-m w-bold">
+                  <Trans>Tags</Trans>
+                </h3>
                 <div className="tag-list">
                   {tagsToShow?.map((tag) => (
                     <div className="tag-item" key={tag?.tag}>

frontend/src/pages/[type]/[id].jsx

@@ -1,11 +1,15 @@
-import React, { memo } from 'react'
+import React, { memo, useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import NewDetailsView from '../../modules/details-page/view'
 import api from '../../utils/api'
 import { getTypeByResource } from '../../modules/flexible-forms/view'
 import { loadCatalog } from '../../translations/utils'
 import Head from 'next/head'
 import ProjectDetail from '../../modules/project-detail/project-detail'
+import translationService from '../../utils/translationService'
+import { LoadingOutlined } from '@ant-design/icons'
+import { Trans } from '@lingui/macro'
+import styles from './index.module.scss'
 
 const VALID_TYPES = [
   'initiative',
@@ -21,14 +25,16 @@ const VALID_TYPES = [
 ]
 
 const Details = ({
-  data,
+  data: initialData,
   translations,
   setLoginVisible,
   isAuthenticated,
   domainValue,
 }) => {
   const router = useRouter()
   const { type, id } = router.query
+  const [data, setData] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
   if (!VALID_TYPES.includes(type)) {
     return <p>Invalid type!</p>
   }
@@ -45,6 +51,45 @@ const Details = ({
     return slicedWords
   }
 
+  useEffect(() => {
+    const translateData = async () => {
+      setIsLoading(true)
+      if (router.locale !== 'en' && initialData) {
+        try {
+          const dataWithType = {
+            ...initialData,
+            type: type?.replace('-', '_'),
+            id: initialData.id || id,
+          }
+
+          const translated = await translationService.getTranslatedResources(
+            [dataWithType],
+            router.locale,
+            ['title', 'summary', 'background', 'purpose', 'highlights']
+          )
+
+          setData(translated[0])
+        } catch (error) {
+          console.error('Translation error:', error)
+          setData(initialData)
+        }
+      } else {
+        setData(initialData)
+      }
+      setIsLoading(false)
+    }
+
+    translateData()
+  }, [router.locale, initialData, type, id])
+
+  if (isLoading || !data) {
+    return (
+      <div className={styles.loadingContainer}>
+        <LoadingOutlined spin /> <Trans>Loading...</Trans>
+      </div>
+    )
+  }
+
   return (
     <>
       <Head>

frontend/src/pages/[type]/index.module.scss

@@ -0,0 +1,6 @@
+.loadingContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}