Skip to content

70 undo approve reject account request #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 18, 2024
Merged

70 undo approve reject account request #84

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
687d4d7
delay approved implemented but kinda buggy
Apr 17, 2024
9a14232
a lot better but multiple toasts
Apr 18, 2024
aa8a09f
fixed accept/decline all
Apr 18, 2024
5168ecd
cleaned up code and commented out toasts
Apr 18, 2024
cb2a5ef
Merge branch 'dev' into 70-undo-approve-reject-account-request
ThatMegamind Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
302 changes: 238 additions & 64 deletions src/components/Notifications/AccountNotification.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { AccountNotificationBlock } from './NotificationElement';
import {
Expand All @@ -13,10 +13,18 @@ import {
Grid,
GridItem,
Text,
Link,
useToast,
} from '@chakra-ui/react';

const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
const AccountNotification = ({
notificationBlock,
today,
// removeEntry, add back in after we fix bugs
approveAfterTimer,
idToRemove,
setApproveAfterTimer,
}) => {
const toast = useToast();
const [accounts, setAccounts] = useState(notificationBlock.getNotificationData().accounts);
const [disableChildrenButtons, setDisableChildrenButtons] = useState(false);
Expand All @@ -26,38 +34,95 @@ const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

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();
}),
);

toast({
title: `Approved ${accounts?.length} accounts.`,
status: 'success',
duration: 9000,
isClosable: true,
});
// toast({
// title: `Approved ${accounts?.length} accounts.`,
// status: 'success',
// duration: 9000,
// isClosable: true,
// });

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

const declineAll = async accounts => {
await Promise.all(
accounts.map(async account => {
await account.declineCallback();
}),
);
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();
// }),
// );

// toast({
// title: `Declined ${accounts?.length} accounts.`,
// status: 'info',
// duration: 9000,
// isClosable: true,
// });
// removeEntry(notificationBlock.key);
console.log('will remove entry here');
};

toast({
title: `Declined ${accounts?.length} accounts.`,
status: 'info',
duration: 9000,
isClosable: true,
const undoAll = async accounts => {
console.log('calling undo all function');
// setApproveClicked(true);
accounts.map(account => {
console.log('calling account undo callback now');
console.log(account);
account.undoCallback();
});
removeEntry(notificationBlock.key);
// 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('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');
toast({
title: `Approved.`,
status: 'success',
duration: 9000,
isClosable: true,
});
console.log('idToRemove', idToRemove);
setAccounts(accounts => accounts.filter(account => account.id !== idToRemove));
setApproveAfterTimer(false);
}
}, [approveAfterTimer]);

return (
<Container p="0" m="0" maxWidth="none" display="flex" flexDirection="column">
<div>
Expand All @@ -81,6 +146,10 @@ const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
declineCallback={() => {
declineAll(accounts);
}}
undoCallback={() => {
console.log('but undo function here');
undoAll(accounts);
}}
pl="3.25rem"
/>
</>
Expand Down Expand Up @@ -118,11 +187,16 @@ const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
setDisableChildrenButtons(true);
declineAll(accounts);
}}
undoCallback={() => {
setDisableChildrenButtons(false);
console.log('but undo function here');
undoAll(accounts);
}}
/>
</Container>
<AccordionPanel whiteSpace="wrap" paddingLeft="3.25rem">
<Grid templateColumns="1fr auto" gap={6}>
{accounts?.map(({ id, email, approveCallback, declineCallback }) => (
{accounts?.map(({ id, email, approveCallback, declineCallback, undoCallback }) => (
<React.Fragment key={id}>
<GridItem>
<Text color="blue.600" decoration="underline">
Expand All @@ -135,15 +209,20 @@ const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
declineText="Decline"
acceptCallback={async () => {
await approveCallback();
toast({
title: `Approved ${email}.`,
status: 'success',
duration: 9000,
isClosable: true,
});
setAccounts(accounts =>
accounts.filter(account => account.id !== id),
);
console.log('check approveAfterTimer');

// if (approveAfterTimer) {
// // toast({
// // title: `Approved ${email}.`,
// // status: 'success',
// // duration: 9000,
// // isClosable: true,
// // });
// // setAccounts(accounts =>
// // accounts.filter(account => account.id !== id),
// // );
// console.log('useEffect instead lol');
// }
}}
declineCallback={async () => {
await declineCallback();
Expand All @@ -157,6 +236,10 @@ const AccountNotification = ({ notificationBlock, today, removeEntry }) => {
accounts.filter(account => account.id !== id),
);
}}
undoCallback={() => {
console.log('but undo function here');
undoCallback();
}}
disableChildrenButtons={disableChildrenButtons}
/>
</GridItem>
Expand Down Expand Up @@ -185,61 +268,152 @@ AccountNotification.propTypes = {
notificationBlock: PropTypes.instanceOf(AccountNotificationBlock),
today: PropTypes.instanceOf(Date),
removeEntry: PropTypes.func,
approveAfterTimer: PropTypes.bool,
idToRemove: PropTypes.string,
setApproveAfterTimer: PropTypes.func,
};

const AccountButtonGroup = ({
acceptText,
acceptCallback,
declineText,
declineCallback,
undoCallback,
disableChildrenButtons,
...chakraProps
}) => {
const [acceptState, setAcceptState] = useState(undefined);
const [declineState, setDeclineState] = useState(undefined);
const [approveClick, setApproveClicked] = useState(false);
const [declineClick, setDeclineClicked] = useState(false);

return (
<ButtonGroup gap="2" {...chakraProps}>
<Button
onClick={() => {
setAcceptState('loading');
setDeclineState('disabled');
acceptCallback();
}}
backgroundColor="blue.500"
color="white"
fontSize="sm"
h="6"
fontWeight="normal"
isLoading={acceptState === 'loading'}
isDisabled={acceptState === 'disabled' || disableChildrenButtons === true}
>
{acceptText}
</Button>
<Button
onClick={() => {
setDeclineState('loading');
setAcceptState('disabled');
declineCallback();
}}
backgroundColor="gray.200"
color="black"
fontSize="sm"
h="6"
fontWeight="normal"
isLoading={declineState === 'loading'}
isDisabled={declineState === 'disabled' || disableChildrenButtons === true}
>
{declineText}
</Button>
</ButtonGroup>
<>
{!approveClick && !declineClick ? (
<ButtonGroup gap="2" {...chakraProps}>
<Button
onClick={() => {
setAcceptState('loading');
setDeclineState('disabled');
setApproveClicked(true);
acceptCallback();
}}
backgroundColor="blue.500"
color="white"
fontSize="sm"
h="6"
fontWeight="normal"
isLoading={acceptState === 'loading'}
isDisabled={acceptState === 'disabled' || disableChildrenButtons === true}
>
{acceptText}
</Button>
<Button
onClick={() => {
setDeclineState('loading');
setAcceptState('disabled');
setDeclineClicked(true);
declineCallback();
}}
backgroundColor="gray.200"
color="black"
fontSize="sm"
h="6"
fontWeight="normal"
isLoading={declineState === 'loading'}
isDisabled={declineState === 'disabled' || disableChildrenButtons === true}
>
{declineText}
</Button>
</ButtonGroup>
) : (
<>
{approveClick ? (
<div>
<ButtonGroup gap="2" {...chakraProps}>
<Text>Accepted</Text>
<Link
color="blue.600"
decoration="underline"
onClick={() => {
console.log('trying to undo');
setAcceptState(undefined);
setDeclineState(undefined);
setApproveClicked(false);
undoCallback();
}}
>
Undo
</Link>
</ButtonGroup>
</div>
) : (
<div>
<ButtonGroup gap="2" {...chakraProps}>
<Text>Declined</Text>
<Link
color="blue.600"
decoration="underline"
onClick={() => {
console.log('trying to undo');
setAcceptState(undefined);
setDeclineState(undefined);
setDeclineClicked(false);
undoCallback();
}}
>
Undo
</Link>
</ButtonGroup>
</div>
)}
</>
)}
</>
// <ButtonGroup gap="2" {...chakraProps}>
// <Button
// onClick={() => {
// setAcceptState('loading');
// setDeclineState('disabled');
// // console.log("calling accept callback");
// setApproveClicked(true);
// acceptCallback();
// }}
// backgroundColor="blue.500"
// color="white"
// fontSize="sm"
// h="6"
// fontWeight="normal"
// isLoading={acceptState === 'loading'}
// isDisabled={acceptState === 'disabled' || disableChildrenButtons === true}
// >
// {acceptText}
// </Button>
// <Button
// onClick={() => {
// setDeclineState('loading');
// setAcceptState('disabled');
// declineCallback();
// }}
// backgroundColor="gray.200"
// color="black"
// fontSize="sm"
// h="6"
// fontWeight="normal"
// isLoading={declineState === 'loading'}
// isDisabled={declineState === 'disabled' || disableChildrenButtons === true}
// >
// {declineText}
// </Button>
// </ButtonGroup>
);
};
AccountButtonGroup.propTypes = {
acceptText: PropTypes.string,
acceptCallback: PropTypes.func,
declineText: PropTypes.string,
declineCallback: PropTypes.func,
undoCallback: PropTypes.func,
disableChildrenButtons: PropTypes.bool,
chakraProps: PropTypes.any,
};
Expand Down
Loading
Loading