update(app): update mutation usage to support refresh token

Author: vmc08

src/apollo/mutations/user.ts

@@ -1,9 +1,19 @@
 import { gql } from 'apollo-boost';
 
 export const CREATE_ACCESS_TOKEN = gql`
-  mutation CreateAccessToken ($input: CreateAccessTokenInput!) {
-    createAccessToken (input: $input) {
-      token
+  mutation ($input: CreateTokenInput!) {
+    createToken(input: $input) {
+      accessToken
+      refreshToken
+    }
+  }
+`;
+
+export const REFRESH_ACCESS_TOKEN = gql`
+  mutation ($refreshToken: String!) {
+    refreshToken(refreshToken: $refreshToken) {
+      accessToken
+      refreshToken
     }
   }
 `;
@@ -21,9 +31,10 @@ export const RESET_PASSWORD = gql`
 `;
 
 export const CREATE_ACCOUNT = gql`
-  mutation CreateAccount ($input: CreateAccountInput!, $affiliateId: String) {
-    createAccount (input: $input, affiliateId: $affiliateId) {
-      token
+  mutation ($input: CreateAccountInput!, $affiliateId: String, $code: String) {
+    createAccount (input: $input, affiliateId: $affiliateId, code: $code) {
+      refreshToken
+      accessToken
     }
   }
 `;

src/components/forms/user/LoginForm.tsx

@@ -7,7 +7,7 @@ import { Form as AntdForm, Icon, Button, Alert, message } from 'antd';
 
 import { LoginSchema } from './validations';
 import { AntInput } from '../../AntDesignFields';
-import { setAuthToken } from '../../../utils/userUtils';
+import { setAuthToken, setRefreshToken } from '../../../utils/userUtils';
 import { hasValidObjectValues } from '../../../utils/objectUtils';
 import { CREATE_ACCESS_TOKEN } from '../../../apollo/mutations/user';
 
@@ -26,7 +26,10 @@ interface ILoginFormState {
 
 interface ILoginMutationResponse {
   data: {
-    createAccessToken: { token: string },
+    createToken: {
+      accessToken: string,
+      refreshToken: string,
+    },
   }
 }
 
@@ -74,8 +77,9 @@ class LoginForm extends React.Component<RouteComponentProps, ILoginFormState> {
       },
     })
     .then(({ data }: ILoginMutationResponse) => {
-      const { token } = data.createAccessToken;
-      setAuthToken(token);
+      const { accessToken, refreshToken } = data.createToken;
+      setAuthToken(accessToken);
+      setRefreshToken(refreshToken);
       this.setState({ isLoading: false });
       message.success('Login success', 1);
       history.replace('/');

src/components/forms/user/RegistrationForm.tsx

@@ -8,7 +8,7 @@ import { Form as AntdForm, Icon, Button, Alert, Row, Col } from 'antd';
 import { SignupSchema } from './validations';
 import { AntInput } from '../../AntDesignFields';
 import { hasValidObjectValues } from '../../../utils/objectUtils';
-import { setAuthToken } from '../../../utils/userUtils';
+import { setAuthToken, setRefreshToken } from '../../../utils/userUtils';
 import { CREATE_ACCOUNT, SEND_ONBOARDING_CODE } from '../../../apollo/mutations/user';
 
 interface IRegistrationFormProps extends RouteComponentProps {
@@ -30,7 +30,10 @@ interface IRegistrationFormState {
 
 interface ICreateAccountResult {
   data: {
-    createAccount: { token: string },
+    createAccount: {
+      accessToken: string,
+      refreshToken: string,
+    },
   }
 }
 
@@ -68,11 +71,12 @@ class RegistrationForm extends React.Component<
     })
     .then(async ({ data }: ICreateAccountResult) => {
       const { createAccount } = data;
-      const { token: userToken } = createAccount;
-      setAuthToken(userToken);
+      const { accessToken, refreshToken } = createAccount;
+      setAuthToken(accessToken);
+      setRefreshToken(refreshToken);
       await client.mutate({
         mutation: SEND_ONBOARDING_CODE,
-        variables: { token: userToken },
+        variables: { token: accessToken },
       });
       this.setState({ isLoading: false });
       history.replace('/register/verify-email');

src/components/pages/reits/ReitsTableColumnFilters.tsx

@@ -42,7 +42,7 @@ export const reitsNameColumnFilter = (): Partial<ColumnProps<any>> => ({
         </Col>
         <Col span={12}>
           <Button
-            onClick={() => clearFilters && clearFilters([])}
+            onClick={() => clearFilters && clearFilters()}
             size="small"
             block
           >
@@ -134,7 +134,7 @@ export const rangeColumnFilter = (
                 </Col>
                 <Col span={12}>
                   <Button
-                    onClick={() => clearFilters && clearFilters([])}
+                    onClick={() => clearFilters && clearFilters()}
                     size="small"
                     block
                   >

src/components/pages/reits/components/CustomSets.tsx

@@ -136,7 +136,7 @@ const CustomSets = ({ filters, setFilters }: IChartFilters) => {
     customSetName: undefined,
   });
 
-  const { loading, error: serverError, data } = useQuery(CUSTOM_SETS, {
+  const { loading, data } = useQuery(CUSTOM_SETS, {
     variables: { token },
   });
 

src/utils/userUtils.ts

@@ -1,8 +1,12 @@
-export const setAuthToken = (token: string): void => localStorage.setItem('auth_token', token);
+export const setAuthToken = (token: string): void => localStorage.setItem('access_token', token);
 
-export const getAuthToken = (): string => localStorage.getItem('auth_token') || '';
+export const setRefreshToken = (refreshToken: string): void => {
+  return localStorage.setItem('refresh_token', refreshToken);
+};
+
+export const getAuthToken = (): string => localStorage.getItem('access_token') || '';
 
-export const deleteAuthToken = (): void => localStorage.removeItem('auth_token');
+export const deleteAuthToken = (): void => localStorage.removeItem('access_token');
 
 export const isLoggedIn = (): boolean => getAuthToken().length > 0;