import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // store import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { CreateUpdateStateInline, DeleteStateModal, ProjectSettingListItem, StateGroup } from "components/states"; // ui import { Loader } from "@plane/ui"; // icons import { Plus } from "lucide-react"; // helpers import { orderStateGroups } from "helpers/state.helper"; import { sortByField } from "helpers/array.helper"; // fetch-keys import { STATES_LIST } from "constants/fetch-keys"; export const ProjectSettingStateList: React.FC = observer(() => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store const { projectState: { groupedProjectStates, projectStates, fetchProjectStates }, trackEvent: { setTrackElement } } = useMobxStore(); // state const [activeGroup, setActiveGroup] = useState(null); const [selectedState, setSelectedState] = useState(null); const [selectDeleteState, setSelectDeleteState] = useState(null); useSWR( workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null, workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null ); // derived values const orderedStateGroups = orderStateGroups(groupedProjectStates!); console.log("groupedStates", groupedProjectStates); console.log("orderedStateGroups", orderedStateGroups); return ( <> setSelectDeleteState(null)} data={projectStates?.find((s) => s.id === selectDeleteState) ?? null} />
{orderedStateGroups ? ( <> {Object.keys(orderedStateGroups).map((group) => (

{group}

{group === activeGroup && ( { setActiveGroup(null); setSelectedState(null); }} selectedGroup={group as keyof StateGroup} /> )} {sortByField(orderedStateGroups[group], "sequence").map((state, index) => state.id !== selectedState ? ( setSelectedState(state.id)} handleDeleteState={() => setSelectDeleteState(state.id)} /> ) : (
{ setActiveGroup(null); setSelectedState(null); }} groupLength={orderedStateGroups[group].length} data={projectStates?.find((state) => state.id === selectedState) ?? null} selectedGroup={group as keyof StateGroup} />
) )}
))} ) : ( )}
{/*
{states && currentProjectDetails && orderedStateGroups ? ( Object.keys(orderedStateGroups || {}).map((key) => { if (orderedStateGroups[key].length !== 0) return (

{key}

{key === activeGroup && ( { setActiveGroup(null); setSelectedState(null); }} selectedGroup={key as keyof StateGroup} /> )} {orderedStateGroups[key].map((state, index) => state.id !== selectedState ? ( setSelectedState(state.id)} handleDeleteState={() => setSelectDeleteState(state.id)} /> ) : (
{ setActiveGroup(null); setSelectedState(null); }} groupLength={orderedStateGroups[key].length} data={statesList?.find((state) => state.id === selectedState) ?? null} selectedGroup={key as keyof StateGroup} />
) )}
); }) ) : ( )}
*/} ); });