[PR]: Add spontaneous assessment result

phone-test/.env.e2e

@@ -0,0 +1,4 @@
+#CYPRESS
+APP_BASE_URL="http://localhost:3000"
+AUTH_TOKEN_KEY="access_token"
+REFRESH_TOKEN_KEY="refresh_token"

phone-test/cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "cypress";
+import dotenv from 'dotenv';
+
+const env_e2e = dotenv.config({ path: '.env.e2e' }).parsed;
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      config.env = {
+        ...config.env,
+        ...env_e2e,
+    };
+
+    return config;
+    },
+  },
+});

phone-test/cypress/e2e/Login.cy.ts

@@ -0,0 +1,25 @@
+import 'cypress-wait-until';
+import fixtures from '../fixtures/example.json';
+
+describe('Login page', () => {
+    it('should visit the Login page', () => {
+        cy.visit(`${Cypress.env('APP_BASE_URL')}/login`);
+    });
+
+    it('should perform login and navigate to calls page', () => {
+
+        const { login } = fixtures;
+
+        cy.visit(`${Cypress.env('APP_BASE_URL')}/login`);
+
+        cy.get('[data-cy="email"]').should('exist');
+        cy.get('[data-cy="password"]').should('exist');
+        cy.get('[data-cy="btn-submit"]').should('exist');
+
+        cy.get('[data-cy="email"]').type(login.username);
+        cy.get('[data-cy="password"]').type(login.password);
+        cy.get('[data-cy="btn-submit"]').click().then(() => {
+            cy.url().should('eq', `${Cypress.env('APP_BASE_URL')}/calls`);
+        });
+    });
+});

phone-test/cypress/e2e/Logout.cy.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import 'cypress-wait-until';
+import fixtures from '../fixtures/example.json';
+
+describe('Logout functionlaity', () => {
+    let AUTH_TOKEN_KEY: string, REFRESH_TOKEN_KEY: string;
+
+    before(() => {
+        AUTH_TOKEN_KEY = Cypress.env('AUTH_TOKEN_KEY');
+        REFRESH_TOKEN_KEY = Cypress.env('REFRESH_TOKEN_KEY');
+    })
+
+    it('should perform a success login and a correctly logout', () => {
+        const { login } = fixtures;
+
+        cy.visit(`${Cypress.env('APP_BASE_URL')}/login`);
+
+        cy.get('[data-cy="email"]').type(login.username);
+        cy.get('[data-cy="password"]').type(login.password);
+        cy.get('[data-cy="btn-submit"]').click();
+
+        cy.url().should('eq', `${Cypress.env('APP_BASE_URL')}/calls`).then(() => {
+            expect(localStorage.getItem(AUTH_TOKEN_KEY)).not.to.be.null;
+            expect(localStorage.getItem(REFRESH_TOKEN_KEY)).not.to.be.null;
+        });
+
+        cy.get('[data-cy="btn-logout"]').click();
+
+        cy.url().should('eq', `${Cypress.env('APP_BASE_URL')}/login`).then(() => {
+            expect(localStorage.getItem(AUTH_TOKEN_KEY)).to.be.null;
+            expect(localStorage.getItem(REFRESH_TOKEN_KEY)).to.be.null;
+        });
+    });
+});

phone-test/cypress/fixtures/example.json

@@ -0,0 +1,6 @@
+{
+  "login": {
+    "username": "[email protected]",
+    "password": "12345"
+  }
+}

phone-test/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

phone-test/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

phone-test/package.json

@@ -13,24 +13,36 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
+    "cypress": "13.6.1",
+    "cypress-wait-until": "3.0.1",
     "date-fns": "^2.29.3",
     "graphql": "^16.6.0",
+    "graphql-ws": "^5.16.0",
     "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "start-server-and-test": "2.0.3",
     "styled-components": "^5.3.6",
+    "subscriptions-transport-ws": "^0.11.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
+  "config": {
+    "host": "http://localhost:3000"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run --e2e",
+    "cy:test": "start-server-and-test start $npm_package_config_host cy:run",
+    "cy:e2e": "start-server-and-test start $npm_package_config_host cy:open"
   },
   "eslintConfig": {
     "extends": [
@@ -59,5 +71,10 @@
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
     ]
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "/node_modules/?!(@aircall)"
+    ]
   }
 }

phone-test/src/App.tsx

@@ -1,6 +1,6 @@
-import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from 'react-router-dom';
 import { LoginPage } from './pages/Login/Login';
-import { CallsListPage } from './pages/CallsList';
+import { CallsListPage } from './pages/CallsList/CallsList';
 import { CallDetailsPage } from './pages/CallDetails';
 import { Tractor } from '@aircall/tractor';
 
@@ -9,33 +9,10 @@ import { ProtectedLayout } from './components/routing/ProtectedLayout';
 import { darkTheme } from './style/theme/darkTheme';
 import { RouterProvider } from 'react-router-dom';
 import { GlobalAppStyle } from './style/global';
-import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
-import { setContext } from '@apollo/client/link/context';
+import { ApolloProvider } from '@apollo/client';
+import useApolloClient from './hooks/useApolloClient';
 import { AuthProvider } from './hooks/useAuth';
 
-const httpLink = createHttpLink({
-  uri: 'https://frontend-test-api.aircall.dev/graphql'
-});
-
-const authLink = setContext((_, { headers }) => {
-  // get the authentication token from local storage if it exists
-  const accessToken = localStorage.getItem('access_token');
-  const parsedToken = accessToken ? JSON.parse(accessToken) : undefined;
-
-  // return the headers to the context so httpLink can read them
-  return {
-    headers: {
-      ...headers,
-      authorization: accessToken ? `Bearer ${parsedToken}` : ''
-    }
-  };
-});
-
-const client = new ApolloClient({
-  link: authLink.concat(httpLink),
-  cache: new InMemoryCache()
-});
-
 export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<AuthProvider />}>
@@ -44,14 +21,19 @@ export const router = createBrowserRouter(
         <Route path="/calls" element={<CallsListPage />} />
         <Route path="/calls/:callId" element={<CallDetailsPage />} />
       </Route>
+      <Route path="/" element={<Navigate to="/login" replace />} />
     </Route>
   )
 );
 
 function App() {
+  const { apolloClient } = useApolloClient();
+
+  if (!apolloClient) return null;
+
   return (
     <Tractor injectStyle theme={darkTheme}>
-      <ApolloProvider client={client}>
+      <ApolloProvider client={apolloClient}>
         <RouterProvider router={router} />
         <GlobalAppStyle />
       </ApolloProvider>

phone-test/src/components/Layout/Loader.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const LoaderWrapper = styled.div`
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  > span.loader {
+    display: block;
+    width: 48px;
+    height: 48px;
+    border: 5px solid #fff;
+    border-bottom-color: #29b388;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  > span.loader-message {
+    display: block;
+    width: 100%;
+    text-align: center;
+    padding: 20px;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export interface LoaderProps {
+  message?: string;
+}
+
+const Loader: React.FC<LoaderProps> = (props: LoaderProps): React.ReactElement => {
+  const { message = 'Loading...' } = props;
+
+  return (
+    <LoaderWrapper>
+      <span className="loader"></span>
+      <span className="loader-message">{message}</span>
+    </LoaderWrapper>
+  );
+};
+
+export default Loader;

phone-test/src/components/routing/ProtectedLayout.tsx

@@ -1,17 +1,29 @@
-import { Outlet, Link } from 'react-router-dom';
-import { Box, Flex, Spacer, Grid } from '@aircall/tractor';
+import { Outlet, Link, Navigate } from 'react-router-dom';
+import { Box, Flex, Spacer, Grid, Button } from '@aircall/tractor';
+import { AUTH_CONFIG } from '../../services/auth/authConfig';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { useAuth } from '../../hooks/useAuth';
 import logo from '../../logo.png';
 
 export const ProtectedLayout = () => {
+  const { logout, checkIsLoggedIn } = useAuth();
+  const [user] = useLocalStorage(AUTH_CONFIG.USER, undefined);
+
+  const isLoggedIn = checkIsLoggedIn();
+
+  if (!isLoggedIn) return <Navigate to="/login" />;
+
   return (
     <Box minWidth="100vh" p={4}>
       <Flex justifyContent="space-between" alignItems="center">
         <Link to="/calls">
           <img src={logo} alt="Aircall" width="32px" height="32px" />
         </Link>
         <Spacer space="m" alignItems="center">
-          <span>{`Welcome {username}!`}</span>
-          <Link to="/login">logout</Link>
+          <span>{`Welcome ${user?.username}!`}</span>
+          <Button name="btn-logout" mode="link" onClick={logout} data-cy="btn-logout">
+            Logout
+          </Button>
         </Spacer>
       </Flex>
       <Grid w="500px" mx="auto" rowGap={2}>

phone-test/src/components/routing/ProtectedRoute.tsx

@@ -1,4 +1,9 @@
-export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  // TODO check that the user is authenticated before displaying the route
-  return <>{children}</>;
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+export const ProtectedRoute = () => {
+  const { checkIsLoggedIn } = useAuth();
+  const isLoggedIn = checkIsLoggedIn();
+
+  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
 };

phone-test/src/gql/mutations/archiveCall.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+import { CALL_FIELDS } from '../fragments/call';
+
+export const ARCHIVE_CALL = gql`
+  ${CALL_FIELDS}
+
+  mutation ArchiveCall($id: ID!) {
+    archiveCall(id: $id) {
+      ...CallFields
+    }
+  }
+`;

phone-test/src/gql/mutations/index.ts

@@ -1 +1,3 @@
 export * from './login';
+export * from './refreshTokenV2';
+export * from './archiveCall';