From 8c1f5ae0c1cb4a8ddf2d9c67a886d9f6ababb5cd Mon Sep 17 00:00:00 2001 From: Franck Date: Fri, 1 Dec 2023 12:17:15 +0100 Subject: [PATCH 1/5] feat(autocomplete): add autocomplete --- package-lock.json | 12 +++++ package.json | 1 + src/api/attendees.ts | 7 +++ src/components/form/inputTags/inputTags.tsx | 34 ++++++++++++-- src/pages/meetings/AttendeesInput.tsx | 51 +++++++++++++++++++++ src/pages/meetings/CreateForm.tsx | 22 ++++----- src/types/Attendee.ts | 4 ++ src/types/AutocompleteItem.ts | 4 ++ 8 files changed, 118 insertions(+), 17 deletions(-) create mode 100644 src/api/attendees.ts create mode 100644 src/pages/meetings/AttendeesInput.tsx create mode 100644 src/types/Attendee.ts create mode 100644 src/types/AutocompleteItem.ts diff --git a/package-lock.json b/package-lock.json index 103aa46..4705fac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-multi-email": "^1.0.18", "react-router-dom": "^6.18.0", "sort-by": "^1.2.0", + "use-debounce": "^10.0.0", "yup": "^1.3.2" }, "devDependencies": { @@ -16410,6 +16411,17 @@ } } }, + "node_modules/use-debounce": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz", + "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==", + "engines": { + "node": ">= 16.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", diff --git a/package.json b/package.json index 069de5e..6189b0d 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-multi-email": "^1.0.18", "react-router-dom": "^6.18.0", "sort-by": "^1.2.0", + "use-debounce": "^10.0.0", "yup": "^1.3.2" }, "devDependencies": { diff --git a/src/api/attendees.ts b/src/api/attendees.ts new file mode 100644 index 0000000..45b1ece --- /dev/null +++ b/src/api/attendees.ts @@ -0,0 +1,7 @@ +import { Attendee } from "@/types/Attendee"; +import { apiClient } from "."; + +export async function getAttendees(email: string): Promise { + const response = await apiClient.get(`/meetings/attendees?email=${email}`); + return response.data; +} \ No newline at end of file diff --git a/src/components/form/inputTags/inputTags.tsx b/src/components/form/inputTags/inputTags.tsx index 45b60d2..9a6d33f 100644 --- a/src/components/form/inputTags/inputTags.tsx +++ b/src/components/form/inputTags/inputTags.tsx @@ -1,28 +1,36 @@ import classNames from "classnames"; import { LucideIcon } from "lucide-react"; import { ReactElement, forwardRef } from "react"; - -import { ChangeHandler, Controller } from "react-hook-form"; import { ReactMultiEmail } from "react-multi-email"; import { TagElement } from "./Tag"; import "./inputTag.css"; +import { AutocompleteItem } from "@/types/AutocompleteItem"; export type InputTagsProps = { id: string; label?: string; icon?: ReactElement; error?: string; - suggestions?: string[]; + suggestions?: AutocompleteItem[]; placeholder: string; className?: string; disabled?: boolean; value?: string[]; onChange?: (emails: string[]) => void; + onChangeInput?: (search: string) => void; }; export const InputTags = forwardRef( ( - { id, label, error, className, disabled, ...props }: InputTagsProps, + { + id, + label, + error, + className, + disabled, + suggestions, + ...props + }: InputTagsProps, ref ): JSX.Element => { return ( @@ -56,6 +64,7 @@ export const InputTags = forwardRef( id={id} aria-invalid={!!error ? "true" : "false"} onChange={props.onChange} + onChangeInput={props.onChangeInput} emails={props.value} getLabel={(email, index, removeEmail) => ( ( /> )} /> + {suggestions && suggestions.length > 0 && ( +
+ {suggestions.map((suggestion) => ( + + ))} +
+ )}
void; + error: string | undefined; +} + +export function AttendeesInput({ + value, + onChange, + error, +}: AttendeesInputProps): JSX.Element { + const [suggestions, setSuggestions] = useState([] as Attendee[]); + + const inputChanged = useDebouncedCallback((search) => { + if (search.length < 3) { + setSuggestions([]); + return; + } + getAttendees(search).then((data) => { + setSuggestions(data); + }); + }, 300); + + return ( + } + placeholder="Enter attendees emails, separated by a comma." + className="w-full" + onChange={(value) => { + onChange(value); + setSuggestions([]); + }} + error={error} + value={value} + onChangeInput={inputChanged} + suggestions={suggestions.map((suggestion) => ({ + display: suggestion.email, + value: suggestion.email, + }))} + /> + ); +} diff --git a/src/pages/meetings/CreateForm.tsx b/src/pages/meetings/CreateForm.tsx index cbc6d4c..3903216 100644 --- a/src/pages/meetings/CreateForm.tsx +++ b/src/pages/meetings/CreateForm.tsx @@ -1,18 +1,19 @@ import { createMeeting } from "@/api/meetings"; import { Button } from "@/components/base/button/button"; import { Input } from "@/components/form/input/input"; -import { InputTags } from "@/components/form/inputTags/inputTags"; import { Textarea } from "@/components/form/textarea/textarea"; import { formatDatetimeToInputValue as dateForInput } from "@/utils/date"; import classNames from "classnames"; import { isAfter, addMinutes } from "date-fns"; -import { Edit3, Calendar, Pencil, Loader2 } from "lucide-react"; +import { Edit3, Calendar, Loader2 } from "lucide-react"; import { useEffect, useState } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; +import { AttendeesInput } from "./AttendeesInput"; +import { Attendee } from "@/types/Attendee"; const END_DATE_LIMIT = 5; -interface FormInputs { +interface CreateMeetingForm { title: string; start_date: string; end_date: string; @@ -35,7 +36,7 @@ export function MeetingCreateForm({ watch, trigger, setValue, - } = useForm({ + } = useForm({ mode: "all", defaultValues: { start_date: dateForInput(addMinutes(new Date(), END_DATE_LIMIT)), @@ -56,7 +57,7 @@ export function MeetingCreateForm({ const endDate = watch("end_date", "Invalid Date"); const now = new Date(); - const onSubmit: SubmitHandler = async (data) => { + const onSubmit: SubmitHandler = async (data) => { setLoading(true); await createMeeting({ @@ -138,16 +139,11 @@ export function MeetingCreateForm({
- } - placeholder="Enter attendees emails, separated by a comma." - className="w-full" + { - setValue("attendees", emails, { shouldValidate: true }); + onChange={(values) => { + setValue("attendees", values, { shouldValidate: true }); }} />
diff --git a/src/types/Attendee.ts b/src/types/Attendee.ts new file mode 100644 index 0000000..f465df6 --- /dev/null +++ b/src/types/Attendee.ts @@ -0,0 +1,4 @@ +export interface Attendee { + id: number; + email: string; +} \ No newline at end of file diff --git a/src/types/AutocompleteItem.ts b/src/types/AutocompleteItem.ts new file mode 100644 index 0000000..400cab2 --- /dev/null +++ b/src/types/AutocompleteItem.ts @@ -0,0 +1,4 @@ +export interface AutocompleteItem { + display: string; + value: string; +} \ No newline at end of file From 1f1e8d0816b471039a63591f75658bf204ce92d8 Mon Sep 17 00:00:00 2001 From: Franck Date: Fri, 15 Dec 2023 11:04:10 +0100 Subject: [PATCH 2/5] feat: new autocomplete --- package.json | 2 +- src/api/meetings.ts | 4 +- src/components/form/input/input.tsx | 2 +- src/components/form/inputTags/Tag.tsx | 2 +- src/components/form/inputTags/inputTag.css | 10 -- src/components/form/inputTags/inputTags.tsx | 43 ++++--- src/pages/meetings/AttendeesInput.tsx | 127 ++++++++++++++------ src/pages/meetings/CreateForm.tsx | 32 +++-- src/types/AutocompleteItem.ts | 4 - src/types/Meeting.ts | 11 +- 10 files changed, 155 insertions(+), 82 deletions(-) delete mode 100644 src/components/form/inputTags/inputTag.css delete mode 100644 src/types/AutocompleteItem.ts diff --git a/package.json b/package.json index 6189b0d..d62f01c 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "react-countdown": "^2.3.5", "react-dom": "^18.2.0", "react-hook-form": "^7.47.0", - "react-multi-email": "^1.0.18", "react-router-dom": "^6.18.0", + "react-tag-autocomplete": "^7.1.0", "sort-by": "^1.2.0", "use-debounce": "^10.0.0", "yup": "^1.3.2" diff --git a/src/api/meetings.ts b/src/api/meetings.ts index f494cb1..01e8fe1 100644 --- a/src/api/meetings.ts +++ b/src/api/meetings.ts @@ -1,4 +1,4 @@ -import { CreateMeetingInput, Meeting } from "@/types/Meeting"; +import { CreateMeetingInput, CreateMeetingPayload, Meeting } from "@/types/Meeting"; import { apiClient } from "."; export async function getFutureMeetings(): Promise { @@ -23,7 +23,7 @@ export async function getPreviousMeetings(before: Date): Promise { } export async function createMeeting( - data: CreateMeetingInput + data: CreateMeetingPayload ): Promise { const response = await apiClient.post("/meetings", data); return response.data; diff --git a/src/components/form/input/input.tsx b/src/components/form/input/input.tsx index e3a9475..928ed3f 100644 --- a/src/components/form/input/input.tsx +++ b/src/components/form/input/input.tsx @@ -12,7 +12,7 @@ export type InputProps = { export const Input = forwardRef( ({ id, label, error, className, ...props }, ref) => { return ( -
+
{label && (
-
+ */} {error && ( {error} diff --git a/src/pages/meetings/AttendeesInput.tsx b/src/pages/meetings/AttendeesInput.tsx index 7cbc865..95da5f4 100644 --- a/src/pages/meetings/AttendeesInput.tsx +++ b/src/pages/meetings/AttendeesInput.tsx @@ -1,51 +1,108 @@ -import { getAttendees } from "@/api/attendees"; -import { InputTags } from "@/components/form/inputTags/inputTags"; -import { Attendee } from "@/types/Attendee"; -import { Pencil } from "lucide-react"; -import { useState } from "react"; import { useDebouncedCallback } from "use-debounce"; +import { useCallback, useState } from "react"; +import { ReactTags, Tag, TagSuggestion } from "react-tag-autocomplete"; +import { getAttendees } from "@/api/attendees"; +import classNames from "classnames"; interface AttendeesInputProps { - value: string[]; - onChange: (values: string[]) => void; + value: Tag[]; + onChange: (values: Tag[]) => void; error: string | undefined; + id: string; } -export function AttendeesInput({ +export const AttendeesInput = ({ value, onChange, error, -}: AttendeesInputProps): JSX.Element { - const [suggestions, setSuggestions] = useState([] as Attendee[]); + id, +}: AttendeesInputProps): JSX.Element => { + const [isBusy, setIsBusy] = useState(false); + const [suggestions, setSuggestions] = useState([]); - const inputChanged = useDebouncedCallback((search) => { - if (search.length < 3) { + const onAdd = useCallback( + (newTag: Tag) => { + onChange?.([...(value ?? []), newTag]); setSuggestions([]); - return; + }, + [value] + ); + + const onDelete = useCallback( + (index: number) => { + onChange?.((value ?? []).filter((_, i) => i !== index)); + }, + [value] + ); + + const onInput = useDebouncedCallback(async (value: string) => { + if (isBusy) return; + + setIsBusy(true); + + try { + const suggestions = await getAttendees(value); + setSuggestions( + suggestions.map((suggestion) => ({ + label: suggestion.email, + value: suggestion.email, + })) + ); + } catch (error) { + console.error(error); + } finally { + setIsBusy(false); } - getAttendees(search).then((data) => { - setSuggestions(data); - }); }, 300); + const noOptionsText = + isBusy && !suggestions.length ? "Loading..." : "No suggestions found"; + return ( - } - placeholder="Enter attendees emails, separated by a comma." - className="w-full" - onChange={(value) => { - onChange(value); - setSuggestions([]); - }} - error={error} - value={value} - onChangeInput={inputChanged} - suggestions={suggestions.map((suggestion) => ({ - display: suggestion.email, - value: suggestion.email, - }))} - /> +
+ + +
); -} +}; diff --git a/src/pages/meetings/CreateForm.tsx b/src/pages/meetings/CreateForm.tsx index 3903216..3a4ad52 100644 --- a/src/pages/meetings/CreateForm.tsx +++ b/src/pages/meetings/CreateForm.tsx @@ -9,7 +9,7 @@ import { Edit3, Calendar, Loader2 } from "lucide-react"; import { useEffect, useState } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; import { AttendeesInput } from "./AttendeesInput"; -import { Attendee } from "@/types/Attendee"; +import { Tag } from "react-tag-autocomplete"; const END_DATE_LIMIT = 5; @@ -17,7 +17,7 @@ interface CreateMeetingForm { title: string; start_date: string; end_date: string; - attendees: string[]; + attendees: Tag[]; description: string; } @@ -64,7 +64,9 @@ export function MeetingCreateForm({ ...data, start_date: new Date(data.start_date), end_date: new Date(data.end_date), - attendees: data.attendees || [], + attendees: (data.attendees || []).map( + (attendee) => attendee.value as string + ), }); await onFormCreated?.(); @@ -90,7 +92,10 @@ export function MeetingCreateForm({ }, [startDate, endDate]); return ( -
+ -
- { - setValue("attendees", values, { shouldValidate: true }); - }} - /> -
+ { + setValue("attendees", values, { + shouldValidate: true, + }); + }} + />