import { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // services import stateService from "services/state.service"; // ui import { Tooltip } from "components/ui"; // icons import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline"; import { StateGroupIcon } from "components/icons"; import { Pencil, X } from "lucide-react"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; import { groupBy, orderArrayBy } from "helpers/array.helper"; import { orderStateGroups } from "helpers/state.helper"; // types import { ICurrentUserResponse, IState } from "types"; // fetch-keys import { STATES_LIST } from "constants/fetch-keys"; type Props = { index: number; state: IState; statesList: IState[]; handleEditState: () => void; handleDeleteState: () => void; user: ICurrentUserResponse | undefined; }; export const SingleState: React.FC = ({ index, state, statesList, handleEditState, handleDeleteState, user, }) => { const [isSubmitting, setIsSubmitting] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const groupStates = statesList.filter((s) => s.group === state.group); const groupLength = groupStates.length; const handleMakeDefault = () => { setIsSubmitting(true); const currentDefaultState = statesList.find((s) => s.default); let newStatesList = statesList.map((s) => ({ ...s, default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default, })); newStatesList = orderArrayBy(newStatesList, "sequence", "ascending"); mutate( STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false ); if (currentDefaultState) stateService .patchState( workspaceSlug as string, projectId as string, currentDefaultState?.id ?? "", { default: false, }, user ) .then(() => { stateService .patchState( workspaceSlug as string, projectId as string, state.id, { default: true, }, user ) .then(() => { mutate(STATES_LIST(projectId as string)); setIsSubmitting(false); }) .catch(() => { setIsSubmitting(false); }); }); else stateService .patchState( workspaceSlug as string, projectId as string, state.id, { default: true, }, user ) .then(() => { mutate(STATES_LIST(projectId as string)); setIsSubmitting(false); }) .catch(() => { setIsSubmitting(false); }); }; const handleMove = (state: IState, direction: "up" | "down") => { let newSequence = 15000; if (direction === "up") { if (index === 1) newSequence = groupStates[0].sequence - 15000; else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2; } else { if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000; else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2; } let newStatesList = statesList.map((s) => ({ ...s, sequence: s.id === state.id ? newSequence : s.sequence, })); newStatesList = orderArrayBy(newStatesList, "sequence", "ascending"); mutate( STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false ); stateService .patchState( workspaceSlug as string, projectId as string, state.id, { sequence: newSequence, }, user ) .then((res) => { console.log(res); mutate(STATES_LIST(projectId as string)); }) .catch((err) => { console.error(err); }); }; return (
{addSpaceIfCamelCase(state.name)}

{state.description}

{index !== 0 && ( )} {!(index === groupLength - 1) && ( )} {state.default ? ( Default ) : ( )}
); };