Removed borders on workspace container (#171)

* Wip

* Added mocks on main App story and fixed small mock bugs

* Removed borders on WorkspaceContainer

front/src/__stories__/App.stories.tsx

@@ -2,32 +2,20 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from '@emotion/react';
 import { MemoryRouter } from 'react-router-dom';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client';
 
 import App from '../App';
 import { FullHeightStorybookLayout } from '../testing/FullHeightStorybookLayout';
 import { lightTheme } from '../layout/styles/themes';
+import { mockedClient } from '../testing/mockedClient';
+import { graphqlMocks } from '../testing/graphqlMocks';
+import { mockedUserJWT } from '../testing/mock-data/jwt';
 
 const meta: Meta<typeof App> = {
   title: 'App/App',
   component: App,
 };
 
-const mockedClient = new ApolloClient({
-  uri: process.env.REACT_APP_API_URL,
-  cache: new InMemoryCache(),
-  defaultOptions: {
-    watchQuery: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'all',
-    },
-    query: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'all',
-    },
-  },
-});
-
 export default meta;
 type Story = StoryObj<typeof App>;
 
@@ -49,10 +37,13 @@ export const Default: Story = {
   render,
   loaders: [
     async () => ({
-      accessTokenStored: await window.localStorage.setItem(
+      accessTokenStored: window.localStorage.setItem(
         'accessToken',
-        'test-token',
+        mockedUserJWT,
       ),
     }),
   ],
+  parameters: {
+    msw: graphqlMocks,
+  },
 };

front/src/layout/navbar/WorkspaceContainer.tsx

@@ -13,8 +13,6 @@ const StyledContainer = styled.button`
   user-select: none;
   border: 0;
   background: inherit;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  border-radius: ${(props) => props.theme.spacing(1)};
   padding: ${(props) => props.theme.spacing(2)};
   margin-left: ${(props) => props.theme.spacing(1)};
   align-self: flex-start;

front/src/services/api/users/index.tsx

@@ -2,7 +2,7 @@ import { QueryResult, gql, useQuery } from '@apollo/client';
 import { GraphqlQueryUser } from '../../../interfaces/entities/user.interface';
 
 export const GET_CURRENT_USER = gql`
-  query getCurrentUser($uuid: String) {
+  query GetCurrentUser($uuid: String) {
     users: findManyUser(where: { id: { equals: $uuid } }) {
       id
       email

front/src/testing/graphqlMocks.ts

@@ -0,0 +1,84 @@
+import { graphql } from 'msw';
+import { filterAndSortData } from './mock-data';
+import { GraphqlQueryCompany } from '../interfaces/entities/company.interface';
+import { mockedCompaniesData } from './mock-data/companies';
+import { GraphqlQueryUser } from '../interfaces/entities/user.interface';
+import { mockedUsersData } from './mock-data/users';
+import { mockedPeopleData } from './mock-data/people';
+import { GraphqlQueryPerson } from '../interfaces/entities/person.interface';
+
+export const graphqlMocks = [
+  graphql.query('GetCompanies', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
+      mockedCompaniesData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        companies: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('SearchCompanyQuery', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
+      mockedCompaniesData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        searchResults: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('SearchUserQuery', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryUser>(
+      mockedUsersData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        searchResults: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('GetCurrentUser', (req, res, ctx) => {
+    const customWhere = {
+      ...req.variables.where,
+      id: {
+        equals: req.variables.uuid,
+      },
+    };
+
+    const returnedMockedData = filterAndSortData<GraphqlQueryUser>(
+      mockedUsersData,
+      customWhere,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    console.log({ returnedMockedData });
+    return res(
+      ctx.data({
+        users: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('GetPeople', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryPerson>(
+      mockedPeopleData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        people: returnedMockedData,
+      }),
+    );
+  }),
+];

front/src/testing/mock-data/companies.ts

@@ -67,7 +67,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     __typename: 'companies',
   },
   {
-    id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
+    id: '9d162de6-cfbf-4156-a790-e39854dcd4ef',
     domainName: 'sequoia.com',
     name: 'Sequoia',
     createdAt: '2023-04-26T10:09:25.656555+00:00',

front/src/testing/mock-data/index.ts

@@ -2,10 +2,12 @@ import {
   CompanyOrderByWithRelationInput,
   PersonOrderByWithRelationInput,
   StringFilter,
+  UserOrderByWithRelationInput,
 } from '../../generated/graphql';
 import { Company } from '../../interfaces/entities/company.interface';
 import { BoolExpType } from '../../interfaces/entities/generic.interface';
 import { Person } from '../../interfaces/entities/person.interface';
+import { User } from '../../interfaces/entities/user.interface';
 
 function filterData<DataT>(
   data: Array<DataT>,
@@ -67,13 +69,19 @@ function filterData<DataT>(
 
 export function filterAndSortData<DataT>(
   data: Array<DataT>,
-  where: BoolExpType<Company> | BoolExpType<Person>,
+  where?: BoolExpType<Company> | BoolExpType<Person> | BoolExpType<User>,
-  orderBy: Array<
+  orderBy?: Array<
-    PersonOrderByWithRelationInput & CompanyOrderByWithRelationInput
+    PersonOrderByWithRelationInput &
+      CompanyOrderByWithRelationInput &
+      UserOrderByWithRelationInput
   >,
-  limit: number,
+  limit?: number,
 ): Array<DataT> {
-  let filteredData = filterData<DataT>(data, where);
+  let filteredData = data;
+
+  if (where) {
+    filteredData = filterData<DataT>(data, where);
+  }
 
   if (orderBy) {
     const firstOrderBy = orderBy[0];
@@ -101,5 +109,6 @@ export function filterAndSortData<DataT>(
   if (limit) {
     filteredData = filteredData.slice(0, limit);
   }
+
   return filteredData;
 }

front/src/testing/mock-data/jwt.ts

@@ -0,0 +1,2 @@
+export const mockedUserJWT =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhc2QiLCJuYW1lIjoiSm9obiBEb2UiLCJpYXQiOjE1MTYyMzkwMjIsInVzZXJJZCI6IjdkZmJjM2Y3LTZlNWUtNDEyOC05NTdlLThkODY4MDhjZGY2YiJ9.eLVZXaaAsOWUUeVybvuig--0ClsTxBp3lfkD7USxEQk';