Skip to content

Commit

Permalink
a lot better but multiple toasts
Browse files Browse the repository at this point in the history
  • Loading branch information
Kristen Yee authored and Kristen Yee committed Apr 18, 2024
1 parent 687d4d7 commit 9a14232
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 109 deletions.
151 changes: 91 additions & 60 deletions src/components/Notifications/AccountNotification.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ import {
const AccountNotification = ({
notificationBlock,
today,
// removeEntry, add back in after we fix bugs
removeEntry,
approveAfterTimer,
idToRemove,
setApproveAfterTimer,
declineAfterTimer,
setDeclineAfterTimer,
}) => {
const toast = useToast();
const [accounts, setAccounts] = useState(notificationBlock.getNotificationData().accounts);
Expand All @@ -33,19 +35,23 @@ const AccountNotification = ({
const diffTime = today - blockDate;
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

const [removeNotificationBlock, setRemoveNotificationBlock] = useState(false);
let timeoutId = undefined;

const acceptAll = async accounts => {
console.log('calling accept all function');
// setApproveClicked(true);
// accounts.map(account => {
// console.log('calling account approve callback now');
// console.log(account);
// account.approveCallback();
// });
await Promise.all(
accounts.map(async account => {
await account.approveCallback();
}),
);

const timeId = setTimeout(async () => {
await Promise.all(
accounts.map(async account => {
await account.approveCallback();
}),
);
console.log("set remove notif block true");
setRemoveNotificationBlock(true);
setApproveAfterTimer(true);
}, 5000); // set 5 sec timer for accept all requests
timeoutId=timeId;

// toast({
// title: `Approved ${accounts?.length} accounts.`,
Expand All @@ -55,22 +61,23 @@ const AccountNotification = ({
// });

// removeEntry(notificationBlock.key);
// console.log('will remove entry here');
console.log('done with accept all');
};

const declineAll = async accounts => {
console.log('calling decline all function');
// setApproveClicked(true);
accounts.map(account => {
console.log('calling account decline callback now');
console.log(account);
account.declineCallback();
});
// await Promise.all(
// accounts.map(async account => {
// await account.declineCallback();
// }),
// );

const timeId = setTimeout(async () => {
await Promise.all(
accounts.map(async account => {
await account.declineCallback();
}),
);
console.log("set remove notif block true");
setRemoveNotificationBlock(true);
setDeclineAfterTimer(true);
}, 5000); // set 5 sec timer for accept all requests
timeoutId=timeId;

// toast({
// title: `Declined ${accounts?.length} accounts.`,
Expand All @@ -79,49 +86,71 @@ const AccountNotification = ({
// isClosable: true,
// });
// removeEntry(notificationBlock.key);
console.log('will remove entry here');
console.log('done with decline all function');
};

const undoAll = async accounts => {
const undoAll = async () => {
console.log('calling undo all function');
// setApproveClicked(true);
accounts.map(account => {
console.log('calling account undo callback now');
console.log(account);
account.undoCallback();
});
// await Promise.all(
// accounts.map(async account => {
// await account.declineCallback();
// }),
// );

// toast({
// title: `Declined ${accounts?.length} accounts.`,
// status: 'info',
// duration: 9000,
// isClosable: true,
// });
// removeEntry(notificationBlock.key);
console.log("clearing timeoutid from undoall");
clearTimeout(timeoutId);
timeoutId = undefined;
console.log("undo called, set remove notif block false");
setRemoveNotificationBlock(false);
setApproveAfterTimer(false);
setDeclineAfterTimer(false);
console.log('done undoall function');
};

// this is really buggy
useEffect(() => {
console.log('checking value of approveAfterTimer', approveAfterTimer);
if (approveAfterTimer) {
console.log('waited 5 seconds, finish approval and remove from notifications');
console.log('approveaftertimer or removenoticationblock value changed', approveAfterTimer, removeNotificationBlock);
if (approveAfterTimer && removeNotificationBlock) {
console.log('approveafter timer = true and remove notification block = true');
console.log("REMOVE NOTIF BLOCK HERE");

toast({
title: `Approved.`,
status: 'success',
duration: 9000,
isClosable: true,
});

removeEntry(notificationBlock.key);
} else if (declineAfterTimer && removeNotificationBlock) {
console.log('decline after timer = true and remove notification block = true');
console.log("REMOVE NOTIF BLOCK HERE");

toast({
title: `Declined.`,
status: 'info',
duration: 9000,
isClosable: true,
});
removeEntry(notificationBlock.key);
} else if (approveAfterTimer) {
console.log('approveafter timer = true and remove notification block = false');
console.log("remove 1 account here");
console.log('idToRemove', idToRemove);
setAccounts(accounts => accounts.filter(account => account.id !== idToRemove));
setApproveAfterTimer(false);
toast({
title: `Approved.`,
status: 'success',
duration: 9000,
isClosable: true,
});
} else if (declineAfterTimer) {
console.log('decline after timer = true and remove notification block = false');
console.log("remove 1 account here");
console.log('idToRemove', idToRemove);
setAccounts(accounts => accounts.filter(account => account.id !== idToRemove));
toast({
title: `Declined.`,
status: 'info',
duration: 9000,
isClosable: true,
});
}
}, [approveAfterTimer]);
}, [approveAfterTimer, declineAfterTimer, removeNotificationBlock]);

return (
<Container p="0" m="0" maxWidth="none" display="flex" flexDirection="column">
Expand Down Expand Up @@ -209,7 +238,7 @@ const AccountNotification = ({
declineText="Decline"
acceptCallback={async () => {
await approveCallback();
console.log('check approveAfterTimer');
// console.log('check approveAfterTimer');

// if (approveAfterTimer) {
// // toast({
Expand All @@ -226,15 +255,15 @@ const AccountNotification = ({
}}
declineCallback={async () => {
await declineCallback();
toast({
title: `Declined ${email}.`,
status: 'info',
duration: 9000,
isClosable: true,
});
setAccounts(accounts =>
accounts.filter(account => account.id !== id),
);
// toast({
// title: `Declined ${email}.`,
// status: 'info',
// duration: 9000,
// isClosable: true,
// });
// setAccounts(accounts =>
// accounts.filter(account => account.id !== id),
// );
}}
undoCallback={() => {
console.log('but undo function here');
Expand Down Expand Up @@ -271,6 +300,8 @@ AccountNotification.propTypes = {
approveAfterTimer: PropTypes.bool,
idToRemove: PropTypes.string,
setApproveAfterTimer: PropTypes.func,
declineAfterTimer: PropTypes.bool,
setDeclineAfterTimer: PropTypes.func,
};

const AccountButtonGroup = ({
Expand Down
67 changes: 18 additions & 49 deletions src/components/Notifications/Notifications.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Table, Tbody, Tr, Td, TableContainer, useToast } from '@chakra-ui/react';
import { Table, Tbody, Tr, Td, TableContainer } from '@chakra-ui/react';
import { useEffect, useState, useMemo } from 'react';
import { NPOBackend } from '../../utils/auth_utils';
import { AccountNotificationBlock, EventNotificationBlock } from './NotificationElement';
Expand All @@ -19,54 +19,29 @@ const getDateFromISOString = isoString => {
const Notifications = () => {
const [notificationList, setNotificationList] = useState([]);
const [approveAfterTimer, setApproveAfterTimer] = useState(false);
const [declineAfterTimer, setDeclineAfterTimer] = useState(false);
const [idToRemove, setidToRemove] = useState(undefined);
let timeoutId = undefined;
const toast = useToast();
// console.log('rerender: timeoutId', timeoutId);

const today = useMemo(() => new Date(), []);

const undoChanges = () => {
console.log('undoing changes now !!!');
// console.log("the timerid i'm clearing: ", timeoutId);
// console.log("current pending changes: ", pendingChanges);
clearTimeout(timeoutId);
timeoutId = undefined;
// clearTimeout(23);
// setPendingChanges({});
};

// useEffect(() => {
// console.log('timeoutId changed?');
// return () => {
// clearTimeout(timeoutId);
// };
// }, [timeoutId]);

// useEffect(() => { setTimeoutId(timeoutId);}, [timeoutId])

const today = useMemo(() => new Date(), []);

const approveAccount = async id => {
console.log('about to approve: ' + id);
// console.log('timeoutId inside function', timeoutId);

// Start timer
const timeId = setTimeout(async () => {
console.log('update db approve');
// console.log("timeoutid: ", timeoutId);
// console.log("pending changes: ", pendingChanges);
try {
await NPOBackend.put(`/users/approve/${id}`);
} catch (e) {
console.log(e);
}
toast({
title: `Approved.`,
status: 'success',
duration: 9000,
isClosable: true,
});
// removeNotificationEntry(notificationBlock.key);
// removeEntry(notificationBlock.key);
console.log("done approving account!");
setidToRemove(id);
console.log('setApproveAfterTimer called');
setApproveAfterTimer(true);
Expand All @@ -76,28 +51,20 @@ const Notifications = () => {

const declineAccount = async id => {
console.log('about to decline: ' + id);
// const newPendingChanges = { accId: id, decline: true };
// setPendingChanges(newPendingChanges);

// Start timer
const timeId = setTimeout(() => {
console.log('update db decline');
console.log('timeoutid: ', timeoutId);
// console.log("pending changes: ", pendingChanges);
// try {
// await NPOBackend.delete(`/users/${id}`);
// } catch (e) {
// console.log(e);
// }
// setPendingChanges({});
const timeId = setTimeout(async () => {
try {
await NPOBackend.delete(`/users/${id}`);
} catch (e) {
console.log(e);
}
console.log("done decline account!");
setidToRemove(id);
console.log('setDeclineAfterTimer called');
setDeclineAfterTimer(true);
}, 5000); // 5 second delay
console.log(timeId);

// try {
// await NPOBackend.delete(`/users/${id}`);
// } catch (e) {
// console.log(e);
// }
timeoutId = timeId;
};

// const approveAccount = async id => {
Expand Down Expand Up @@ -209,6 +176,8 @@ const Notifications = () => {
approveAfterTimer={approveAfterTimer}
idToRemove={idToRemove}
setApproveAfterTimer={setApproveAfterTimer}
declineAfterTimer={declineAfterTimer}
setDeclineAfterTimer={setDeclineAfterTimer}
/>
)}
{notificationType === 'event' && (
Expand Down

0 comments on commit 9a14232

Please sign in to comment.