🍾 Implement submission of translation form (#455)

* Add stuff

* Remove console log

api/src/api/admin.js

@@ -437,40 +437,6 @@ router.delete(
   }),
 );
 
-// Create a translation object
-router.post(
-  '/translation',
-  errorWrap(async (req, res) => {
-    const newTranslation = new Translation(req.body);
-    await newTranslation.save();
-    res.json({
-      code: 201,
-      message: `Succesfully created new Translation object`,
-      success: true,
-      result: newTranslation,
-    });
-  }),
-);
-
-// Add a translation message
-router.put(
-  '/translation',
-  errorWrap(async (req, res) => {
-    const { language, key, message } = req.body;
-    const updatedTranslation = await Translation.findOne({
-      language: { $eq: language },
-    });
-    updatedTranslation.messages.set(key, message);
-    await updatedTranslation.save();
-    res.json({
-      code: 200,
-      message: `Successfully added ${language} translation for ${key}`,
-      success: true,
-      result: updatedTranslation,
-    });
-  }),
-);
-
 // Get verified translations for table
 router.get(
   '/verified',
@@ -543,4 +509,36 @@ router.get(
   }),
 );
 
+// Update verified translations for an ID
+router.put(
+  '/verified',
+  errorWrap(async (req, res) => {
+    const { language, type } = req.query;
+    const { translations } = req.body;
+
+    const translationsToUpdate = await Translation.findOne({
+      language: { $eq: language },
+    });
+    translations.forEach(async (translation) => {
+      const key = Object.keys(translation)[0];
+      translationsToUpdate.messages.set(key, translation[key][language]);
+      const verifiedTranslation = await VerifiedTranslation.updateOne(
+        {
+          translationID: key,
+          language,
+        },
+        { $set: { verified: translation[key].verified } },
+      );
+    });
+    await translationsToUpdate.save();
+
+    res.json({
+      code: 200,
+      message: 'Successfully updated verified translation info',
+      success: true,
+      result: null,
+    });
+  }),
+);
+
 module.exports = router;

api/src/api/translation.js

@@ -29,6 +29,30 @@ router.get(
   }),
 );
 
+// Get if a resource has unverified translations
+router.get(
+  '/:id',
+  errorWrap(async (req, res) => {
+    const { id } = req.params;
+    const { language } = req.query;
+
+    const resourceTranslations = await VerifiedTranslation.find({
+      resourceID: id,
+      language,
+    });
+    const isVerified = !resourceTranslations.some(
+      (translation) => translation.verified === false,
+    );
+
+    res.json({
+      code: 200,
+      message: 'Successfully reported an error',
+      success: true,
+      result: isVerified,
+    });
+  }),
+);
+
 // Report a translation error for an ID
 router.patch(
   '/report/:id',

client/src/components/TranslationFormRow.jsx

@@ -8,7 +8,14 @@ import '../css/EditTranslations.css';
 
 const { TextArea } = Input;
 
-const TranslationFormRow = ({ onCheck, translationId, text, translation }) => {
+const TranslationFormRow = ({
+  onChangeText,
+  onCheck,
+  translationId,
+  text,
+  translation,
+  isVerified,
+}) => {
   const [firstCol, setFirstCol] = useState('');
 
   useEffect(() => {
@@ -38,14 +45,20 @@ const TranslationFormRow = ({ onCheck, translationId, text, translation }) => {
 
     firstColumn();
   }, [translationId]);
+
   return (
     <div className="translation-container">
       <div className="resource-description">{firstCol}</div>
       <div className="text-to-translate">{text}</div>
       <div className="translation-input">
-        <TextArea autoSize value={translation} />
+        <TextArea
+          autoSize
+          onChange={(e) => onChangeText(translationId, e.target.value)}
+          value={translation}
+        />
       </div>
       <Checkbox
+        defaultChecked={isVerified}
         onChange={(e) => onCheck(translationId, e.target.checked)}
         className="checkbox-translation"
       />

client/src/components/desktop/ResourceDetail.jsx

@@ -15,7 +15,11 @@ import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
 import * as moment from 'moment';
 import { useIntl, FormattedMessage } from 'react-intl';
 
-import { deleteResource, getResourceByID } from '../../utils/api';
+import {
+  getResourceIsVerified,
+  deleteResource,
+  getResourceByID,
+} from '../../utils/api';
 import {
   saveResource,
   deleteSavedResource,
@@ -39,6 +43,8 @@ function ResourceDetail(props) {
   const intl = useIntl();
   const { authed, authRoleIsEquivalentTo } = useAuth();
 
+  const [isVerified, setIsVerified] = useState(false);
+
   const [name, setName] = useState('Resource Name');
   const [phone, setPhone] = useState([]);
   const [address, setAddress] = useState('');
@@ -145,6 +151,19 @@ function ResourceDetail(props) {
     didUpdate();
   }, [authed, updateIsSaved]);
 
+  useEffect(() => {
+    async function fetchData() {
+      const language = localStorage.getItem('language');
+      if (language !== 'English') {
+        const response = await getResourceIsVerified(match.params.id, language);
+        setIsVerified(response.result);
+      } else {
+        setIsVerified(true);
+      }
+    }
+    fetchData();
+  }, [match.params.id]);
+
   useEffect(() => {
     let adr = intl.formatMessage(detailMessages.noAddress);
     if (address.length > 0) {
@@ -290,7 +309,9 @@ function ResourceDetail(props) {
       <Row className="section">
         <Col span={15}>
           <span className="resource-name">{name}</span>
-          <TranslationPopup id={match.params.id} type="resource" />
+          {!isVerified && (
+            <TranslationPopup id={match.params.id} type="resource" />
+          )}
           <br />
           <SaveButton
             isSaved={isSaved}

client/src/components/mobile/ResourceDetailMobile.jsx

@@ -17,7 +17,7 @@ import ResourcesBreadcrumb from '../ResourcesBreadcrumb';
 import SaveButton from '../SaveButton';
 import ShareButton from '../ShareButton';
 import TranslationPopup from '../TranslationPopup';
-import { getResourceByID } from '../../utils/api';
+import { getResourceIsVerified, getResourceByID } from '../../utils/api';
 import {
   saveResource,
   deleteSavedResource,
@@ -46,6 +46,8 @@ const ResourceDetailMobile = (props: Props) => {
 
   const resourceId = match.params.id;
 
+  const [isVerified, setIsVerified] = useState(false);
+
   /* SETUP START */
 
   // ResourceDetail page will get all this stuff prior to this
@@ -95,8 +97,8 @@ const ResourceDetailMobile = (props: Props) => {
             : determineStockPhoto(result.category, result.subcategory),
         );
 
-        setCategory(result.category.length > 0 && result.category[0]);
-        setSubcategory(result.subcategory.length > 0 && result.subcategory[0]);
+        setCategory(result.category[0]);
+        setSubcategory(result.subcategory[0]);
 
         setName(result.name);
         setDescription(result.description);
@@ -147,6 +149,19 @@ const ResourceDetailMobile = (props: Props) => {
     loadResource();
   }, [resourceId]);
 
+  useEffect(() => {
+    async function fetchData() {
+      const language = localStorage.getItem('language');
+      if (language !== 'English') {
+        const response = await getResourceIsVerified(resourceId, language);
+        setIsVerified(response.result);
+      } else {
+        setIsVerified(true);
+      }
+    }
+    fetchData();
+  }, [resourceId]);
+
   const saveResourceHandler = useCallback(async () => {
     const result = await saveResource(resourceId);
     if (result != null && result.code === 200) {
@@ -308,7 +323,13 @@ const ResourceDetailMobile = (props: Props) => {
           <Row className="mb-rd-header-bar" type="flex">
             <Col>
               <span className="mb-rd-header-text">{name}</span>
-              <TranslationPopup id={match.params.id} type="resource" isMobile />
+              {!isVerified && (
+                <TranslationPopup
+                  id={match.params.id}
+                  type="resource"
+                  isMobile
+                />
+              )}
             </Col>
             <Col>
               <SaveButton

client/src/pages/EditTranslations.jsx

@@ -5,21 +5,18 @@ import { Row, Progress, Layout, Button, message } from 'antd';
 import { useHistory } from 'react-router-dom';
 
 import '../css/EditTranslations.css';
-import { getTextToBeTranslated } from '../utils/api';
+import { getTextToBeTranslated, verifyTranslations } from '../utils/api';
 
 import TranslationFormRow from '../components/TranslationFormRow';
 
 const { Header } = Layout;
 
-const error = () => {
-  message.error('You must verify at least one translation!');
-};
-
 function Translations({ location, match }) {
   const history = useHistory();
 
   const [textToTranslate, setTextToTranslate] = useState([]);
   const [language, setLanguage] = useState('');
+  const [type, setType] = useState('');
 
   const getLanguageAndTypeFromSearch = useCallback(() => {
     const { search } = location;
@@ -40,9 +37,14 @@ function Translations({ location, match }) {
 
   useEffect(() => {
     async function fetchData() {
-      const [lang, type] = getLanguageAndTypeFromSearch();
+      const [lang, typeFromSearch] = getLanguageAndTypeFromSearch();
       setLanguage(lang);
-      const json = await getTextToBeTranslated(match.params.id, lang, type);
+      setType(typeFromSearch);
+      const json = await getTextToBeTranslated(
+        match.params.id,
+        lang,
+        typeFromSearch,
+      );
       setTextToTranslate(json.result);
     }
     fetchData();
@@ -53,6 +55,13 @@ function Translations({ location, match }) {
     return (
       <TranslationFormRow
         key={key}
+        onChangeText={(translationId, value) => {
+          setTextToTranslate((prevText) => {
+            const copy = [...prevText];
+            copy[idx][translationId][language] = value;
+            return copy;
+          });
+        }}
         onCheck={(translationId, isChecked) => {
           setTextToTranslate((prevText) => {
             const copy = [...prevText];
@@ -63,6 +72,7 @@ function Translations({ location, match }) {
         translationId={key}
         text={verificationObject[key].English}
         translation={verificationObject[key][language]}
+        isVerified={verificationObject[key].verified}
       />
     );
   });
@@ -72,11 +82,21 @@ function Translations({ location, match }) {
     0,
   );
 
-  const onSubmit = () => {
+  const onSubmit = async () => {
     if (numTranslated >= 1) {
+      const response = await verifyTranslations(
+        language,
+        type,
+        textToTranslate,
+      );
+      if (response?.success === true) {
+        message.success('Translation successfully verified!');
+      } else {
+        message.error('Something went wrong');
+      }
       history.push(`/translations`);
     } else {
-      error();
+      message.error('You must verify at least one translation!');
     }
   };
 

client/src/pages/Translations.jsx

@@ -17,6 +17,7 @@ const priorities = { Urgent: 4, High: 3, Medium: 2, Low: 1 };
 function Translations() {
   const [verifiedList, setVerifiedList] = useState({});
   const [unverifiedList, setUnverifiedList] = useState({});
+  console.log(verifiedList, unverifiedList);
 
   const updateLists = useCallback((verifications) => {
     const verifiedResources = { Spanish: [], French: [], Chinese: [] };
@@ -30,7 +31,7 @@ function Translations() {
             verification.totalTranslations) *
           100;
 
-        if (verification.totalReports >= 1) {
+        if (verification.totalReports >= 1 && percentage !== 100.0) {
           unverifiedResources[l].push({
             key: verification._id,
             name: verification.name,