Quick Updates

* Caches Group Member Search Results
* Manually update cache for Group Member _updates_
* Couple of SquareAvatar missing props

components/GroupMember/GroupMember.js

@@ -9,19 +9,29 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useApolloClient } from '@apollo/client';
 
 import { useModalDispatch, showModal } from 'providers/ModalProvider';
 import { Box, Button, GroupMemberStatusBadge, SquareAvatar } from 'ui-kit';
 import { isEmpty } from 'lodash';
 
 const GroupMember = ({ id, person, role, status }) => {
   const modalDispatch = useModalDispatch();
+  const client = useApolloClient();
   const handlePressView = groupMemberId => {
     if (isEmpty(id)) return;
 
     modalDispatch(
       showModal('GroupMemberDetails', {
         id: groupMemberId,
+        onSave: ({ status, inactiveStatusReason }) => {
+          client.cache.modify({
+            id: cache.identify({ id }),
+            fields(fieldValue, details) {
+              return details.INVALIDATE;
+            },
+          });
+        },
       })
     );
   };
@@ -44,7 +54,7 @@ const GroupMember = ({ id, person, role, status }) => {
             src={profileImageUrl}
             height="65px"
             width="56px"
-            name={fullName}
+            name={fullName || 'Group Member'}
           />
           {role?.toUpperCase() === 'LEADER' && (
             <Box

components/GroupMemberDetails/GroupMemberDetails.js

@@ -42,7 +42,7 @@ const GroupMemberDetails = ({
   groupMemberStatuses,
   inactiveStatusReasons,
   onCancel,
-  onSave,
+  onSave: callback,
 }) => {
   const [status, setStatus] = useState(initialStatus?.id);
   const [inactiveStatusReason, setInactiveStatusReason] = useState(
@@ -66,14 +66,24 @@ const GroupMemberDetails = ({
       .join('\n');
   };
 
+  const onSave = () => {
+    callback({ groupMemberId: id, note, status, inactiveStatusReason });
+  };
+
   return (
     <Box display="flex" flexDirection="column">
       <Box as="h1" mb="l">
         Edit Group Member
       </Box>
 
       <Box display="flex" flexDirection="row" alignItems="center" mb="s">
-        <SquareAvatar src={profileImageUrl} height="80px" width="70px" mr="s" />
+        <SquareAvatar
+          src={profileImageUrl}
+          name={fullName || 'Group Member'}
+          height="80px"
+          width="70px"
+          mr="s"
+        />
         <Box as="h3" m="0">
           {fullName}
         </Box>
@@ -160,13 +170,7 @@ const GroupMemberDetails = ({
         <Button mx="s" variant="secondary" borderWidth="0" onClick={onCancel}>
           Cancel
         </Button>
-        <Button
-          onClick={() => {
-            onSave({ groupMemberId: id, note, status, inactiveStatusReason });
-          }}
-        >
-          Save
-        </Button>
+        <Button onClick={onSave}>Save</Button>
       </Box>
     </Box>
   );

components/Modals/AddGroupMemberModal/AddGroupMemberModal.js

@@ -65,8 +65,6 @@ const AddGroupMemberModal = ({ groupId }) => {
 
   const handleAddGroupMember = async () => {
     try {
-      console.log(values);
-
       await addGroupMember({
         variables: {
           groupId,

components/Modals/GroupMemberDetailsModal/GroupMemberDetailsModal.js

@@ -9,22 +9,28 @@
 
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
+import { useApolloClient } from '@apollo/client';
 
 import { hideModal, useModalDispatch } from 'providers/ModalProvider';
-import { useGroupMember, useGroupMemberStatuses } from 'hooks';
+import {
+  useEditGroupMember,
+  useGroupMember,
+  useGroupMemberStatuses,
+} from 'hooks';
 import { GroupMemberDetails } from 'components';
 import { Box, Modal, Loader } from 'ui-kit';
 
-const GroupMemberDetailsModal = ({ id }) => {
-  const router = useRouter();
+const GroupMemberDetailsModal = ({ id, onSave: callback }) => {
+  const client = useApolloClient();
   const modalDispatch = useModalDispatch();
   const { groupMemberStatuses, inactiveStatusReasons } =
     useGroupMemberStatuses();
-  const [{ groupMember, loading }, [updateStatus], [updateNote]] =
-    useGroupMember({ variables: { id } });
+  const [[updateStatus], [updateNote]] = useEditGroupMember();
+  const { groupMember, loading } = useGroupMember({ variables: { id } });
   const [isLoading, setIsLoading] = useState(loading);
 
+  const { cache } = client;
+
   const onCancel = () => {
     modalDispatch(hideModal());
   };
@@ -53,17 +59,23 @@ const GroupMemberDetailsModal = ({ id }) => {
       }),
     ]);
 
-    if (window?.location?.pathname) {
-      router.reload(window?.location?.pathname);
-    }
+    cache.modify({
+      id: cache.identify({ __typename: 'GroupMemberSearchResult', id }),
+      fields: {
+        status() {
+          const newStatus = groupMemberStatuses.find(({ id }) => id === status);
+          return newStatus.label;
+        },
+      },
+    });
+
+    onCancel();
   };
 
   useEffect(() => {
     setIsLoading(loading);
   }, [loading]);
 
-  console.log(groupMember);
-
   return (
     <Modal>
       {isLoading ? (
@@ -85,7 +97,10 @@ const GroupMemberDetailsModal = ({ id }) => {
 
 GroupMemberDetailsModal.propTypes = {
   id: PropTypes.string.isRequired,
+  onSave: PropTypes.func,
+};
+GroupMemberDetailsModal.defaultProps = {
+  onSave: () => null,
 };
-GroupMemberDetailsModal.defaultProps = {};
 
 export default GroupMemberDetailsModal;

hooks/index.js

@@ -15,6 +15,7 @@ import useCurrentUserRoleForChatChannel from './useCurrentUserRoleForChatChannel
 import useDiscoverFilterCategories from './useDiscoverFilterCategories';
 import useDiscoverFilterCategoriesPreview from './useDiscoverFilterCategoriesPreview';
 import useDiscoverFilters from './useDiscoverFilters';
+import useEditGroupMember from './useEditGroupMember';
 import useEvent from './useEvent';
 import useEvents from './useEvents';
 import useEventsFeedFeatures from './useEventsFeedFeatures';
@@ -77,6 +78,7 @@ export {
   useDiscoverFilterCategories,
   useDiscoverFilterCategoriesPreview,
   useDiscoverFilters,
+  useEditGroupMember,
   useEvent,
   useEvents,
   useEventsFeedFeatures,

hooks/useEditGroupMember.js

@@ -0,0 +1,43 @@
+/**
+ * useGroupMember.js
+ *
+ * Author: Caleb Panza
+ * Created: Sep 20, 2021
+ *
+ * Hook for updating a Group Member. Returns an array [updateStatus, updateNote] in order to better differentiate the different loading states for each specific mutation.
+ */
+
+import { gql, useMutation } from '@apollo/client';
+
+export const UPDATE_GROUP_MEMBER_STATUS = gql`
+  mutation updateGroupMemberStatus(
+    $groupMemberId: ID!
+    $groupMemberStatusId: ID!
+    $inactiveStatusReasonId: ID
+  ) {
+    updateGroupMemberStatus(
+      groupMemberId: $groupMemberId
+      groupMemberStatusId: $groupMemberStatusId
+      inactiveStatusReasonId: $inactiveStatusReasonId
+    ) {
+      id
+    }
+  }
+`;
+
+export const UPDATE_GROUP_MEMBER_NOTE = gql`
+  mutation updateGroupMemberNote($groupMemberId: ID!, $note: String) {
+    updateGroupMemberNote(groupMemberId: $groupMemberId, text: $note) {
+      id
+    }
+  }
+`;
+
+function useGroupMember(options = {}) {
+  const updateStatus = useMutation(UPDATE_GROUP_MEMBER_STATUS, options);
+  const updateNote = useMutation(UPDATE_GROUP_MEMBER_NOTE, options);
+
+  return [updateStatus, updateNote];
+}
+
+export default useGroupMember;

hooks/useGroupMember.js

@@ -4,10 +4,10 @@
  * Author: Caleb Panza
  * Created: Sep 10, 2021
  *
- * Hook for querying and updating a Group Member. Returns an array [query, updateStatus, updateNote] in order to better differentiate the different loading states for each specific use case.
+ * Hook for querying and updating a Group Member.
  */
 
-import { gql, useQuery, useMutation } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 
 export const GET_GROUP_MEMBER = gql`
   query getGroupMember($id: ID!) {
@@ -43,45 +43,13 @@ export const GET_GROUP_MEMBER = gql`
   }
 `;
 
-export const UPDATE_GROUP_MEMBER_STATUS = gql`
-  mutation updateGroupMemberStatus(
-    $groupMemberId: ID!
-    $groupMemberStatusId: ID!
-    $inactiveStatusReasonId: ID
-  ) {
-    updateGroupMemberStatus(
-      groupMemberId: $groupMemberId
-      groupMemberStatusId: $groupMemberStatusId
-      inactiveStatusReasonId: $inactiveStatusReasonId
-    ) {
-      id
-    }
-  }
-`;
-
-export const UPDATE_GROUP_MEMBER_NOTE = gql`
-  mutation updateGroupMemberNote($groupMemberId: ID!, $note: String) {
-    updateGroupMemberNote(groupMemberId: $groupMemberId, text: $note) {
-      id
-    }
-  }
-`;
-
 function useGroupMember(options = {}) {
   const query = useQuery(GET_GROUP_MEMBER, {
     fetchPolicy: 'cache-and-network',
     ...options,
   });
 
-  const updateStatus = useMutation(UPDATE_GROUP_MEMBER_STATUS);
-  const updateNote = useMutation(UPDATE_GROUP_MEMBER_NOTE);
-
-  // todo : is there a better way to handle this return object?
-  return [
-    { ...query, groupMember: query?.data?.node },
-    updateStatus,
-    updateNote,
-  ];
+  return { ...query, groupMember: query?.data?.node };
 }
 
 export default useGroupMember;

hooks/useSearchGroupMembers.js

@@ -23,6 +23,10 @@ export const SEARCH_GROUP_MEMBERS = gql`
         lastName
         status
         role
+        relatedNode {
+          __typename
+          id
+        }
       }
     }
   }
@@ -42,7 +46,7 @@ function useSearchGroupMembers(options = {}) {
     fetchPolicy: 'network-only',
   });
   const [searchGroupMembers, query] = useLazyQuery(SEARCH_GROUP_MEMBERS, {
-    fetchPolicy: 'no-cache',
+    fetchPolicy: 'cache-and-network',
     ...options,
   });
 

ui-kit/GroupCard/GroupCard.js

@@ -157,6 +157,7 @@ const GroupCard = (props = {}) => {
                   height="100%"
                   name="Group Member"
                   src={n.node?.photo?.uri}
+                  name="Group Member"
                 />
                 {avatarsDiff > 0 && props.avatars.length === i + 1 && (
                   <Styled.AvatarCount>{`+${avatarsDiff}`}</Styled.AvatarCount>

ui-kit/SquareAvatar/SquareAvatar.stories.js

@@ -12,5 +12,6 @@ export const Default = () => (
     src="https://source.unsplash.com/random/200x200"
     height="100px"
     width="100px"
+    name="Square Avatar"
   />
 );