Create Profile Hooks to fetch current user

front/src/hooks/AuthenticationHooks.ts

@@ -1,5 +1,7 @@
 import { useAuth0 } from '@auth0/auth0-react';
 import { useState, useEffect } from 'react';
+import jwt from 'jwt-decode';
+import { TokenPayload } from '../interfaces/TokenPayload.interface';
 
 const useIsNotLoggedIn = () => {
   const { isAuthenticated, isLoading } = useAuth0();
@@ -15,6 +17,17 @@ const redirectIfNotLoggedIn = () => {
   }
 };
 
+const useGetUserEmailFromToken = (): string | undefined => {
+  const token = localStorage.getItem('accessToken');
+
+  const payload: TokenPayload | undefined = token ? jwt(token) : undefined;
+  if (!payload) {
+    return;
+  }
+
+  return payload['https://hasura.io/jwt/claims']['x-hasura-user-email'];
+};
+
 const useGetAccessToken = () => {
   const [loading, setLoading] = useState(false);
   const [token, setToken] = useState('');
@@ -36,4 +49,9 @@ const useGetAccessToken = () => {
   return { loading, token };
 };
 
-export default { useIsNotLoggedIn, useGetAccessToken, redirectIfNotLoggedIn };
+export {
+  useIsNotLoggedIn,
+  useGetAccessToken,
+  redirectIfNotLoggedIn,
+  useGetUserEmailFromToken,
+};

front/src/hooks/__tests__/AuthenticationHooks.test.tsx

@@ -1,5 +1,8 @@
 import { renderHook } from '@testing-library/react';
-import AuthenticationHooks from '../AuthenticationHooks';
+import {
+  useIsNotLoggedIn,
+  useGetUserEmailFromToken,
+} from '../AuthenticationHooks';
 import { useAuth0 } from '@auth0/auth0-react';
 import { mocked } from 'jest-mock';
 
@@ -32,7 +35,6 @@ describe('useIsNotLoggedIn', () => {
       isLoading: true,
     });
 
-    const { useIsNotLoggedIn } = AuthenticationHooks;
     const { result } = renderHook(() => useIsNotLoggedIn());
     const isNotLoggedIn = result.current;
 
@@ -53,7 +55,6 @@ describe('useIsNotLoggedIn', () => {
       isLoading: false,
     });
 
-    const { useIsNotLoggedIn } = AuthenticationHooks;
     const { result } = renderHook(() => useIsNotLoggedIn());
     const isNotLoggedIn = result.current;
 
@@ -75,7 +76,6 @@ describe('useIsNotLoggedIn', () => {
     });
 
     window.localStorage.setItem('accessToken', 'token');
-    const { useIsNotLoggedIn } = AuthenticationHooks;
     const { result } = renderHook(() => useIsNotLoggedIn());
     const isNotLoggedIn = result.current;
 
@@ -97,10 +97,33 @@ describe('useIsNotLoggedIn', () => {
     });
 
     window.localStorage.setItem('accessToken', 'token');
-    const { useIsNotLoggedIn } = AuthenticationHooks;
     const { result } = renderHook(() => useIsNotLoggedIn());
     const isNotLoggedIn = result.current;
 
     expect(isNotLoggedIn).toBe(false);
   });
 });
+
+describe('useGetUserEmailFromToken', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    jest.resetModules();
+  });
+
+  it('returns undefined if token is not there', () => {
+    const { result } = renderHook(() => useGetUserEmailFromToken());
+    const email = result.current;
+
+    expect(email).toBe(undefined);
+  });
+
+  it('returns email if token is there', () => {
+    window.localStorage.setItem(
+      'accessToken',
+      'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Im1FQXZiR0dFNjJ4S25mTFNxNHQ0dCJ9.eyJodHRwczovL2hhc3VyYS5pby9qd3QvY2xhaW1zIjp7IngtaGFzdXJhLWFsbG93ZWQtcm9sZXMiOlsidXNlciJdLCJ4LWhhc3VyYS1kZWZhdWx0LXJvbGUiOiJ1c2VyIiwieC1oYXN1cmEtdXNlci1lbWFpbCI6ImNoYXJsZXNAb3VpaGVscC50d2VudHkuY29tIiwieC1oYXN1cmEtdXNlci1pZCI6Imdvb2dsZS1vYXV0aDJ8MTE4MjM1ODk3NDQ2OTIwNTQ3NzMzIn0sImlzcyI6Imh0dHBzOi8vdHdlbnR5LWRldi5ldS5hdXRoMC5jb20vIiwic3ViIjoiZ29vZ2xlLW9hdXRoMnwxMTgyMzU4OTc0NDY5MjA1NDc3MzMiLCJhdWQiOlsiaGFzdXJhLWRldiIsImh0dHBzOi8vdHdlbnR5LWRldi5ldS5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNjc1MzYyNzY0LCJleHAiOjE2NzU0NDkxNjQsImF6cCI6IlM2ZXoyUFdUdUFsRncydjdxTFBWb2hmVXRseHc4QlBhIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCJ9.DseeSqYzNlYVQfuicoK8fK1Z6b-TYNvCkRoXXYOhg1X3HDSejowUTudyrJGErkT65xMCfx8K5quof9eV8BZQixCPr670r5gAIHxHuGY_KNfHTOALe8E5VyQaoekRyDr99Qo3QxliOOlJxtmckA8FTeD6JanfVmcrqghUOIsSXXDOOzJV6eME7JErEjTQHpfxveSVbPlCmIqZ3fqDaFdKfAlUDZFhVQM8XbfubNmG4VcoMyB7H47yLdGkYvVfPO1lVg0efywQo4IfbtiqFv5CjOEqO6PG78Wfkd24bcilkf6ZuGXsA-w-0xlU089GhKF99lNI1PxvNWAaLFbqanxiEw',
+    );
+    const { result } = renderHook(() => useGetUserEmailFromToken());
+
+    expect(result.current).toBe('charles@ouihelp.twenty.com');
+  });
+});

front/src/hooks/profile/__tests__/useGetProfile.test.tsx

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react';
+import { useQuery, QueryResult } from '@apollo/client';
+import { useGetProfile } from '../useGetProfile';
+
+jest.mock('@apollo/client', () => ({
+  useQuery: jest.fn(),
+}));
+
+describe('useGetUserEmailFromToken', () => {
+  beforeEach(() => {
+    const result: Partial<QueryResult<any>> = {
+      data: { users: [{ email: 'test@twenty.com' }] },
+      loading: false,
+      error: undefined,
+    };
+    (useQuery as jest.Mock).mockImplementation(() => result as QueryResult);
+  });
+
+  it('returns profile', () => {
+    const { result } = renderHook(() => useGetProfile());
+    const email = result.current.user?.email;
+    expect(email).toEqual(result.current.user?.email);
+    expect(useQuery).toHaveBeenCalledTimes(1);
+  });
+});

front/src/hooks/profile/useGetProfile.tsx

@@ -0,0 +1,33 @@
+import { ApolloError, useQuery } from '@apollo/client';
+import { gql } from 'graphql-tag';
+import { User } from '../../interfaces/user.interface';
+import { useGetUserEmailFromToken } from '../AuthenticationHooks';
+
+const GET_USER_PROFILE = gql`
+  query GetUserProfile($email: String!) {
+    users(where: { email: { _eq: $email } }, limit: 1) {
+      id
+      email
+      first_name
+      last_name
+      tenant {
+        id
+        name
+      }
+    }
+  }
+`;
+
+type ProfileResult = {
+  loading: boolean;
+  error?: ApolloError;
+  user?: User;
+};
+
+export const useGetProfile = (): ProfileResult => {
+  const email = useGetUserEmailFromToken();
+  const { loading, error, data } = useQuery(GET_USER_PROFILE, {
+    variables: { email },
+  });
+  return { loading, error, user: data?.users[0] };
+};