chore(collaborators): error messages + parsing (#1152)

* chore(uselistcollaborators): rename hook to remove trailing `hook`

* chore(contactverificationmodal): update import

* chore(axios): allow specifying default message for getAxiosErrorMessage

* chore(collaborators): remove unused properties

* refactor(uselistcollaboratorshook): shift parsing to be, extract error message from body as default

src/components/CollaboratorModal/components/MainSubmodal.tsx

@@ -61,7 +61,7 @@ const CollaboratorListSection = ({ onDelete }: CollaboratorListProps) => {
   const {
     data: collaborators,
     isError,
-  } = CollaboratorHooks.useListCollaboratorsHook(siteName)
+  } = CollaboratorHooks.useListCollaborators(siteName)
   const { isDisabled } = useFormControlContext()
 
   return (

src/components/Header/ContactModal/ContactVerificationModal.tsx

@@ -15,9 +15,10 @@ import { useUpdateContact, useVerifyContact } from "hooks/miscHooks"
 
 import { getAxiosErrorMessage } from "utils/axios"
 
+import { ContactOtpProps } from "types/contact"
 import { useSuccessToast } from "utils"
 
-import { ContactOtpProps, ContactOtpForm } from "./ContactOtpForm"
+import { ContactOtpForm } from "./ContactOtpForm"
 import { ContactProps, ContactSettingsForm } from "./ContactSettingsForm"
 
 interface ContactVerificationModalProps {

src/hooks/collaboratorHooks/useListCollaboratorsHook.ts

@@ -5,12 +5,16 @@ import { LIST_COLLABORATORS_KEY } from "constants/queryKeys"
 
 import useRedirectHook from "hooks/useRedirectHook"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { CollaboratorService } from "services"
 import { Collaborator } from "types/collaborators"
 import { MiddlewareError } from "types/error"
 import { useErrorToast, DEFAULT_RETRY_MSG } from "utils"
 
-export const useListCollaboratorsHook = (
+const EXCEPTION_ERROR_MESSAGE = `The list of collaborators could not be retrieved. ${DEFAULT_RETRY_MSG}`
+
+export const useListCollaborators = (
   siteName: string
 ): UseQueryResult<Collaborator[], AxiosError<MiddlewareError>> => {
   const errorToast = useErrorToast()
@@ -19,10 +23,7 @@ export const useListCollaboratorsHook = (
     [LIST_COLLABORATORS_KEY, siteName],
     () =>
       CollaboratorService.listCollaborators(siteName).then((data) => {
-        return data.collaborators.map(({ SiteMember, ...rest }) => ({
-          ...rest,
-          role: SiteMember.role,
-        }))
+        return data.collaborators
       }),
     {
       onError: (err) => {
@@ -32,7 +33,7 @@ export const useListCollaboratorsHook = (
           setRedirectToPage("/sites")
         } else {
           errorToast({
-            description: `The list of collaborators could not be retrieved. ${DEFAULT_RETRY_MSG}`,
+            description: getAxiosErrorMessage(err, EXCEPTION_ERROR_MESSAGE),
           })
         }
       },

src/layouts/ReviewRequest/Dashboard.tsx

@@ -27,7 +27,7 @@ import { useParams } from "react-router-dom"
 
 import { useReviewRequestRoleContext } from "contexts/ReviewRequestRoleContext"
 
-import { useListCollaboratorsHook } from "hooks/collaboratorHooks"
+import { useListCollaborators } from "hooks/collaboratorHooks"
 import { useUnapproveReviewRequest } from "hooks/reviewHooks"
 import { useApproveReviewRequest } from "hooks/reviewHooks/useApproveReviewRequest"
 import { useGetReviewRequest } from "hooks/reviewHooks/useGetReviewRequest"
@@ -63,7 +63,7 @@ export const ReviewRequestDashboard = (): JSX.Element => {
     siteName,
     prNumber
   )
-  const { data: collaborators, isLoading, isError } = useListCollaboratorsHook(
+  const { data: collaborators, isLoading, isError } = useListCollaborators(
     siteName
   )
   const {

src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx

@@ -21,7 +21,7 @@ import { useParams } from "react-router-dom"
 
 import { useLoginContext } from "contexts/LoginContext"
 
-import { useListCollaboratorsHook } from "hooks/collaboratorHooks"
+import { useListCollaborators } from "hooks/collaboratorHooks"
 import { useCreateReviewRequest } from "hooks/reviewHooks/useCreateReviewRequest"
 import { useDiff } from "hooks/reviewHooks/useDiff"
 
@@ -43,7 +43,7 @@ export const ReviewRequestModal = (
   const { onClose } = props
   const { siteName } = useParams<{ siteName: string }>()
   const { data: items } = useDiff(siteName)
-  const { data: collaborators } = useListCollaboratorsHook(siteName)
+  const { data: collaborators } = useListCollaborators(siteName)
   const {
     mutateAsync: createReviewRequest,
     isLoading,

src/mocks/constants.ts

@@ -390,28 +390,25 @@ export const MOCK_COLLABORATORS: Record<string, CollaboratorDto> = {
     id: "1",
     email: "test1@vendor.sg",
     lastLoggedIn: "2022-03-20T07:41:09.661Z",
-    SiteMember: { role: "CONTRIBUTOR" },
+    role: "CONTRIBUTOR",
   },
   CONTRIBUTOR_2: {
     id: "4",
     email: "test4@vendor.sg",
-    githubId: "test4",
     lastLoggedIn: "2022-04-30T07:41:09.661Z",
-    SiteMember: { role: "CONTRIBUTOR" },
+    role: "CONTRIBUTOR",
   },
   ADMIN_1: {
     id: "2",
     email: "test2@test.gov.sg",
-    githubId: "test2",
     lastLoggedIn: "2022-07-30T07:41:09.661Z",
-    SiteMember: { role: "ADMIN" },
+    role: "ADMIN",
   },
   ADMIN_2: {
     id: "3",
     email: "test3@test.gov.sg",
-    githubId: "test3",
     lastLoggedIn: "2022-06-30T07:41:09.661Z",
-    SiteMember: { role: "ADMIN" },
+    role: "ADMIN",
   },
 }
 

src/types/collaborators.ts

@@ -3,12 +3,8 @@ export type SiteMemberRole = "CONTRIBUTOR" | "ADMIN"
 export interface CollaboratorDto {
   id: string
   email: string
-  githubId?: string
   lastLoggedIn: string
-  contactNumber?: number
-  SiteMember: {
-    role: SiteMemberRole
-  }
+  role: SiteMemberRole
 }
 
 // NOTE: Prior to data being given to the UI,

src/utils/axios.ts

@@ -14,13 +14,14 @@ const isBackendError = (
 }
 
 export const getAxiosErrorMessage = (
-  error: null | AxiosError<ErrorDto> | AxiosError
+  error: null | AxiosError<ErrorDto> | AxiosError,
+  defaultErrorMessage = DEFAULT_RETRY_MSG
 ): string => {
   if (!error) return ""
 
   if (isBackendError(error)) {
-    return error.response?.data.message || DEFAULT_RETRY_MSG
+    return error.response?.data.message || defaultErrorMessage
   }
 
-  return error.response?.data?.error?.message || DEFAULT_RETRY_MSG
+  return error.response?.data?.error?.message || defaultErrorMessage
 }