From 08d1bea4da3e6638f9e516079d6d98880fc81efc Mon Sep 17 00:00:00 2001 From: Nick Ito Date: Mon, 25 Mar 2024 21:17:45 -0700 Subject: [PATCH 1/7] fix: add await --- .../components/InviteMemberDialog/InviteMemberDialogContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index 7e6541f8..3f4d685d 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -46,7 +46,7 @@ export const InviteMemberDialogContent = ({ } const hash = result.value.invitationLinkHash; - navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); + await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); return; }; From 24102c61c7af8784f9580be9b67d4b96796f900d Mon Sep 17 00:00:00 2001 From: Nick Ito Date: Tue, 26 Mar 2024 14:13:39 -0700 Subject: [PATCH 2/7] chore: move the return keyword --- .../InviteMemberDialog/InviteMemberDialogContent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index 3f4d685d..ac087bff 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -46,8 +46,7 @@ export const InviteMemberDialogContent = ({ } const hash = result.value.invitationLinkHash; - await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); - return; + return await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); }; /** From e562aac2093da120e3614527994ddd3e1e4b0b82 Mon Sep 17 00:00:00 2001 From: ShoeheyOt Date: Tue, 26 Mar 2024 21:28:01 -0700 Subject: [PATCH 3/7] fix: put fetch function when the dialog open --- .../InviteMemberDialogContent.tsx | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index ac087bff..973f6921 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -30,7 +30,21 @@ export const InviteMemberDialogContent = ({ groupId, }: IInviteMemberDialogContentProps) => { const [isLinkButtonClicked, setIsLinkButtonClicked] = useState(false); + const [isHash, setHash] = useState(''); + useEffect(() => { + const getHash = async () => { + if (isDialogOpen) { + const result = await putGenerateInvitationLinkHash(groupId); + if (!result.ok) { + alert('Something went wrong. Please try again'); + return; + } + setHash(result.value.invitationLinkHash); + } + }; + getHash(); + }, [isDialogOpen, groupId]); /** * Handle the link copy button click. * If the generatedLink is not valid, do nothing. @@ -38,15 +52,18 @@ export const InviteMemberDialogContent = ({ */ const handleLinkCopy = async () => { setIsLinkButtonClicked(true); - const result = await putGenerateInvitationLinkHash(groupId); - if (!result.ok) { - alert('Something went wrong. Please try again'); + try { + await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${isHash}`); return; + } catch (err) { + console.error( + 'Error occurred while copying the link:', + err instanceof Error ? err.message : err, + ); + alert('Error occurred while copying the link. Please try again.'); } - - const hash = result.value.invitationLinkHash; - return await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); + return; }; /** From fd79acfd3bc525eba17413d13f4e48db8703ccde Mon Sep 17 00:00:00 2001 From: ShoeheyOt Date: Tue, 26 Mar 2024 21:43:07 -0700 Subject: [PATCH 4/7] chore: reset the hash state when copy button clicked --- .../InviteMemberDialog/InviteMemberDialogContent.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index 973f6921..52354b93 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -52,10 +52,8 @@ export const InviteMemberDialogContent = ({ */ const handleLinkCopy = async () => { setIsLinkButtonClicked(true); - try { - await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${isHash}`); - return; + return await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${isHash}`); } catch (err) { console.error( 'Error occurred while copying the link:', @@ -63,6 +61,7 @@ export const InviteMemberDialogContent = ({ ); alert('Error occurred while copying the link. Please try again.'); } + setHash(''); return; }; From 6f529ee9e862527075791f0fd3fe5680d4f24b4a Mon Sep 17 00:00:00 2001 From: ShoeheyOt Date: Tue, 26 Mar 2024 22:01:18 -0700 Subject: [PATCH 5/7] docs: modify the documentation --- .../InviteMemberDialog/InviteMemberDialogContent.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index 52354b93..4965f090 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -32,6 +32,10 @@ export const InviteMemberDialogContent = ({ const [isLinkButtonClicked, setIsLinkButtonClicked] = useState(false); const [isHash, setHash] = useState(''); + /** + * This useEffect is fired when the `isDialogOpen` state is changed(true/false) if true, the setup is is fired. + * generating the invitation link hash and put it as state `isHash` + */ useEffect(() => { const getHash = async () => { if (isDialogOpen) { @@ -47,8 +51,8 @@ export const InviteMemberDialogContent = ({ }, [isDialogOpen, groupId]); /** * Handle the link copy button click. - * If the generatedLink is not valid, do nothing. * If success, generated invitation link URL is copied to clipboard and change the text of button to 'Copied!' + * *hash is already generated when the dialog open */ const handleLinkCopy = async () => { setIsLinkButtonClicked(true); From 087b522f5e9bc252fb868468eb4e8abeff02cd58 Mon Sep 17 00:00:00 2001 From: ShoeheyOt Date: Tue, 26 Mar 2024 22:44:48 -0700 Subject: [PATCH 6/7] chore: typo --- .../components/InviteMemberDialog/InviteMemberDialogContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index 4965f090..bca141ba 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -33,7 +33,7 @@ export const InviteMemberDialogContent = ({ const [isHash, setHash] = useState(''); /** - * This useEffect is fired when the `isDialogOpen` state is changed(true/false) if true, the setup is is fired. + * This useEffect is fired when the `isDialogOpen` state is changed(true/false). if true, the setup is fired. * generating the invitation link hash and put it as state `isHash` */ useEffect(() => { From 458c8f51d2cd497e1e05e756db02468a61a3ca4e Mon Sep 17 00:00:00 2001 From: ShoeheyOt Date: Wed, 27 Mar 2024 10:16:58 -0700 Subject: [PATCH 7/7] fix: update based on given feedback --- .../InviteMemberDialogContent.tsx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx index bca141ba..bc213910 100644 --- a/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx +++ b/src/features/groups/components/InviteMemberDialog/InviteMemberDialogContent.tsx @@ -30,34 +30,36 @@ export const InviteMemberDialogContent = ({ groupId, }: IInviteMemberDialogContentProps) => { const [isLinkButtonClicked, setIsLinkButtonClicked] = useState(false); - const [isHash, setHash] = useState(''); + const [hash, setHash] = useState(''); /** - * This useEffect is fired when the `isDialogOpen` state is changed(true/false). if true, the setup is fired. - * generating the invitation link hash and put it as state `isHash` + * This useEffect has two dependencies. When one of them,`isDialogOpen` state, is changed to true, the setup is fired + * which is generating the invitation link hash and put it as state `hash` */ useEffect(() => { const getHash = async () => { - if (isDialogOpen) { - const result = await putGenerateInvitationLinkHash(groupId); - if (!result.ok) { - alert('Something went wrong. Please try again'); - return; - } - setHash(result.value.invitationLinkHash); + if (!isDialogOpen) return; + + const result = await putGenerateInvitationLinkHash(groupId); + if (!result.ok) { + alert('Something went wrong. Please try again'); + return; } + setHash(result.value.invitationLinkHash); }; + getHash(); }, [isDialogOpen, groupId]); /** * Handle the link copy button click. * If success, generated invitation link URL is copied to clipboard and change the text of button to 'Copied!' - * *hash is already generated when the dialog open + * *A hash, which is part of the URL, is already generated when the dialog open */ const handleLinkCopy = async () => { setIsLinkButtonClicked(true); try { - return await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${isHash}`); + if (!hash) throw new Error('Invitation link hash is not set.'); + return await navigator.clipboard.writeText(`${CLIENT_BASE_URL}/groups/join/${hash}`); } catch (err) { console.error( 'Error occurred while copying the link:', @@ -65,7 +67,6 @@ export const InviteMemberDialogContent = ({ ); alert('Error occurred while copying the link. Please try again.'); } - setHash(''); return; };