From d6f1c59df8bb692468e8dfb17ee30fa4119e613b Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Tue, 30 Jan 2024 15:56:58 +0000
Subject: [PATCH] fix(frontend): do not render qrcode if odktoken is empty

---
 src/frontend/src/api/Files.js                 | 10 ++++----
 .../src/components/QrcodeComponent.jsx        | 25 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/api/Files.js b/src/frontend/src/api/Files.js
index f6cfb1b5c4..fb4cd24aa0 100755
--- 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
index a54a9eb6d6..cd7e12a0da 100755
--- 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>