From 906a8d064416abd55a49180f51eb5a29351bf233 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 9 Mar 2022 20:58:51 +0100
Subject: [PATCH] fix: stop flickering due to late initiated token

---
 packages/web/src/components/ApolloProvider/index.tsx | 11 +++++++----
 packages/web/src/components/LoginForm/index.tsx      |  1 +
 packages/web/src/graphql/client.ts                   |  2 +-
 packages/web/src/graphql/link.ts                     |  2 ++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/ApolloProvider/index.tsx b/packages/web/src/components/ApolloProvider/index.tsx
index 5be9549a..dced28f4 100644
--- a/packages/web/src/components/ApolloProvider/index.tsx
+++ b/packages/web/src/components/ApolloProvider/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ApolloProvider as BaseApolloProvider } from '@apollo/client';
 import { useSnackbar } from 'notistack';
 
-import client, { setLink } from 'graphql/client';
+import { mutateAndGetClient } from 'graphql/client';
 import useAuthentication from 'hooks/useAuthentication';
 
 type ApolloProviderProps = {
@@ -17,9 +17,12 @@ const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
     enqueueSnackbar(message, { variant: 'error' });
   }, [enqueueSnackbar]);
 
-  React.useEffect(() => {
-    setLink({ onError, token: authentication.token })
-  },  [onError, authentication]);
+  const client = React.useMemo(() => {
+    return mutateAndGetClient({
+      onError,
+      token: authentication.token,
+    });
+  }, [onError, authentication]);
 
   return (
     <BaseApolloProvider client={client} {...props} />
diff --git a/packages/web/src/components/LoginForm/index.tsx b/packages/web/src/components/LoginForm/index.tsx
index 2ed8189f..c6286e4f 100644
--- a/packages/web/src/components/LoginForm/index.tsx
+++ b/packages/web/src/components/LoginForm/index.tsx
@@ -30,6 +30,7 @@ function renderFields(props: { loading: boolean }) {
           required
           fullWidth
           margin="dense"
+          autoComplete="username"
         />
 
         <TextField
diff --git a/packages/web/src/graphql/client.ts b/packages/web/src/graphql/client.ts
index e321c9ba..920c8358 100644
--- a/packages/web/src/graphql/client.ts
+++ b/packages/web/src/graphql/client.ts
@@ -13,7 +13,7 @@ const client = new ApolloClient({
   link: createLink({ uri: appConfig.graphqlUrl })
 });
 
-export function setLink(options: CreateClientOptions): typeof client {
+export function mutateAndGetClient(options: CreateClientOptions): typeof client {
   const { onError, token } = options;
   const link = createLink({ uri: appConfig.graphqlUrl, token, onError });
 
diff --git a/packages/web/src/graphql/link.ts b/packages/web/src/graphql/link.ts
index 42a4e5c7..f6874367 100644
--- a/packages/web/src/graphql/link.ts
+++ b/packages/web/src/graphql/link.ts
@@ -2,6 +2,7 @@ import { HttpLink, from } from '@apollo/client';
 import type { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 
+import { setItem } from 'helpers/storage';
 import * as URLS from 'config/urls';
 
 type CreateLinkOptions = {
@@ -29,6 +30,7 @@ const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink =>
       );
 
       if (message === NOT_AUTHORISED) {
+        setItem('token', '');
         window.location.href = URLS.LOGIN;
       }
     });