refresh list after updating status

Coding-Coach · Jul 1, 2021 · 52217f8 · 52217f8
1 parent d1488bf
commit 52217f8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/src/Me/MentorshipRequests/MentorshipRequests.js b/src/Me/MentorshipRequests/MentorshipRequests.js
@@ -49,7 +49,8 @@ const MentorshipReq = () => {
     await updateReqStatus(
       { id: selectedReq.id, userId },
       STATUS.cancelled,
-      message
+      message,
+      'mentee'
     );
     closeCancelModal();
   };
@@ -78,8 +79,18 @@ const MentorshipReq = () => {
       setLoadingState(false);
     }
   }, [userId]);
-
-  const updateReqStatus = async ({ id, userId }, nextStatus, reason) => {
+  /**
+   * @param  {import('../../types/models').User} user
+   * @param  {import('../../helpers/mentorship').Status} nextStatus
+   * @param  {string} reason
+   * @param  {'mentee' | 'mentor'} listType
+   */
+  const updateReqStatus = async (
+    { id, userId },
+    nextStatus,
+    reason,
+    listType = 'mentor'
+  ) => {
     const { success, mentorship } = await updateMentorshipReqStatus(
       id,
       userId,
@@ -91,15 +102,20 @@ const MentorshipReq = () => {
 
     if (!success) return;
 
-    const itemIndex = mentorState.findIndex(s => s.id === id);
-    const item = mentorState[itemIndex];
-    let newState = [...mentorState];
+    const [list, setList] =
+      listType === 'mentor'
+        ? [mentorState, setMentorState]
+        : [menteeState, setMenteeState];
+
+    const itemIndex = list.findIndex(s => s.id === id);
+    const item = list[itemIndex];
+    let newState = [...list];
     newState.splice(itemIndex, 1, {
       ...item,
       status: mentorship.status,
     });
 
-    setMentorState(newState);
+    setList(newState);
   };
 
   const [openAcceptModal] = useModal(

diff --git a/src/Me/MentorshipRequests/UsersList.tsx b/src/Me/MentorshipRequests/UsersList.tsx
@@ -2,19 +2,13 @@ import { getAvatarUrl } from '../../helpers/avatar';
 import ReqContent from './ReqContent';
 import { formatRequestTime, Status } from '../../helpers/mentorship';
 import { RichList, RichItem } from '../components/RichList';
-import { Loader } from '../../components/Loader';
 import styled from 'styled-components';
 import { STATUS } from '../../helpers/mentorship';
 import { ReactComponent as UserWasRemovedIcon } from '../../assets/me/icon-user-remove.svg';
 import { MentorshipRequest } from '../../types/models';
 import { useExpendableRichItems } from '../components/RichList/RichList';
 import { RichItemTagTheme } from '../components/RichList/ReachItemTypes';
 
-const Spinner = styled(Loader)`
-  position: absolute;
-  left: calc(50% - 10px);
-`;
-
 const UserWasRemoved = styled.div`
   display: grid;
   grid-template-columns: 21px auto;
@@ -144,7 +138,6 @@ export const UsersList = ({
 
   return (
     <>
-      {isLoading && <Spinner />}
       <RichList>
         {renderList({
           requests,

diff --git a/src/Me/Modals/MentorshipRequestModals/CancelModal.tsx b/src/Me/Modals/MentorshipRequestModals/CancelModal.tsx
@@ -38,6 +38,7 @@ const CancelModal = ({ username, onSave, onClose }: CanceledModalProps) => {
       title="Cancel mentorship request"
       onClose={onClose}
       isLoading={isLoading}
+      submitLabel="Cancel"
       onSave={() => {
         setIsLoading(true);
         onSave(reasonOption === '3' ? reason.current : REASONS[reasonOption]);

diff --git a/src/Me/Modals/MentorshipRequestModals/DeclineModal.tsx b/src/Me/Modals/MentorshipRequestModals/DeclineModal.tsx
@@ -2,15 +2,9 @@ import BodyStyle from './style';
 import { useRef, useState } from 'react';
 import { Modal } from '../Modal';
 import TextArea from '../../components/Textarea';
-import { Loader } from '../../../components/Loader';
 import styled from 'styled-components';
 import FormField from '../../components/FormField';
 
-const Spinner = styled(Loader)`
-  position: absolute;
-  top: 25%;
-`;
-
 const Body = styled(BodyStyle)`
   justify-content: flex-start;
   p {
@@ -33,13 +27,14 @@ const DeclineModal = ({ username, onSave, onClose }: DeclineModalProps) => {
       center
       title="Decline Mentorship"
       onClose={onClose}
+      isLoading={loadingState}
+      submitLabel="Decline"
       onSave={() => {
         setLoadingState(true);
         onSave(message.current);
       }}
     >
       <Body>
-        {loadingState && <Spinner />}
         <div>
           <p>
             You have declined <b>{username}</b> and that’s ok, now is not a good