Required task to SE test

phone-test/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

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

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+
+describe('Login and read call', () => {
+  let callId: string;
+
+  before(() => {
+    cy.fixture('user').then(user => {
+      this.user = user;
+    });
+  });
+
+  it('Login and redirect to call details', () => {
+    cy.visit('/login');
+    cy.get('#email').type(this.user.email).should('have.value', this.user.email);
+    cy.get('#password').type(this.user.password).should('have.value', this.user.password);
+    cy.get('button[type="submit"]').contains('Login').click();
+    cy.wait(2000);
+    cy.url().should('include', '/calls');
+    cy.get('div[data-test="call"]').first().click();
+    cy.wait(1000);
+    cy.get('.title').contains('Calls Details');
+  });
+});

phone-test/cypress/fixtures/user.json

@@ -0,0 +1,4 @@
+{
+  "email": "[email protected]",
+  "password": "secret"
+}

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

@@ -5,6 +5,16 @@
   "dependencies": {
     "@aircall/tractor": "2.0.0-next.13",
     "@apollo/client": "^3.7.1",
+    "date-fns": "^2.29.3",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
+    "web-vitals": "^2.1.0"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -13,23 +23,17 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "date-fns": "^2.29.3",
-    "graphql": "^16.6.0",
+    "cypress": "^13.3.2",
     "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",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "typescript": "^4.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:e2e": "cypress open",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

phone-test/src/App.tsx

@@ -5,42 +5,20 @@ import { CallDetailsPage } from './pages/CallDetails';
 import { Tractor } from '@aircall/tractor';
 
 import './App.css';
-import { ProtectedLayout } from './components/routing/ProtectedLayout';
-import { darkTheme } from './style/theme/darkTheme';
+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 { 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()
-});
+import { GlobalAppStyle } from 'style/global';
+import { ApolloProvider } from '@apollo/client';
+import { client } from 'config/apolloSetup';
+import { AuthProvider } from 'contexts/AuthContext';
+import { ErrorBoundary } from 'components/Error/ErrorBoundary';
+import { ProtectedRoute } from 'components/routing/ProtectedRoute';
 
 export const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route element={<AuthProvider />}>
+    <Route element={<AuthProvider />} errorElement={<ErrorBoundary />}>
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/calls" element={<ProtectedLayout />}>
+      <Route path="/calls" element={<ProtectedRoute />}>
         <Route path="/calls" element={<CallsListPage />} />
         <Route path="/calls/:callId" element={<CallDetailsPage />} />
       </Route>

phone-test/src/components/Error/ErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { NotFoundPage } from '../NotFoundPage/NotFound';
+
+export const ErrorBoundary = () => {
+  const error = useRouteError();
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    console.log(error);
+    if (error.status === 404) return <NotFoundPage />;
+    errorMessage = error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else {
+    errorMessage = 'Unknown error';
+  }
+
+  return <div>{errorMessage}</div>;
+};

phone-test/src/components/NotFoundPage/NotFound.tsx

@@ -0,0 +1,32 @@
+import { Button, Flex } from '@aircall/tractor';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const ErrorTitle = styled.h1`
+  font-size: 3rem;
+  margin-bottom: 1rem;
+`;
+
+export const ErrorText = styled.p`
+  font-size: 1.5rem;
+  text-align: center;
+`;
+
+export const ErrorImage = styled.img`
+  max-width: clamp(10rem, 500px, 70vh);
+  margin-bottom: 2rem;
+`;
+
+export const NotFoundPage = () => {
+  return (
+    <Flex flexDirection="column" alignItems="center" justifyContent="center" marginTop={30}>
+      <ErrorImage
+        src="https://img.freepik.com/vector-gratis/error-404-ilustracion-concepto-paisaje_114360-7898.jpg?w=1380&t=st=1697573689~exp=1697574289~hmac=cc2e9894fb977e6b221f04744302db60e3a5ae17d308a95910cc0ba002a3ba11"
+        alt="404 Error"
+      />
+      <ErrorTitle>Oops! Page not found</ErrorTitle>
+      <ErrorText>The page you are looking for is unavailable.</ErrorText>
+      <Link to="/calls"><Button> Go to calls page</Button> </Link>
+    </Flex>
+  );
+};

phone-test/src/components/calls/CallListItem/CallListItem.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  DiagonalDownOutlined,
+  DiagonalUpOutlined,
+  Grid,
+  Icon,
+  Typography
+} from '@aircall/tractor';
+import { formatDate, formatDuration } from 'helpers/dates';
+import { useNavigate } from 'react-router-dom';
+
+interface CallListItemProps {
+  call: Call;
+}
+
+const CallListItem = ({ call }: CallListItemProps) => {
+  const navigate = useNavigate();
+
+  const icon = call.direction === 'inbound' ? DiagonalDownOutlined : DiagonalUpOutlined;
+  const callTypeTitles: Record<string, string> = {
+    missed: 'Missed call',
+    answered: 'Call answered',
+    voicemail: 'Voicemail'
+  };
+  const title = callTypeTitles[call.call_type] || 'Unknown call type';
+  const callTypesColors: Record<string, string> = {
+    missed: 'red-500',
+    answered: 'green-500',
+    voicemail: 'blue-500'
+  };
+  const color = callTypesColors[call.call_type] || 'neutral-600';
+  const subtitle = call.direction === 'inbound' ? `from ${call.from}` : `to ${call.to}`;
+  const duration = formatDuration(call.duration / 1000);
+  const date = formatDate(call.created_at);
+  const notes = call.notes ? `Call has ${call.notes.length} notes` : <></>;
+
+  const handleCallOnClick = (callId: string) => {
+    navigate(`/calls/${callId}`);
+  };
+
+  return (
+    <Box
+      key={call.id}
+      bg="black-a30"
+      borderRadius={16}
+      cursor="pointer"
+      id={`${call.id}`}
+      data-test="call"
+      onClick={() => handleCallOnClick(call.id)}
+    >
+      <Grid
+        gridTemplateColumns="32px 1fr max-content"
+        columnGap={2}
+        borderBottom="1px solid"
+        borderBottomColor="neutral-700"
+        alignItems="center"
+        px={4}
+        py={2}
+      >
+        <Box>
+          <Icon component={icon} size={32} color={color} />
+        </Box>
+        <Box>
+          <Typography variant="body">{title}</Typography>
+          <Typography variant="body2">{subtitle}</Typography>
+        </Box>
+        <Box>
+          <Typography variant="caption" textAlign="right">
+            {duration}
+          </Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Box>
+      </Grid>
+      <Box px={4} py={2}>
+        <Typography variant="caption">{notes}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default CallListItem;