React-Select Integration and Ride Modal

frontend/package.json

@@ -33,10 +33,11 @@
     "react-router-dom": "^6.26.2",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.8.1",
     "reactjs-popup": "^2.0.6"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "tsc": "../node_modules/.bin/tsc --noEmit false",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
@@ -71,4 +72,4 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "2.8.8"
   }
-}
+}

frontend/src/components/FormElements/FormElements.tsx

@@ -2,7 +2,7 @@ import React, { SelectHTMLAttributes } from 'react';
 import cn from 'classnames';
 import styles from './formelements.module.css';
 import Select, { ActionMeta, Props as SelectProps } from 'react-select';
-import { Control, RegisterOptions, useController } from 'react-hook-form';
+import { Control, RegisterOptions, useController, Path, FieldValues } from 'react-hook-form';
 
 type LabelType = React.DetailedHTMLProps<
   React.LabelHTMLAttributes<HTMLLabelElement>,
@@ -86,25 +86,25 @@ type SelectOption = {
   label: string;
 };
 
-type SelectComponentProps = SelectProps & {
-  control: Control;
-  name: string;
+type SelectComponentProps<TFieldValues extends FieldValues> = SelectProps & {
+  control: Control<TFieldValues>;
+  name: Path<TFieldValues>;
   datalist: Option[];
   className?: string;
-  rules?: RegisterOptions;
+  rules?: RegisterOptions<TFieldValues>;
 };
 
-export const SelectComponent: React.FC<SelectComponentProps> = ({
+export const SelectComponent = <TFieldValues extends FieldValues>({
   control,
   name,
   datalist,
   className,
   rules,
   ...rest
-}) => {
+}: SelectComponentProps<TFieldValues>) => {
   const {
     field: { onChange, value, ref, ...inputProps },
-  } = useController({
+  } = useController<TFieldValues>({
     name,
     control,
     rules,
@@ -132,4 +132,4 @@ export const SelectComponent: React.FC<SelectComponentProps> = ({
       {...rest}
     />
   );
-};
+};

frontend/src/components/Modal/RiderModalInfo.tsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import cn from 'classnames';
-import { Button, Input, Label } from '../FormElements/FormElements';
+import {
+  Button,
+  Input,
+  Label,
+  SelectComponent,
+} from '../FormElements/FormElements';
 import styles from './ridermodal.module.css';
 import { ObjectType, Accessibility, Rider } from '../../types/index';
 
@@ -31,6 +36,7 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
   rider,
 }) => {
   const {
+    control,
     register,
     formState: { errors },
     handleSubmit,
@@ -181,6 +187,20 @@ const RiderModalInfo: React.FC<ModalFormProps> = ({
             </p>
           )}
         </div>
+
+        <div className={cn(styles.gridR2, styles.gridCBig2)}>
+          <SelectComponent<FormData>
+            name="needs"
+            datalist={Object.entries(Accessibility).map(([key, value]) => ({
+              id: key,
+              name: value,
+            }))}
+            isSearchable={true}
+            control={control}
+            isMulti={true}
+            rules={{ required: 'Rider name is required' }}
+          />
+        </div>
         <div className={cn(styles.gridR2, styles.gridCBig2)}>
           <Label className={styles.label} htmlFor="address">
             Address:{' '}