Create and EditableRelation component and make it generic (#107)

* Create and EditableRelation component and make it generic

* Refactor EditableCell component to be more flexible

* Complete Company picker on people page

* Fix lint

front/src/components/form/DatePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { forwardRef, useState } from 'react';
+import React, { ReactElement, forwardRef, useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 
 import 'react-datepicker/dist/react-datepicker.css';
@@ -8,6 +8,7 @@ export type DatePickerProps = {
   isOpen?: boolean;
   date: Date;
   onChangeHandler: (date: Date) => void;
+  customInput?: ReactElement;
 };
 
 const StyledContainer = styled.div`
@@ -34,11 +35,12 @@ const StyledContainer = styled.div`
   }
 `;
 
-function DatePicker({ date, onChangeHandler, isOpen }: DatePickerProps) {
+function DatePicker({ date, onChangeHandler, customInput }: DatePickerProps) {
   const [startDate, setStartDate] = useState(date);
 
   type DivProps = React.HTMLProps<HTMLDivElement>;
-  const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+
+  const DefaultDateDisplay = forwardRef<HTMLDivElement, DivProps>(
     ({ value, onClick }, ref) => (
       <div onClick={onClick} ref={ref}>
         {value &&
@@ -54,30 +56,13 @@ function DatePicker({ date, onChangeHandler, isOpen }: DatePickerProps) {
   return (
     <StyledContainer>
       <ReactDatePicker
-        open={isOpen}
+        open={true}
         selected={startDate}
         onChange={(date: Date) => {
           setStartDate(date);
           onChangeHandler(date);
         }}
-        popperPlacement="bottom"
-        popperModifiers={[
-          {
-            name: 'offset',
-            options: {
-              offset: [55, 0],
-            },
-          },
-          {
-            name: 'preventOverflow',
-            options: {
-              rootBoundary: 'viewport',
-              tether: false,
-              altAxis: true,
-            },
-          },
-        ]}
-        customInput={<DateDisplay />}
+        customInput={customInput ? customInput : <DefaultDateDisplay />}
       />
     </StyledContainer>
   );

front/src/components/form/__tests__/Datepicker.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { DatePickerStory } from '../__stories__/Datepicker.stories';
 import { act } from 'react-dom/test-utils';
 
-it('Checks the datepicker renders', () => {
+it('Checks the datepicker renders', async () => {
   const changeHandler = jest.fn();
   const { getByText } = render(
     <DatePickerStory
@@ -11,6 +11,11 @@ it('Checks the datepicker renders', () => {
       onChangeHandler={changeHandler}
     />,
   );
+
+  await act(async () => {
+    expect(getByText('Mar 3, 2021')).toBeInTheDocument();
+  });
+
   act(() => {
     fireEvent.click(getByText('Mar 3, 2021'));
   });