Setting up first table in frontend

.circleci/config.yml

@@ -1,84 +0,0 @@
-version: 2.1
-
-orbs:
-  aws-ecr: circleci/aws-ecr@8.2.1
-  aws-ecs: circleci/aws-ecs@03.2.0
-  slack: circleci/slack@4.12.0
-  node: circleci/node@5.0.3
-
-jobs:
-  tests-front:
-    executor: node/default
-    steps:
-      - checkout
-      - run:
-          command: cd front && npm install
-          name: install node dependencies
-      - run:
-          command: cd front && npm run test
-          name: tests
-
-workflows:
-  build-and-deploy:
-    jobs:
-      - tests-front
-      - aws-ecr/build-and-push-image:
-          name: build-image
-          filters:
-            branches:
-              only: main
-          requires:
-            - tests-front
-          dockerfile: ./infra/prod/twenty/Dockerfile
-          registry-id: AWS_ACCOUNT_ID
-          aws-access-key-id: AWS_ACCESS_KEY_ID
-          aws-secret-access-key: AWS_SECRET_ACCESS_KEY
-          region: $AWS_REGION
-          repo: $AWS_ECR_REPO
-          tag: $CIRCLE_SHA1
-          extra-build-args: >
-            --build-arg REACT_APP_API_URL=$REACT_APP_API_URL
-
-      - aws-ecs/deploy-service-update:
-          name: deploy-canary
-          requires:
-            - build-image
-          family: $AWS_ECS_CONTAINER_NAME_CANARY
-          cluster: $AWS_ECS_CLUSTER
-          container-image-name-updates: "container=$AWS_ECS_CONTAINER_NAME_CANARY,tag=${CIRCLE_SHA1}"
-      - slack/on-hold:
-          name: slack-notification
-          context: slack-secrets
-          requires:
-            - deploy-canary
-      - hold:
-          type: approval
-          requires:
-            - slack-notification
-      - aws-ecs/deploy-service-update:
-          name: deploy-default
-          requires:
-            - hold
-          family: $AWS_ECS_CONTAINER_NAME_DEFAULT
-          cluster: $AWS_ECS_CLUSTER
-          container-image-name-updates: "container=$AWS_ECS_CONTAINER_NAME_DEFAULT,tag=${CIRCLE_SHA1}"
-          post-steps:
-            - slack/notify:
-                event: pass
-                template: basic_success_1
-            - slack/notify:
-                event: fail
-                template: basic_fail_1
-      - aws-ecr/build-and-push-image:
-          name: build-image-latest
-          requires:
-            - deploy-default
-          dockerfile: ./infra/prod/twenty/Dockerfile
-          registry-id: AWS_ACCOUNT_ID
-          aws-access-key-id: AWS_ACCESS_KEY_ID
-          aws-secret-access-key: AWS_SECRET_ACCESS_KEY
-          region: $AWS_REGION
-          repo: $AWS_ECR_REPO
-          tag: latest
-          extra-build-args: >
-            --build-arg REACT_APP_API_URL=$REACT_APP_API_URL

front/src/components/table/Table.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import TableHeader from './TableHeader';
+
+type OwnProps = {
+  data: Array<any>;
+  columns: Array<ColumnDef<any, any>>;
+  viewName: string;
+};
+
+function Table({ data, columns, viewName }: OwnProps) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div>
+      <TableHeader viewName={viewName} />
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <tr key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.footer,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

front/src/components/table/TableHeader.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  viewName: string;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+`;
+
+function TableHeader({ viewName }: OwnProps) {
+  return <StyledTitle>{viewName}</StyledTitle>;
+}
+
+export default TableHeader;

front/src/interfaces/company.interface.ts

@@ -0,0 +1,5 @@
+export interface Company {
+  id: number;
+  name: string;
+  logo: string;
+}

front/src/interfaces/pipe.interface.ts

@@ -0,0 +1,5 @@
+export interface Pipe {
+  id: number;
+  name: string;
+  icon: string;
+}

front/src/pages/people/People.tsx

@@ -1,10 +1,100 @@
 import { faUser } from '@fortawesome/free-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
+import Table from '../../components/table/Table';
+import { Company } from '../../interfaces/company.interface';
+import { Pipe } from '../../interfaces/pipe.interface';
+import { createColumnHelper } from '@tanstack/react-table';
+
+type People = {
+  fullName: string;
+  email: string;
+  company: Company;
+  phone: string;
+  creationDate: string;
+  pipe: Pipe;
+  city: string;
+};
+
+const defaultData: Array<People> = [
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    phone: '06 12 34 56 78',
+    creationDate: 'Feb 23, 2018',
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    phone: '06 12 34 56 78',
+    creationDate: 'Feb 23, 2018',
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    phone: '06 12 34 56 78',
+    creationDate: 'Feb 23, 2018',
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    phone: '06 12 34 56 78',
+    creationDate: 'Feb 23, 2018',
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    phone: '06 12 34 56 78',
+    creationDate: 'Feb 23, 2018',
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+  },
+];
+
+const columnHelper = createColumnHelper<People>();
+
+const columns = [
+  columnHelper.accessor('fullName', {
+    header: () => 'People',
+  }),
+  columnHelper.accessor('email', {
+    header: () => <span>Email</span>,
+  }),
+  columnHelper.accessor('company', {
+    header: () => <span>Company</span>,
+    cell: (props) => <span>{props.row.original.company.name}</span>,
+  }),
+  columnHelper.accessor('phone', {
+    header: () => <span>Phone</span>,
+  }),
+  columnHelper.accessor('creationDate', {
+    header: () => <span>Creation</span>,
+  }),
+  columnHelper.accessor('pipe', {
+    header: () => <span>Pipe</span>,
+    cell: (props) => <span>{props.row.original.pipe.name}</span>,
+  }),
+  columnHelper.accessor('city', {
+    header: () => <span>City</span>,
+  }),
+];
 
 function People() {
   return (
     <WithTopBarContainer title="People" icon={faUser}>
-      <></>
+      <Table data={defaultData} columns={columns} viewName="All People" />
     </WithTopBarContainer>
   );
 }