Companies table (#79)

* Add columns to companies:
* account_owner_id
* employees
* address

Add foreign key constraint companies_account_owner_id_fkey
to auth.users.id

* Add select permissions to:
* account_owner_id
* employees
* address

Add relationship between companies and auth.users.

* Update Companies interface to include:
* account_owner_id
* employees
* address

Opportunity is expected to be replace by actual opportunity in a separate PR.

* Add GetCompanies query

* Add initial companies table

* Update test to use mock apollo provider

* Update to match changed company column names

* Add company interface mapping tests

* Test entire object

* Add test for companies being rendered in table.

* Add test for sorting reduce.

* Fix prettier errors

front/src/pages/companies/Companies.tsx

@@ -1,10 +1,45 @@
-import { faBuildings } from '@fortawesome/pro-regular-svg-icons';
+import { faBuildings, faList } from '@fortawesome/pro-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
+import styled from '@emotion/styled';
+import { useState, useCallback } from 'react';
+import {
+  CompaniesSelectedSortType,
+  defaultOrderBy,
+  reduceSortsToOrderBy,
+  useCompaniesQuery,
+} from '../../services/companies';
+import Table from '../../components/table/Table';
+import { mapCompany } from '../../interfaces/company.interface';
+import { companiesColumns, sortsAvailable } from './companies-table';
+
+const StyledCompaniesContainer = styled.div`
+  display: flex;
+  width: 100%;
+`;
 
 function Companies() {
+  const [, setSorts] = useState([] as Array<CompaniesSelectedSortType>);
+  const [orderBy, setOrderBy] = useState(defaultOrderBy);
+
+  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
+    setSorts(sorts);
+    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
+  }, []);
+
+  const { data } = useCompaniesQuery(orderBy);
+
   return (
     <WithTopBarContainer title="Companies" icon={faBuildings}>
-      <></>
+      <StyledCompaniesContainer>
+        <Table
+          data={data ? data.companies.map(mapCompany) : []}
+          columns={companiesColumns}
+          viewName="All Companies"
+          viewIcon={faList}
+          onSortsUpdate={updateSorts}
+          availableSorts={sortsAvailable}
+        />
+      </StyledCompaniesContainer>
     </WithTopBarContainer>
   );
 }