Merge branch 'AdicionarMaterial/screens-AdicionarMateriais' into 'dev'

Adicionar material/screens adicionar materiais

See merge request !57

package.json

@@ -50,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-select": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
     "eslint": "^8.11.0",

src/App.tsx

 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
-import { Login } from './screens';
+import { AdicionarMaterial, Login } from './screens';
 import AreaAluno from './screens/AreaAluno';
 import CadastroAluno from './screens/CadastroAluno';
 import CadastroEspecialista from './screens/CadastroEspecialista';
@@ -21,6 +21,8 @@ function App() {
           <Route path="/area-coordenador" element={<MenuCoordenador />} />
           <Route path="/area-professor" element={<MenuProfessor />} />
           <Route path="/area-especialista" element={<MenuEspecialista />} />
+          <Route path="/adicionar-material" element={<AdicionarMaterial />} />
+          <Route path="/editar-material/:id" element={<AdicionarMaterial />} />
           <Route path="/lista-usuarios" element={<UserList />} />
           <Route path="/lista-alunos-professor" element={<StudentList />} />
           <Route

src/components/DropDown.tsx

@@ -16,12 +16,15 @@ const defaultProps = {
     { value: 'strawberry', label: 'Strawberry' },
     { value: 'vanilla', label: 'Vanilla' },
   ],
+  val: Array<string>(),
 };
 
 type DropDownProps = {
   isMulti?: boolean;
   selectText?: string;
   options?: object;
+  onChange: (value: any) => void;
+  val?: Array<string>;
 } & typeof defaultProps;
 
 const styles = {
@@ -106,19 +109,18 @@ function DropdownIndicator(
 }
 
 function DropDown(props: DropDownProps) {
-  const { isMulti, selectText, options } = props;
+  const { isMulti, selectText, options, onChange, val } = props;
 
   return (
-    <div className="dropdown">
+    <div className="dropdown" style={{ width: '20rem' }}>
       <Select
         placeholder={selectText}
         components={{ DropdownIndicator, ClearIndicator: () => null }}
         styles={customStyles}
         isMulti={isMulti}
         options={options}
-        onChange={value => {
-          console.log(value);
-        }}
+        onChange={onChange}
+        value={options.filter(item => val.includes(item.value))}
       />
     </div>
   );

src/containers/FormComponent.tsx

@@ -16,7 +16,7 @@ export interface FormComponentData {
   phone: string;
   email: string;
   cpf: string;
-  specialization?: string;
+  formation?: string;
   discipline?: string;
 }
 
@@ -110,7 +110,7 @@ function FormComponent(props: formComponentProps) {
   const [phone, setPhone] = useState('');
   const [email, setEmail] = useState('');
   const [cpf, setCpf] = useState('');
-  const [specialization, setSpecialization] = useState('');
+  const [formation, setFormation] = useState('');
   const [discipline, setDiscipline] = useState('');
 
   return (
@@ -145,7 +145,7 @@ function FormComponent(props: formComponentProps) {
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <TextField
             placeholder="Especialização"
-            onChange={event => setSpecialization(event.target.value)}
+            onChange={event => setFormation(event.target.value)}
           />
         </div>
       )}
@@ -175,7 +175,7 @@ function FormComponent(props: formComponentProps) {
                 name.length === 0 ||
                 email.length === 0 ||
                 !email.includes('@') ||
-                (specialist && specialization.length === 0)
+                (specialist && formation.length === 0)
               ) {
                 toggleModalEmpty();
               } else {
@@ -186,7 +186,7 @@ function FormComponent(props: formComponentProps) {
                   phone,
                   email,
                   cpf,
-                  specialization,
+                  formation,
                   discipline,
                 });
               }
@@ -208,7 +208,7 @@ function FormComponent(props: formComponentProps) {
               name.length === 0 ||
               email.length === 0 ||
               !email.includes('@') ||
-              (specialist && specialization.length === 0)
+              (specialist && formation.length === 0)
             ) {
               toggleModalEmpty();
             } else {
@@ -220,7 +220,7 @@ function FormComponent(props: formComponentProps) {
                 phone,
                 email,
                 cpf,
-                specialization,
+                formation,
                 discipline,
               });
             }

src/containers/Modal.tsx

@@ -22,6 +22,12 @@ const defaultProps = {
   closeModal: () => {
     console.log('close');
   },
+  checkButton: () => {
+    console.log('check');
+  },
+  noButton: () => {
+    console.log('x');
+  },
 };
 
 type ModalProps = {
@@ -38,6 +44,8 @@ type ModalProps = {
   hasWarningSign?: boolean;
   marginTop?: string;
   closeModal?: () => void;
+  checkButton?: () => void;
+  noButton?: () => void;
 } & typeof defaultProps;
 
 function Modal(props: ModalProps) {
@@ -55,6 +63,8 @@ function Modal(props: ModalProps) {
     hasWarningSign,
     marginTop,
     closeModal,
+    checkButton,
+    noButton,
   } = props;
 
   const styles = {
@@ -143,6 +153,7 @@ function Modal(props: ModalProps) {
                 width="12.825em"
                 height="3.625em"
                 boxShadow="0 3px 3px 0px rgba(0, 0, 0, 0.2)"
+                onClick={checkButton}
               />
               <div style={styles.marginButtons}>
                 <ButtonCard
@@ -154,6 +165,7 @@ function Modal(props: ModalProps) {
                   width="12.825em"
                   height="3.625em"
                   boxShadow="0 3px 3px 0px rgba(0, 0, 0, 0.2)"
+                  onClick={noButton}
                 />
               </div>
             </div>

src/model/category.ts

+export interface Category {
+  id: number;
+  name: string;
+}

src/model/material.ts

+import { Category } from './category';
+import { User } from './user';
+
+export interface Material {
+  id: number;
+  title: string;
+  content: string;
+  tags: Array<string>;
+  author: number;
+}
+
+export interface RecvMaterial {
+  title: string;
+  content: string;
+  tags: Array<Category>;
+  author: User;
+}

src/screens/AdicionarMaterial.tsx

+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ButtonCard, DropDown, TextField, TitleComponent } from '../components';
+import TextArea from '../components/TextArea';
+import { Header, Modal } from '../containers';
+import { Category } from '../model/category';
+import { Material, RecvMaterial } from '../model/material';
+import { User } from '../model/user';
+import { getAllCategory } from '../services/category';
+import {
+  createMaterial,
+  CreateMaterialPayload,
+  deleteMaterial,
+  editMaterial,
+  EditMaterialPayload,
+  getMaterialById,
+} from '../services/material';
+import colors from '../utils/colors';
+import fontawesome from '../utils/fontawesome';
+
+function AdicionarMaterial() {
+  let user_json: any;
+  const user = sessionStorage.getItem('user');
+  if (user !== null) {
+    user_json = JSON.parse(user);
+  }
+  const user_id = user_json.id;
+
+  const navigate = useNavigate();
+
+  const { id } = useParams();
+  const [isEdicao, setIsEdicao] = useState<boolean>(false);
+  const [materialData, setMaterialData] = useState<RecvMaterial>();
+  const handleClickSave = () => {
+    if (isEdicao) editMaterial(Number(id), editPayload());
+    else createMaterial(createPayload());
+  };
+
+  const handleClickDelete = () => {
+    deleteMaterial(Number(id));
+  };
+
+  useEffect(() => {
+    const getMaterial = async (id: number) => {
+      try {
+        const getMaterialsResponse: RecvMaterial = await getMaterialById(id);
+        setMaterialData(getMaterialsResponse);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    if (id) {
+      setIsEdicao(true);
+      getMaterial(Number(id));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (materialData !== undefined) {
+      setTitle(materialData.title);
+      console.log(materialData);
+      console.log(title);
+      setContent(materialData.content);
+      const tagArr = Array<string>();
+      for (let i = 0; i < materialData.tags.length; i++) {
+        tagArr.push(materialData.tags[i].name);
+      }
+      setTag(tagArr);
+    }
+  }, [materialData]);
+
+  const styles = {
+    modal: {
+      position: 'absolute' as const,
+      alignself: 'center',
+      justifyContent: 'center',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+  };
+
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const categories = [
+    { value: 'AUTISMO', label: 'Autismo' },
+    { value: 'RELATO', label: 'Relato' },
+    { value: 'DICA', label: 'Dica' },
+    { value: 'COMPORTAMENTO', label: 'Comportamento' },
+    { value: 'CURIOSIDADE', label: 'Curiosidade' },
+    { value: 'LEVE', label: 'Leve' },
+    { value: 'MODERADO', label: 'Moderado' },
+    { value: 'AVANÇADO', label: 'Avançado' },
+  ];
+  const [tag, setTag] = useState(Array<string>());
+
+  const createPayload = (): CreateMaterialPayload => {
+    // console.log(tag);
+    const payloadMaterial: CreateMaterialPayload = {
+      title,
+      content,
+      tags: tag,
+      author: user_id,
+    };
+    return payloadMaterial;
+  };
+
+  const editPayload = (): EditMaterialPayload => {
+    // console.log(tag);
+    const payloadMaterial: EditMaterialPayload = {
+      title,
+      content,
+      tags: tag,
+    };
+    return payloadMaterial;
+  };
+
+  const [modalEmpty, setModalEmpty] = useState(false);
+  const [modalSuccess, setModalSuccess] = useState(false);
+  const [modalDelete, setModalDelete] = useState(false);
+  const [modalDeleteConfirmed, setModalDeleteConfirmed] = useState(false);
+
+  const toggleModalEmpty = () => {
+    setModalEmpty(!modalEmpty);
+  };
+  const toggleModalSuccess = () => {
+    setModalSuccess(!modalSuccess);
+  };
+  const toggleModalDelete = () => {
+    setModalDelete(!modalDelete);
+  };
+  const toggleModalDeleteConfirmed = () => {
+    setModalDeleteConfirmed(!modalDeleteConfirmed);
+  };
+
+  return (
+    <div
+      style={{ backgroundColor: colors.theme.background, minHeight: '100vh' }}
+    >
+      <Header text="Área do Especialista" disableArrow enableLogout />
+      <div style={{ margin: '2em', marginBottom: '0.1em' }}>
+        <TitleComponent
+          text={isEdicao ? 'Editar Material' : 'Adicionar Material'}
+          textSize="1.75em"
+          fontWeight="600"
+        />
+      </div>
+      <div style={{ padding: '20px' }}>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <TextField
+            placeholder="Digite o título da postagem"
+            onChange={event => setTitle(event.target.value)}
+            acceptValue
+            value={title}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            margin: '20px',
+          }}
+        >
+          <DropDown
+            selectText="Adicionar tags"
+            options={categories}
+            val={tag}
+            onChange={value => {
+              const selected = Array<string>();
+              for (let i = 0; i < value.length; i++) {
+                selected.push(value[i].value);
+              }
+              setTag(selected);
+            }}
+          />
+        </div>
+        <div
+          style={{
+            marginTop: '1.563rem',
+          }}
+        >
+          <TextArea
+            placeholder="Digite o conteúdo da postagem"
+            height={isEdicao ? '15rem' : '18rem'}
+            acceptValue
+            value={content}
+            setChange={event => setContent(event.target.value)}
+          />
+        </div>
+        <div
+          style={{ display: 'flex', justifyContent: 'center', padding: '15px' }}
+        >
+          <ButtonCard
+            width="16.28em"
+            height="3.29em"
+            text=""
+            icon={fontawesome.icons.faCheck}
+            sizeIcon="2.25em"
+            backgroundColor={colors.theme.blue}
+            iconWidth="100%"
+            onClick={() => {
+              if (title.length === 0 || content.length === 0) {
+                toggleModalEmpty();
+              } else {
+                handleClickSave();
+                toggleModalSuccess();
+              }
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          {isEdicao && (
+            <ButtonCard
+              width="16.28em"
+              height="3.29em"
+              text=""
+              icon={fontawesome.icons.faTrash}
+              sizeIcon="2.25em"
+              backgroundColor={colors.theme.cancel}
+              iconWidth="100%"
+              onClick={() => {
+                toggleModalDelete();
+              }}
+            />
+          )}
+        </div>
+      </div>
+      {modalEmpty && (
+        <div style={styles.modal}>
+          <Modal
+            text="Preencha todos os campos necessários."
+            hasWarningSign={false}
+            areYouSureModal={false}
+            width="17.5em"
+            height="9.375em"
+            closeModal={toggleModalEmpty}
+          />
+        </div>
+      )}
+      {modalSuccess && (
+        <div style={styles.modal}>
+          <Modal
+            text="Material cadastrado com successo."
+            hasWarningSign={false}
+            areYouSureModal={false}
+            width="17.5em"
+            height="9.375em"
+            closeModal={() => {
+              toggleModalSuccess();
+              navigate(-1);
+            }}
+          />
+        </div>
+      )}
+      {modalDelete && (
+        <div style={styles.modal}>
+          <Modal
+            text="Tem certeza que deseja excluir este material?"
+            closeModal={toggleModalDelete}
+            noButton={toggleModalDelete}
+            checkButton={() => {
+              toggleModalDelete();
+              handleClickDelete();
+              toggleModalDeleteConfirmed();
+            }}
+          />
+        </div>
+      )}
+      {modalDeleteConfirmed && (
+        <div style={styles.modal}>
+          <Modal
+            text="Material deletado com sucesso."
+            hasWarningSign={false}
+            areYouSureModal={false}
+            width="17.5em"
+            height="9.375em"
+            closeModal={() => {
+              toggleModalDeleteConfirmed();
+              navigate(-1);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AdicionarMaterial;

src/screens/CadastroEspecialista.tsx

 import { TitleComponent } from '../components';
 import { Header } from '../containers';
-import FormComponent from '../containers/FormComponent';
+import FormComponent, { FormComponentData } from '../containers/FormComponent';
+import {
+  createSpecialist,
+  CreateSpecialistPayload,
+} from '../services/specialist';
 import colors from '../utils/colors';
 
 function CadastroEspecialista() {
+  const handleClick = (specialist: FormComponentData) => {
+    console.log('handleclick cadastro');
+    const mapSpecialist: CreateSpecialistPayload = {
+      name: specialist.name,
+      phone_number: specialist.phone,
+      email: specialist.email,
+      document: specialist.cpf,
+      password: specialist.cpf,
+      formation: '',
+    };
+    mapSpecialist.formation = specialist.formation || '';
+
+    createSpecialist(mapSpecialist);
+  };
   return (
     <div
       style={{ backgroundColor: colors.theme.background, minHeight: '100vh' }}
@@ -16,7 +34,7 @@ function CadastroEspecialista() {
           fontWeight="600"
         />
       </div>
-      <FormComponent specialist />
+      <FormComponent specialist onClickSubmit={handleClick} />
     </div>
   );
 }

src/screens/index.ts

@@ -7,6 +7,7 @@ export { default as MenuCoordenador } from './MenuCoordenador';
 export { default as UserList } from './UserList';
 export { default as StudentList } from './StudentList';
 export { default as CadastroAluno } from './CadastroAluno';
+export { default as AdicionarMaterial } from './AdicionarMaterial';
 export { default as ListMaterial } from './ListMaterialModularScreensV2';
 
 // componentes e container devem ter este arquivo também

src/services/category.ts

+/* eslint-disable no-return-assign */
+import api from './api';
+
+export interface Category {
+  id: number;
+  name: string;
+}
+
+export async function getAllCategory(): Promise<Array<Category>> {
+  const response = await api.get(`/categories`);
+  return response.data;
+}

src/services/material.ts

+/* eslint-disable no-return-assign */
+import { Category } from '../model/category';
+import { User } from '../model/user';
+import api from './api';
+
+const serviceName = '/materials';
+
+export interface Material {
+  title: string;
+  content: string;
+  tags: Array<string>;
+  author: number;
+}
+
+export interface RecvMaterial {
+  title: string;
+  content: string;
+  tags: Array<Category>;
+  author: User;
+}
+
+export interface CreateMaterialPayload {
+  title: string;
+  content: string;
+  tags: Array<string>;
+  author: number;
+}
+
+export interface EditMaterialPayload {
+  title: string;
+  content: string;
+  tags: Array<string>;
+}
+
+export async function createMaterial(material: Material): Promise<any> {
+  let response = null;
+  await api
+    .post(`${serviceName}`, material)
+    .then(data => (response = data))
+    .catch(error => {
+      throw error;
+    });
+  return response;
+}
+
+export async function deleteMaterial(id: number): Promise<any> {
+  let response = null;
+  await api
+    .delete(`${serviceName}/${id}`)
+    .then(data => (response = data))
+    .catch(error => {
+      throw error;
+    });
+  return response;
+}
+
+export async function editMaterial(
+  id: number,
+  material: EditMaterialPayload,
+): Promise<Material> {
+  const response = await api
+    .put(`${serviceName}/${id}`, material)
+    .then(response => response.data.data)
+    .catch(error => {
+      console.log(error);
+    });
+  return response;
+}
+
+export async function getMaterialById(id: number): Promise<RecvMaterial> {
+  const response = await api
+    .get(`${serviceName}/${id}`)
+    .then(response => response.data.data)
+    .catch(error => {
+      console.log(error);
+    });
+  return response;
+}

src/services/specialist.ts

@@ -2,9 +2,18 @@
 import { Specialist } from '../model/specialist';
 import api from './api';
 
+export interface CreateSpecialistPayload {
+  name: string;
+  phone_number: string;
+  email: string;
+  document: string;
+  formation: string;
+  password: string;
+}
+
 const serviceName = '/users/specialists';
 
-export async function createSpecialist(specialist: Specialist): Promise<any> {
+export async function createSpecialist(specialist: CreateSpecialistPayload) {
   let response = null;
   await api
     .post(`${serviceName}`, specialist)

src/utils/fontawesome.tsx

@@ -33,6 +33,7 @@ import {
   faSignOut,
   faSignOutAlt,
   faPen,
+  faTrash,
   faArrowCircleDown,
   faCircleChevronDown,
 } from '@fortawesome/free-solid-svg-icons';
@@ -71,6 +72,7 @@ const icons = {
   faSignOut,
   faSignOutAlt,
   faPen,
+  faTrash,
   faArrowCircleDown,
   faCircleChevronDown,
   // more icons go here

yarn.lock

@@ -515,7 +515,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.16.7":
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.16.7":
   "integrity" "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q=="
   "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz"
   "version" "7.16.7"
@@ -1024,7 +1024,7 @@
     "core-js-pure" "^3.20.2"
     "regenerator-runtime" "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   "integrity" "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz"
   "version" "7.17.8"
@@ -1133,6 +1133,89 @@
   dependencies:
     "postcss-value-parser" "^4.2.0"
 
+"@emotion/babel-plugin@^11.7.1":
+  "integrity" "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw=="
+  "resolved" "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz"
+  "version" "11.9.2"
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    "babel-plugin-macros" "^2.6.1"
+    "convert-source-map" "^1.5.0"
+    "escape-string-regexp" "^4.0.0"
+    "find-root" "^1.1.0"
+    "source-map" "^0.5.7"
+    "stylis" "4.0.13"
+
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  "integrity" "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A=="
+  "resolved" "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz"
+  "version" "11.7.1"
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    "stylis" "4.0.13"
+
+"@emotion/hash@^0.8.0":
+  "integrity" "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+  "resolved" "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
+  "version" "0.8.0"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  "integrity" "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+  "resolved" "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz"
+  "version" "0.7.5"
+
+"@emotion/react@^11.8.1":
+  "integrity" "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ=="
+  "resolved" "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz"
+  "version" "11.9.0"
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    "hoist-non-react-statics" "^3.3.1"
+
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  "integrity" "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA=="
+  "resolved" "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz"
+  "version" "1.0.3"
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    "csstype" "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+  "integrity" "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+  "resolved" "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz"
+  "version" "1.1.0"
+
+"@emotion/unitless@^0.7.5":
+  "integrity" "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+  "resolved" "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
+  "version" "0.7.5"
+
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  "integrity" "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+  "resolved" "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz"
+  "version" "1.1.0"
+
+"@emotion/weak-memoize@^0.2.5":
+  "integrity" "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+  "resolved" "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
+  "version" "0.2.5"
+
 "@eslint/eslintrc@^1.2.1":
   "integrity" "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ=="
   "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz"
@@ -1881,6 +1964,20 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-select@^5.0.1":
+  "integrity" "sha512-h5Im0AP0dr4AVeHtrcvQrLV+gmPa7SA0AGdxl2jOhtwiE6KgXBFSogWw8az32/nusE6AQHlCOHQWjP1S/+oMWA=="
+  "resolved" "https://registry.npmjs.org/@types/react-select/-/react-select-5.0.1.tgz"
+  "version" "5.0.1"
+  dependencies:
+    "react-select" "*"
+
+"@types/react-transition-group@^4.4.0":
+  "integrity" "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug=="
+  "resolved" "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz"
+  "version" "4.4.4"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.41":
   "integrity" "sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA=="
   "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.41.tgz"
@@ -2578,6 +2675,15 @@
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+"babel-plugin-macros@^2.6.1":
+  "integrity" "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg=="
+  "resolved" "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
+  "version" "2.8.0"
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "cosmiconfig" "^6.0.0"
+    "resolve" "^1.12.0"
+
 "babel-plugin-macros@^3.1.0":
   "integrity" "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg=="
   "resolved" "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
@@ -3113,7 +3219,7 @@
   "resolved" "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
   "version" "1.0.4"
 
-"convert-source-map@^1.4.0", "convert-source-map@^1.6.0", "convert-source-map@^1.7.0":
+"convert-source-map@^1.4.0", "convert-source-map@^1.5.0", "convert-source-map@^1.6.0", "convert-source-map@^1.7.0":
   "integrity" "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA=="
   "resolved" "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
   "version" "1.8.0"
@@ -3644,6 +3750,14 @@
   dependencies:
     "utila" "~0.4"
 
+"dom-helpers@^5.0.1":
+  "integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="
+  "resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
+  "version" "5.2.1"
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    "csstype" "^3.0.2"
+
 "dom-serializer@^1.0.1":
   "integrity" "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig=="
   "resolved" "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz"
@@ -4365,6 +4479,11 @@
     "make-dir" "^3.0.2"
     "pkg-dir" "^4.1.0"
 
+"find-root@^1.1.0":
+  "integrity" "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+  "resolved" "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
+  "version" "1.1.0"
+
 "find-up@^2.1.0":
   "integrity" "sha1-RdG35QbHF93UgndaK3eSCjwMV6c="
   "resolved" "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
@@ -4713,6 +4832,13 @@
   dependencies:
     "@babel/runtime" "^7.7.6"
 
+"hoist-non-react-statics@^3.3.1":
+  "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
+  "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
+  "version" "3.3.2"
+  dependencies:
+    "react-is" "^16.7.0"
+
 "hoopy@^0.1.4":
   "integrity" "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
   "resolved" "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz"
@@ -5977,6 +6103,11 @@
   dependencies:
     "fs-monkey" "1.0.3"
 
+"memoize-one@^5.0.0":
+  "integrity" "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
+  "version" "5.2.1"
+
 "merge-descriptors@1.0.1":
   "integrity" "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
   "resolved" "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -7130,7 +7261,7 @@
     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.8.1":
+"prop-types@^15.6.0", "prop-types@^15.6.2", "prop-types@^15.8.1":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
@@ -7248,7 +7379,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^17.0.2", "react-dom@>=16.8":
+"react-dom@*", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.2", "react-dom@>=16.6.0", "react-dom@>=16.8":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -7267,6 +7398,11 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   "version" "16.13.1"
 
+"react-is@^16.7.0":
+  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  "version" "16.13.1"
+
 "react-is@^17.0.1":
   "integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
@@ -7347,7 +7483,30 @@
   optionalDependencies:
     "fsevents" "^2.3.2"
 
-"react@*", "react@^17.0.2", "react@>= 16", "react@>=16.8", "react@>=16.x", "react@17.0.2":
+"react-select@*", "react-select@^5.3.2":
+  "integrity" "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ=="
+  "resolved" "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz"
+  "version" "5.3.2"
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@types/react-transition-group" "^4.4.0"
+    "memoize-one" "^5.0.0"
+    "prop-types" "^15.6.0"
+    "react-transition-group" "^4.3.0"
+
+"react-transition-group@^4.3.0":
+  "integrity" "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg=="
+  "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
+  "version" "4.4.2"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "dom-helpers" "^5.0.1"
+    "loose-envify" "^1.4.0"
+    "prop-types" "^15.6.2"
+
+"react@*", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0", "react@>=16.x", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -7529,7 +7688,7 @@
   "resolved" "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
   "version" "1.1.0"
 
-"resolve@^1.14.2", "resolve@^1.19.0", "resolve@^1.20.0", "resolve@^1.22.0":
+"resolve@^1.12.0", "resolve@^1.14.2", "resolve@^1.19.0", "resolve@^1.20.0", "resolve@^1.22.0":
   "integrity" "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw=="
   "resolved" "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
   "version" "1.22.0"
@@ -7877,7 +8036,7 @@
     "buffer-from" "^1.0.0"
     "source-map" "^0.6.0"
 
-"source-map@^0.5.0":
+"source-map@^0.5.0", "source-map@^0.5.7":
   "integrity" "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
   "resolved" "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   "version" "0.5.7"
@@ -8123,6 +8282,11 @@
     "browserslist" "^4.16.6"
     "postcss-selector-parser" "^6.0.4"
 
+"stylis@4.0.13":
+  "integrity" "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+  "resolved" "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz"
+  "version" "4.0.13"
+
 "supports-color@^5.3.0":
   "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
   "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"