import { useEffect } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { useForm } from "react-hook-form"; // ui import { Avatar, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; // types import { IView } from "types"; // constant import { PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys"; // helpers import { getStatesList } from "helpers/state.helper"; // services import stateService from "services/state.service"; import projectService from "services/project.service"; // components import { SelectFilters } from "components/views"; // icons import { getStateGroupIcon } from "components/icons"; import { getPriorityIcon } from "components/icons/priority-icon"; // components type Props = { handleFormSubmit: (values: IView) => Promise; handleClose: () => void; status: boolean; data?: IView; preLoadedData?: Partial | null; }; const defaultValues: Partial = { name: "", description: "", }; export const ViewForm: React.FC = ({ handleFormSubmit, handleClose, status, data, preLoadedData, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: states } = useSWR( workspaceSlug && projectId ? STATE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null ); const statesList = getStatesList(states ?? {}); const { data: members } = useSWR( projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null ); const { register, formState: { errors, isSubmitting }, handleSubmit, reset, watch, setValue, } = useForm({ defaultValues, }); const handleCreateUpdateView = async (formData: IView) => { await handleFormSubmit(formData); reset({ ...defaultValues, }); }; useEffect(() => { reset({ ...defaultValues, ...data, }); }, [data, reset]); useEffect(() => { reset({ ...defaultValues, ...preLoadedData, }); }, [preLoadedData, reset]); const filters = watch("query"); return (

{status ? "Update" : "Create"} View