🎉 add suggestions to warrant input

SnailyCAD · Nov 10, 2021 · 5ffe444 · 5ffe444
1 parent 602598f
commit 5ffe444
Showing 1 changed file with 43 additions and 7 deletions.
diff --git a/packages/client/src/components/leo/modals/CreateWarrantModal.tsx b/packages/client/src/components/leo/modals/CreateWarrantModal.tsx
@@ -2,19 +2,23 @@ import { Form, Formik, FormikHelpers } from "formik";
 import { useTranslations } from "use-intl";
 import { Button } from "components/Button";
 import { FormField } from "components/form/FormField";
-import { Input } from "components/form/Input";
 import { Select } from "components/form/Select";
 import { Textarea } from "components/form/Textarea";
 import { Loader } from "components/Loader";
 import useFetch from "lib/useFetch";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "context/ModalContext";
 import { ModalIds } from "types/ModalIds";
+import { InputSuggestions } from "components/form/InputSuggestions";
+import { Citizen } from "types/prisma";
+import { PersonFill } from "react-bootstrap-icons";
+import { useImageUrl } from "hooks/useImageUrl";
 
 export const CreateWarrantModal = () => {
   const { isOpen, closeModal } = useModal();
   const { state, execute } = useFetch();
   const common = useTranslations("Common");
+  const { makeImageUrl } = useImageUrl();
 
   async function onSubmit(
     values: typeof INITIAL_VALUES,
@@ -28,11 +32,13 @@ export const CreateWarrantModal = () => {
     if (json.id) {
       // todo: alert success
       helpers.resetForm();
+      closeModal(ModalIds.CreateWarrant);
     }
   }
 
   const INITIAL_VALUES = {
     citizenId: "",
+    citizenName: "",
     status: "",
     description: "",
   };
@@ -45,14 +51,44 @@ export const CreateWarrantModal = () => {
       className="w-[600px]"
     >
       <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, values, errors, isValid }) => (
+        {({ handleChange, setFieldValue, values, errors, isValid }) => (
           <Form>
             <FormField label="Name">
-              <Input
-                name="citizenId"
-                onChange={handleChange}
-                value={values.citizenId}
-                hasError={!!errors.citizenId}
+              <InputSuggestions
+                inputProps={{
+                  value: values.citizenName,
+                  hasError: !!errors.citizenName,
+                  name: "citizenName",
+                  onChange: handleChange,
+                }}
+                onSuggestionClick={(suggestion) => {
+                  setFieldValue("citizenId", suggestion.id);
+                  setFieldValue("citizenName", `${suggestion.name} ${suggestion.surname}`);
+                }}
+                options={{
+                  apiPath: "/search/name",
+                  data: { name: values.citizenName },
+                  method: "POST",
+                  minLength: 2,
+                }}
+                Component={({ suggestion }: { suggestion: Citizen }) => (
+                  <div className="flex items-center">
+                    <div className="mr-2 min-w-[25px]">
+                      {suggestion.imageId ? (
+                        <img
+                          className="rounded-md w-[35px] h-[35px] object-cover"
+                          draggable={false}
+                          src={makeImageUrl("citizens", suggestion.imageId)}
+                        />
+                      ) : (
+                        <PersonFill className="text-gray-500/60 w-[25px] h-[25px]" />
+                      )}
+                    </div>
+                    <p>
+                      {suggestion.name} {suggestion.surname}
+                    </p>
+                  </div>
+                )}
               />
             </FormField>