fix(frontend): do not render qrcode if odktoken is empty

hotosm · Jan 30, 2024 · d6f1c59 · d6f1c59
1 parent 83e50b7
commit d6f1c59
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/frontend/src/api/Files.js b/src/frontend/src/api/Files.js
@@ -2,11 +2,13 @@ import { useEffect, useState } from 'react';
 import qrcodeGenerator from 'qrcode-generator';
 
 export const ProjectFilesById = (odkToken, projectName, osmUser, taskId) => {
-  const [loading, setLoading] = useState(true);
   const [qrcode, setQrcode] = useState('');
   useEffect(() => {
     const fetchProjectFileById = async (odkToken, projectName, osmUser, taskId) => {
-      setLoading(true);
+      if (!taskId || odkToken === '') {
+        setQrcode('');
+        return;
+      }
 
       const odkCollectJson = JSON.stringify({
         general: {
@@ -29,17 +31,15 @@ export const ProjectFilesById = (odkToken, projectName, osmUser, taskId) => {
 
       // Note: cell size = 3, margin = 5
       setQrcode(code.createDataURL(3, 5));
-      setLoading(false);
     };
 
     fetchProjectFileById(odkToken, projectName, osmUser, taskId);
 
     const cleanUp = () => {
-      setLoading(false);
       setQrcode('');
     };
 
     return cleanUp;
   }, [taskId]);
-  return { loading, qrcode };
+  return { qrcode };
 };
diff --git a/src/frontend/src/components/QrcodeComponent.jsx b/src/frontend/src/components/QrcodeComponent.jsx
@@ -24,19 +24,20 @@ const TasksComponent = ({ type, task, defaultTheme }) => {
   const checkIfTaskAssignedOrNot =
     selectedTask?.locked_by_username === token?.username || selectedTask?.locked_by_username === null;
 
-  const { qrLoading, qrcode } = ProjectFilesById(selectedTask.odk_token, projectName, token?.username, task);
+  // TODO fix multiple renders of component (6 times)
+  const { qrcode } = ProjectFilesById(selectedTask.odk_token, projectName, token?.username, task);
 
-  const socialStyles = {
-    copyContainer: {
-      border: `1px solid ${defaultTheme.palette.info['main']}`,
-      background: defaultTheme.palette.info['info'],
-      color: defaultTheme.palette.info['main'],
-    },
-    title: {
-      color: defaultTheme.palette.info['main'],
-      fontStyle: 'italic',
-    },
-  };
+  // const socialStyles = {
+  //   copyContainer: {
+  //     border: `1px solid ${defaultTheme.palette.info['main']}`,
+  //     background: defaultTheme.palette.info['info'],
+  //     color: defaultTheme.palette.info['main'],
+  //   },
+  //   title: {
+  //     color: defaultTheme.palette.info['main'],
+  //     fontStyle: 'italic',
+  //   },
+  // };
 
   return (
     <CoreModules.Stack>