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/modules/apollo/hooks/useApolloFactory.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 import { useRecoilState } from 'recoil';
 
@@ -38,6 +38,8 @@ export function useApolloFactory() {
           fetchPolicy: 'cache-first',
         },
       },
+      // We don't want to re-create the client on token change or it will cause infinite loop
+      initialTokenPair: tokenPair,
       onTokenPairChange(tokenPair) {
         setTokenPair(tokenPair);
       },
@@ -46,11 +48,17 @@ export function useApolloFactory() {
       },
       extraLinks: [],
       isDebugMode,
-      tokenPair,
     });
 
     return apolloRef.current.getClient();
-  }, [setTokenPair, isDebugMode, tokenPair]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setTokenPair, isDebugMode]);
+
+  useEffect(() => {
+    if (apolloRef.current) {
+      apolloRef.current.updateTokenPair(tokenPair);
+    }
+  }, [tokenPair]);
 
   return apolloClient;
 }

front/src/modules/apollo/services/apollo.factory.ts

@@ -28,9 +28,9 @@ export interface Options<TCacheShape> extends ApolloClientOptions<TCacheShape> {
   onNetworkError?: (err: Error | ServerParseError | ServerError) => void;
   onTokenPairChange?: (tokenPair: AuthTokenPair) => void;
   onUnauthenticatedError?: () => void;
+  initialTokenPair: AuthTokenPair | null;
   extraLinks?: ApolloLink[];
   isDebugMode?: boolean;
-  tokenPair: AuthTokenPair | null;
 }
 
 export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
@@ -44,13 +44,13 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
       onNetworkError,
       onTokenPairChange,
       onUnauthenticatedError,
+      initialTokenPair,
       extraLinks,
       isDebugMode,
-      tokenPair,
       ...options
     } = opts;
 
-    this.tokenPair = tokenPair;
+    this.tokenPair = initialTokenPair;
 
     const buildApolloLink = (): ApolloLink => {
       const httpLink = createUploadLink({

front/src/modules/ui/components/buttons/Button.tsx

@@ -15,14 +15,14 @@ type Size = 'medium' | 'small';
 
 type Props = {
   icon?: React.ReactNode;
-  title: string;
+  title?: string;
   fullWidth?: boolean;
   variant?: Variant;
   size?: Size;
 } & React.ComponentProps<'button'>;
 
 const StyledButton = styled.button<
-  Pick<Props, 'fullWidth' | 'variant' | 'size'>
+  Pick<Props, 'fullWidth' | 'variant' | 'size' | 'title'>
 >`
   align-items: center;
   background: ${({ theme, variant, disabled }) => {
@@ -33,8 +33,10 @@ const StyledButton = styled.button<
         } else {
           return theme.color.blue;
         }
-      default:
+      case 'secondary':
         return theme.background.primary;
+      default:
+        return 'transparent';
     }
   }};
   border: ${({ theme, variant }) => {
@@ -93,7 +95,13 @@ const StyledButton = styled.button<
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   justify-content: flex-start;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme, title }) => {
+    if (!title) {
+      return `${theme.spacing(1)}`;
+    }
+
+    return `${theme.spacing(2)} ${theme.spacing(3)}`;
+  }};
 
   transition: background 0.1s ease;
 
@@ -143,6 +151,7 @@ export function Button({
       fullWidth={fullWidth}
       variant={variant}
       size={size}
+      title={title}
       {...props}
     >
       {icon}

front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts

@@ -6,5 +6,6 @@ export function getImageAbsoluteURIOrBase64(imageUrl?: string | null) {
   if (imageUrl?.startsWith('data:')) {
     return imageUrl;
   }
+
   return `${process.env.REACT_APP_FILES_URL}/${imageUrl}`;
 }

front/src/modules/workspace/components/WorkspaceMemberCard.tsx

@@ -12,21 +12,15 @@ const StyledContainer = styled.div`
   flex-direction: row;
   margin-bottom: ${({ theme }) => theme.spacing(0)};
   margin-top: ${({ theme }) => theme.spacing(4)};
+  padding: ${({ theme }) => theme.spacing(3)};
 `;
 
-const AvatarContainer = styled.div`
-  margin: ${({ theme }) => theme.spacing(3)};
-`;
-
-const TextContainer = styled.div`
+const Content = styled.div`
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: center;
-`;
-
-const NameAndEmailContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  margin-left: ${({ theme }) => theme.spacing(3)};
 `;
 
 const NameText = styled.span`
@@ -41,29 +35,26 @@ type OwnProps = {
   workspaceMember: {
     user: Pick<User, 'firstName' | 'lastName' | 'avatarUrl' | 'email'>;
   };
+  accessory?: React.ReactNode;
 };
 
-export function WorkspaceMemberCard({ workspaceMember }: OwnProps) {
+export function WorkspaceMemberCard({ workspaceMember, accessory }: OwnProps) {
   return (
     <StyledContainer>
-      <AvatarContainer>
-        <Avatar
-          avatarUrl={getImageAbsoluteURIOrBase64(
-            workspaceMember.user.avatarUrl,
-          )}
-          placeholder={workspaceMember.user.firstName || ''}
-          type="squared"
-          size={40}
-        />
-      </AvatarContainer>
-      <TextContainer>
-        <NameAndEmailContainer>
-          <NameText>
-            {workspaceMember.user.firstName} {workspaceMember.user.lastName}{' '}
-          </NameText>
-          <EmailText>{workspaceMember.user.email}</EmailText>
-        </NameAndEmailContainer>
-      </TextContainer>
+      <Avatar
+        avatarUrl={getImageAbsoluteURIOrBase64(workspaceMember.user.avatarUrl)}
+        placeholder={workspaceMember.user.firstName || ''}
+        type="squared"
+        size={40}
+      />
+      <Content>
+        <NameText>
+          {workspaceMember.user.firstName} {workspaceMember.user.lastName}{' '}
+        </NameText>
+        <EmailText>{workspaceMember.user.email}</EmailText>
+      </Content>
+
+      {accessory}
     </StyledContainer>
   );
 }

front/src/modules/workspace/queries/select.ts

@@ -1,18 +1,15 @@
 import { gql } from '@apollo/client';
 
-export const GET_CURRENT_WORKSPACE = gql`
-  query GetCurrentWorkspace {
-    currentWorkspace {
+export const GET_WORKSPACE_MEMBERS = gql`
+  query GetWorkspaceMembers {
+    workspaceMembers: findManyWorkspaceMember {
       id
-      workspaceMember {
+      user {
         id
-        user {
-          id
-          email
-          avatarUrl
-          firstName
-          lastName
-        }
+        email
+        avatarUrl
+        firstName
+        lastName
       }
     }
   }

front/src/modules/workspace/queries/update.ts

@@ -24,3 +24,11 @@ export const REMOVE_WORKSPACE_LOGO = gql`
     }
   }
 `;
+
+export const REMOVE_WORKSPACE_MEMBER = gql`
+  mutation RemoveWorkspaceMember($where: WorkspaceMemberWhereUniqueInput!) {
+    deleteWorkspaceMember(where: $where) {
+      id
+    }
+  }
+`;