From 8ec86950e9c65a4679d568067586343ca18b92d1 Mon Sep 17 00:00:00 2001
From: "Rasamoelina, Haja Onjatiana" <26148770+rhahao@users.noreply.github.com>
Date: Sat, 3 Dec 2022 21:35:02 +0300
Subject: [PATCH] fix(schedule): hide publish schedule when not connected to
 congregation account

---
 src/features/schedules/ScheduleCard.jsx    | 14 ++--
 src/features/schedules/SchedulePublish.jsx | 74 +++++++++++-----------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/features/schedules/ScheduleCard.jsx b/src/features/schedules/ScheduleCard.jsx
index d660c563..c6dede90 100644
--- a/src/features/schedules/ScheduleCard.jsx
+++ b/src/features/schedules/ScheduleCard.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -23,6 +23,7 @@ import {
   isPublishOpenState,
   s89DataState,
 } from '../../states/schedule';
+import { congAccountConnectedState } from '../../states/congregation';
 
 const ScheduleCard = ({ schedule }) => {
   const navigate = useNavigate();
@@ -37,6 +38,8 @@ const ScheduleCard = ({ schedule }) => {
   const setS89Data = useSetRecoilState(s89DataState);
   const setPublishPocket = useSetRecoilState(isPublishOpenState);
 
+  const isCongAccountConnected = useRecoilValue(congAccountConnectedState);
+
   const [anchorPrintEl, setAnchorPrintEl] = useState(null);
 
   const openPrint = Boolean(anchorPrintEl);
@@ -140,9 +143,12 @@ const ScheduleCard = ({ schedule }) => {
           </MenuItem>
         </Menu>
 
-        <IconButton onClick={handlePublishPocket}>
-          <SendIcon color="info" sx={{ fontSize: '35px' }} />
-        </IconButton>
+        {isCongAccountConnected && (
+          <IconButton onClick={handlePublishPocket}>
+            <SendIcon color="info" sx={{ fontSize: '35px' }} />
+          </IconButton>
+        )}
+
         <IconButton onClick={handleDeleteSchedule}>
           <DeleteIcon color="error" sx={{ fontSize: '35px' }} />
         </IconButton>
diff --git a/src/features/schedules/SchedulePublish.jsx b/src/features/schedules/SchedulePublish.jsx
index fe160894..8be947dc 100644
--- a/src/features/schedules/SchedulePublish.jsx
+++ b/src/features/schedules/SchedulePublish.jsx
@@ -39,25 +39,28 @@ const SchedulePublish = () => {
     [setOpen]
   );
 
-  const publishSchedulePocket = useCallback(async () => {
-    try {
-      cancel.current = false;
-
-      const dataPocket = await dbBuildScheduleForShare(currentSchedule.value);
-      const { cong_schedule, cong_sourceMaterial } = dataPocket;
-
-      if (apiHost !== '') {
-        const res = await fetch(`${apiHost}api/congregations/${congID}/schedule`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            visitorid: visitorID,
-            email: userEmail,
-          },
-          body: JSON.stringify({ cong_schedule, cong_sourceMaterial }),
-        });
-
-        if (!cancel.current) {
+  useEffect(() => {
+    const abortCont = new AbortController();
+
+    const publish = async () => {
+      try {
+        cancel.current = false;
+
+        const dataPocket = await dbBuildScheduleForShare(currentSchedule.value);
+        const { cong_schedule, cong_sourceMaterial } = dataPocket;
+
+        if (apiHost !== '') {
+          const res = await fetch(`${apiHost}api/congregations/${congID}/schedule`, {
+            method: 'POST',
+            signal: abortCont.signal,
+            headers: {
+              'Content-Type': 'application/json',
+              visitorid: visitorID,
+              email: userEmail,
+            },
+            body: JSON.stringify({ cong_schedule, cong_sourceMaterial }),
+          });
+
           const data = await res.json();
 
           if (res.status === 200) {
@@ -74,17 +77,22 @@ const SchedulePublish = () => {
           setAppSnackOpen(true);
           handleClose(false);
         }
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          setAppMessage(err.message);
+          setAppSeverity('error');
+          setAppSnackOpen(true);
+          handleClose();
+        }
       }
-    } catch (err) {
-      if (!cancel.current) {
-        setAppMessage(err.message);
-        setAppSeverity('error');
-        setAppSnackOpen(true);
-        handleClose();
-      }
-    }
+    };
+
+    publish();
+
+    return () => {
+      abortCont.abort();
+    };
   }, [
-    cancel,
     apiHost,
     congID,
     currentSchedule,
@@ -97,16 +105,6 @@ const SchedulePublish = () => {
     visitorID,
   ]);
 
-  useEffect(() => {
-    publishSchedulePocket();
-  }, [publishSchedulePocket]);
-
-  useEffect(() => {
-    return () => {
-      cancel.current = true;
-    };
-  }, []);
-
   return (
     <Box>
       <Dialog open={open} aria-labelledby="dialog-title-publish" onClose={handleClose}>