feat: onboarding & profile edition (#507)

* feat: wip onboarding

* fix: generate graphql front

* wip: onboarding

* feat: login/register and edit profile

* fix: unused import

* fix: test

* Use DEBUG_MODE instead of STAGE and mute typescript depth exceed errors

* Fix seeds

* Fix onboarding when coming from google

* Fix

* Fix lint

* Fix ci

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -1,9 +1,16 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
+import {
+  ApolloLink,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from '@apollo/client';
 import { useRecoilState } from 'recoil';
 
+import { isMockModeState } from '@/auth/states/isMockModeState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { CommentThreadTarget } from '~/generated/graphql';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { mockedUsersData } from '~/testing/mock-data/users';
 
 import { ApolloFactory } from '../services/apollo.factory';
 
@@ -11,8 +18,22 @@ export function useApolloFactory() {
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
 
   const [tokenPair, setTokenPair] = useRecoilState(tokenPairState);
+  const [isMockMode] = useRecoilState(isMockModeState);
 
   const apolloClient = useMemo(() => {
+    const mockLink = new ApolloLink((operation, forward) => {
+      return forward(operation).map((response) => {
+        if (operation.operationName === 'GetCompanies') {
+          return { data: { companies: mockedCompaniesData } };
+        }
+        if (operation.operationName === 'GetCurrentUser') {
+          return { data: { currentUser: mockedUsersData[0] } };
+        }
+
+        return response;
+      });
+    });
+
     apolloRef.current = new ApolloFactory({
       uri: `${process.env.REACT_APP_API_URL}`,
       cache: new InMemoryCache({
@@ -42,10 +63,11 @@ export function useApolloFactory() {
       onUnauthenticatedError() {
         setTokenPair(null);
       },
+      extraLinks: isMockMode ? [mockLink] : [],
     });
 
     return apolloRef.current.getClient();
-  }, [setTokenPair]);
+  }, [isMockMode, setTokenPair]);
 
   useEffect(() => {
     if (apolloRef.current) {

front/src/modules/apollo/hooks/useApolloMocked.ts

@@ -1,44 +0,0 @@
-import { useMemo } from 'react';
-import {
-  ApolloClient,
-  ApolloLink,
-  createHttpLink,
-  from,
-  InMemoryCache,
-} from '@apollo/client';
-
-import { mockedCompaniesData } from '~/testing/mock-data/companies';
-import { mockedUsersData } from '~/testing/mock-data/users';
-
-export default function useApolloMocked() {
-  const mockedClient = useMemo(() => {
-    const apiLink = createHttpLink({
-      uri: `${process.env.REACT_APP_API_URL}`,
-    });
-
-    const mockLink = new ApolloLink((operation, forward) => {
-      return forward(operation).map((response) => {
-        if (operation.operationName === 'GetCompanies') {
-          return { data: { companies: mockedCompaniesData } };
-        }
-        if (operation.operationName === 'GetCurrentUser') {
-          return { data: { users: [mockedUsersData[0]] } };
-        }
-
-        return response;
-      });
-    });
-
-    return new ApolloClient({
-      link: from([mockLink, apiLink]),
-      cache: new InMemoryCache(),
-      defaultOptions: {
-        query: {
-          fetchPolicy: 'cache-first',
-        },
-      },
-    });
-  }, []);
-
-  return mockedClient;
-}

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

@@ -11,31 +11,24 @@ import { GraphQLErrors } from '@apollo/client/errors';
 import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
-import { Observable } from '@apollo/client/utilities';
 
 import { renewToken } from '@/auth/services/AuthService';
 import { AuthTokenPair } from '~/generated/graphql';
 
 import { loggerLink } from '../../utils/apollo-logger';
 import { assertNotNull } from '../../utils/assert';
-import { promiseToObservable } from '../../utils/promise-to-observable';
 import { ApolloManager } from '../interfaces/apolloManager.interface';
 
 const logger = loggerLink(() => 'Twenty');
 
 let isRefreshing = false;
-let pendingRequests: (() => void)[] = [];
-
-const resolvePendingRequests = () => {
-  pendingRequests.map((callback) => callback());
-  pendingRequests = [];
-};
 
 export interface Options<TCacheShape> extends ApolloClientOptions<TCacheShape> {
   onError?: (err: GraphQLErrors | undefined) => void;
   onNetworkError?: (err: Error | ServerParseError | ServerError) => void;
   onTokenPairChange?: (tokenPair: AuthTokenPair) => void;
   onUnauthenticatedError?: () => void;
+  extraLinks?: ApolloLink[];
 }
 
 export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
@@ -49,6 +42,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
       onNetworkError,
       onTokenPairChange,
       onUnauthenticatedError,
+      extraLinks,
       ...options
     } = opts;
 
@@ -86,38 +80,22 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
             for (const graphQLError of graphQLErrors) {
               switch (graphQLError?.extensions?.code) {
                 case 'UNAUTHENTICATED': {
-                  // error code is set to UNAUTHENTICATED
-                  // when AuthenticationError thrown in resolver
-                  let forward$: Observable<boolean>;
-
                   if (!isRefreshing) {
                     isRefreshing = true;
-                    forward$ = promiseToObservable(
-                      renewToken(uri, this.tokenPair)
-                        .then((tokens) => {
-                          onTokenPairChange?.(tokens);
-                          resolvePendingRequests();
-                          return true;
-                        })
-                        .catch(() => {
-                          pendingRequests = [];
-                          onUnauthenticatedError?.();
-                          return false;
-                        })
-                        .finally(() => {
-                          isRefreshing = false;
-                        }),
-                    ).filter((value) => Boolean(value));
-                  } else {
-                    // Will only emit once the Promise is resolved
-                    forward$ = promiseToObservable(
-                      new Promise<boolean>((resolve) => {
-                        pendingRequests.push(() => resolve(true));
-                      }),
-                    );
+                    renewToken(uri, this.tokenPair)
+                      .then((tokens) => {
+                        onTokenPairChange?.(tokens);
+                        return true;
+                      })
+                      .catch(() => {
+                        onUnauthenticatedError?.();
+                        return false;
+                      })
+                      .finally(() => {
+                        isRefreshing = false;
+                      });
                   }
-
-                  return forward$.flatMap(() => forward(operation));
+                  return forward(operation);
                 }
                 default:
                   if (process.env.NODE_ENV === 'development') {
@@ -148,6 +126,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
         [
           errorLink,
           authLink,
+          ...(extraLinks ? extraLinks : []),
           // Only show logger in dev mode
           process.env.NODE_ENV !== 'production' ? logger : null,
           retryLink,