Add new line on Table Views (#110)

Add addition on Companies table

front/package-lock.json

@@ -24,6 +24,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
         "react-router-dom": "^6.4.4",
+        "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -45,6 +46,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/react-datepicker": "^4.11.2",
+        "@types/uuid": "^9.0.1",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
         "babel-plugin-named-exports-order": "^0.0.2",
         "eslint": "^8.28.0",
@@ -8883,6 +8885,12 @@
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.4",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -28338,7 +28346,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
       "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }

front/package.json

@@ -19,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.4.4",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -103,6 +104,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/react-datepicker": "^4.11.2",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint": "^8.28.0",

front/src/components/table/Table.tsx

@@ -99,7 +99,7 @@ function Table<TData extends { id: string }, SortField, FilterProperies>({
   onFiltersUpdate,
   onFilterSearch,
 }: OwnProps<TData, SortField, FilterProperies>) {
-  const table = useReactTable({
+  const table = useReactTable<TData>({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),

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

@@ -49,7 +49,7 @@ const StyledEditModeResultItem = styled.div`
 `;
 
 export type EditableRelationProps<RelationType, ChipComponentPropsType> = {
-  relation?: RelationType;
+  relation?: RelationType | null;
   searchPlaceholder: string;
   searchFilter: FilterType<People_Bool_Exp>;
   changeHandler: (relation: RelationType) => void;

front/src/interfaces/company.interface.ts

@@ -13,7 +13,7 @@ export type Company = {
   employees: number;
   address: string;
   opportunities: Opportunity[];
-  accountOwner?: User;
+  accountOwner?: User | null;
   creationDate: Date;
 };
 
@@ -39,11 +39,14 @@ export type GraphqlMutationCompany = {
   employees: number;
   address: string;
   created_at: string;
+  account_owner?: GraphqlQueryUser | null;
 };
 
 export const mapCompany = (company: GraphqlQueryCompany): Company => ({
-  ...company,
+  id: company.id,
+  employees: company.employees,
   name: company.name,
+  address: company.address,
   domain_name: company.domain_name,
   accountOwner: company.account_owner
     ? {
@@ -57,9 +60,19 @@ export const mapCompany = (company: GraphqlQueryCompany): Company => ({
 });
 
 export const mapGqlCompany = (company: Company): GraphqlMutationCompany => ({
-  ...company,
   name: company.name,
   domain_name: company.domain_name,
   created_at: company.creationDate.toUTCString(),
   account_owner_id: company.accountOwner?.id,
+  address: company.address,
+  employees: company.employees,
+  id: company.id,
+  account_owner: company.accountOwner
+    ? {
+        id: company.accountOwner?.id,
+        email: company.accountOwner?.email,
+        displayName: company.accountOwner?.displayName,
+        __typename: 'users',
+      }
+    : null,
 });

front/src/layout/containers/WithTopBarContainer.tsx

@@ -6,6 +6,7 @@ type OwnProps = {
   children: JSX.Element;
   title: string;
   icon: ReactNode;
+  onAddButtonClick?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -34,10 +35,15 @@ const ContentSubContainer = styled.div`
   flex: 1;
 `;
 
-function FullWidthContainer({ children, title, icon }: OwnProps) {
+function FullWidthContainer({
+  children,
+  title,
+  icon,
+  onAddButtonClick,
+}: OwnProps) {
   return (
     <StyledContainer>
-      <TopBar title={title} icon={icon} />
+      <TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
       <ContentContainer>
         <ContentSubContainer>{children}</ContentSubContainer>
       </ContentContainer>

front/src/layout/top-bar/TopBar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
+import { TbPlus } from 'react-icons/tb';
 
 const TopBarContainer = styled.div`
   display: flex;
@@ -17,19 +18,44 @@ const TitleContainer = styled.div`
   font-family: 'Inter';
   margin-left: 4px;
   font-size: 14px;
+  display: flex;
+  width: 100%;
+`;
+
+const AddButtonContainer = styled.div`
+  display: flex;
+  justify-self: flex-end;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 type OwnProps = {
   title: string;
   icon: ReactNode;
+  onAddButtonClick?: () => void;
 };
 
-function TopBar({ title, icon }: OwnProps) {
+function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
   return (
     <>
       <TopBarContainer>
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
+        {onAddButtonClick && (
+          <AddButtonContainer
+            data-testid="add-button"
+            onClick={onAddButtonClick}
+          >
+            <TbPlus />
+          </AddButtonContainer>
+        )}
       </TopBarContainer>
     </>
   );

front/src/pages/companies/Companies.tsx

@@ -1,16 +1,18 @@
 import { FaRegBuilding, FaList } from 'react-icons/fa';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import styled from '@emotion/styled';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import {
   CompaniesSelectedSortType,
   defaultOrderBy,
+  insertCompany,
   useCompaniesQuery,
 } from '../../services/companies';
 import Table from '../../components/table/Table';
-import { mapCompany } from '../../interfaces/company.interface';
+import { Company, mapCompany } from '../../interfaces/company.interface';
 import {
-  companiesColumns,
+  useCompaniesColumns,
   availableFilters,
   availableSorts,
 } from './companies-table';
@@ -33,6 +35,7 @@ const StyledCompaniesContainer = styled.div`
 function Companies() {
   const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
   const [where, setWhere] = useState<Companies_Bool_Exp>({});
+  const [internalData, setInternalData] = useState<Array<Company>>([]);
 
   const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
 
@@ -47,13 +50,43 @@ function Companies() {
     [],
   );
 
-  const { data } = useCompaniesQuery(orderBy, where);
+  const { data, loading, refetch } = useCompaniesQuery(orderBy, where);
+
+  useEffect(() => {
+    if (!loading) {
+      if (data) {
+        setInternalData(data.companies.map(mapCompany));
+      }
+    }
+  }, [loading, setInternalData, data]);
+
+  const addEmptyRow = useCallback(() => {
+    const newCompany: Company = {
+      id: uuidv4(),
+      name: '',
+      domain_name: '',
+      employees: 0,
+      address: '',
+      opportunities: [],
+      creationDate: new Date(),
+      accountOwner: null,
+    };
+    insertCompany(newCompany);
+    setInternalData([newCompany, ...internalData]);
+    refetch();
+  }, [internalData, setInternalData, refetch]);
+
+  const companiesColumns = useCompaniesColumns();
 
   return (
-    <WithTopBarContainer title="Companies" icon={<FaRegBuilding />}>
+    <WithTopBarContainer
+      title="Companies"
+      icon={<FaRegBuilding />}
+      onAddButtonClick={addEmptyRow}
+    >
       <StyledCompaniesContainer>
         <Table
-          data={data ? data.companies.map(mapCompany) : []}
+          data={internalData}
           columns={companiesColumns}
           viewName="All Companies"
           viewIcon={<FaList />}

front/src/pages/companies/__stories__/Companies.stories.tsx

@@ -18,7 +18,7 @@ const mocks = [
     request: {
       query: GET_COMPANIES,
       variables: {
-        orderBy: [{ name: 'asc' }],
+        orderBy: [{ created_at: 'desc' }],
         where: {},
       },
     },

front/src/pages/companies/__tests__/Companies.test.tsx

@@ -115,3 +115,24 @@ it('Checks company address edit is updating data', async () => {
     expect(getByText('21 rue de clignancourt')).toBeInTheDocument();
   });
 });
+
+it('Checks insert data is appending a new line', async () => {
+  const { getByText, getByTestId, container } = render(<CompaniesDefault />);
+
+  await waitFor(() => {
+    expect(getByText('Airbnb')).toBeDefined();
+  });
+  const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
+
+  expect(tableRows.length).toBe(6);
+
+  act(() => {
+    fireEvent.click(getByTestId('add-button'));
+  });
+
+  await waitFor(() => {
+    const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
+
+    expect(tableRows.length).toBe(7);
+  });
+});

front/src/pages/companies/companies-table.tsx

@@ -38,6 +38,7 @@ import {
 import EditableDate from '../../components/table/editable-cell/EditableDate';
 import EditableRelation from '../../components/table/editable-cell/EditableRelation';
 import { GraphqlQueryUser, PartialUser } from '../../interfaces/user.interface';
+import { useMemo } from 'react';
 
 export const availableSorts = [
   {
@@ -136,7 +137,10 @@ export const availableFilters = [
 ] satisfies Array<FilterType<Companies_Bool_Exp>>;
 
 const columnHelper = createColumnHelper<Company>();
-export const companiesColumns = [
+
+export const useCompaniesColumns = () => {
+  return useMemo(() => {
+    return [
       columnHelper.accessor('id', {
         header: () => (
           <Checkbox id="company-select-all" name="company-select-all" />
@@ -149,7 +153,9 @@ export const companiesColumns = [
         ),
       }),
       columnHelper.accessor('name', {
-    header: () => <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />,
+        header: () => (
+          <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />
+        ),
         cell: (props) => (
           <EditableChip
             value={props.row.original.name}
@@ -165,7 +171,9 @@ export const companiesColumns = [
         ),
       }),
       columnHelper.accessor('employees', {
-    header: () => <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />,
+        header: () => (
+          <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />
+        ),
         cell: (props) => (
           <EditableText
             content={props.row.original.employees.toFixed(0)}
@@ -204,7 +212,9 @@ export const companiesColumns = [
         ),
       }),
       columnHelper.accessor('creationDate', {
-    header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
+        header: () => (
+          <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
+        ),
         cell: (props) => (
           <EditableDate
             value={props.row.original.creationDate}
@@ -272,3 +282,5 @@ export const companiesColumns = [
         ),
       }),
     ];
+  }, []);
+};

front/src/pages/people/People.tsx

@@ -44,10 +44,18 @@ function People() {
     [],
   );
 
+  const addEmptyRow = useCallback(() => {
+    console.log('add row');
+  }, []);
+
   const { data } = usePeopleQuery(orderBy, where);
 
   return (
-    <WithTopBarContainer title="People" icon={<FaRegUser />}>
+    <WithTopBarContainer
+      title="People"
+      icon={<FaRegUser />}
+      onAddButtonClick={addEmptyRow}
+    >
       <StyledPeopleContainer>
         {
           <Table

front/src/services/companies/select.ts

@@ -41,6 +41,6 @@ export function useCompaniesQuery(
 
 export const defaultOrderBy: Companies_Order_By[] = [
   {
-    name: Order_By.Asc,
+    created_at: Order_By.Desc,
   },
 ];

front/src/services/companies/update.ts

@@ -41,6 +41,40 @@ export const UPDATE_COMPANY = gql`
   }
 `;
 
+export const INSERT_COMPANY = gql`
+  mutation InsertCompany(
+    $id: uuid
+    $name: String
+    $domain_name: String
+    $account_owner_id: uuid
+    $created_at: timestamptz
+    $address: String
+    $employees: Int
+  ) {
+    insert_companies(
+      objects: {
+        id: $id
+        name: $name
+        domain_name: $domain_name
+        account_owner_id: $account_owner_id
+        created_at: $created_at
+        address: $address
+        employees: $employees
+      }
+    ) {
+      affected_rows
+      returning {
+        address
+        created_at
+        domain_name
+        employees
+        id
+        name
+      }
+    }
+  }
+`;
+
 export async function updateCompany(
   company: Company,
 ): Promise<FetchResult<Company>> {
@@ -50,3 +84,14 @@ export async function updateCompany(
   });
   return result;
 }
+
+export async function insertCompany(
+  company: Company,
+): Promise<FetchResult<Company>> {
+  const result = await apiClient.mutate({
+    mutation: INSERT_COMPANY,
+    variables: mapGqlCompany(company),
+  });
+
+  return result;
+}

hasura/metadata/databases/default/tables/public_companies.yaml

@@ -20,6 +20,8 @@ insert_permissions:
       check:
         workspace_id:
           _eq: x-hasura-workspace-id
+      set:
+        workspace_id: x-hasura-Workspace-Id
       columns:
         - id
         - workspace_id