Feat: Add authentication logic, improve /calls page, add filters and archive features, and new tests with jest and cypress

[danielmarcano]

Description

This PR includes a series of changes that can be summarized in a couple of sections:

New Features

Apollo Client

• We can now integrate subscriptions, thanks to the addition of subscriptions-transport-ws package, and the wsLink.ts

Routing

• Protected routes can now be wrapped with ProtectedRoute, which will redirect users to the /login page by default if they are not authenticated
• Public routes can now be wrapped with PublicRoute, which will redirect users to the /calls page by default if they are already authenticated
• Users will now be redirected to the /login or the /calls page if they visit a non-existent page

Authentication

• The access_token will now be refreshed while the refresh_token is still active, through the new tokenExpiredLink.ts, authLink.ts, and refreshTokenV2 mutation

ProtectedLayout:

• Users can now see their username.
• Users can now logout correctly. On logout, the authorization tokens are removed from the local storage, and the ApolloClient cache is cleared, which prevents the cache from leaking and mixing-up sensitive information between different user accounts.

CallsListPage:

• Users can now change the page size
• Users can now archive calls in real-time, and their changes will be reflected across tabs and browsers
• Users can now filter through calls. Right now, the filtering capabilities are limited to the last 200 calls, since the paginatedCalls query does not support filters yet, and so the calls are being filtered on the front-end. Thus, the pagination is hidden when any of the filters is active. There's three filters: "Call Type," "Call Direction," and "Call Status."
• Calls are now grouped by date, in descending order

CallDetailsPage:

• Users will now see an error message if the call information does not exist.

LoginPage:

• Users will now see a toast error message if they try to submit the login form without inserting:
  • A valid email
  • A valid password (any text of at least 1 digit)

helpers/dates.tsx:

• A new customFormat optional property has been passed to formatDate function, so that we can reuse it

Refactors

/ApolloClientProvider

• The existing @apollo/client code has been moved from App.tsx to /ApolloClientProvider and placed within differentiated files that make it easier to extend the configuration and logic.

helpers/localStorage.tsand constants/localStorageKeys.ts

The existing hooks/useLocalStorage.ts file has been moved to helpers/localStorage.ts, and the custom hook has been split in the following two regular functions:

• getLocalStorageItem
• addOrRemoveLocalStorageItem

This was made to maintain a "single source of truth" for storing and retrieving values from the localStorage that could work anywhere, including regular (non-custom-hook) functions.

The constants/localStorageKeys file has been created to maintain all localStorage's keys centralized in a single place, to improve maintainability and remove hard-coded values.

constants/paths.ts

This file has been created to maintain all paths centralized in a single place, to improve maintainability and remove hard-coded values.

useAuth.ts

Some of its code has changed, in particular:

• The user state has been removed, as having it here was not helpful, as it was only being set when the login mutation was executed, so reloading the page while being authenticated left you with an undefined user.
• The status is now being returned within the AuthProvider values, and it is ultimately used to determine whether to redirect users or not when they visit a public or a private page, depending on whether they are authenticated

Testing

The following unit and end-to-end tests have been added:

• CallsListPage and CallDetailsPage: cypress/e2e/calls.cy.ts
• LoginPage: cypress/e2e/login.cy.ts
• helpers/dates.tsx: helpers/dates.spec.ts

Documentation:

• A NEXT-DEVELOPMENT-STEPS.md file has been created, showcasing some of our possible next steps before deploying the app to production
• The phone-test/README.md file has been updated with the new yarn e2e and yarn cypress:open scripts

Video:

archived-in-real-time-demo.mov