From 6a54acd89f1d1b6d8a68ee4e899c4c4ad40615a4 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 00:01:19 +0200
Subject: [PATCH 01/18] Package.json improvements

---
 phone-test/package.json | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/phone-test/package.json b/phone-test/package.json
index 0f844cf..34eafd2 100644
--- a/phone-test/package.json
+++ b/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,18 +23,10 @@
     "@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",
+    "typescript": "^4.4.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"
+    "lint-staged": "^13.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -60,4 +62,4 @@
       "prettier --write"
     ]
   }
-}
+}
\ No newline at end of file

From e669a98d3d1184ceff5499669dc8eb3ae442fc28 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 00:19:43 +0200
Subject: [PATCH 02/18] Add 404 page for not existing routes

---
 phone-test/src/App.tsx                        |  3 ++-
 .../src/components/Error/ErrorBoundary.tsx    | 19 +++++++++++++++
 .../src/components/NotFoundPage/NotFound.tsx  | 18 +++++++++++++++
 .../components/NotFoundPage/notFound.style.ts | 23 +++++++++++++++++++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 phone-test/src/components/Error/ErrorBoundary.tsx
 create mode 100644 phone-test/src/components/NotFoundPage/NotFound.tsx
 create mode 100644 phone-test/src/components/NotFoundPage/notFound.style.ts

diff --git a/phone-test/src/App.tsx b/phone-test/src/App.tsx
index 6619726..2df0059 100644
--- a/phone-test/src/App.tsx
+++ b/phone-test/src/App.tsx
@@ -12,6 +12,7 @@ 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';
+import { ErrorBoundary } from './components/Error/ErrorBoundary';
 
 const httpLink = createHttpLink({
   uri: 'https://frontend-test-api.aircall.dev/graphql'
@@ -38,7 +39,7 @@ const client = new ApolloClient({
 
 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={<CallsListPage />} />
diff --git a/phone-test/src/components/Error/ErrorBoundary.tsx b/phone-test/src/components/Error/ErrorBoundary.tsx
new file mode 100644
index 0000000..d08069c
--- /dev/null
+++ b/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>;
+};
diff --git a/phone-test/src/components/NotFoundPage/NotFound.tsx b/phone-test/src/components/NotFoundPage/NotFound.tsx
new file mode 100644
index 0000000..042040c
--- /dev/null
+++ b/phone-test/src/components/NotFoundPage/NotFound.tsx
@@ -0,0 +1,18 @@
+  import { Flex } from '@aircall/tractor';
+  import { ErrorImage, ErrorText, ErrorTitle } from './notFound.style';
+  import { Link } from 'react-router-dom';
+  
+  export const NotFoundPage = () => {
+    return (
+      <Flex flexDirection="column" alignItems="center" justifyContent="center" minHeight="60vh">
+        <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" style={{ fontSize: '1.5rem', textDecoration: 'underline' }}> Go to calls page </Link>
+      </Flex>
+    );
+  };
+  
\ No newline at end of file
diff --git a/phone-test/src/components/NotFoundPage/notFound.style.ts b/phone-test/src/components/NotFoundPage/notFound.style.ts
new file mode 100644
index 0000000..61be661
--- /dev/null
+++ b/phone-test/src/components/NotFoundPage/notFound.style.ts
@@ -0,0 +1,23 @@
+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'
+  max-width: '50ch';
+`;
+
+export const ErrorImage = styled.img`
+  max-width: '400px';
+  margin-bottom: '2rem';
+`;
+
+export const ErrorLink = styled(Link)`
+font-size: '1.5rem';
+text-decoration: 'underline';
+`;
\ No newline at end of file

From f0defa2bd13c35ab91e4a76811b67bcb32ca8c94 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 00:51:00 +0200
Subject: [PATCH 03/18] Fix pagination when change items number UI

---
 phone-test/src/pages/CallsList.tsx | 32 ++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 8466c43..eefe303 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -23,13 +23,15 @@ export const PaginationWrapper = styled.div`
   }
 `;
 
-const CALLS_PER_PAGE = 5;
+const CALLS_PER_PAGE = 25;
 
 export const CallsListPage = () => {
-  const [search] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  const pageQueryParams = search.get('page');
+  const pageQueryParams = searchParams.get('page');
+  const callsPerPage = parseInt(searchParams.get('cpe') || CALLS_PER_PAGE.toString());
   const activePage = !!pageQueryParams ? parseInt(pageQueryParams) : 1;
+
   const { loading, error, data } = useQuery(PAGINATED_CALLS, {
     variables: {
       offset: (activePage - 1) * CALLS_PER_PAGE,
@@ -42,14 +44,30 @@ export const CallsListPage = () => {
   if (error) return <p>ERROR</p>;
   if (!data) return <p>Not found</p>;
 
-  const { totalCount, nodes: calls } = data.paginatedCalls;
+  const { totalCount, nodes: calls } = data?.paginatedCalls;
 
   const handleCallOnClick = (callId: string) => {
     navigate(`/calls/${callId}`);
   };
 
   const handlePageChange = (page: number) => {
-    navigate(`/calls/?page=${page}`);
+    console.log(page, Math.ceil(totalCount / callsPerPage), totalCount, callsPerPage)
+    if (page === activePage || page < 1 || page > Math.ceil(totalCount / callsPerPage)) return;
+    setSearchParams(params => {
+      params.set('page', page.toString());
+      return params;
+    });
+
+    navigate(`/calls/?${searchParams.toString()}`);
+  };
+
+  const handlePageSizeChange = (pageSize: number) => {
+    setSearchParams(params => {
+      params.set('page', '1');
+      if (pageSize === CALLS_PER_PAGE || !pageSize) params.delete('cpe');
+      else params.set('cpe', pageSize.toString());
+      return params;
+    });
   };
 
   return (
@@ -114,8 +132,10 @@ export const CallsListPage = () => {
         <PaginationWrapper>
           <Pagination
             activePage={activePage}
-            pageSize={CALLS_PER_PAGE}
+            pageSize={callsPerPage}
             onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            defaultPageSize={CALLS_PER_PAGE}
             recordsTotalCount={totalCount}
           />
         </PaginationWrapper>

From a218713da0f1fbd602bf9fbb4ae9c997cd327a48 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 01:42:23 +0200
Subject: [PATCH 04/18] Add Protected route and layout

---
 phone-test/src/App.tsx                                | 3 ++-
 phone-test/src/components/routing/ProtectedLayout.tsx | 2 +-
 phone-test/src/components/routing/ProtectedRoute.tsx  | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/phone-test/src/App.tsx b/phone-test/src/App.tsx
index 2df0059..c858566 100644
--- a/phone-test/src/App.tsx
+++ b/phone-test/src/App.tsx
@@ -13,6 +13,7 @@ import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@ap
 import { setContext } from '@apollo/client/link/context';
 import { AuthProvider } from './hooks/useAuth';
 import { ErrorBoundary } from './components/Error/ErrorBoundary';
+import { ProtectedRoute } from './components/routing/ProtectedRoute';
 
 const httpLink = createHttpLink({
   uri: 'https://frontend-test-api.aircall.dev/graphql'
@@ -41,7 +42,7 @@ export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<AuthProvider />} errorElement={<ErrorBoundary />}>
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/calls" element={<ProtectedLayout />}>
+      <Route path="/calls" element={<ProtectedRoute><ProtectedLayout /></ProtectedRoute>}>
         <Route path="/calls" element={<CallsListPage />} />
         <Route path="/calls/:callId" element={<CallDetailsPage />} />
       </Route>
diff --git a/phone-test/src/components/routing/ProtectedLayout.tsx b/phone-test/src/components/routing/ProtectedLayout.tsx
index 55f8193..6d560ea 100644
--- a/phone-test/src/components/routing/ProtectedLayout.tsx
+++ b/phone-test/src/components/routing/ProtectedLayout.tsx
@@ -4,7 +4,7 @@ import logo from '../../logo.png';
 
 export const ProtectedLayout = () => {
   return (
-    <Box minWidth="100vh" p={4}>
+    <Box minWidth="50vh" p={4} >
       <Flex justifyContent="space-between" alignItems="center">
         <Link to="/calls">
           <img src={logo} alt="Aircall" width="32px" height="32px" />
diff --git a/phone-test/src/components/routing/ProtectedRoute.tsx b/phone-test/src/components/routing/ProtectedRoute.tsx
index 6e410c9..2beb677 100644
--- a/phone-test/src/components/routing/ProtectedRoute.tsx
+++ b/phone-test/src/components/routing/ProtectedRoute.tsx
@@ -1,4 +1,6 @@
+
 export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
   // TODO check that the user is authenticated before displaying the route
+
   return <>{children}</>;
 };

From d5e6ed6eeff57395e75df33ad782b98b8f511bcb Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 01:44:09 +0200
Subject: [PATCH 05/18] Create componente CallListItem

---
 .../calls/CallListItem/CallListItem.tsx       | 81 +++++++++++++++++++
 phone-test/src/pages/CallsList.tsx            | 76 +++--------------
 2 files changed, 93 insertions(+), 64 deletions(-)
 create mode 100644 phone-test/src/components/calls/CallListItem/CallListItem.tsx

diff --git a/phone-test/src/components/calls/CallListItem/CallListItem.tsx b/phone-test/src/components/calls/CallListItem/CallListItem.tsx
new file mode 100644
index 0000000..6596234
--- /dev/null
+++ b/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;
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index eefe303..1cf28b5 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -2,17 +2,13 @@ import { useQuery } from '@apollo/client';
 import styled from 'styled-components';
 import { PAGINATED_CALLS } from '../gql/queries';
 import {
-  Grid,
-  Icon,
   Typography,
   Spacer,
   Box,
-  DiagonalDownOutlined,
-  DiagonalUpOutlined,
   Pagination
 } from '@aircall/tractor';
-import { formatDate, formatDuration } from '../helpers/dates';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import CallListItem from '../components/calls/CallListItem/CallListItem';
 
 export const PaginationWrapper = styled.div`
   > div {
@@ -46,13 +42,11 @@ export const CallsListPage = () => {
 
   const { totalCount, nodes: calls } = data?.paginatedCalls;
 
-  const handleCallOnClick = (callId: string) => {
-    navigate(`/calls/${callId}`);
-  };
-
   const handlePageChange = (page: number) => {
-    console.log(page, Math.ceil(totalCount / callsPerPage), totalCount, callsPerPage)
-    if (page === activePage || page < 1 || page > Math.ceil(totalCount / callsPerPage)) return;
+    console.log(page, Math.ceil(totalCount / callsPerPage), totalCount, callsPerPage);
+    if (page === activePage) return;
+    if (page < 1) page= 1;
+    if (page > Math.ceil(totalCount / callsPerPage)) page= Math.ceil(totalCount / callsPerPage);
     setSearchParams(params => {
       params.set('page', page.toString());
       return params;
@@ -75,59 +69,13 @@ export const CallsListPage = () => {
       <Typography variant="displayM" textAlign="center" py={3}>
         Calls History
       </Typography>
-      <Spacer space={3} direction="vertical">
-        {calls.map((call: Call) => {
-          const icon = call.direction === 'inbound' ? DiagonalDownOutlined : DiagonalUpOutlined;
-          const title =
-            call.call_type === 'missed'
-              ? 'Missed call'
-              : call.call_type === 'answered'
-              ? 'Call answered'
-              : 'Voicemail';
-          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` : <></>;
-
-          return (
-            <Box
-              key={call.id}
-              bg="black-a30"
-              borderRadius={16}
-              cursor="pointer"
-              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} />
-                </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>
-          );
-        })}
-      </Spacer>
-
+      <Box overflow="auto" minWidth={500} paddingTop={5} maxHeight="80vh">
+        <Spacer space={3} direction="vertical">
+          {calls.map((call: Call) => (
+            <CallListItem call={call} key={call.id} />
+          ))}
+        </Spacer>
+      </Box>
       {totalCount && (
         <PaginationWrapper>
           <Pagination

From f2eb53fff577d8bf83ede5010b6d51a1c6904567 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 02:03:31 +0200
Subject: [PATCH 06/18] Add calls sorting and filtering in memory

---
 .../calls/CallsFilterBar/CallsFilterBar.tsx   |  85 ++++++++++++
 .../EmptyCallListItem/EmptyCallListItem.tsx   |  10 ++
 phone-test/src/components/calls/index.ts      |   3 +
 phone-test/src/pages/CallsList.tsx            | 122 +++++++++++++-----
 4 files changed, 190 insertions(+), 30 deletions(-)
 create mode 100644 phone-test/src/components/calls/CallsFilterBar/CallsFilterBar.tsx
 create mode 100644 phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
 create mode 100644 phone-test/src/components/calls/index.ts

diff --git a/phone-test/src/components/calls/CallsFilterBar/CallsFilterBar.tsx b/phone-test/src/components/calls/CallsFilterBar/CallsFilterBar.tsx
new file mode 100644
index 0000000..f98577e
--- /dev/null
+++ b/phone-test/src/components/calls/CallsFilterBar/CallsFilterBar.tsx
@@ -0,0 +1,85 @@
+import {
+  Box,
+  Button,
+  DiagonalDownOutlined,
+  DiagonalUpOutlined,
+  Flex,
+  Icon,
+  Select
+} from '@aircall/tractor';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+const CallsFilterBar = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  //Used to remove page when changing filter. Fix pagination bug
+  const deletePageParam = () => {
+    setSearchParams(params => {
+      params.delete('page');
+      return params;
+    });
+  };
+
+  const handleCallDirection = (direction: string) => {
+    if (direction === 'all') {
+      setSearchParams(params => {
+        params.delete('dir');
+        return params;
+      });
+    } else {
+      setSearchParams(params => {
+        params.set('dir', direction);
+        return params;
+      });
+    }
+    deletePageParam();
+    navigate(`/calls/?${searchParams.toString()}`);
+  };
+
+  const handleCallType = (key: React.Key[]) => {
+    setSearchParams(params => {
+      if (!key[0]) params.delete('type');
+      else params.set('type', key[0].toString());
+      return params;
+    });
+    deletePageParam();
+    navigate(`/calls/?${searchParams.toString()}`);
+  };
+
+  const callTypes = [
+    { value: 'missed', label: 'Missed calls' },
+    { value: 'answered', label: 'Answered calls' },
+    { value: 'voicemail', label: 'Voicemail calls' },
+    { value: 'unknown', label: 'Unknown calls' }
+  ];
+
+  return (
+    <Flex justifyContent="space-between">
+      <Box maxWidth={200} color="white">
+        {/* I'm not using defaultValue because it's not working. I tried defaultValue="missed" hardcoded and 
+        it doesn't work. I tried passing all option object and no works*/}
+        <Select
+          size="small"
+          maxW={250}
+          placeholder="Filter by call type"
+          options={callTypes}
+          onSelectionChange={key => handleCallType(key)}
+        />
+      </Box>
+      <Flex minWidth={220} justifyContent="space-between">
+        <Button size="xSmall" variant="primary" onClick={() => handleCallDirection('all')}>
+          All
+        </Button>
+        <Button size="xSmall" variant="primary" onClick={() => handleCallDirection('inbound')}>
+          <Icon component={DiagonalDownOutlined} size={20} />
+        </Button>
+        <Button size="xSmall" variant="primary" onClick={() => handleCallDirection('outbound')}>
+          <Icon component={DiagonalUpOutlined} size={20} />
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default CallsFilterBar;
diff --git a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
new file mode 100644
index 0000000..b2fb38d
--- /dev/null
+++ b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
@@ -0,0 +1,10 @@
+import { Box } from '@aircall/tractor';
+import { de } from 'date-fns/locale';
+
+const EmptyCallListItem = () => {
+  return <Box>
+    <p>No calls found</p>
+  </Box>;
+};
+
+export default EmptyCallListItem;
diff --git a/phone-test/src/components/calls/index.ts b/phone-test/src/components/calls/index.ts
new file mode 100644
index 0000000..dce2b0c
--- /dev/null
+++ b/phone-test/src/components/calls/index.ts
@@ -0,0 +1,3 @@
+export { default as CallListItem } from './CallListItem/CallListItem';
+export { default as CallsFilterBar } from './CallsFilterBar/CallsFilterBar';
+export { default as EmptyCallListItem } from './EmptyCallListItem/EmptyCallListItem';
\ No newline at end of file
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 1cf28b5..28392a9 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -5,10 +5,15 @@ import {
   Typography,
   Spacer,
   Box,
-  Pagination
+  Pagination,
+  Accordion,
+  SpinnerOutlined,
+  Flex,
+  ArrowDownFilled
 } from '@aircall/tractor';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import CallListItem from '../components/calls/CallListItem/CallListItem';
+import { useEffect, useMemo, useState } from 'react';
+import { CallListItem, CallsFilterBar, EmptyCallListItem } from '../components/calls';
 
 export const PaginationWrapper = styled.div`
   > div {
@@ -25,28 +30,66 @@ export const CallsListPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
   const pageQueryParams = searchParams.get('page');
+  const directionQueryParams = searchParams.get('dir') || '';
+  const typeQueryParams = searchParams.get('type');
   const callsPerPage = parseInt(searchParams.get('cpe') || CALLS_PER_PAGE.toString());
-  const activePage = !!pageQueryParams ? parseInt(pageQueryParams) : 1;
-
+  const [filteredCalls, setFilteredCalls] = useState<Call[]>([]);
+  const activePage = parseInt(pageQueryParams || '1');
   const { loading, error, data } = useQuery(PAGINATED_CALLS, {
     variables: {
-      offset: (activePage - 1) * CALLS_PER_PAGE,
-      limit: CALLS_PER_PAGE
+      offset: 0,
+      limit: 1000
     }
-    // onCompleted: () => handleRefreshToken(),
   });
 
-  if (loading) return <p>Loading calls...</p>;
-  if (error) return <p>ERROR</p>;
-  if (!data) return <p>Not found</p>;
+  const calls = data?.paginatedCalls.nodes;
+
+  useEffect(() => {
+    if (calls) {
+      let filteredCalls = [...calls];
+
+      if (directionQueryParams) {
+        filteredCalls = calls.filter((call: Call) => call.direction === directionQueryParams);
+      }
+      if (typeQueryParams) {
+        filteredCalls = calls.filter((call: Call) => call.call_type === typeQueryParams);
+      }
+
+      setFilteredCalls(filteredCalls);
+    }
+  }, [calls, directionQueryParams, typeQueryParams]);
 
-  const { totalCount, nodes: calls } = data?.paginatedCalls;
+  const sortedCalls = useMemo(() => {
+    console.log('sortedCalls');
+    const clone = JSON.parse(JSON.stringify(filteredCalls));
+
+    return clone.sort((a: Call, b: Call) => {
+      if (a.created_at > b.created_at) return -1;
+      if (a.created_at < b.created_at) return 1;
+      return 0;
+    });
+  }, [filteredCalls]);
+
+  //
+  const groupedCalls = sortedCalls
+    .reduce((acc: { [key: string]: Call[] }, call: Call, index: number) => {
+      if (index < (activePage - 1) * callsPerPage || index >= activePage * callsPerPage) return acc;
+      const date = new Date(call.created_at);
+      const day = date.toLocaleDateString();
+      if (!acc[day]) {
+        acc[day] = [call];
+      } else {
+        acc[day].push(call);
+      }
+      return acc;
+    }, {});
+
+  if (loading) return <SpinnerOutlined />;
+  if (error) return <p>ERROR</p>;
+  if (!data) return <EmptyCallListItem />;
 
   const handlePageChange = (page: number) => {
-    console.log(page, Math.ceil(totalCount / callsPerPage), totalCount, callsPerPage);
     if (page === activePage) return;
-    if (page < 1) page= 1;
-    if (page > Math.ceil(totalCount / callsPerPage)) page= Math.ceil(totalCount / callsPerPage);
     setSearchParams(params => {
       params.set('page', page.toString());
       return params;
@@ -69,24 +112,43 @@ export const CallsListPage = () => {
       <Typography variant="displayM" textAlign="center" py={3}>
         Calls History
       </Typography>
-      <Box overflow="auto" minWidth={500} paddingTop={5} maxHeight="80vh">
-        <Spacer space={3} direction="vertical">
-          {calls.map((call: Call) => (
-            <CallListItem call={call} key={call.id} />
+      <CallsFilterBar />
+      <Box overflow="auto" minWidth={400} paddingTop={5} maxHeight="80vh">
+        <Accordion.Root defaultSelected={1}>
+          {Object.keys(groupedCalls).map((day: string, index: number) => (
+            <Accordion.Item id={index} key={day}>
+              <Accordion.Header>
+                <Flex justifyContent="center" alignItems="center">
+                  <Typography variant="heading2" textAlign="center" color="grey" paddingTop={2}>
+                    {day}
+                  </Typography>
+                  <ArrowDownFilled size={20} />
+                </Flex>
+              </Accordion.Header>
+              <Accordion.Body>
+                <Spacer space={3} direction="vertical" minWidth="100%">
+                  {groupedCalls[day].map((call: Call) => (
+                    <CallListItem call={call} key={call.id} />
+                  ))}
+                </Spacer>
+              </Accordion.Body>
+            </Accordion.Item>
           ))}
-        </Spacer>
+        </Accordion.Root>
       </Box>
-      {totalCount && (
-        <PaginationWrapper>
-          <Pagination
-            activePage={activePage}
-            pageSize={callsPerPage}
-            onPageChange={handlePageChange}
-            onPageSizeChange={handlePageSizeChange}
-            defaultPageSize={CALLS_PER_PAGE}
-            recordsTotalCount={totalCount}
-          />
-        </PaginationWrapper>
+      {Array.isArray(calls) && calls.length && (
+        <Box>
+          <PaginationWrapper>
+            <Pagination
+              activePage={activePage}
+              pageSize={callsPerPage}
+              onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+              defaultPageSize={CALLS_PER_PAGE}
+              recordsTotalCount={filteredCalls.length}
+            />
+          </PaginationWrapper>
+        </Box>
       )}
     </>
   );

From 44d5940ba706cc34471db30c0d3753084b5dd236 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 02:29:28 +0200
Subject: [PATCH 07/18] Fix logout and redirection when expired token

---
 phone-test/src/App.tsx                        |   4 +-
 .../components/routing/ProtectedLayout.tsx    |  19 +++-
 .../src/components/routing/ProtectedRoute.tsx |  19 +++-
 phone-test/src/contexts/AuthContext.d.ts      |  35 ++++++
 phone-test/src/contexts/AuthContext.tsx       | 105 ++++++++++++++++++
 phone-test/src/declarations/auth.d.ts         |  10 ++
 phone-test/src/gql/mutations/login.ts         |  14 +++
 phone-test/src/gql/queries/user.ts            |  11 ++
 phone-test/src/hooks/useAuth.tsx              |  63 +----------
 phone-test/src/pages/Login/Login.tsx          |  32 +-----
 phone-test/src/pages/Login/LoginForm.tsx      |  46 ++++++--
 phone-test/src/reducers/authReducer.ts        |  27 +++++
 12 files changed, 279 insertions(+), 106 deletions(-)
 create mode 100644 phone-test/src/contexts/AuthContext.d.ts
 create mode 100644 phone-test/src/contexts/AuthContext.tsx
 create mode 100644 phone-test/src/gql/queries/user.ts
 create mode 100644 phone-test/src/reducers/authReducer.ts

diff --git a/phone-test/src/App.tsx b/phone-test/src/App.tsx
index c858566..130c741 100644
--- a/phone-test/src/App.tsx
+++ b/phone-test/src/App.tsx
@@ -11,7 +11,7 @@ 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';
+import { AuthProvider } from './contexts/AuthContext';
 import { ErrorBoundary } from './components/Error/ErrorBoundary';
 import { ProtectedRoute } from './components/routing/ProtectedRoute';
 
@@ -42,7 +42,7 @@ export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<AuthProvider />} errorElement={<ErrorBoundary />}>
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/calls" element={<ProtectedRoute><ProtectedLayout /></ProtectedRoute>}>
+      <Route path="/calls" element={<ProtectedRoute />}>
         <Route path="/calls" element={<CallsListPage />} />
         <Route path="/calls/:callId" element={<CallDetailsPage />} />
       </Route>
diff --git a/phone-test/src/components/routing/ProtectedLayout.tsx b/phone-test/src/components/routing/ProtectedLayout.tsx
index 6d560ea..d8cfb33 100644
--- a/phone-test/src/components/routing/ProtectedLayout.tsx
+++ b/phone-test/src/components/routing/ProtectedLayout.tsx
@@ -1,17 +1,26 @@
 import { Outlet, Link } from 'react-router-dom';
 import { Box, Flex, Spacer, Grid } from '@aircall/tractor';
 import logo from '../../logo.png';
+import { useAuth } from '../../hooks/useAuth';
+
+interface ProtectedLayoutProps {
+  children: React.ReactNode;
+}
+
+export const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
+  const { user, logout } = useAuth();
 
-export const ProtectedLayout = () => {
   return (
-    <Box minWidth="50vh" p={4} >
+    <Box 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}!`}</span>
+          <Link to="/login" onClick={logout}>
+            logout
+          </Link>
         </Spacer>
       </Flex>
       <Grid w="500px" mx="auto" rowGap={2}>
@@ -20,3 +29,5 @@ export const ProtectedLayout = () => {
     </Box>
   );
 };
+
+export default ProtectedLayout;
diff --git a/phone-test/src/components/routing/ProtectedRoute.tsx b/phone-test/src/components/routing/ProtectedRoute.tsx
index 2beb677..022aa48 100644
--- a/phone-test/src/components/routing/ProtectedRoute.tsx
+++ b/phone-test/src/components/routing/ProtectedRoute.tsx
@@ -1,6 +1,21 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import ProtectedLayout from './ProtectedLayout';
 
-export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+export const ProtectedRoute = () => {
   // TODO check that the user is authenticated before displaying the route
+  const { user, status } = useAuth();
+  const navigate = useNavigate();
 
-  return <>{children}</>;
+  useEffect(() => {
+    if (status !== 'Idle') return;
+    if (!user && window.location.pathname !== '/login') navigate('/login');
+  }, [user, status]);
+
+  return (
+    <ProtectedLayout>
+      <Outlet />
+    </ProtectedLayout>
+  );
 };
diff --git a/phone-test/src/contexts/AuthContext.d.ts b/phone-test/src/contexts/AuthContext.d.ts
new file mode 100644
index 0000000..bdfe3d7
--- /dev/null
+++ b/phone-test/src/contexts/AuthContext.d.ts
@@ -0,0 +1,35 @@
+import type { LoginInput, LoginResultType } from '../declarations/auth.d';
+
+export type StatusType = 'Idle' | 'Loading' | 'Error' | 'Init'
+
+export interface State {
+  user: string | null;
+  status: StatusType;
+}
+
+export interface AuthContextType extends State {
+  login: (loginInput: LoginInput) => Promise<LoginResultType> | void;
+  logout: () => void;
+}
+
+// #region Login reducer actions
+type LoginAction = {
+    type: 'LOGIN';
+    payload: {
+      user: string;
+    };
+  };
+  
+  type LogoutAction = {
+    type: 'LOGOUT';
+  };
+  
+  type StatusAction = {
+    type: 'STATUS';
+    payload: {
+      status: StatusType;
+    };
+  };
+  
+  export type Actions = LoginAction | LogoutAction | StatusAction;
+  // #endregion
\ No newline at end of file
diff --git a/phone-test/src/contexts/AuthContext.tsx b/phone-test/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..d4c7c96
--- /dev/null
+++ b/phone-test/src/contexts/AuthContext.tsx
@@ -0,0 +1,105 @@
+import { createContext, useCallback, useEffect, useMemo, useReducer } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { useMutation, useQuery } from '@apollo/client';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { LoginInput } from '../declarations/auth';
+import { LOGIN } from '../gql/mutations';
+import type { AuthContextType, State } from './AuthContext.d';
+import authReducer from '../reducers/authReducer';
+import { USER_ME } from '../gql/queries/user';
+
+const defaultState: State = {
+  user: null,
+  status: 'Loading'
+};
+
+const AuthContext = createContext<AuthContextType>({
+  ...defaultState,
+  login: (loginInput: LoginInput) => {},
+  logout: () => {}
+});
+
+export const AuthProvider = () => {
+  const navigate = useNavigate();
+  const [state, dispatch] = useReducer(authReducer, defaultState);
+
+  const [accessToken, setAccessToken] = useLocalStorage('access_token', undefined);
+  const [refreshToken, setRefreshToken] = useLocalStorage('refresh_token', undefined);
+
+  const [loginMutation] = useMutation(LOGIN);
+  const { loading, error, data } = useQuery(USER_ME);
+
+  const { me: user } = data || {};
+
+  useEffect(() => {
+    if (!accessToken) {
+      dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
+      console.log('No access token');
+      return;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (loading) return;
+    
+    if (error) {
+      dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
+      if (accessToken) {
+        setAccessToken(undefined);
+      }
+      if (refreshToken) {
+        setRefreshToken(undefined);
+      }
+    }
+
+    if (user?.username) {
+      dispatch({ type: 'LOGIN', payload: { user: user.username } });
+      if (window.location.pathname === '/login') navigate('/calls');
+    }
+  }, [user, loading, error]);
+
+  // call this function when you want to authenticate the user
+  const login = useCallback(
+    ({ username, password }: LoginInput) => {
+      dispatch({ type: 'STATUS', payload: { status: 'Loading' } });
+
+      return loginMutation({
+        variables: { input: { username, password } },
+        onCompleted: ({ login }: any) => {
+          const { access_token, refresh_token, user } = login;
+          dispatch({ type: 'LOGIN', payload: { user: user.username } });
+          setAccessToken(access_token);
+          setRefreshToken(refresh_token);
+          navigate('/calls');
+        },
+        onError: (error: any) => {
+          console.error('error', error);
+          dispatch({ type: 'STATUS', payload: { status: 'Error' } });
+        }
+      });
+    },
+    [loginMutation]
+  );
+
+  // call this function to sign out logged in user
+  const logout = useCallback(() => {
+    setAccessToken(undefined);
+    setRefreshToken(undefined);
+    dispatch({ type: 'LOGOUT' });
+    navigate('/login', { replace: true });
+  }, []);
+
+  const value = useMemo(() => {
+    return {
+      ...state,
+      login,
+      logout
+    };
+  }, [login, logout, state]);
+
+  return (
+    <AuthContext.Provider value={value}><Outlet /></AuthContext.Provider>
+  );
+};
+
+export default AuthContext;
diff --git a/phone-test/src/declarations/auth.d.ts b/phone-test/src/declarations/auth.d.ts
index d50d2dd..edd45df 100644
--- a/phone-test/src/declarations/auth.d.ts
+++ b/phone-test/src/declarations/auth.d.ts
@@ -13,3 +13,13 @@ interface DeprecatedAuthResponseType {
   access_token: String;
   user: UserType;
 }
+
+export type LoginResultType = {
+  data?: {
+    login: AuthResponseType;
+  };
+};
+
+export type RefreshTokenResultType = {
+  refreshTokenV2: AuthResponseType;
+};
\ No newline at end of file
diff --git a/phone-test/src/gql/mutations/login.ts b/phone-test/src/gql/mutations/login.ts
index 6733e9d..3d3a846 100644
--- a/phone-test/src/gql/mutations/login.ts
+++ b/phone-test/src/gql/mutations/login.ts
@@ -14,3 +14,17 @@ export const LOGIN = gql`
     }
   }
 `;
+
+export const REFRESH_TOKEN = gql`
+  ${USER_FIELDS}
+
+  mutation RefreshTokenV2 {
+    refreshTokenV2 {
+      access_token
+      refresh_token
+      user {
+        ...UserFields
+      }
+    }
+  }
+`;
\ No newline at end of file
diff --git a/phone-test/src/gql/queries/user.ts b/phone-test/src/gql/queries/user.ts
new file mode 100644
index 0000000..f30019a
--- /dev/null
+++ b/phone-test/src/gql/queries/user.ts
@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+import { USER_FIELDS } from '../fragments/user';
+
+export const USER_ME = gql`
+  ${USER_FIELDS}
+  query UserMe {
+    me {
+      ...UserFields
+    }
+  }
+`;
diff --git a/phone-test/src/hooks/useAuth.tsx b/phone-test/src/hooks/useAuth.tsx
index c02493e..0425e25 100644
--- a/phone-test/src/hooks/useAuth.tsx
+++ b/phone-test/src/hooks/useAuth.tsx
@@ -1,61 +1,4 @@
-import { createContext, useContext, useMemo, useState } from 'react';
-import { useNavigate, Outlet } from 'react-router-dom';
-import { LOGIN } from '../gql/mutations';
-import { useLocalStorage } from './useLocalStorage';
-import { useMutation } from '@apollo/client';
+import { useContext } from 'react';
+import AuthContext from '../contexts/AuthContext';
 
-const AuthContext = createContext({
-  login: ({}) => {},
-  logout: () => {}
-});
-
-export interface AuthPRoviderProps {
-  children: React.ReactNode;
-}
-
-export const AuthProvider = () => {
-  const [user, setUser] = useState();
-  const [status, setStatus] = useState('loading');
-  const [accessToken, setAccessToken] = useLocalStorage('access_token', undefined);
-  const [refreshToken, setRefreshToken] = useLocalStorage('refresh_token', undefined);
-  const [loginMutation] = useMutation(LOGIN);
-  const navigate = useNavigate();
-
-  // call this function when you want to authenticate the user
-  const login = ({ username, password }: any) => {
-    return loginMutation({
-      variables: { input: { username, password } },
-      onCompleted: ({ login }: any) => {
-        const { access_token, refresh_token, user } = login;
-        setAccessToken(access_token);
-        setRefreshToken(refresh_token);
-        setUser(user);
-        console.log('redirect to calls');
-        navigate('/calls');
-      }
-    });
-  };
-
-  // call this function to sign out logged in user
-  const logout = () => {
-    setAccessToken(null);
-    setRefreshToken(null);
-    navigate('/login', { replace: true });
-  };
-
-  const value = useMemo(() => {
-    return {
-      login,
-      logout
-    };
-  }, []);
-  return (
-    <AuthContext.Provider value={value}>
-      <Outlet />
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => {
-  return useContext(AuthContext);
-};
+export const useAuth = () => useContext(AuthContext);
diff --git a/phone-test/src/pages/Login/Login.tsx b/phone-test/src/pages/Login/Login.tsx
index a32b9d8..05d1524 100644
--- a/phone-test/src/pages/Login/Login.tsx
+++ b/phone-test/src/pages/Login/Login.tsx
@@ -1,41 +1,13 @@
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Flex, Icon, LogoMarkMono, Spacer, useToast } from '@aircall/tractor';
-
-import { FormState } from './Login.decl';
+import { Flex, Icon, LogoMarkMono, Spacer } from '@aircall/tractor';
 import { LoginForm } from './LoginForm';
-import { useAuth } from '../../hooks/useAuth';
-
-const LOGIN_REJECTED = 'LOGIN_REJECTED';
 
 export const LoginPage = () => {
-  const { login } = useAuth();
-  const [formState, setFormState] = React.useState<FormState>('Idle');
-  const { showToast, removeToast } = useToast();
-  const navigate = useNavigate();
-
-  const onSubmit = async (email: string, password: string) => {
-    try {
-      setFormState('Pending');
-      await login({ username: email, password });
-      removeToast(LOGIN_REJECTED);
-    } catch (error) {
-      console.log(error);
-      showToast({
-        id: LOGIN_REJECTED,
-        message: 'Invalid email or password',
-        variant: 'error'
-      });
-    }
-  };
-
   return (
     <Spacer p={5} h="100%" direction="vertical" justifyContent="center" fluid space={5}>
       <Flex alignItems="center">
         <Icon component={LogoMarkMono} size={60} mx="auto" />
       </Flex>
-      <LoginForm onSubmit={onSubmit} formState={formState} />
+      <LoginForm />
     </Spacer>
   );
 };
diff --git a/phone-test/src/pages/Login/LoginForm.tsx b/phone-test/src/pages/Login/LoginForm.tsx
index b87328d..4ac9246 100644
--- a/phone-test/src/pages/Login/LoginForm.tsx
+++ b/phone-test/src/pages/Login/LoginForm.tsx
@@ -7,19 +7,35 @@ import {
   Grid,
   Icon,
   SpinnerOutlined,
-  TextFieldInput
+  TextFieldInput,
+  toasts
 } from '@aircall/tractor';
 
-import { FormState } from './Login.decl';
+import { useAuth } from '../../hooks/useAuth';
+import { NotificationVariants } from '@aircall/tractor/es/components/Notification';
 
-interface LoginFormProps {
-  onSubmit: (email: string, password: string) => void;
-  formState: FormState;
-}
+const LOGIN_REJECTED = 'LOGIN_REJECTED';
 
-export const LoginForm = ({ onSubmit, formState }: LoginFormProps) => {
+export const LoginForm = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const { login, status } = useAuth();
+
+  const onSubmit = async (email: string, password: string) => {
+    try {
+      // throw new Error('Test Error');
+      await login({ username: email, password });
+      removeToast(LOGIN_REJECTED);
+    } catch (error) {
+      console.log(error);
+
+      showToast({
+        id: LOGIN_REJECTED,
+        message: 'Invalid email or password',
+        variant: 'error'
+      });
+    }
+  };
 
   return (
     <Form
@@ -29,10 +45,13 @@ export const LoginForm = ({ onSubmit, formState }: LoginFormProps) => {
       }}
       width="100%"
     >
+      {/* <Button variant="primary" onClick={()=>showToast({id: LOGIN_REJECTED, message: 'Invalid email or password', variant: 'error'})}>Show Toast</Button> */}
       <Grid columnGap={4} rowGap={5} gridTemplateColumns="1fr">
         <FormItem label="Email" name="email">
           <TextFieldInput
             placeholder="job@aircall.io"
+            type="email"
+            required
             value={email}
             onChange={e => setEmail(e.target.value)}
           />
@@ -41,15 +60,26 @@ export const LoginForm = ({ onSubmit, formState }: LoginFormProps) => {
           <TextFieldInput
             type="password"
             value={password}
+            required
             onChange={e => setPassword(e.target.value)}
           />
         </FormItem>
         <FormItem>
           <Button block type="submit">
-            {formState === 'Pending' ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
+            {status === "Loading" ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
           </Button>
         </FormItem>
       </Grid>
     </Form>
   );
 };
+
+function removeToast(LOGIN_REJECTED: string) {
+  toasts.removeToast(LOGIN_REJECTED);
+}
+
+function showToast(arg0: { id: any; message: string; variant: NotificationVariants }) {
+  console.log('showToast');
+  
+  toasts.showToast(arg0);
+}
diff --git a/phone-test/src/reducers/authReducer.ts b/phone-test/src/reducers/authReducer.ts
new file mode 100644
index 0000000..c1cecc6
--- /dev/null
+++ b/phone-test/src/reducers/authReducer.ts
@@ -0,0 +1,27 @@
+import type { State } from '../contexts/AuthContext.d';
+import type { Actions } from '../contexts/AuthContext.d';
+
+export default function authReducer(state: State, action: Actions): State {
+  switch (action.type) {
+    case 'LOGIN': {
+      const { user } = action.payload;
+      return {
+        ...state,
+        user: user,
+        status: 'Idle'
+      };
+    }
+    case 'LOGOUT':
+      return {
+        ...state,
+        user: null
+      };
+    case 'STATUS':
+      return {
+        ...state,
+        status: action.payload.status
+      };
+    default:
+      return state;
+  }
+}

From d970acaceb2bb3fd56b52552dc983e93249dcc49 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 02:31:11 +0200
Subject: [PATCH 08/18] Unit test formDate and formatDuration

---
 phone-test/src/helpers/dates.spec.ts | 32 ++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/phone-test/src/helpers/dates.spec.ts b/phone-test/src/helpers/dates.spec.ts
index 0c438e6..9c32365 100644
--- a/phone-test/src/helpers/dates.spec.ts
+++ b/phone-test/src/helpers/dates.spec.ts
@@ -1,3 +1,31 @@
-import { formatDate } from './dates';
+import { formatDate, formatDuration } from './dates';
 
-describe('dates helpers', () => {});
+describe('formatDuration', () => {
+  it('should format duration in hh:mm:ss when duration is greater than or equal to 3600 seconds', () => {
+    expect(formatDuration(3600)).toEqual('01:00:00');
+    expect(formatDuration(7200)).toEqual('02:00:00');
+    expect(formatDuration(3661)).toEqual('01:01:01');
+  });
+
+  it('should format duration in mm:ss when duration is less than 3600 seconds', () => {
+    expect(formatDuration(-10)).toEqual('59:50');
+    expect(formatDuration(59)).toEqual('00:59');
+    expect(formatDuration(600)).toEqual('10:00');
+    expect(formatDuration(3599)).toEqual('59:59');
+  });
+});
+
+describe('formatDate', () => {
+  it('should return a formatted date when given a valid ISO string', () => {
+    const date = '2022-11-16T13:37:05.822Z';
+    const result = formatDate(date);
+    expect(result).toEqual('Nov 16 - 14:37');
+  });
+
+  it('should return a formatted date when given a string representation of a valid Date object', () => {
+    const date = 'Mon Mar 09 2020 13:33:55 GMT+0100 (heure normale d’Europe centrale)';
+    const result = formatDate(date);
+    expect(result).toEqual('Mar 9 - 13:33');
+  });
+
+});

From 3a2d245c4a6770dddb8e60a433ab9cc14ff88854 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 08:27:48 +0200
Subject: [PATCH 09/18] Add base route and replace imports

---
 phone-test/src/App.tsx                                | 11 +++++------
 .../components/calls/CallListItem/CallListItem.tsx    |  2 +-
 .../calls/EmptyCallListItem/EmptyCallListItem.tsx     |  1 -
 phone-test/src/components/routing/ProtectedLayout.tsx |  4 ++--
 phone-test/src/contexts/AuthContext.d.ts              |  2 +-
 phone-test/src/contexts/AuthContext.tsx               |  8 ++++----
 phone-test/src/hooks/useAuth.tsx                      |  2 +-
 phone-test/src/pages/CallDetails.tsx                  |  4 ++--
 phone-test/src/pages/CallsList.tsx                    |  2 +-
 phone-test/src/reducers/authReducer.ts                |  4 ++--
 phone-test/tsconfig.json                              |  5 +++--
 11 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/phone-test/src/App.tsx b/phone-test/src/App.tsx
index 130c741..73b83bc 100644
--- a/phone-test/src/App.tsx
+++ b/phone-test/src/App.tsx
@@ -5,15 +5,14 @@ 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 { GlobalAppStyle } from 'style/global';
 import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
-import { AuthProvider } from './contexts/AuthContext';
-import { ErrorBoundary } from './components/Error/ErrorBoundary';
-import { ProtectedRoute } from './components/routing/ProtectedRoute';
+import { AuthProvider } from 'contexts/AuthContext';
+import { ErrorBoundary } from 'components/Error/ErrorBoundary';
+import { ProtectedRoute } from 'components/routing/ProtectedRoute';
 
 const httpLink = createHttpLink({
   uri: 'https://frontend-test-api.aircall.dev/graphql'
diff --git a/phone-test/src/components/calls/CallListItem/CallListItem.tsx b/phone-test/src/components/calls/CallListItem/CallListItem.tsx
index 6596234..e785579 100644
--- a/phone-test/src/components/calls/CallListItem/CallListItem.tsx
+++ b/phone-test/src/components/calls/CallListItem/CallListItem.tsx
@@ -6,7 +6,7 @@ import {
   Icon,
   Typography
 } from '@aircall/tractor';
-import { formatDate, formatDuration } from '../../../helpers/dates';
+import { formatDate, formatDuration } from 'helpers/dates';
 import { useNavigate } from 'react-router-dom';
 
 interface CallListItemProps {
diff --git a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
index b2fb38d..e3a3a0b 100644
--- a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
+++ b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
@@ -1,5 +1,4 @@
 import { Box } from '@aircall/tractor';
-import { de } from 'date-fns/locale';
 
 const EmptyCallListItem = () => {
   return <Box>
diff --git a/phone-test/src/components/routing/ProtectedLayout.tsx b/phone-test/src/components/routing/ProtectedLayout.tsx
index d8cfb33..90b23af 100644
--- a/phone-test/src/components/routing/ProtectedLayout.tsx
+++ b/phone-test/src/components/routing/ProtectedLayout.tsx
@@ -1,7 +1,7 @@
 import { Outlet, Link } from 'react-router-dom';
 import { Box, Flex, Spacer, Grid } from '@aircall/tractor';
-import logo from '../../logo.png';
-import { useAuth } from '../../hooks/useAuth';
+import logo from 'logo.png';
+import { useAuth } from 'hooks/useAuth';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;
diff --git a/phone-test/src/contexts/AuthContext.d.ts b/phone-test/src/contexts/AuthContext.d.ts
index bdfe3d7..fc4dabb 100644
--- a/phone-test/src/contexts/AuthContext.d.ts
+++ b/phone-test/src/contexts/AuthContext.d.ts
@@ -1,6 +1,6 @@
 import type { LoginInput, LoginResultType } from '../declarations/auth.d';
 
-export type StatusType = 'Idle' | 'Loading' | 'Error' | 'Init'
+export type StatusType = 'Idle' | 'Loading' | 'Error'
 
 export interface State {
   user: string | null;
diff --git a/phone-test/src/contexts/AuthContext.tsx b/phone-test/src/contexts/AuthContext.tsx
index d4c7c96..0862124 100644
--- a/phone-test/src/contexts/AuthContext.tsx
+++ b/phone-test/src/contexts/AuthContext.tsx
@@ -2,11 +2,11 @@ import { createContext, useCallback, useEffect, useMemo, useReducer } from 'reac
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import { useMutation, useQuery } from '@apollo/client';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { LoginInput } from '../declarations/auth';
-import { LOGIN } from '../gql/mutations';
+import { LoginInput } from 'declarations/auth';
+import { LOGIN } from 'gql/mutations';
 import type { AuthContextType, State } from './AuthContext.d';
-import authReducer from '../reducers/authReducer';
-import { USER_ME } from '../gql/queries/user';
+import authReducer from 'reducers/authReducer';
+import { USER_ME } from 'gql/queries/user';
 
 const defaultState: State = {
   user: null,
diff --git a/phone-test/src/hooks/useAuth.tsx b/phone-test/src/hooks/useAuth.tsx
index 0425e25..423618e 100644
--- a/phone-test/src/hooks/useAuth.tsx
+++ b/phone-test/src/hooks/useAuth.tsx
@@ -1,4 +1,4 @@
 import { useContext } from 'react';
-import AuthContext from '../contexts/AuthContext';
+import AuthContext from 'contexts/AuthContext';
 
 export const useAuth = () => useContext(AuthContext);
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index 4e3dc3d..2dd03ab 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -1,8 +1,8 @@
 import { useQuery } from '@apollo/client';
 import { useParams } from 'react-router-dom';
-import { GET_CALL_DETAILS } from '../gql/queries/getCallDetails';
+import { GET_CALL_DETAILS } from 'gql/queries/getCallDetails';
 import { Box, Typography } from '@aircall/tractor';
-import { formatDate, formatDuration } from '../helpers/dates';
+import { formatDate, formatDuration } from 'helpers/dates';
 
 export const CallDetailsPage = () => {
   const { callId } = useParams();
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 28392a9..0f7b66a 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/client';
 import styled from 'styled-components';
-import { PAGINATED_CALLS } from '../gql/queries';
+import { PAGINATED_CALLS } from 'gql/queries';
 import {
   Typography,
   Spacer,
diff --git a/phone-test/src/reducers/authReducer.ts b/phone-test/src/reducers/authReducer.ts
index c1cecc6..6643e7d 100644
--- a/phone-test/src/reducers/authReducer.ts
+++ b/phone-test/src/reducers/authReducer.ts
@@ -1,5 +1,5 @@
-import type { State } from '../contexts/AuthContext.d';
-import type { Actions } from '../contexts/AuthContext.d';
+import type { State } from 'contexts/AuthContext.d';
+import type { Actions } from 'contexts/AuthContext.d';
 
 export default function authReducer(state: State, action: Actions): State {
   switch (action.type) {
diff --git a/phone-test/tsconfig.json b/phone-test/tsconfig.json
index 9d379a3..a4b0650 100644
--- a/phone-test/tsconfig.json
+++ b/phone-test/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": "./src/",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,7 +15,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
   "include": ["src"]
-}
+}
\ No newline at end of file

From 9e7618620cc0b71557133a4eccb5c247f629bc04 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 08:37:14 +0200
Subject: [PATCH 10/18] Cypress config and add login test

---
 phone-test/cypress.config.ts           |  10 +
 phone-test/cypress/e2e/calls.cy.ts     |  18 +
 phone-test/cypress/fixtures/user.json  |   4 +
 phone-test/cypress/support/commands.ts |  37 ++
 phone-test/cypress/support/e2e.ts      |  20 +
 phone-test/package.json                |   2 +
 phone-test/yarn.lock                   | 615 ++++++++++++++++++++++++-
 7 files changed, 689 insertions(+), 17 deletions(-)
 create mode 100644 phone-test/cypress.config.ts
 create mode 100644 phone-test/cypress/e2e/calls.cy.ts
 create mode 100644 phone-test/cypress/fixtures/user.json
 create mode 100644 phone-test/cypress/support/commands.ts
 create mode 100644 phone-test/cypress/support/e2e.ts

diff --git a/phone-test/cypress.config.ts b/phone-test/cypress.config.ts
new file mode 100644
index 0000000..78eed99
--- /dev/null
+++ b/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
+    },
+  },
+});
diff --git a/phone-test/cypress/e2e/calls.cy.ts b/phone-test/cypress/e2e/calls.cy.ts
new file mode 100644
index 0000000..234ae03
--- /dev/null
+++ b/phone-test/cypress/e2e/calls.cy.ts
@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+
+describe('Login and read call', () => {
+  before(() => {
+    cy.fixture('user').then(user => {
+      this.user = user;
+    });
+  });
+
+  it('Login and redirect to calls page', () => {
+    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(4000);
+    cy.url().should('include', '/calls');
+  });
+});
diff --git a/phone-test/cypress/fixtures/user.json b/phone-test/cypress/fixtures/user.json
new file mode 100644
index 0000000..b736ff1
--- /dev/null
+++ b/phone-test/cypress/fixtures/user.json
@@ -0,0 +1,4 @@
+{
+  "email": "testmail@aircall.com",
+  "password": "secret"
+}
diff --git a/phone-test/cypress/support/commands.ts b/phone-test/cypress/support/commands.ts
new file mode 100644
index 0000000..698b01a
--- /dev/null
+++ b/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>
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/phone-test/cypress/support/e2e.ts b/phone-test/cypress/support/e2e.ts
new file mode 100644
index 0000000..f80f74f
--- /dev/null
+++ b/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')
\ No newline at end of file
diff --git a/phone-test/package.json b/phone-test/package.json
index 34eafd2..7aa181c 100644
--- a/phone-test/package.json
+++ b/phone-test/package.json
@@ -23,6 +23,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
+    "cypress": "^13.3.2",
     "typescript": "^4.4.2",
     "husky": "^8.0.2",
     "prettier": "^2.7.1",
@@ -32,6 +33,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:e2e": "cypress open",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
diff --git a/phone-test/yarn.lock b/phone-test/yarn.lock
index 4e814dc..e018358 100644
--- a/phone-test/yarn.lock
+++ b/phone-test/yarn.lock
@@ -1119,6 +1119,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@colors/colors@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
+  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@@ -1230,6 +1235,38 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
+"@cypress/request@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
+  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    http-signature "~1.3.6"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    performance-now "^2.1.0"
+    qs "6.10.4"
+    safe-buffer "^5.1.2"
+    tough-cookie "^4.1.3"
+    tunnel-agent "^0.6.0"
+    uuid "^8.3.2"
+
+"@cypress/xvfb@^1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
+  integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
+  dependencies:
+    debug "^3.1.0"
+    lodash.once "^4.1.1"
+
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -2090,6 +2127,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.3.tgz#d7f7ba828ad9e540270f01ce00d391c54e6e0abc"
   integrity sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg==
 
+"@types/node@^18.17.5":
+  version "18.18.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.6.tgz#26da694f75cdb057750f49d099da5e3f3824cb3e"
+  integrity sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -2173,6 +2215,16 @@
     "@types/mime" "*"
     "@types/node" "*"
 
+"@types/sinonjs__fake-timers@8.1.1":
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3"
+  integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==
+
+"@types/sizzle@^2.3.2":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.5.tgz#d93dd29cdcd5801d90be968073b09a6b370780e4"
+  integrity sha512-tAe4Q+OLFOA/AMD+0lq8ovp8t3ysxAOeaScnfNdZpUxaGl51ZMDEITxkvFl1STudQ58mz6gzVGl9VhMKhwRnZQ==
+
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
@@ -2232,6 +2284,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yauzl@^2.9.1":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.2.tgz#dab926ef9b41a898bc943f11bca6b0bad6d4b729"
+  integrity sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/eslint-plugin@^5.5.0":
   version "5.44.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.44.0.tgz#105788f299050c917eb85c4d9fd04b089e3740de"
@@ -2631,6 +2690,11 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+ansi-colors@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
 ansi-escapes@^4.2.1, ansi-escapes@^4.3.0, ansi-escapes@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -2685,6 +2749,11 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+arch@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
+  integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
+
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -2790,6 +2859,18 @@ asap@~2.0.6:
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
 
+asn1@~0.2.3:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
+  integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
+
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -2800,7 +2881,7 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-async@^3.2.3:
+async@^3.2.0, async@^3.2.3:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
@@ -2832,6 +2913,16 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
+
+aws4@^1.8.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
+  integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
+
 axe-core@^4.4.3:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.2.tgz#823fdf491ff717ac3c58a52631d4206930c1d9f7"
@@ -2999,11 +3090,23 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
+  dependencies:
+    tweetnacl "^0.14.3"
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -3024,7 +3127,12 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bluebird@^3.5.5:
+blob-util@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+  integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
+
+bluebird@^3.5.5, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -3106,11 +3214,24 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 builtin-modules@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
@@ -3126,6 +3247,11 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
+cachedir@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.4.0.tgz#7fef9cf7367233d7c88068fe6e34ed0d355a610d"
+  integrity sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -3187,6 +3313,11 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
+
 chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3222,6 +3353,11 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+check-more-types@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
+  integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
+
 check-types@^11.1.1:
   version "11.2.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"
@@ -3281,6 +3417,15 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-table3@~0.6.1:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.3.tgz#61ab765aac156b52f222954ffc607a6f01dbeeb2"
+  integrity sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==
+  dependencies:
+    string-width "^4.2.0"
+  optionalDependencies:
+    "@colors/colors" "1.5.0"
+
 cli-truncate@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
@@ -3359,7 +3504,7 @@ colorette@^2.0.10, colorette@^2.0.16, colorette@^2.0.17:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
-combined-stream@^1.0.8:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -3371,6 +3516,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -3480,6 +3630,11 @@ core-js@^3.19.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.1.tgz#7a9816dabd9ee846c1c0fe0e8fcad68f3709134e"
   integrity sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA==
 
+core-util-is@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -3518,7 +3673,7 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3741,11 +3896,67 @@ csstype@^3.0.2, csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+cypress@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.3.2.tgz#b4baa64ce37d7874f6bdd8efbc28a9c722c0686f"
+  integrity sha512-ArLmZObcLC+xxCp7zJZZbhby9FUf5CueLej9dUM4+5j37FTS4iMSgHxQLDu01PydFUvDXcNoIVRCYrHHxD7Ybg==
+  dependencies:
+    "@cypress/request" "^3.0.0"
+    "@cypress/xvfb" "^1.2.4"
+    "@types/node" "^18.17.5"
+    "@types/sinonjs__fake-timers" "8.1.1"
+    "@types/sizzle" "^2.3.2"
+    arch "^2.2.0"
+    blob-util "^2.0.2"
+    bluebird "^3.7.2"
+    buffer "^5.6.0"
+    cachedir "^2.3.0"
+    chalk "^4.1.0"
+    check-more-types "^2.24.0"
+    cli-cursor "^3.1.0"
+    cli-table3 "~0.6.1"
+    commander "^6.2.1"
+    common-tags "^1.8.0"
+    dayjs "^1.10.4"
+    debug "^4.3.4"
+    enquirer "^2.3.6"
+    eventemitter2 "6.4.7"
+    execa "4.1.0"
+    executable "^4.1.1"
+    extract-zip "2.0.1"
+    figures "^3.2.0"
+    fs-extra "^9.1.0"
+    getos "^3.2.1"
+    is-ci "^3.0.0"
+    is-installed-globally "~0.4.0"
+    lazy-ass "^1.6.0"
+    listr2 "^3.8.3"
+    lodash "^4.17.21"
+    log-symbols "^4.0.0"
+    minimist "^1.2.8"
+    ospath "^1.2.2"
+    pretty-bytes "^5.6.0"
+    process "^0.11.10"
+    proxy-from-env "1.0.0"
+    request-progress "^3.0.0"
+    semver "^7.5.3"
+    supports-color "^8.1.1"
+    tmp "~0.2.1"
+    untildify "^4.0.0"
+    yauzl "^2.10.0"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==
+  dependencies:
+    assert-plus "^1.0.0"
+
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -3760,6 +3971,11 @@ date-fns@^2.29.3:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
   integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
 
+dayjs@^1.10.4:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3774,7 +3990,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.2.7:
+debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -4045,6 +4261,14 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4092,6 +4316,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -4100,6 +4331,14 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquirer@^2.3.6:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
+  integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
+  dependencies:
+    ansi-colors "^4.1.1"
+    strip-ansi "^6.0.1"
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -4489,6 +4728,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+eventemitter2@6.4.7:
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
+  integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -4499,6 +4743,21 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
+execa@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -4529,6 +4788,13 @@ execa@^6.1.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+executable@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
+  integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
+  dependencies:
+    pify "^2.2.0"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -4592,6 +4858,32 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+extract-zip@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
+
+extsprintf@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
+  integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -4639,6 +4931,20 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==
+  dependencies:
+    pend "~1.2.0"
+
+figures@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -4750,6 +5056,11 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
+
 fork-ts-checker-webpack-plugin@^6.5.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
@@ -4778,6 +5089,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -4831,7 +5151,7 @@ fs-extra@^7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^9.0.0, fs-extra@^9.0.1:
+fs-extra@^9.0.0, fs-extra@^9.0.1, fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -4905,6 +5225,13 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-stream@^5.0.0, get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
 get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
@@ -4918,6 +5245,20 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+getos@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
+  integrity sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==
+  dependencies:
+    async "^3.2.0"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==
+  dependencies:
+    assert-plus "^1.0.0"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -4949,6 +5290,13 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global-dirs@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
+  integrity sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==
+  dependencies:
+    ini "2.0.0"
+
 global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5219,6 +5567,15 @@ http-proxy@^1.18.1:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
+http-signature@~1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
+  integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^2.0.2"
+    sshpk "^1.14.1"
+
 https-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -5227,6 +5584,11 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -5273,6 +5635,11 @@ identity-obj-proxy@^3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
@@ -5327,6 +5694,11 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
+ini@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
 ini@^1.3.5:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -5398,6 +5770,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-ci@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
+
 is-core-module@^2.8.1, is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -5444,6 +5823,14 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-installed-globally@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -5476,7 +5863,7 @@ is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
 
-is-path-inside@^3.0.3:
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -5556,11 +5943,16 @@ is-typed-array@^1.1.10:
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
-is-typedarray@^1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
 
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
 is-weakmap@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
@@ -5603,6 +5995,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -6214,6 +6611,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
+
 jsdom@^16.6.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
@@ -6272,7 +6674,7 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json-schema@^0.4.0:
+json-schema@0.4.0, json-schema@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
   integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
@@ -6282,6 +6684,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -6315,6 +6722,16 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
+jsprim@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
+  integrity sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.4.0"
+    verror "1.10.0"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
@@ -6357,6 +6774,11 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+lazy-ass@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
+  integrity sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -6412,6 +6834,20 @@ lint-staged@^13.0.3:
     string-argv "^0.3.1"
     yaml "^2.1.1"
 
+listr2@^3.8.3:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
+  integrity sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==
+  dependencies:
+    cli-truncate "^2.1.0"
+    colorette "^2.0.16"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rfdc "^1.3.0"
+    rxjs "^7.5.1"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
+
 listr2@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.5.tgz#9dcc50221583e8b4c71c43f9c7dfd0ef546b75d5"
@@ -6487,6 +6923,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.once@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -6502,6 +6943,14 @@ lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+log-symbols@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
+  dependencies:
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
+
 log-update@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
@@ -6614,7 +7063,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -6672,6 +7121,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
+minimist@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -6770,7 +7224,7 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-npm-run-path@^4.0.1:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
@@ -6903,7 +7357,7 @@ on-headers@~1.0.2:
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@@ -6978,6 +7432,11 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+ospath@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
+  integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
+
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -7140,6 +7599,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -7165,7 +7629,7 @@ pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
-pify@^2.3.0:
+pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
@@ -7766,7 +8230,7 @@ prettier@^2.7.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
   integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
-pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
@@ -7812,6 +8276,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 promise@^8.1.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
@@ -7844,6 +8313,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
+  integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -7854,6 +8328,14 @@ pubsub-js@1.9.3:
   resolved "https://registry.yarnpkg.com/pubsub-js/-/pubsub-js-1.9.3.tgz#674eea4d568d0402e0527cdb10e2aab7b55621d2"
   integrity sha512-FhYYlPNOywTh7zN38u5AlG67emA47w6JZd7YgdQU1w8gQbZhhIGxVM0AQosdaINHb2ALb+fhfnVyBJAt4D4IzA==
 
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -7864,6 +8346,13 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
+qs@6.10.4:
+  version "6.10.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
+  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -8201,6 +8690,13 @@ renderkid@^3.0.0:
     lodash "^4.17.21"
     strip-ansi "^6.0.1"
 
+request-progress@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
+  integrity sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==
+  dependencies:
+    throttleit "^1.0.0"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8333,6 +8829,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.5.1:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 rxjs@^7.5.5:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
@@ -8345,7 +8848,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -8359,7 +8862,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -8462,6 +8965,13 @@ semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.5.3:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -8708,6 +9218,21 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+sshpk@^1.14.1:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
+  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -8941,7 +9466,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
+supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -9110,6 +9635,11 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
+throttleit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+  integrity sha512-rkTVqu6IjfQ/6+uNuuc3sZek4CEYxTJom3IktzgdSxcZqdARuebbA/f4QmAxMQIxqq9ZLEUkSYqvuk1I6VKq4g==
+
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -9127,6 +9657,13 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmp@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -9159,6 +9696,16 @@ tough-cookie@^4.0.0:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
+tough-cookie@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -9212,6 +9759,18 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -9331,6 +9890,11 @@ unquote@~1.1.1:
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
   integrity sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -9408,6 +9972,15 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -9935,6 +10508,14 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From 1b9adc5aa413ba3a787cdf2515f326eb44cad4ff Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 08:43:41 +0200
Subject: [PATCH 11/18] Add archive feature and real time event monitoring

---
 phone-test/src/gql/mutations/archive.ts | 12 ++++++
 phone-test/src/pages/CallDetails.tsx    | 52 ++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 phone-test/src/gql/mutations/archive.ts

diff --git a/phone-test/src/gql/mutations/archive.ts b/phone-test/src/gql/mutations/archive.ts
new file mode 100644
index 0000000..2c33dd5
--- /dev/null
+++ b/phone-test/src/gql/mutations/archive.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
+    }
+  }
+`;
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index 2dd03ab..392efff 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -1,28 +1,58 @@
-import { useQuery } from '@apollo/client';
-import { useParams } from 'react-router-dom';
+import { useMutation, useQuery } from '@apollo/client';
+import { Link, useParams } from 'react-router-dom';
 import { GET_CALL_DETAILS } from 'gql/queries/getCallDetails';
-import { Box, Typography } from '@aircall/tractor';
+import { ArchiveFilled, ArrowLeftFilled, Box, Button, Spacer, Typography } from '@aircall/tractor';
 import { formatDate, formatDuration } from 'helpers/dates';
+import { ARCHIVE_CALL } from 'gql/mutations/archive';
+import { useEffect } from 'react';
 
 export const CallDetailsPage = () => {
   const { callId } = useParams();
-  const { loading, error, data } = useQuery(GET_CALL_DETAILS, {
+  const { loading, error, data, refetch } = useQuery(GET_CALL_DETAILS, {
     variables: {
       id: callId
     }
   });
+  const [archiveMutation] = useMutation(ARCHIVE_CALL);
 
+  // Refecth data when tab is visible
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refetch();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [refetch]);
+  
   if (loading) return <p>Loading call details...</p>;
   if (error) return <p>ERROR</p>;
 
   const { call } = data;
 
+  const handleArchive = async () => {
+      archiveMutation({
+        variables: {
+          id: callId
+        },
+        onError: (error) => {
+          console.log(error);
+        }
+      });
+
+  };
+
   return (
     <>
       <Typography variant="displayM" textAlign="center" py={3}>
         Calls Details
       </Typography>
-      <Box overflowY="auto" bg="black-a30" p={4} borderRadius={16}>
+      <Box overflowY="auto" bg="black-a30" p={4} borderRadius={10}>
         <div>{`ID: ${call.id}`}</div>
         <div>{`Type: ${call.call_type}`}</div>
         <div>{`Created at: ${formatDate(call.created_at)}`}</div>
@@ -33,9 +63,19 @@ export const CallDetailsPage = () => {
         <div>{`To: ${call.to}`}</div>
         <div>{`Via: ${call.via}`}</div>
         {call.notes?.map((note: Note, index: number) => {
-          return <div>{`Note ${index + 1}: ${note.content}`}</div>;
+          return <div key={note.id}>{`Note ${index + 1}: ${note.content}`}</div>;
         })}
       </Box>
+      <Spacer spaceX={4}>
+        <Link to="/calls">
+          <Button variant="primary" size="small">
+            <ArrowLeftFilled /> Back
+          </Button>
+        </Link>
+        <Button variant="destructive" size="small" onClick={handleArchive}>
+          <ArchiveFilled /> Archive
+        </Button>
+      </Spacer>
     </>
   );
 };

From 3a1f3c01225d6e9daf096a02c227deb890ae6c26 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 09:03:11 +0200
Subject: [PATCH 12/18] Created refresh token feature o Unauth failure

---
 phone-test/src/App.tsx               |  27 +-----
 phone-test/src/config/apolloSetup.ts | 120 +++++++++++++++++++++++++++
 phone-test/src/pages/CallsList.tsx   |   1 -
 3 files changed, 122 insertions(+), 26 deletions(-)
 create mode 100644 phone-test/src/config/apolloSetup.ts

diff --git a/phone-test/src/App.tsx b/phone-test/src/App.tsx
index 73b83bc..848887b 100644
--- a/phone-test/src/App.tsx
+++ b/phone-test/src/App.tsx
@@ -8,35 +8,12 @@ import './App.css';
 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 { client } from 'config/apolloSetup';
 import { AuthProvider } from 'contexts/AuthContext';
 import { ErrorBoundary } from 'components/Error/ErrorBoundary';
 import { ProtectedRoute } from 'components/routing/ProtectedRoute';
 
-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 />} errorElement={<ErrorBoundary />}>
diff --git a/phone-test/src/config/apolloSetup.ts b/phone-test/src/config/apolloSetup.ts
new file mode 100644
index 0000000..5d8fb5e
--- /dev/null
+++ b/phone-test/src/config/apolloSetup.ts
@@ -0,0 +1,120 @@
+import {
+  ApolloClient,
+  InMemoryCache,
+  createHttpLink,
+  Observable,
+  FetchResult,
+  ApolloLink
+} from '@apollo/client';
+import { GraphQLError } from 'graphql/error/GraphQLError';
+import { setContext } from '@apollo/client/link/context';
+import { onError } from '@apollo/client/link/error';
+
+const graphqlUrl = 'https://frontend-test-api.aircall.dev/graphql';
+
+const httpLink = createHttpLink({
+  uri: graphqlUrl
+});
+
+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: parsedToken ? `Bearer ${parsedToken}` : ''
+    }
+  };
+});
+
+const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
+  if (graphQLErrors) {
+    for (let err of graphQLErrors) {
+      switch (err.message) {
+        case 'Unauthorized':
+          // ignore 401 error for a refresh request
+          if (operation.operationName === 'RefreshTokenV2') return;
+          const observable = new Observable<FetchResult<Record<string, any>>>(observer => {
+            // used an annonymous function for using an async function
+            (async () => {
+              try {
+                const accessToken = await refreshToken();
+
+                if (!accessToken) {
+                  throw new GraphQLError('Empty AccessToken');
+                }
+
+                // Retry the failed request
+                const subscriber = {
+                  next: observer.next.bind(observer),
+                  error: observer.error.bind(observer),
+                  complete: observer.complete.bind(observer)
+                };
+
+                forward(operation).subscribe(subscriber);
+              } catch (err) {
+                observer.error(err);
+              }
+            })();
+          });
+
+          return observable;
+      }
+    }
+  }
+
+  if (networkError) console.log(`[Network error]: ${networkError}`);
+});
+
+export const client = new ApolloClient({
+  link: ApolloLink.from([errorLink, authLink, httpLink]),
+  cache: new InMemoryCache()
+});
+
+// Request a refresh token to then stores and returns the accessToken.
+const refreshToken = async () => {
+  try {
+    const refresh = localStorage.getItem('refresh_token');
+    if (!refresh) {
+      throw new Error('No refresh token');
+    }
+
+    const query = {
+        operationName: 'RefreshTokenV2',
+        query: `mutation RefreshTokenV2 {
+          refreshTokenV2 {
+            access_token
+            refresh_token
+          }
+        }`,
+        variables: {}
+      };
+
+    const refreshTokenMutation = await fetch(graphqlUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `Bearer ${JSON.parse(refresh)}`
+      },
+      body: JSON.stringify(query)
+    });
+    const response = await refreshTokenMutation.json();
+
+    if (response.errors) {
+      throw new Error('Error refreshing token');
+    }
+
+    const accessToken = response.data?.refreshTokenV2.access_token;
+    localStorage.setItem('access_token', JSON.stringify(accessToken));
+
+    const refreshToken = response.data?.refreshTokenV2.refresh_token;
+    localStorage.setItem('refresh_token', JSON.stringify(refreshToken));
+
+    return accessToken;
+  } catch (err) {
+    throw err;
+  }
+};
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 0f7b66a..4e9251d 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -60,7 +60,6 @@ export const CallsListPage = () => {
   }, [calls, directionQueryParams, typeQueryParams]);
 
   const sortedCalls = useMemo(() => {
-    console.log('sortedCalls');
     const clone = JSON.parse(JSON.stringify(filteredCalls));
 
     return clone.sort((a: Call, b: Call) => {

From d2bf5f1df7e335c2104aa8e59a6649b43701a028 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 09:11:06 +0200
Subject: [PATCH 13/18] Comments

---
 phone-test/src/contexts/AuthContext.tsx | 1 +
 phone-test/src/pages/CallsList.tsx      | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/phone-test/src/contexts/AuthContext.tsx b/phone-test/src/contexts/AuthContext.tsx
index 0862124..54724d6 100644
--- a/phone-test/src/contexts/AuthContext.tsx
+++ b/phone-test/src/contexts/AuthContext.tsx
@@ -7,6 +7,7 @@ import { LOGIN } from 'gql/mutations';
 import type { AuthContextType, State } from './AuthContext.d';
 import authReducer from 'reducers/authReducer';
 import { USER_ME } from 'gql/queries/user';
+import { set } from 'date-fns';
 
 const defaultState: State = {
   user: null,
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 4e9251d..5db652f 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -35,10 +35,13 @@ export const CallsListPage = () => {
   const callsPerPage = parseInt(searchParams.get('cpe') || CALLS_PER_PAGE.toString());
   const [filteredCalls, setFilteredCalls] = useState<Call[]>([]);
   const activePage = parseInt(pageQueryParams || '1');
+
+  // Adding this to achieve pagination on the client side. Ideally, this should be done on the server side
+  // by using filter and sort variables in the query.
   const { loading, error, data } = useQuery(PAGINATED_CALLS, {
     variables: {
       offset: 0,
-      limit: 1000
+      limit: 1000 
     }
   });
 
@@ -69,7 +72,6 @@ export const CallsListPage = () => {
     });
   }, [filteredCalls]);
 
-  //
   const groupedCalls = sortedCalls
     .reduce((acc: { [key: string]: Call[] }, call: Call, index: number) => {
       if (index < (activePage - 1) * callsPerPage || index >= activePage * callsPerPage) return acc;

From 4b9a7e24852a6fe3b35f2cd655e0ba0cc9055f5f Mon Sep 17 00:00:00 2001
From: Oscar C <oscar8x@yahoo.es>
Date: Mon, 23 Oct 2023 17:43:24 +0200
Subject: [PATCH 14/18] e2e test improvements

---
 phone-test/cypress/e2e/calls.cy.ts   | 9 +++++++--
 phone-test/package.json              | 6 +++---
 phone-test/src/pages/CallDetails.tsx | 4 ++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/phone-test/cypress/e2e/calls.cy.ts b/phone-test/cypress/e2e/calls.cy.ts
index 234ae03..b96fc56 100644
--- a/phone-test/cypress/e2e/calls.cy.ts
+++ b/phone-test/cypress/e2e/calls.cy.ts
@@ -1,18 +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 calls page', () => {
+  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(4000);
+    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');
   });
 });
diff --git a/phone-test/package.json b/phone-test/package.json
index 7aa181c..65e039d 100644
--- a/phone-test/package.json
+++ b/phone-test/package.json
@@ -24,10 +24,10 @@
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "cypress": "^13.3.2",
-    "typescript": "^4.4.2",
     "husky": "^8.0.2",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "lint-staged": "^13.0.3"
+    "typescript": "^4.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -64,4 +64,4 @@
       "prettier --write"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index 2dd03ab..c845528 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -19,11 +19,11 @@ export const CallDetailsPage = () => {
 
   return (
     <>
-      <Typography variant="displayM" textAlign="center" py={3}>
+      <Typography variant="displayM" textAlign="center" py={3} className="title">
         Calls Details
       </Typography>
       <Box overflowY="auto" bg="black-a30" p={4} borderRadius={16}>
-        <div>{`ID: ${call.id}`}</div>
+        <div id="callid">{`ID: ${call.id}`}</div>
         <div>{`Type: ${call.call_type}`}</div>
         <div>{`Created at: ${formatDate(call.created_at)}`}</div>
         <div>{`Direction: ${call.direction}`}</div>

From fe5606078786a16ed48a7d23c7f05458a2e41d2e Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 21:48:37 +0200
Subject: [PATCH 15/18] Visual improvements and some fixes

---
 .../src/components/NotFoundPage/NotFound.tsx  | 50 +++++++++------
 .../components/NotFoundPage/notFound.style.ts | 23 -------
 .../EmptyCallListItem/EmptyCallListItem.tsx   |  4 +-
 .../components/routing/ProtectedLayout.tsx    |  2 +-
 .../src/components/routing/ProtectedRoute.tsx |  2 +-
 phone-test/src/components/spinner/spinner.tsx | 44 +++++++++++++
 phone-test/src/contexts/AuthContext.tsx       | 18 +++---
 .../src/hooks/{useAuth.tsx => useAuth.ts}     |  0
 phone-test/src/hooks/useCustomToast.ts        | 17 +++++
 ...useLocalStorage.tsx => useLocalStorage.ts} |  0
 phone-test/src/pages/CallDetails.tsx          |  5 +-
 phone-test/src/pages/CallsList.tsx            | 63 +++++++++++++------
 phone-test/src/pages/Login/Login.tsx          |  5 ++
 phone-test/src/pages/Login/LoginForm.tsx      | 15 ++---
 14 files changed, 166 insertions(+), 82 deletions(-)
 delete mode 100644 phone-test/src/components/NotFoundPage/notFound.style.ts
 create mode 100644 phone-test/src/components/spinner/spinner.tsx
 rename phone-test/src/hooks/{useAuth.tsx => useAuth.ts} (100%)
 create mode 100644 phone-test/src/hooks/useCustomToast.ts
 rename phone-test/src/hooks/{useLocalStorage.tsx => useLocalStorage.ts} (100%)

diff --git a/phone-test/src/components/NotFoundPage/NotFound.tsx b/phone-test/src/components/NotFoundPage/NotFound.tsx
index 042040c..1811680 100644
--- a/phone-test/src/components/NotFoundPage/NotFound.tsx
+++ b/phone-test/src/components/NotFoundPage/NotFound.tsx
@@ -1,18 +1,32 @@
-  import { Flex } from '@aircall/tractor';
-  import { ErrorImage, ErrorText, ErrorTitle } from './notFound.style';
-  import { Link } from 'react-router-dom';
-  
-  export const NotFoundPage = () => {
-    return (
-      <Flex flexDirection="column" alignItems="center" justifyContent="center" minHeight="60vh">
-        <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" style={{ fontSize: '1.5rem', textDecoration: 'underline' }}> Go to calls page </Link>
-      </Flex>
-    );
-  };
-  
\ No newline at end of file
+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>
+  );
+};
diff --git a/phone-test/src/components/NotFoundPage/notFound.style.ts b/phone-test/src/components/NotFoundPage/notFound.style.ts
deleted file mode 100644
index 61be661..0000000
--- a/phone-test/src/components/NotFoundPage/notFound.style.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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'
-  max-width: '50ch';
-`;
-
-export const ErrorImage = styled.img`
-  max-width: '400px';
-  margin-bottom: '2rem';
-`;
-
-export const ErrorLink = styled(Link)`
-font-size: '1.5rem';
-text-decoration: 'underline';
-`;
\ No newline at end of file
diff --git a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
index e3a3a0b..fe8434a 100644
--- a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
+++ b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
@@ -1,8 +1,8 @@
-import { Box } from '@aircall/tractor';
+import { Box, Typography } from '@aircall/tractor';
 
 const EmptyCallListItem = () => {
   return <Box>
-    <p>No calls found</p>
+    <Typography variant="displayS2" textAlign="center">No calls found</Typography>
   </Box>;
 };
 
diff --git a/phone-test/src/components/routing/ProtectedLayout.tsx b/phone-test/src/components/routing/ProtectedLayout.tsx
index 90b23af..b284245 100644
--- a/phone-test/src/components/routing/ProtectedLayout.tsx
+++ b/phone-test/src/components/routing/ProtectedLayout.tsx
@@ -12,7 +12,7 @@ export const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
 
   return (
     <Box p={4}>
-      <Flex justifyContent="space-between" alignItems="center">
+      <Flex justifyContent="space-between" alignItems="center" maxHeight="10vh">
         <Link to="/calls">
           <img src={logo} alt="Aircall" width="32px" height="32px" />
         </Link>
diff --git a/phone-test/src/components/routing/ProtectedRoute.tsx b/phone-test/src/components/routing/ProtectedRoute.tsx
index 022aa48..dab2137 100644
--- a/phone-test/src/components/routing/ProtectedRoute.tsx
+++ b/phone-test/src/components/routing/ProtectedRoute.tsx
@@ -11,7 +11,7 @@ export const ProtectedRoute = () => {
   useEffect(() => {
     if (status !== 'Idle') return;
     if (!user && window.location.pathname !== '/login') navigate('/login');
-  }, [user, status]);
+  }, [user, status, navigate]);
 
   return (
     <ProtectedLayout>
diff --git a/phone-test/src/components/spinner/spinner.tsx b/phone-test/src/components/spinner/spinner.tsx
new file mode 100644
index 0000000..9bfc140
--- /dev/null
+++ b/phone-test/src/components/spinner/spinner.tsx
@@ -0,0 +1,44 @@
+import { Flex } from '@aircall/tractor';
+import styled from 'styled-components';
+
+const Spinner = () => (
+  <Flex justifyContent="center" alignItems="center" marginTop={10}>
+    <StyledSpinner viewBox="0 0 40 40">
+      <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
+    </StyledSpinner>
+  </Flex>
+);
+
+const StyledSpinner = styled.svg`
+  animation: rotate 2s linear infinite;
+  width: 50px;
+  height: 50px;
+
+  & .path {
+    stroke: #00b388;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+
+export default Spinner;
diff --git a/phone-test/src/contexts/AuthContext.tsx b/phone-test/src/contexts/AuthContext.tsx
index 54724d6..6d745c8 100644
--- a/phone-test/src/contexts/AuthContext.tsx
+++ b/phone-test/src/contexts/AuthContext.tsx
@@ -7,7 +7,6 @@ import { LOGIN } from 'gql/mutations';
 import type { AuthContextType, State } from './AuthContext.d';
 import authReducer from 'reducers/authReducer';
 import { USER_ME } from 'gql/queries/user';
-import { set } from 'date-fns';
 
 const defaultState: State = {
   user: null,
@@ -32,9 +31,10 @@ export const AuthProvider = () => {
 
   const { me: user } = data || {};
 
+  // There is no "accessToken" in dependency array because I only want to set the status at the beginning
   useEffect(() => {
     if (!accessToken) {
-      dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
+       dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
       console.log('No access token');
       return;
     }
@@ -42,7 +42,7 @@ export const AuthProvider = () => {
 
   useEffect(() => {
     if (loading) return;
-    
+
     if (error) {
       dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
       if (accessToken) {
@@ -57,7 +57,7 @@ export const AuthProvider = () => {
       dispatch({ type: 'LOGIN', payload: { user: user.username } });
       if (window.location.pathname === '/login') navigate('/calls');
     }
-  }, [user, loading, error]);
+  }, [user, loading, error, accessToken, setAccessToken, setRefreshToken, navigate, refreshToken]);
 
   // call this function when you want to authenticate the user
   const login = useCallback(
@@ -74,21 +74,21 @@ export const AuthProvider = () => {
           navigate('/calls');
         },
         onError: (error: any) => {
-          console.error('error', error);
           dispatch({ type: 'STATUS', payload: { status: 'Error' } });
         }
       });
     },
-    [loginMutation]
+    [loginMutation, navigate, setAccessToken, setRefreshToken]
   );
 
   // call this function to sign out logged in user
   const logout = useCallback(() => {
+    console.log('logout');
     setAccessToken(undefined);
     setRefreshToken(undefined);
     dispatch({ type: 'LOGOUT' });
     navigate('/login', { replace: true });
-  }, []);
+  }, [navigate, setAccessToken, setRefreshToken]);
 
   const value = useMemo(() => {
     return {
@@ -99,7 +99,9 @@ export const AuthProvider = () => {
   }, [login, logout, state]);
 
   return (
-    <AuthContext.Provider value={value}><Outlet /></AuthContext.Provider>
+    <AuthContext.Provider value={value}>
+      <Outlet />
+    </AuthContext.Provider>
   );
 };
 
diff --git a/phone-test/src/hooks/useAuth.tsx b/phone-test/src/hooks/useAuth.ts
similarity index 100%
rename from phone-test/src/hooks/useAuth.tsx
rename to phone-test/src/hooks/useAuth.ts
diff --git a/phone-test/src/hooks/useCustomToast.ts b/phone-test/src/hooks/useCustomToast.ts
new file mode 100644
index 0000000..adacd71
--- /dev/null
+++ b/phone-test/src/hooks/useCustomToast.ts
@@ -0,0 +1,17 @@
+import { useToast } from "@aircall/tractor";
+import { NotificationVariants } from "@aircall/tractor/es/components/Notification";
+
+export const useCustomToast = () => {
+    const toast = useToast();
+  
+    const showToast = (arg0: { id: string; message: string; variant: NotificationVariants }) => {
+      toast?.showToast(arg0);
+    };
+  
+    const removeToast = (LOGIN_REJECTED: string) => {
+      toast?.removeToast(LOGIN_REJECTED);
+    };
+  
+    return { showToast, removeToast };
+  };
+
diff --git a/phone-test/src/hooks/useLocalStorage.tsx b/phone-test/src/hooks/useLocalStorage.ts
similarity index 100%
rename from phone-test/src/hooks/useLocalStorage.tsx
rename to phone-test/src/hooks/useLocalStorage.ts
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index c845528..0e684bb 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { GET_CALL_DETAILS } from 'gql/queries/getCallDetails';
 import { Box, Typography } from '@aircall/tractor';
 import { formatDate, formatDuration } from 'helpers/dates';
+import Spinner from 'components/spinner/spinner';
 
 export const CallDetailsPage = () => {
   const { callId } = useParams();
@@ -12,7 +13,7 @@ export const CallDetailsPage = () => {
     }
   });
 
-  if (loading) return <p>Loading call details...</p>;
+  if (loading) return <Spinner />;
   if (error) return <p>ERROR</p>;
 
   const { call } = data;
@@ -33,7 +34,7 @@ export const CallDetailsPage = () => {
         <div>{`To: ${call.to}`}</div>
         <div>{`Via: ${call.via}`}</div>
         {call.notes?.map((note: Note, index: number) => {
-          return <div>{`Note ${index + 1}: ${note.content}`}</div>;
+          return <div key={note.id}>{`Note ${index + 1}: ${note.content}`}</div>;
         })}
       </Box>
     </>
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 5db652f..b80f73d 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -7,13 +7,13 @@ import {
   Box,
   Pagination,
   Accordion,
-  SpinnerOutlined,
   Flex,
-  ArrowDownFilled
+  ArrowDownFilled,
 } from '@aircall/tractor';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
 import { CallListItem, CallsFilterBar, EmptyCallListItem } from '../components/calls';
+import Spinner from 'components/spinner/spinner';
 
 export const PaginationWrapper = styled.div`
   > div {
@@ -29,19 +29,34 @@ const CALLS_PER_PAGE = 25;
 export const CallsListPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  const pageQueryParams = searchParams.get('page');
+  const activePage = parseInt(searchParams.get('page') || '1');
   const directionQueryParams = searchParams.get('dir') || '';
   const typeQueryParams = searchParams.get('type');
-  const callsPerPage = parseInt(searchParams.get('cpe') || CALLS_PER_PAGE.toString());
   const [filteredCalls, setFilteredCalls] = useState<Call[]>([]);
-  const activePage = parseInt(pageQueryParams || '1');
+
+  const pageSizeOptions = [
+    { value: CALLS_PER_PAGE, label: CALLS_PER_PAGE.toString() },
+    { value: 50, label: '50' },
+    { value: 100, label: '100' }
+  ];
+
+  const pageSizeValidator = () => {
+    const pageSize = parseInt(searchParams.get('cpe') || '');
+    const sizeExists = pageSizeOptions.some(option => option.value === pageSize);
+
+    return sizeExists ? pageSize : CALLS_PER_PAGE;
+  };
+
+  // Handle page size (manually changed in URL) to avoid big requests (if they're not handled on the server side)
+  // and possible DoS attacks.
+  const callsPerPage = pageSizeValidator();
 
   // Adding this to achieve pagination on the client side. Ideally, this should be done on the server side
   // by using filter and sort variables in the query.
   const { loading, error, data } = useQuery(PAGINATED_CALLS, {
     variables: {
       offset: 0,
-      limit: 1000 
+      limit: 1000
     }
   });
 
@@ -72,8 +87,8 @@ export const CallsListPage = () => {
     });
   }, [filteredCalls]);
 
-  const groupedCalls = sortedCalls
-    .reduce((acc: { [key: string]: Call[] }, call: Call, index: number) => {
+  const groupedCalls = sortedCalls.reduce(
+    (acc: { [key: string]: Call[] }, call: Call, index: number) => {
       if (index < (activePage - 1) * callsPerPage || index >= activePage * callsPerPage) return acc;
       const date = new Date(call.created_at);
       const day = date.toLocaleDateString();
@@ -83,11 +98,11 @@ export const CallsListPage = () => {
         acc[day].push(call);
       }
       return acc;
-    }, {});
+    },
+    {}
+  );
 
-  if (loading) return <SpinnerOutlined />;
   if (error) return <p>ERROR</p>;
-  if (!data) return <EmptyCallListItem />;
 
   const handlePageChange = (page: number) => {
     if (page === activePage) return;
@@ -108,19 +123,30 @@ export const CallsListPage = () => {
     });
   };
 
+  const differentDates = Object.keys(groupedCalls);
+  const noCalls = (!differentDates.length || !data) && !loading;
+
   return (
-    <>
+    <Box maxHeight="90vh">
       <Typography variant="displayM" textAlign="center" py={3}>
         Calls History
       </Typography>
       <CallsFilterBar />
-      <Box overflow="auto" minWidth={400} paddingTop={5} maxHeight="80vh">
+      <Box overflow="auto" minWidth={400} paddingTop={5}>
+        {loading && <Spinner />}
+        {noCalls && <EmptyCallListItem />}
         <Accordion.Root defaultSelected={1}>
-          {Object.keys(groupedCalls).map((day: string, index: number) => (
+          {differentDates.map((day: string, index: number) => (
             <Accordion.Item id={index} key={day}>
               <Accordion.Header>
                 <Flex justifyContent="center" alignItems="center">
-                  <Typography variant="heading2" textAlign="center" color="grey" paddingTop={2}>
+                  <Typography
+                    variant="heading2"
+                    textAlign="center"
+                    color="grey"
+                    paddingTop={2}
+                    cursor="pointer"
+                  >
                     {day}
                   </Typography>
                   <ArrowDownFilled size={20} />
@@ -137,8 +163,8 @@ export const CallsListPage = () => {
           ))}
         </Accordion.Root>
       </Box>
-      {Array.isArray(calls) && calls.length && (
-        <Box>
+      {Array.isArray(sortedCalls) && !!sortedCalls.length && (
+        <Box maxHeight="10%">
           <PaginationWrapper>
             <Pagination
               activePage={activePage}
@@ -147,10 +173,11 @@ export const CallsListPage = () => {
               onPageSizeChange={handlePageSizeChange}
               defaultPageSize={CALLS_PER_PAGE}
               recordsTotalCount={filteredCalls.length}
+              pageSizeOptions={pageSizeOptions}
             />
           </PaginationWrapper>
         </Box>
       )}
-    </>
+    </Box>
   );
 };
diff --git a/phone-test/src/pages/Login/Login.tsx b/phone-test/src/pages/Login/Login.tsx
index 05d1524..66920ab 100644
--- a/phone-test/src/pages/Login/Login.tsx
+++ b/phone-test/src/pages/Login/Login.tsx
@@ -1,7 +1,12 @@
 import { Flex, Icon, LogoMarkMono, Spacer } from '@aircall/tractor';
 import { LoginForm } from './LoginForm';
+import { useAuth } from 'hooks/useAuth';
+import Spinner from 'components/spinner/spinner';
 
 export const LoginPage = () => {
+  const { status } = useAuth();
+
+  if (status === 'Loading') return <Spinner />;
   return (
     <Spacer p={5} h="100%" direction="vertical" justifyContent="center" fluid space={5}>
       <Flex alignItems="center">
diff --git a/phone-test/src/pages/Login/LoginForm.tsx b/phone-test/src/pages/Login/LoginForm.tsx
index 4ac9246..f3a80ea 100644
--- a/phone-test/src/pages/Login/LoginForm.tsx
+++ b/phone-test/src/pages/Login/LoginForm.tsx
@@ -7,12 +7,11 @@ import {
   Grid,
   Icon,
   SpinnerOutlined,
-  TextFieldInput,
-  toasts
+  TextFieldInput
 } from '@aircall/tractor';
 
 import { useAuth } from '../../hooks/useAuth';
-import { NotificationVariants } from '@aircall/tractor/es/components/Notification';
+import { useCustomToast } from 'hooks/useCustomToast';
 
 const LOGIN_REJECTED = 'LOGIN_REJECTED';
 
@@ -20,15 +19,13 @@ export const LoginForm = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { login, status } = useAuth();
+  const { showToast, removeToast } = useCustomToast();
 
   const onSubmit = async (email: string, password: string) => {
     try {
-      // throw new Error('Test Error');
       await login({ username: email, password });
       removeToast(LOGIN_REJECTED);
     } catch (error) {
-      console.log(error);
-
       showToast({
         id: LOGIN_REJECTED,
         message: 'Invalid email or password',
@@ -66,7 +63,7 @@ export const LoginForm = () => {
         </FormItem>
         <FormItem>
           <Button block type="submit">
-            {status === "Loading" ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
+            {status === 'Loading' ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
           </Button>
         </FormItem>
       </Grid>
@@ -74,12 +71,12 @@ export const LoginForm = () => {
   );
 };
 
+/* It doesn't work without hooks
 function removeToast(LOGIN_REJECTED: string) {
   toasts.removeToast(LOGIN_REJECTED);
 }
 
 function showToast(arg0: { id: any; message: string; variant: NotificationVariants }) {
-  console.log('showToast');
-  
   toasts.showToast(arg0);
 }
+*/

From 5eb86d4d3fda5e0f327975ce017c1563a6b9bc53 Mon Sep 17 00:00:00 2001
From: Oscar C <oscar8x@yahoo.es>
Date: Mon, 23 Oct 2023 17:43:24 +0200
Subject: [PATCH 16/18] e2e test improvements

---
 phone-test/cypress/e2e/calls.cy.ts   | 9 +++++++--
 phone-test/package.json              | 6 +++---
 phone-test/src/pages/CallDetails.tsx | 6 +++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/phone-test/cypress/e2e/calls.cy.ts b/phone-test/cypress/e2e/calls.cy.ts
index 234ae03..b96fc56 100644
--- a/phone-test/cypress/e2e/calls.cy.ts
+++ b/phone-test/cypress/e2e/calls.cy.ts
@@ -1,18 +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 calls page', () => {
+  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(4000);
+    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');
   });
 });
diff --git a/phone-test/package.json b/phone-test/package.json
index 7aa181c..65e039d 100644
--- a/phone-test/package.json
+++ b/phone-test/package.json
@@ -24,10 +24,10 @@
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "cypress": "^13.3.2",
-    "typescript": "^4.4.2",
     "husky": "^8.0.2",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "lint-staged": "^13.0.3"
+    "typescript": "^4.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -64,4 +64,4 @@
       "prettier --write"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index 392efff..05b76a0 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -49,11 +49,11 @@ export const CallDetailsPage = () => {
 
   return (
     <>
-      <Typography variant="displayM" textAlign="center" py={3}>
+      <Typography variant="displayM" textAlign="center" py={3} className="title">
         Calls Details
       </Typography>
-      <Box overflowY="auto" bg="black-a30" p={4} borderRadius={10}>
-        <div>{`ID: ${call.id}`}</div>
+      <Box overflowY="auto" bg="black-a30" p={4} borderRadius={16}>
+        <div id="callid">{`ID: ${call.id}`}</div>
         <div>{`Type: ${call.call_type}`}</div>
         <div>{`Created at: ${formatDate(call.created_at)}`}</div>
         <div>{`Direction: ${call.direction}`}</div>

From ca8740e218b29a3ab821d60b3b517081e7689211 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 21:48:37 +0200
Subject: [PATCH 17/18] Visual improvements and some fixes

---
 .../src/components/NotFoundPage/NotFound.tsx  | 50 +++++++++------
 .../components/NotFoundPage/notFound.style.ts | 23 -------
 .../EmptyCallListItem/EmptyCallListItem.tsx   |  4 +-
 .../components/routing/ProtectedLayout.tsx    |  2 +-
 .../src/components/routing/ProtectedRoute.tsx |  2 +-
 phone-test/src/components/spinner/spinner.tsx | 44 +++++++++++++
 phone-test/src/contexts/AuthContext.tsx       | 18 +++---
 .../src/hooks/{useAuth.tsx => useAuth.ts}     |  0
 phone-test/src/hooks/useCustomToast.ts        | 17 +++++
 ...useLocalStorage.tsx => useLocalStorage.ts} |  0
 phone-test/src/pages/CallDetails.tsx          | 35 +++++++----
 phone-test/src/pages/CallsList.tsx            | 63 +++++++++++++------
 phone-test/src/pages/Login/Login.tsx          |  5 ++
 phone-test/src/pages/Login/LoginForm.tsx      | 15 ++---
 14 files changed, 186 insertions(+), 92 deletions(-)
 delete mode 100644 phone-test/src/components/NotFoundPage/notFound.style.ts
 create mode 100644 phone-test/src/components/spinner/spinner.tsx
 rename phone-test/src/hooks/{useAuth.tsx => useAuth.ts} (100%)
 create mode 100644 phone-test/src/hooks/useCustomToast.ts
 rename phone-test/src/hooks/{useLocalStorage.tsx => useLocalStorage.ts} (100%)

diff --git a/phone-test/src/components/NotFoundPage/NotFound.tsx b/phone-test/src/components/NotFoundPage/NotFound.tsx
index 042040c..1811680 100644
--- a/phone-test/src/components/NotFoundPage/NotFound.tsx
+++ b/phone-test/src/components/NotFoundPage/NotFound.tsx
@@ -1,18 +1,32 @@
-  import { Flex } from '@aircall/tractor';
-  import { ErrorImage, ErrorText, ErrorTitle } from './notFound.style';
-  import { Link } from 'react-router-dom';
-  
-  export const NotFoundPage = () => {
-    return (
-      <Flex flexDirection="column" alignItems="center" justifyContent="center" minHeight="60vh">
-        <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" style={{ fontSize: '1.5rem', textDecoration: 'underline' }}> Go to calls page </Link>
-      </Flex>
-    );
-  };
-  
\ No newline at end of file
+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>
+  );
+};
diff --git a/phone-test/src/components/NotFoundPage/notFound.style.ts b/phone-test/src/components/NotFoundPage/notFound.style.ts
deleted file mode 100644
index 61be661..0000000
--- a/phone-test/src/components/NotFoundPage/notFound.style.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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'
-  max-width: '50ch';
-`;
-
-export const ErrorImage = styled.img`
-  max-width: '400px';
-  margin-bottom: '2rem';
-`;
-
-export const ErrorLink = styled(Link)`
-font-size: '1.5rem';
-text-decoration: 'underline';
-`;
\ No newline at end of file
diff --git a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
index e3a3a0b..fe8434a 100644
--- a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
+++ b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
@@ -1,8 +1,8 @@
-import { Box } from '@aircall/tractor';
+import { Box, Typography } from '@aircall/tractor';
 
 const EmptyCallListItem = () => {
   return <Box>
-    <p>No calls found</p>
+    <Typography variant="displayS2" textAlign="center">No calls found</Typography>
   </Box>;
 };
 
diff --git a/phone-test/src/components/routing/ProtectedLayout.tsx b/phone-test/src/components/routing/ProtectedLayout.tsx
index 90b23af..b284245 100644
--- a/phone-test/src/components/routing/ProtectedLayout.tsx
+++ b/phone-test/src/components/routing/ProtectedLayout.tsx
@@ -12,7 +12,7 @@ export const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
 
   return (
     <Box p={4}>
-      <Flex justifyContent="space-between" alignItems="center">
+      <Flex justifyContent="space-between" alignItems="center" maxHeight="10vh">
         <Link to="/calls">
           <img src={logo} alt="Aircall" width="32px" height="32px" />
         </Link>
diff --git a/phone-test/src/components/routing/ProtectedRoute.tsx b/phone-test/src/components/routing/ProtectedRoute.tsx
index 022aa48..dab2137 100644
--- a/phone-test/src/components/routing/ProtectedRoute.tsx
+++ b/phone-test/src/components/routing/ProtectedRoute.tsx
@@ -11,7 +11,7 @@ export const ProtectedRoute = () => {
   useEffect(() => {
     if (status !== 'Idle') return;
     if (!user && window.location.pathname !== '/login') navigate('/login');
-  }, [user, status]);
+  }, [user, status, navigate]);
 
   return (
     <ProtectedLayout>
diff --git a/phone-test/src/components/spinner/spinner.tsx b/phone-test/src/components/spinner/spinner.tsx
new file mode 100644
index 0000000..9bfc140
--- /dev/null
+++ b/phone-test/src/components/spinner/spinner.tsx
@@ -0,0 +1,44 @@
+import { Flex } from '@aircall/tractor';
+import styled from 'styled-components';
+
+const Spinner = () => (
+  <Flex justifyContent="center" alignItems="center" marginTop={10}>
+    <StyledSpinner viewBox="0 0 40 40">
+      <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
+    </StyledSpinner>
+  </Flex>
+);
+
+const StyledSpinner = styled.svg`
+  animation: rotate 2s linear infinite;
+  width: 50px;
+  height: 50px;
+
+  & .path {
+    stroke: #00b388;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+
+export default Spinner;
diff --git a/phone-test/src/contexts/AuthContext.tsx b/phone-test/src/contexts/AuthContext.tsx
index 54724d6..6d745c8 100644
--- a/phone-test/src/contexts/AuthContext.tsx
+++ b/phone-test/src/contexts/AuthContext.tsx
@@ -7,7 +7,6 @@ import { LOGIN } from 'gql/mutations';
 import type { AuthContextType, State } from './AuthContext.d';
 import authReducer from 'reducers/authReducer';
 import { USER_ME } from 'gql/queries/user';
-import { set } from 'date-fns';
 
 const defaultState: State = {
   user: null,
@@ -32,9 +31,10 @@ export const AuthProvider = () => {
 
   const { me: user } = data || {};
 
+  // There is no "accessToken" in dependency array because I only want to set the status at the beginning
   useEffect(() => {
     if (!accessToken) {
-      dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
+       dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
       console.log('No access token');
       return;
     }
@@ -42,7 +42,7 @@ export const AuthProvider = () => {
 
   useEffect(() => {
     if (loading) return;
-    
+
     if (error) {
       dispatch({ type: 'STATUS', payload: { status: 'Idle' } });
       if (accessToken) {
@@ -57,7 +57,7 @@ export const AuthProvider = () => {
       dispatch({ type: 'LOGIN', payload: { user: user.username } });
       if (window.location.pathname === '/login') navigate('/calls');
     }
-  }, [user, loading, error]);
+  }, [user, loading, error, accessToken, setAccessToken, setRefreshToken, navigate, refreshToken]);
 
   // call this function when you want to authenticate the user
   const login = useCallback(
@@ -74,21 +74,21 @@ export const AuthProvider = () => {
           navigate('/calls');
         },
         onError: (error: any) => {
-          console.error('error', error);
           dispatch({ type: 'STATUS', payload: { status: 'Error' } });
         }
       });
     },
-    [loginMutation]
+    [loginMutation, navigate, setAccessToken, setRefreshToken]
   );
 
   // call this function to sign out logged in user
   const logout = useCallback(() => {
+    console.log('logout');
     setAccessToken(undefined);
     setRefreshToken(undefined);
     dispatch({ type: 'LOGOUT' });
     navigate('/login', { replace: true });
-  }, []);
+  }, [navigate, setAccessToken, setRefreshToken]);
 
   const value = useMemo(() => {
     return {
@@ -99,7 +99,9 @@ export const AuthProvider = () => {
   }, [login, logout, state]);
 
   return (
-    <AuthContext.Provider value={value}><Outlet /></AuthContext.Provider>
+    <AuthContext.Provider value={value}>
+      <Outlet />
+    </AuthContext.Provider>
   );
 };
 
diff --git a/phone-test/src/hooks/useAuth.tsx b/phone-test/src/hooks/useAuth.ts
similarity index 100%
rename from phone-test/src/hooks/useAuth.tsx
rename to phone-test/src/hooks/useAuth.ts
diff --git a/phone-test/src/hooks/useCustomToast.ts b/phone-test/src/hooks/useCustomToast.ts
new file mode 100644
index 0000000..adacd71
--- /dev/null
+++ b/phone-test/src/hooks/useCustomToast.ts
@@ -0,0 +1,17 @@
+import { useToast } from "@aircall/tractor";
+import { NotificationVariants } from "@aircall/tractor/es/components/Notification";
+
+export const useCustomToast = () => {
+    const toast = useToast();
+  
+    const showToast = (arg0: { id: string; message: string; variant: NotificationVariants }) => {
+      toast?.showToast(arg0);
+    };
+  
+    const removeToast = (LOGIN_REJECTED: string) => {
+      toast?.removeToast(LOGIN_REJECTED);
+    };
+  
+    return { showToast, removeToast };
+  };
+
diff --git a/phone-test/src/hooks/useLocalStorage.tsx b/phone-test/src/hooks/useLocalStorage.ts
similarity index 100%
rename from phone-test/src/hooks/useLocalStorage.tsx
rename to phone-test/src/hooks/useLocalStorage.ts
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index 05b76a0..3b1f146 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -5,6 +5,8 @@ import { ArchiveFilled, ArrowLeftFilled, Box, Button, Spacer, Typography } from
 import { formatDate, formatDuration } from 'helpers/dates';
 import { ARCHIVE_CALL } from 'gql/mutations/archive';
 import { useEffect } from 'react';
+import Spinner from 'components/spinner/spinner';
+import { useCustomToast } from 'hooks/useCustomToast';
 
 export const CallDetailsPage = () => {
   const { callId } = useParams();
@@ -13,6 +15,8 @@ export const CallDetailsPage = () => {
       id: callId
     }
   });
+  const { showToast } = useCustomToast();
+
   const [archiveMutation] = useMutation(ARCHIVE_CALL);
 
   // Refecth data when tab is visible
@@ -29,22 +33,29 @@ export const CallDetailsPage = () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, [refetch]);
-  
-  if (loading) return <p>Loading call details...</p>;
-  if (error) return <p>ERROR</p>;
+
+  if (loading) return <Spinner />;
+  if (error) {
+    showToast({
+      id: 'CALL_DETAILS_ERROR',
+      message: 'There was an error fetching the call details',
+      variant: 'error'
+    });
+    console.error(error.message);
+    return <></>;
+  }
 
   const { call } = data;
 
   const handleArchive = async () => {
-      archiveMutation({
-        variables: {
-          id: callId
-        },
-        onError: (error) => {
-          console.log(error);
-        }
-      });
-
+    archiveMutation({
+      variables: {
+        id: callId
+      },
+      onError: error => {
+        console.log(error);
+      }
+    });
   };
 
   return (
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index 5db652f..b80f73d 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -7,13 +7,13 @@ import {
   Box,
   Pagination,
   Accordion,
-  SpinnerOutlined,
   Flex,
-  ArrowDownFilled
+  ArrowDownFilled,
 } from '@aircall/tractor';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
 import { CallListItem, CallsFilterBar, EmptyCallListItem } from '../components/calls';
+import Spinner from 'components/spinner/spinner';
 
 export const PaginationWrapper = styled.div`
   > div {
@@ -29,19 +29,34 @@ const CALLS_PER_PAGE = 25;
 export const CallsListPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  const pageQueryParams = searchParams.get('page');
+  const activePage = parseInt(searchParams.get('page') || '1');
   const directionQueryParams = searchParams.get('dir') || '';
   const typeQueryParams = searchParams.get('type');
-  const callsPerPage = parseInt(searchParams.get('cpe') || CALLS_PER_PAGE.toString());
   const [filteredCalls, setFilteredCalls] = useState<Call[]>([]);
-  const activePage = parseInt(pageQueryParams || '1');
+
+  const pageSizeOptions = [
+    { value: CALLS_PER_PAGE, label: CALLS_PER_PAGE.toString() },
+    { value: 50, label: '50' },
+    { value: 100, label: '100' }
+  ];
+
+  const pageSizeValidator = () => {
+    const pageSize = parseInt(searchParams.get('cpe') || '');
+    const sizeExists = pageSizeOptions.some(option => option.value === pageSize);
+
+    return sizeExists ? pageSize : CALLS_PER_PAGE;
+  };
+
+  // Handle page size (manually changed in URL) to avoid big requests (if they're not handled on the server side)
+  // and possible DoS attacks.
+  const callsPerPage = pageSizeValidator();
 
   // Adding this to achieve pagination on the client side. Ideally, this should be done on the server side
   // by using filter and sort variables in the query.
   const { loading, error, data } = useQuery(PAGINATED_CALLS, {
     variables: {
       offset: 0,
-      limit: 1000 
+      limit: 1000
     }
   });
 
@@ -72,8 +87,8 @@ export const CallsListPage = () => {
     });
   }, [filteredCalls]);
 
-  const groupedCalls = sortedCalls
-    .reduce((acc: { [key: string]: Call[] }, call: Call, index: number) => {
+  const groupedCalls = sortedCalls.reduce(
+    (acc: { [key: string]: Call[] }, call: Call, index: number) => {
       if (index < (activePage - 1) * callsPerPage || index >= activePage * callsPerPage) return acc;
       const date = new Date(call.created_at);
       const day = date.toLocaleDateString();
@@ -83,11 +98,11 @@ export const CallsListPage = () => {
         acc[day].push(call);
       }
       return acc;
-    }, {});
+    },
+    {}
+  );
 
-  if (loading) return <SpinnerOutlined />;
   if (error) return <p>ERROR</p>;
-  if (!data) return <EmptyCallListItem />;
 
   const handlePageChange = (page: number) => {
     if (page === activePage) return;
@@ -108,19 +123,30 @@ export const CallsListPage = () => {
     });
   };
 
+  const differentDates = Object.keys(groupedCalls);
+  const noCalls = (!differentDates.length || !data) && !loading;
+
   return (
-    <>
+    <Box maxHeight="90vh">
       <Typography variant="displayM" textAlign="center" py={3}>
         Calls History
       </Typography>
       <CallsFilterBar />
-      <Box overflow="auto" minWidth={400} paddingTop={5} maxHeight="80vh">
+      <Box overflow="auto" minWidth={400} paddingTop={5}>
+        {loading && <Spinner />}
+        {noCalls && <EmptyCallListItem />}
         <Accordion.Root defaultSelected={1}>
-          {Object.keys(groupedCalls).map((day: string, index: number) => (
+          {differentDates.map((day: string, index: number) => (
             <Accordion.Item id={index} key={day}>
               <Accordion.Header>
                 <Flex justifyContent="center" alignItems="center">
-                  <Typography variant="heading2" textAlign="center" color="grey" paddingTop={2}>
+                  <Typography
+                    variant="heading2"
+                    textAlign="center"
+                    color="grey"
+                    paddingTop={2}
+                    cursor="pointer"
+                  >
                     {day}
                   </Typography>
                   <ArrowDownFilled size={20} />
@@ -137,8 +163,8 @@ export const CallsListPage = () => {
           ))}
         </Accordion.Root>
       </Box>
-      {Array.isArray(calls) && calls.length && (
-        <Box>
+      {Array.isArray(sortedCalls) && !!sortedCalls.length && (
+        <Box maxHeight="10%">
           <PaginationWrapper>
             <Pagination
               activePage={activePage}
@@ -147,10 +173,11 @@ export const CallsListPage = () => {
               onPageSizeChange={handlePageSizeChange}
               defaultPageSize={CALLS_PER_PAGE}
               recordsTotalCount={filteredCalls.length}
+              pageSizeOptions={pageSizeOptions}
             />
           </PaginationWrapper>
         </Box>
       )}
-    </>
+    </Box>
   );
 };
diff --git a/phone-test/src/pages/Login/Login.tsx b/phone-test/src/pages/Login/Login.tsx
index 05d1524..66920ab 100644
--- a/phone-test/src/pages/Login/Login.tsx
+++ b/phone-test/src/pages/Login/Login.tsx
@@ -1,7 +1,12 @@
 import { Flex, Icon, LogoMarkMono, Spacer } from '@aircall/tractor';
 import { LoginForm } from './LoginForm';
+import { useAuth } from 'hooks/useAuth';
+import Spinner from 'components/spinner/spinner';
 
 export const LoginPage = () => {
+  const { status } = useAuth();
+
+  if (status === 'Loading') return <Spinner />;
   return (
     <Spacer p={5} h="100%" direction="vertical" justifyContent="center" fluid space={5}>
       <Flex alignItems="center">
diff --git a/phone-test/src/pages/Login/LoginForm.tsx b/phone-test/src/pages/Login/LoginForm.tsx
index 4ac9246..f3a80ea 100644
--- a/phone-test/src/pages/Login/LoginForm.tsx
+++ b/phone-test/src/pages/Login/LoginForm.tsx
@@ -7,12 +7,11 @@ import {
   Grid,
   Icon,
   SpinnerOutlined,
-  TextFieldInput,
-  toasts
+  TextFieldInput
 } from '@aircall/tractor';
 
 import { useAuth } from '../../hooks/useAuth';
-import { NotificationVariants } from '@aircall/tractor/es/components/Notification';
+import { useCustomToast } from 'hooks/useCustomToast';
 
 const LOGIN_REJECTED = 'LOGIN_REJECTED';
 
@@ -20,15 +19,13 @@ export const LoginForm = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { login, status } = useAuth();
+  const { showToast, removeToast } = useCustomToast();
 
   const onSubmit = async (email: string, password: string) => {
     try {
-      // throw new Error('Test Error');
       await login({ username: email, password });
       removeToast(LOGIN_REJECTED);
     } catch (error) {
-      console.log(error);
-
       showToast({
         id: LOGIN_REJECTED,
         message: 'Invalid email or password',
@@ -66,7 +63,7 @@ export const LoginForm = () => {
         </FormItem>
         <FormItem>
           <Button block type="submit">
-            {status === "Loading" ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
+            {status === 'Loading' ? <Icon component={SpinnerOutlined} spin /> : 'Login'}
           </Button>
         </FormItem>
       </Grid>
@@ -74,12 +71,12 @@ export const LoginForm = () => {
   );
 };
 
+/* It doesn't work without hooks
 function removeToast(LOGIN_REJECTED: string) {
   toasts.removeToast(LOGIN_REJECTED);
 }
 
 function showToast(arg0: { id: any; message: string; variant: NotificationVariants }) {
-  console.log('showToast');
-  
   toasts.showToast(arg0);
 }
+*/

From 33a77aaf621f4cd6557203ce790de8a569199469 Mon Sep 17 00:00:00 2001
From: Oscar Cortes <oscar8x@gmail.com>
Date: Mon, 23 Oct 2023 22:13:46 +0200
Subject: [PATCH 18/18] Visual improvements

---
 .../EmptyCallListItem/EmptyCallListItem.tsx      |  9 ---------
 .../src/components/calls/EmptyItem/EmptyItem.tsx | 16 ++++++++++++++++
 phone-test/src/components/calls/index.ts         |  2 +-
 phone-test/src/pages/CallDetails.tsx             |  5 ++++-
 phone-test/src/pages/CallsList.tsx               |  5 +++--
 5 files changed, 24 insertions(+), 13 deletions(-)
 delete mode 100644 phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
 create mode 100644 phone-test/src/components/calls/EmptyItem/EmptyItem.tsx

diff --git a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx b/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
deleted file mode 100644
index fe8434a..0000000
--- a/phone-test/src/components/calls/EmptyCallListItem/EmptyCallListItem.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Box, Typography } from '@aircall/tractor';
-
-const EmptyCallListItem = () => {
-  return <Box>
-    <Typography variant="displayS2" textAlign="center">No calls found</Typography>
-  </Box>;
-};
-
-export default EmptyCallListItem;
diff --git a/phone-test/src/components/calls/EmptyItem/EmptyItem.tsx b/phone-test/src/components/calls/EmptyItem/EmptyItem.tsx
new file mode 100644
index 0000000..7576db0
--- /dev/null
+++ b/phone-test/src/components/calls/EmptyItem/EmptyItem.tsx
@@ -0,0 +1,16 @@
+import { Box, Typography } from '@aircall/tractor';
+
+interface EmptyCallListItemProps {
+  text: string;
+}
+const EmptyCallListItem = ({ text }: EmptyCallListItemProps) => {
+  return (
+    <Box>
+      <Typography variant="displayS2" textAlign="center">
+        {text}
+      </Typography>
+    </Box>
+  );
+};
+
+export default EmptyCallListItem;
diff --git a/phone-test/src/components/calls/index.ts b/phone-test/src/components/calls/index.ts
index dce2b0c..a138957 100644
--- a/phone-test/src/components/calls/index.ts
+++ b/phone-test/src/components/calls/index.ts
@@ -1,3 +1,3 @@
 export { default as CallListItem } from './CallListItem/CallListItem';
 export { default as CallsFilterBar } from './CallsFilterBar/CallsFilterBar';
-export { default as EmptyCallListItem } from './EmptyCallListItem/EmptyCallListItem';
\ No newline at end of file
+export { default as EmptyCallListItem } from './EmptyItem/EmptyItem';
\ No newline at end of file
diff --git a/phone-test/src/pages/CallDetails.tsx b/phone-test/src/pages/CallDetails.tsx
index e4d8802..6aaa3db 100644
--- a/phone-test/src/pages/CallDetails.tsx
+++ b/phone-test/src/pages/CallDetails.tsx
@@ -7,6 +7,7 @@ import { ARCHIVE_CALL } from 'gql/mutations/archive';
 import { useEffect } from 'react';
 import { useCustomToast } from 'hooks/useCustomToast';
 import Spinner from 'components/spinner/spinner';
+import { EmptyCallListItem } from 'components/calls';
 
 export const CallDetailsPage = () => {
   const { callId } = useParams();
@@ -21,6 +22,7 @@ export const CallDetailsPage = () => {
   // Refecth data when tab is visible
   useEffect(() => {
     const handleVisibilityChange = () => {
+      console.log('visibility change');
       if (!document.hidden) {
         refetch();
       }
@@ -45,7 +47,8 @@ export const CallDetailsPage = () => {
   }
 
   const { call } = data;
-
+  if (!call) return <EmptyCallListItem text="Call info not found" />;
+  
   const handleArchive = async () => {
     archiveMutation({
       variables: {
diff --git a/phone-test/src/pages/CallsList.tsx b/phone-test/src/pages/CallsList.tsx
index b80f73d..0963d95 100644
--- a/phone-test/src/pages/CallsList.tsx
+++ b/phone-test/src/pages/CallsList.tsx
@@ -12,8 +12,9 @@ import {
 } from '@aircall/tractor';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
-import { CallListItem, CallsFilterBar, EmptyCallListItem } from '../components/calls';
+import { CallListItem, CallsFilterBar } from '../components/calls';
 import Spinner from 'components/spinner/spinner';
+import EmptyItem from 'components/calls/EmptyItem/EmptyItem';
 
 export const PaginationWrapper = styled.div`
   > div {
@@ -134,7 +135,7 @@ export const CallsListPage = () => {
       <CallsFilterBar />
       <Box overflow="auto" minWidth={400} paddingTop={5}>
         {loading && <Spinner />}
-        {noCalls && <EmptyCallListItem />}
+        {noCalls && <EmptyItem text="There's no calls"/>}
         <Accordion.Root defaultSelected={1}>
           {differentDates.map((day: string, index: number) => (
             <Accordion.Item id={index} key={day}>