ref(collaborators): refactor to remove shared props from context

src/components/CollaboratorModal/CollaboratorModal.stories.tsx

@@ -1,14 +1,16 @@
+import { Button, useDisclosure } from "@chakra-ui/react"
 import { ComponentMeta, ComponentStory } from "@storybook/react"
 import { CollaboratorModal } from "components/CollaboratorModal/index"
 import { MemoryRouter, Route } from "react-router-dom"
 
 import { MOCK_COLLABORATORS, MOCK_USER } from "mocks/constants"
 import { handlers } from "mocks/handlers"
 import {
-  addContributorCollaborator,
   buildCollaboratorData,
   buildCollaboratorRoleData,
+  buildContributor,
   buildLoginData,
+  buildRemoveContributor,
 } from "mocks/utils"
 import { CollaboratorData } from "types/collaborators"
 
@@ -35,15 +37,26 @@ const collaboratorModalMeta = {
   ],
 } as ComponentMeta<typeof CollaboratorModal>
 
-const Template: ComponentStory<typeof CollaboratorModal> = CollaboratorModal
+// TODO!: add stories for the submodals
+// the sub modals won't show up on chromatic when changes are made at present.
+const Template: ComponentStory<typeof CollaboratorModal> = () => {
+  const props = useDisclosure({ defaultIsOpen: true })
+  return (
+    <>
+      <Button onClick={props.onOpen}>Open collaborators</Button>
+      <CollaboratorModal {...props} />
+    </>
+  )
+}
 
 export const AdminMain = Template.bind({})
 AdminMain.parameters = {
   msw: {
     handlers: [
       ...handlers,
+      buildRemoveContributor(null),
       buildLoginData(MOCK_USER),
-      buildCollaboratorData(({
+      buildCollaboratorData({
         collaborators: [
           // Email override so that the modal can display the "(You)" text depending on
           // the LoggedInUser
@@ -52,14 +65,12 @@ AdminMain.parameters = {
           MOCK_COLLABORATORS.CONTRIBUTOR_1,
           MOCK_COLLABORATORS.CONTRIBUTOR_2,
         ],
-      } as unknown) as CollaboratorData),
+      }),
       buildCollaboratorRoleData({ role: "ADMIN" }),
+      buildContributor(),
     ],
   },
 }
-AdminMain.args = {
-  siteName: "default",
-}
 
 export const ContributorMain = Template.bind({})
 ContributorMain.parameters = {
@@ -87,16 +98,14 @@ ContributorMain.parameters = {
     ],
   },
 }
-ContributorMain.args = {
-  siteName: "default",
-}
 
 export const AdminAddContributor = Template.bind({})
 AdminAddContributor.parameters = {
   msw: {
     handlers: [
       ...handlers,
       buildLoginData(MOCK_USER),
+      buildRemoveContributor(null),
       buildCollaboratorData(({
         collaborators: [
           // Email override so that the modal can display the "(You)" text depending on
@@ -108,11 +117,8 @@ AdminAddContributor.parameters = {
         ],
       } as unknown) as CollaboratorData),
       buildCollaboratorRoleData({ role: "ADMIN" }),
-      addContributorCollaborator(),
+      buildContributor(true),
     ],
   },
 }
-AdminAddContributor.args = {
-  siteName: "default",
-}
 export default collaboratorModalMeta

src/components/CollaboratorModal/CollaboratorModal.tsx

@@ -1,135 +1,51 @@
+import { ModalProps } from "@chakra-ui/react"
 import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalFooter,
-  useDisclosure,
-  Center,
-} from "@chakra-ui/react"
-import { Button } from "@opengovsg/design-system-react"
-import { CollaboratorModalContext } from "components/CollaboratorModal/CollaboratorModalContext"
-import { CollaboratorModalState } from "components/CollaboratorModal/constants"
-import {
-  AcknowledgementSubmodal,
   MainSubmodal,
   RemoveCollaboratorSubmodal,
-} from "components/CollaboratorModal/submodals"
-import PropTypes from "prop-types"
+} from "components/CollaboratorModal/components"
 import { useState } from "react"
 
-import { LOCAL_STORAGE_KEYS } from "constants/localStorage"
-
-import * as CollaboratorHooks from "hooks/collaboratorHooks"
-import { useLocalStorage } from "hooks/useLocalStorage"
+import { useLoginContext } from "contexts/LoginContext"
 
-// eslint-disable-next-line import/prefer-default-export
-export const CollaboratorModal = ({ siteName }: { siteName: string }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const [localUser] = useLocalStorage(LOCAL_STORAGE_KEYS.User, { email: "" })
+import useRedirectHook from "hooks/useRedirectHook"
 
-  const [newCollaboratorEmail, setNewCollaboratorEmail] = useState("")
-  const [addCollaboratorError, setAddCollaboratorError] = useState("")
-  const [deleteCollaboratorTarget, setDeleteCollaboratorTarget] = useState(
-    undefined
-  )
-  const [modalState, setModalState] = useState<CollaboratorModalState>(
-    CollaboratorModalState.Default
-  )
-  const [isAcknowledged, setIsAcknowledged] = useState(false)
+import { Collaborator } from "types/collaborators"
 
-  // Set up hooks
-  const { data: collaboratorData } = CollaboratorHooks.useListCollaboratorsHook(
-    siteName
-  )
-
-  const {
-    data: collaboratorRoleData,
-  } = CollaboratorHooks.useGetCollaboratorRoleHook(siteName)
-
-  const {
-    mutateAsync: addCollaborator,
-  } = CollaboratorHooks.useAddCollaboratorHook(
-    siteName,
-    setAddCollaboratorError,
-    setModalState,
-    isAcknowledged,
-    setIsAcknowledged
-  )
-
-  const {
-    mutateAsync: deleteCollaborator,
-  } = CollaboratorHooks.useDeleteCollaboratorHook(siteName)
-
-  // Handlers
-  const handleAddCollaborator = async () => {
-    addCollaborator(newCollaboratorEmail)
-  }
-  const handleDeleteCollaborator = async (collaboratorId: string) => {
-    deleteCollaborator(collaboratorId)
-  }
-
-  const renderModalContent = (currModalState: CollaboratorModalState) => {
-    switch (currModalState) {
-      case CollaboratorModalState.Acknowledgement:
-        return <AcknowledgementSubmodal />
-      case CollaboratorModalState.Default:
-        return <MainSubmodal />
-      case CollaboratorModalState.RemoveCollaborator:
-        return <RemoveCollaboratorSubmodal />
-
-      default:
-        return <MainSubmodal />
-    }
-  }
-
-  return (
-    <>
-      <Center m="36px">
-        <Button onClick={onOpen}>Manage site collaborators</Button>
-      </Center>
-      <CollaboratorModalContext.Provider
-        value={{
-          newCollaboratorEmail,
-          setNewCollaboratorEmail,
-          addCollaboratorError,
-          setAddCollaboratorError,
-          modalState,
-          setModalState,
-          isAcknowledged,
-          setIsAcknowledged,
-          collaboratorData,
-          collaboratorRoleData,
-          addCollaborator,
-          deleteCollaborator,
-          handleAddCollaborator,
-          handleDeleteCollaborator,
-          isModalOpen: isOpen,
-          closeModal: onClose,
-          localUser,
-          deleteCollaboratorTarget,
-          setDeleteCollaboratorTarget,
-        }}
-      >
-        <Modal
-          isOpen={isOpen}
-          onClose={() => {
-            setAddCollaboratorError("")
-            setModalState(CollaboratorModalState.Default)
-            setDeleteCollaboratorTarget(undefined)
-            onClose()
-          }}
-        >
-          <ModalOverlay />
-          <ModalContent>
-            {renderModalContent(modalState)}
-            <ModalFooter p="22px" />
-          </ModalContent>
-        </Modal>
-      </CollaboratorModalContext.Provider>
-    </>
+// eslint-disable-next-line import/prefer-default-export
+export const CollaboratorModal = (
+  props: Omit<ModalProps, "children">
+): JSX.Element => {
+  const [deleteCollaboratorTarget, setDeleteCollaboratorTarget] = useState<
+    Collaborator | undefined
+  >(undefined)
+  const { onCloseComplete } = props
+  const [showDelete, setShowDelete] = useState(false)
+  const { email } = useLoginContext()
+  const isUserDeletingThemselves = email === deleteCollaboratorTarget?.email
+  const { setRedirectToPage } = useRedirectHook()
+
+  return showDelete && deleteCollaboratorTarget ? (
+    <RemoveCollaboratorSubmodal
+      {...props}
+      userToDelete={deleteCollaboratorTarget}
+      onCloseComplete={() => {
+        setShowDelete(false)
+        onCloseComplete?.()
+      }}
+      onDeleteComplete={() => {
+        setShowDelete(false)
+        if (isUserDeletingThemselves) {
+          setRedirectToPage(`/sites`)
+        }
+      }}
+    />
+  ) : (
+    <MainSubmodal
+      {...props}
+      onDelete={(user) => {
+        setShowDelete(true)
+        setDeleteCollaboratorTarget(user)
+      }}
+    />
   )
 }
-
-CollaboratorModal.propTypes = {
-  siteName: PropTypes.string.isRequired,
-}