functions decouple and more

WildMeOrg · Apr 2, 2024 · 13b187d · 13b187d
1 parent 5c8b260
commit 13b187d
Show file tree

Hide file tree

Showing 4 changed files with 326 additions and 93 deletions.
diff --git a/frontend/src/FrontDesk.jsx b/frontend/src/FrontDesk.jsx
@@ -4,39 +4,33 @@ import AuthenticatedSwitch from './AuthenticatedSwitch';
 import axios from 'axios';
 import AuthContext from './AuthProvider';
 // import ThemeProvider from './ThemeProvider';
+import getMergeNotifications from './models/notifications/getMergeNotifications';
+import getCollaborationNotifications from './models/notifications/getCollaborationNotifications';
+import { merge } from 'lodash-es';
+
 
 export default function FrontDesk() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [notificationTitle, setNotificationTitle] = useState();
-  const [notificationData, setNotificationData] = useState([]);
-  const [error, setError] = useState();
-
-  const getNotifications = async () => {
-    try {
-      const response = await fetch(`/Collaborate?json=1&getNotifications=1`);   
-      const data = await response.json();   
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(data?.content, 'text/html');
-      const title = doc.querySelector('h2')?.innerText;
-      if(title) {
-        setNotificationTitle(title);
-        const invites = [...doc.querySelectorAll('.collaboration-invite-notification')];     
-        setNotificationData(invites);        
-      }else {        
-        setNotificationTitle('');
-        setNotificationData([]);
-        console.log('No title found');
-      };
-      console.log(data);
-    } catch (error) {
-      console.error('Error:', error); 
-    } finally {
-    }
-  };
+  const [error, setError] = useState();  
+  const [collaborationTitle, setCollaborationTitle] = useState();
+  const [collaborationData, setCollaborationData] = useState([]);
+  const [mergeData, setMergeData] = useState([]);
 
+  // const { collaborationTitle, collaborationData } = getCollaborationNotifications();
+  // const { notifications: mergeData, error: mergeError, loading: mergeLoading } = getMergeNotifications();
+
+  console.log('FrontDesk collaborationData:', collaborationData, mergeData);
   useEffect(() => {
-    getNotifications();
-  }, []);
+    const fetchData = async () => {
+      const { collaborationTitle, collaborationData } = await getCollaborationNotifications();
+      const mergeData = await getMergeNotifications();
+      setCollaborationTitle(collaborationTitle);
+      setCollaborationData(collaborationData);
+      setMergeData(mergeData);
+    };
+
+    fetchData();
+  }, []); // 
 
   const checkLoginStatus = () => {
     console.log("Polling API...");
@@ -50,16 +44,13 @@ export default function FrontDesk() {
         setError(error);
       });
   };
-
 
   useEffect(() => {
     checkLoginStatus();
-
     const intervalId = setInterval(() => {
       checkLoginStatus();
     }, 60000);
 
-
     return () => clearInterval(intervalId);
   }, []);
 
@@ -68,9 +59,9 @@ export default function FrontDesk() {
       <AuthContext.Provider value={{ 
         isLoggedIn, 
         setIsLoggedIn, 
-        notificationTitle,       
-        notificationData,
-        getNotifications,
+        collaborationTitle,       
+        collaborationData,
+        mergeData
          }}>
          {/* <ThemeProvider>           */}
           <AuthenticatedSwitch isLoggedIn={isLoggedIn}/>

diff --git a/frontend/src/components/navBar/CollaborationMessages.jsx b/frontend/src/components/navBar/CollaborationMessages.jsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import BrutalismButton from '../BrutalismButton';
+import { FormattedMessage } from 'react-intl';
+import getCollaborationNotifications from '../../models/notifications/getCollaborationNotifications';
+
+export default function CollaborationMessages({
+    collaborationTitle,
+    collaborationData,
+    setModalOpen, }) {
+
+    // console.log('CollaborationMessages collaborationTitleData:', collaborationTitleData);
+
+    const [loading, setLoading] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [error, setError] = useState('');
+
+    const content = collaborationData?.map(data => {
+        const username = data.getAttribute('data-username');
+        const access = data.textContent.includes('view-only') ? 'View-Only' : 'Edit';
+        const email = data.textContent.match(/\S+@\S+\.\S+/);
+        const buttons = [...data.querySelectorAll('input[type="button"]')].map(button => {
+            console.log('button class', button.getAttribute('class'));
+            console.log('button value', button.getAttribute('value'));
+            return {
+                'class': button.getAttribute('class'),
+                'value': button.getAttribute('value')
+            }
+        });
+        const id = data.getAttribute('id');
+        const collabString = id ? `&collabId=${id.replace("edit-", "")} :` : '';
+
+        console.log(username, " ------", access, '========', id, '--------', collabString);
+
+        return (
+            <div style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+
+                <h6>{username}{' '}({access}) {email}</h6>
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                }}>
+                    {buttons.map(button => (
+                        <BrutalismButton
+                            style={{
+                                margin: '0 5px 10px 0',
+                            }}
+                            onClick={async () => {
+                                setLoading(true);
+                                console.log(button.class);
+                                const response = await fetch(`/Collaborate?json=1&username=${username}&approve=${button.class}&actionForExisting=${button.class}${collabString}`);
+                                const data = await response.json();
+                                setLoading(false);
+                                console.log(data);
+                                if (data.error) {
+                                    setShowError(true);
+                                    setError(data.error);
+                                } else {
+                                    setShowError(false);
+                                    getCollaborationNotifications();
+                                    setModalOpen(false);
+                                }
+
+                            }}
+                        >
+                            {button.value}
+                        </BrutalismButton>
+                    ))}
+                </div>
+            </div>
+        );
+    })
+
+    return <>
+        {collaborationTitle ? <h5>{collaborationTitle}</h5> : <h5><FormattedMessage id="NO_NEW_MESSAGE" /></h5>}
+        {content}
+        {showError && <h6>{error}</h6>}
+    </>
+}
+
+
diff --git a/frontend/src/components/navBar/MergeMessages.jsx b/frontend/src/components/navBar/MergeMessages.jsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import BrutalismButton from '../BrutalismButton';
+import { FormattedMessage } from 'react-intl';
+import changeIndividualMergeState from '../../models/notifications/changeIndividualMergeState';
+import getMergeNotifications from '../../models/notifications/getMergeNotifications';
+
+export default function MergeMessages({
+    mergeData,
+    setModalOpen, }) {
+
+    console.log('CollaborationMessages mergeData:', mergeData);
+
+    const handleClick = (action, taskId) => {
+        const result = changeIndividualMergeState(action, taskId);
+        // setError('Error: ' + result);
+        getMergeNotifications();
+        setModalOpen(false);        
+    }
+
+    const [showError, setShowError] = useState(false);
+    const [error, setError] = useState('');
+
+    const content = mergeData?.map(data => {
+
+        const mergePending = data.notificationType === 'mergePending';
+        const mergeComplete = data.notificationType === 'mergeComplete';
+        const mergeDenied = data.notificationType === 'mergeDenied';
+        const ownedByMe = data.ownedByMe === 'true';
+
+        console.log('each data:', data.ownedByMe);
+        return <div style={{
+            borderBottom: '1px solid #ccc',
+            padding: '10px',
+        }}>
+
+            {
+                mergePending && <p>
+                    <FormattedMessage id="MERGE_PENDING_MESSAGE" values={{
+                        indv1: data.primaryIndividualName,
+                        indv2: data.secondaryIndividualName,
+                        initiator: data.initiator,
+                        mergeDate: data.mergeExecutionDate,
+                        bold: chunks => <strong>{chunks}</strong>,
+                    }} />
+                </p>
+            }
+
+            {
+                mergeComplete && <p>
+                    <FormattedMessage id="MERGE_COMPLETE_MESSAGE" values={{
+                        indv1: data.primaryIndividualName,
+                        indv2: data.secondaryIndividualName,
+                        initiator: data.initiator,
+                        mergeDate: data.mergeExecutionDate,
+                        bold: chunks => <strong>{chunks}</strong>,
+                    }} />
+                </p>
+            }
+
+            {
+                mergeDenied && <p>
+                    <FormattedMessage id="MERGE_DENIED_MESSAGE" values={{
+                        indv1: data.primaryIndividualName,
+                        indv2: data.secondaryIndividualName,
+                        initiator: data.initiator,
+                        deniedBy: data.deniedBy,
+                        mergeDate: data.mergeExecutionDate,
+                        bold: chunks => <strong>{chunks}</strong>,
+                    }} />
+                </p>
+            }
+
+            {
+                !ownedByMe && mergePending &&
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    marginTop: '10px',
+                    marginBottom: '10px',
+                }}>
+                    <BrutalismButton onClick={() => handleClick('ignore', data.taskId)} >
+                        <FormattedMessage id="IGNORE" />
+                    </BrutalismButton>
+                    <BrutalismButton onClick={() => handleClick('deny', data.taskId)}>
+                        <FormattedMessage id="DENY" />
+                    </BrutalismButton>
+                </div>
+            }
+
+            {
+                mergeComplete &&
+                <div style={{
+                    display: 'flex',
+                    marginTop: '10px',
+                    marginBottom: '10px',
+                    // width: 105
+                }}>
+                    <BrutalismButton onClick={() => handleClick('ignore', data.taskId)} >
+                        <FormattedMessage id="DISMISS" />
+                    </BrutalismButton>
+                </div>
+            }
+
+            {
+                mergeDenied &&
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    marginTop: '10px',
+                    marginBottom: '10px',
+                    width: '112px'
+                }}>
+                    <BrutalismButton onClick={() => handleClick('ignore', data.taskId)}>
+                        <FormattedMessage id="DISMISS" />
+                    </BrutalismButton>
+                </div>
+            }
+
+            {
+                ownedByMe
+                    ? <p>
+                        <FormattedMessage
+                            id="INITIATED_BY_USER"
+                            values={{
+                                user: 'current user',
+                                bold: chunks => <strong>{chunks}</strong>,
+                            }}
+
+                        />
+                    </p>
+                    : <p>
+                        <FormattedMessage
+                            id="INITIATED_BY_USER"
+                            values={{
+                                user: data.initiator,
+                                bold: chunks => <strong>{chunks}</strong>,
+                            }} />
+                    </p>
+            }
+
+        </div>
+    })
+
+    return <div style={{
+        maxHeight: '500px',
+        overflow: 'auto',
+    }}>
+        <h4><FormattedMessage id="INDIVIDUAL_MERGE_NOTIFICATIONS" /></h4>
+        {content}
+        {showError && <h6>{error}</h6>}
+    </div>
+}
+
+