Restructure project (#124)

front/src/components/auth/RequireAuth.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-import { hasAccessToken } from '../../services/AuthService';
+import { hasAccessToken } from '../../services/auth/AuthService';
 
 function RequireAuth({ children }: { children: JSX.Element }): JSX.Element {
   const navigate = useNavigate();

front/src/components/chips/PipeChip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { Pipe } from '../../interfaces/pipe.interface';
+import { Pipe } from '../../interfaces/entities/pipe.interface';
 
 type OwnProps = {
   opportunity: Pipe;

front/src/components/editable-cell/EditableCellWrapper.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { ReactElement, useRef } from 'react';
-import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
+import { useOutsideAlerter } from '../../hooks/useOutsideAlerter';
 
 type OwnProps = {
   editModeContent: ReactElement;

front/src/components/editable-cell/EditableDate.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import { forwardRef, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
-import DatePicker from '../../form/DatePicker';
+import DatePicker from '../form/DatePicker';
 import { CalendarContainer } from 'react-datepicker';
-import { modalBackground } from '../../../layout/styles/themes';
+import { modalBackground } from '../../layout/styles/themes';
 
 export type EditableDateProps = {
   value: Date;

front/src/components/editable-cell/EditableFullName.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
-import PersonChip from '../../chips/PersonChip';
+import PersonChip from '../chips/PersonChip';
 
 type OwnProps = {
   firstname: string;

front/src/components/editable-cell/EditablePhone.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
 import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
-import Link from '../../link/Link';
+import Link from '../link/Link';
 
 type OwnProps = {
   placeholder?: string;

front/src/components/editable-cell/EditableRelation.tsx

@@ -1,8 +1,11 @@
 import { ChangeEvent, ComponentType, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
 import styled from '@emotion/styled';
-import { useSearch } from '../../../services/search/search';
-import { SearchConfigType, SearchableType } from '../table-header/interface';
+import { useSearch } from '../../services/api/search/search';
+import {
+  SearchConfigType,
+  SearchableType,
+} from '../../interfaces/search/interface';
 
 const StyledEditModeContainer = styled.div`
   width: 200px;

front/src/components/editable-cell/__stories__/EditableChip.stories.tsx

@@ -1,8 +1,8 @@
 import EditableChip, { EditableChipProps } from '../EditableChip';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
-import CompanyChip from '../../../chips/CompanyChip';
+import CompanyChip from '../../chips/CompanyChip';
 
 const component = {
   title: 'EditableChip',

front/src/components/editable-cell/__stories__/EditableDate.stories.tsx

@@ -1,6 +1,6 @@
 import EditableDate, { EditableDateProps } from '../EditableDate';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
 
 const component = {

front/src/components/editable-cell/__stories__/EditableFullName.stories.tsx

@@ -1,6 +1,6 @@
 import EditableFullName from '../EditableFullName';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 

front/src/components/editable-cell/__stories__/EditablePhone.stories.tsx

@@ -1,6 +1,6 @@
 import EditablePhone from '../EditablePhone';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 

front/src/components/editable-cell/__stories__/EditableRelation.stories.tsx

@@ -1,16 +1,16 @@
 import EditableRelation, { EditableRelationProps } from '../EditableRelation';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
-import CompanyChip, { CompanyChipPropsType } from '../../../chips/CompanyChip';
+import CompanyChip, { CompanyChipPropsType } from '../../chips/CompanyChip';
 import {
   Company,
   mapToCompany,
-} from '../../../../interfaces/company.interface';
+} from '../../../interfaces/entities/company.interface';
 import { MockedProvider } from '@apollo/client/testing';
-import { SEARCH_COMPANY_QUERY } from '../../../../services/search/search';
+import { SEARCH_COMPANY_QUERY } from '../../../services/api/search/search';
 import styled from '@emotion/styled';
-import { SearchConfigType } from '../../table-header/interface';
+import { SearchConfigType } from '../../../interfaces/search/interface';
 
 const component = {
   title: 'editable-cell/EditableRelation',

front/src/components/editable-cell/__stories__/EditableText.stories.tsx

@@ -1,6 +1,6 @@
 import EditableText from '../EditableText';
 import { ThemeProvider } from '@emotion/react';
-import { lightTheme } from '../../../../layout/styles/themes';
+import { lightTheme } from '../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
 
 const component = {

front/src/components/editable-cell/__tests__/EditableChip.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 
 import { EditableChipStory } from '../__stories__/EditableChip.stories';
-import CompanyChip from '../../../chips/CompanyChip';
+import CompanyChip from '../../chips/CompanyChip';
 
 it('Checks the EditableChip editing event bubbles up', async () => {
   const func = jest.fn(() => null);

front/src/components/editable-cell/__tests__/EditableRelation.test.tsx

@@ -1,11 +1,11 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 
 import { EditableRelationStory } from '../__stories__/EditableRelation.stories';
-import { CompanyChipPropsType } from '../../../chips/CompanyChip';
+import { CompanyChipPropsType } from '../../chips/CompanyChip';
 
 import { EditableRelationProps } from '../EditableRelation';
 import { act } from 'react-dom/test-utils';
-import { Company } from '../../../../interfaces/company.interface';
+import { Company } from '../../../interfaces/company.interface';
 
 it('Checks the EditableRelation editing event bubbles up', async () => {
   const func = jest.fn(() => null);

front/src/components/table/ClickableCell.tsx

@@ -1,55 +0,0 @@
-import styled from '@emotion/styled';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-type OwnProps = {
-  href: string;
-  children?: React.ReactNode;
-};
-
-const StyledClickable = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 32px;
-  display: flex;
-  align-items: center;
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-    border: 1px solid ${(props) => props.theme.text20};
-    box-sizing: border-box;
-    border-radius: 4px;
-    pointer-events: none;
-    display: none;
-  }
-
-  :hover::before {
-    display: block;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-`;
-
-const Container = styled.span`
-  padding-left: ${(props) => props.theme.spacing(2)};
-`;
-
-function ClickableCell({ href, children }: OwnProps) {
-  return (
-    <StyledClickable>
-      <Link to={href}>
-        <Container>{children}</Container>
-      </Link>
-    </StyledClickable>
-  );
-}
-
-export default ClickableCell;

front/src/components/table/Table.tsx

@@ -10,12 +10,13 @@ import TableHeader from './table-header/TableHeader';
 import styled from '@emotion/styled';
 import {
   FilterConfigType,
-  SearchConfigType,
-  SearchableType,
   SelectedFilterType,
-  SelectedSortType,
-  SortType,
-} from './table-header/interface';
+} from '../../interfaces/filters/interface';
+import {
+  SearchableType,
+  SearchConfigType,
+} from '../../interfaces/search/interface';
+import { SortType, SelectedSortType } from '../../interfaces/sorts/interface';
 
 declare module 'react' {
   function forwardRef<T, P = object>(

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -4,10 +4,12 @@ import {
   FilterConfigType,
   FilterOperandType,
   FilterableFieldsType,
+  SelectedFilterType,
+} from '../../../interfaces/filters/interface';
+import {
   SearchConfigType,
   SearchableType,
-  SelectedFilterType,
-} from './interface';
+} from '../../../interfaces/search/interface';
 
 type OwnProps<TData extends FilterableFieldsType> = {
   isFilterSelected: boolean;

front/src/components/table/table-header/SortAndFilterBar.tsx

@@ -4,8 +4,8 @@ import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
 import {
   FilterableFieldsType,
   SelectedFilterType,
-  SelectedSortType,
-} from './interface';
+} from '../../../interfaces/filters/interface';
+import { SelectedSortType } from '../../../interfaces/sorts/interface';
 
 type OwnProps<SortField, TData extends FilterableFieldsType> = {
   sorts: Array<SelectedSortType<SortField>>;

front/src/components/table/table-header/SortDropdownButton.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useState } from 'react';
 import DropdownButton from './DropdownButton';
-import { SelectedSortType, SortType } from './interface';
+import {
+  SelectedSortType,
+  SortType,
+} from '../../../interfaces/sorts/interface';
 
 type OwnProps<SortField> = {
   isSortSelected: boolean;

front/src/components/table/table-header/TableHeader.tsx

@@ -1,17 +1,22 @@
 import styled from '@emotion/styled';
-import {
-  FilterConfigType,
-  FilterableFieldsType,
-  SearchConfigType,
-  SearchableType,
-  SelectedFilterType,
-  SelectedSortType,
-  SortType,
-} from './interface';
+
 import { ReactNode, useCallback, useState } from 'react';
 import { SortDropdownButton } from './SortDropdownButton';
 import { FilterDropdownButton } from './FilterDropdownButton';
 import SortAndFilterBar from './SortAndFilterBar';
+import {
+  FilterableFieldsType,
+  FilterConfigType,
+  SelectedFilterType,
+} from '../../../interfaces/filters/interface';
+import {
+  SearchableType,
+  SearchConfigType,
+} from '../../../interfaces/search/interface';
+import {
+  SortType,
+  SelectedSortType,
+} from '../../../interfaces/sorts/interface';
 
 type OwnProps<SortField, TData extends FilterableFieldsType> = {
   viewName: string;

front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx

@@ -2,16 +2,19 @@ import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import { FilterDropdownButton } from '../FilterDropdownButton';
 import styled from '@emotion/styled';
-import { FilterableFieldsType, SelectedFilterType } from '../interface';
 import { useCallback, useState } from 'react';
 import {
   SEARCH_PEOPLE_QUERY,
   useSearch,
-} from '../../../../services/search/search';
+} from '../../../../services/api/search/search';
 import { MockedProvider } from '@apollo/client/testing';
 import { mockData } from '../../../../pages/people/__tests__/__data__/mock-data';
 import { availableFilters } from '../../../../pages/people/people-table';
-import { Person } from '../../../../interfaces/person.interface';
+import { Person } from '../../../../interfaces/entities/person.interface';
+import {
+  FilterableFieldsType,
+  SelectedFilterType,
+} from '../../../../interfaces/filters/interface';
 
 const component = {
   title: 'FilterDropdownButton',

front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx

@@ -2,8 +2,8 @@ import SortAndFilterBar from '../SortAndFilterBar';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import { FaArrowDown } from 'react-icons/fa';
-import { SelectedFilterType } from '../interface';
-import { Person } from '../../../../interfaces/person.interface';
+import { Person } from '../../../../interfaces/entities/person.interface';
+import { SelectedFilterType } from '../../../../interfaces/filters/interface';
 
 const component = {
   title: 'SortAndFilterBar',

front/src/components/table/table-header/__stories__/SortDropdownButton.stories.tsx

@@ -1,4 +1,3 @@
-import { SortType } from '../interface';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import {
@@ -12,6 +11,7 @@ import {
 import { SortDropdownButton } from '../SortDropdownButton';
 import styled from '@emotion/styled';
 import { Order_By, People_Order_By } from '../../../../generated/graphql';
+import { SortType } from '../../../../interfaces/sorts/interface';
 
 const component = {
   title: 'SortDropdownButton',

front/src/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -2,7 +2,7 @@ import TableHeader from '../TableHeader';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import { FaRegBuilding, FaCalendar } from 'react-icons/fa';
-import { SortType } from '../interface';
+import { SortType } from '../../../../interfaces/sorts/interface';
 
 const component = {
   title: 'TableHeader',

front/src/components/table/table-header/helpers.ts

@@ -1,11 +1,11 @@
 import { Order_By } from '../../../generated/graphql';
+import { BoolExpType } from '../../../interfaces/entities/generic.interface';
 import {
-  BoolExpType,
-  FilterWhereType,
   FilterableFieldsType,
+  FilterWhereType,
   SelectedFilterType,
-  SelectedSortType,
-} from './interface';
+} from '../../../interfaces/filters/interface';
+import { SelectedSortType } from '../../../interfaces/sorts/interface';
 
 export const reduceFiltersToWhere = <
   ValueType extends FilterableFieldsType,

front/src/components/table/table-header/interface.ts

@@ -1,124 +0,0 @@
-import { DocumentNode } from 'graphql';
-import { ReactNode } from 'react';
-import {
-  Companies_Bool_Exp,
-  Order_By,
-  People_Bool_Exp,
-  Users_Bool_Exp,
-} from '../../../generated/graphql';
-import {
-  Company,
-  GraphqlQueryCompany,
-} from '../../../interfaces/company.interface';
-import {
-  GraphqlQueryPerson,
-  Person,
-} from '../../../interfaces/person.interface';
-import { GraphqlQueryUser, User } from '../../../interfaces/user.interface';
-
-export type SortType<OrderByTemplate> =
-  | {
-      _type: 'default_sort';
-      label: string;
-      key: keyof OrderByTemplate & string;
-      icon?: ReactNode;
-    }
-  | {
-      _type: 'custom_sort';
-      label: string;
-      key: string;
-      icon?: ReactNode;
-      orderByTemplate: (order: Order_By) => OrderByTemplate;
-    };
-
-export type SelectedSortType<OrderByTemplate> = SortType<OrderByTemplate> & {
-  order: 'asc' | 'desc';
-};
-
-type AnyEntity = {
-  id: string;
-  __typename: string;
-} & Record<string, any>;
-
-export type FilterableFieldsType = Person | Company;
-export type FilterWhereType = Person | Company | User | AnyEntity;
-
-type FilterConfigGqlType<WhereType> = WhereType extends Company
-  ? GraphqlQueryCompany
-  : WhereType extends Person
-  ? GraphqlQueryPerson
-  : WhereType extends User
-  ? GraphqlQueryUser
-  : never;
-
-export type BoolExpType<T> = T extends Company
-  ? Companies_Bool_Exp
-  : T extends Person
-  ? People_Bool_Exp
-  : T extends User
-  ? Users_Bool_Exp
-  : never;
-
-export type FilterConfigType<
-  FilteredType extends FilterableFieldsType,
-  WhereType extends FilterWhereType = any,
-> = {
-  key: string;
-  label: string;
-  icon: ReactNode;
-  operands: FilterOperandType<FilteredType, WhereType>[];
-  searchConfig: WhereType extends SearchableType
-    ? SearchConfigType<WhereType>
-    : null;
-  selectedValueRender: (selected: WhereType) => string;
-};
-
-export type SearchableType = Person | Company | User;
-
-export type SearchConfigType<SearchType extends SearchableType> = {
-  query: DocumentNode;
-  template: (
-    searchInput: string,
-  ) => People_Bool_Exp | Companies_Bool_Exp | Users_Bool_Exp;
-  resultMapper: (data: FilterConfigGqlType<SearchType>) => {
-    value: SearchType;
-    render: (value: SearchType) => ReactNode;
-  };
-};
-
-export type FilterOperandType<
-  FilteredType extends FilterableFieldsType,
-  WhereType extends FilterWhereType = AnyEntity,
-> =
-  | FilterOperandExactMatchType<FilteredType, WhereType>
-  | FilterOperandComparativeType<FilteredType, WhereType>;
-
-type FilterOperandExactMatchType<
-  FilteredType extends FilterableFieldsType,
-  WhereType extends FilterWhereType,
-> = {
-  label: 'Equal' | 'Not equal';
-  id: 'equal' | 'not-equal';
-  whereTemplate: (value: WhereType) => BoolExpType<FilteredType>;
-};
-
-type FilterOperandComparativeType<
-  FilteredType extends FilterableFieldsType,
-  WhereType extends FilterWhereType,
-> = {
-  label: 'Like' | 'Not like' | 'Include';
-  id: 'like' | 'not_like' | 'include';
-  whereTemplate: (value: WhereType) => BoolExpType<FilteredType>;
-};
-
-export type SelectedFilterType<
-  FilteredType extends FilterableFieldsType,
-  WhereType extends FilterWhereType = AnyEntity,
-> = {
-  key: string;
-  value: WhereType;
-  displayValue: string;
-  label: string;
-  icon: ReactNode;
-  operand: FilterOperandType<FilteredType, WhereType>;
-};