Workspace member (#552)

* fix: clean small back-end issues

* fix: apollo factory causing infinite loop on token renew

* feat: small refactor and add ability to remove workspace member

* fix: test

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -1,10 +1,17 @@
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
+import { currentUserState } from '@/auth/states/currentUserState';
+import { Button } from '@/ui/components/buttons/Button';
 import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { IconTrash } from '@/ui/icons';
 import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
 import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard';
-import { useGetCurrentWorkspaceQuery } from '~/generated/graphql';
+import {
+  useGetWorkspaceMembersQuery,
+  useRemoveWorkspaceMemberMutation,
+} from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -16,8 +23,52 @@ const StyledContainer = styled.div`
   }
 `;
 
+const ButtonContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  margin-left: ${({ theme }) => theme.spacing(3)};
+`;
+
 export function SettingsWorkspaceMembers() {
-  const { data } = useGetCurrentWorkspaceQuery();
+  const [currentUser] = useRecoilState(currentUserState);
+
+  const { data } = useGetWorkspaceMembersQuery();
+
+  const [removeWorkspaceMember] = useRemoveWorkspaceMemberMutation();
+
+  const handleRemoveWorkspaceMember = async (userId: string) => {
+    await removeWorkspaceMember({
+      variables: {
+        where: {
+          userId,
+        },
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteWorkspaceMember: {
+          __typename: 'WorkspaceMember',
+          id: userId,
+        },
+      },
+      update: (cache, { data: responseData }) => {
+        if (!responseData) {
+          return;
+        }
+
+        const normalizedId = cache.identify({
+          id: responseData.deleteWorkspaceMember.id,
+          __typename: 'WorkspaceMember',
+        });
+
+        // Evict object from cache
+        cache.evict({ id: normalizedId });
+
+        // Clean up relation to this object
+        cache.gc();
+      },
+    });
+  };
 
   return (
     <NoTopBarContainer>
@@ -27,10 +78,22 @@ export function SettingsWorkspaceMembers() {
           title="Members"
           description="Manage the members of your space here"
         />
-        {data?.currentWorkspace?.workspaceMember?.map((member) => (
+        {data?.workspaceMembers?.map((member) => (
           <WorkspaceMemberCard
             key={member.user.id}
             workspaceMember={{ user: member.user }}
+            accessory={
+              currentUser?.id !== member.user.id && (
+                <ButtonContainer>
+                  <Button
+                    onClick={() => handleRemoveWorkspaceMember(member.user.id)}
+                    variant="tertiary"
+                    size="small"
+                    icon={<IconTrash size={16} />}
+                  />
+                </ButtonContainer>
+              )
+            }
           />
         ))}
       </StyledContainer>