import { useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { Pencil, Trash2 } from "lucide-react"; // store hooks import { useGlobalView } from "hooks/store"; // components import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace"; // ui import { CustomMenu, PhotoFilterIcon } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; import { calculateTotalFilters } from "helpers/filter.helper"; type Props = { viewId: string }; export const GlobalViewListItem: React.FC = observer((props) => { const { viewId } = props; // states const [updateViewModal, setUpdateViewModal] = useState(false); const [deleteViewModal, setDeleteViewModal] = useState(false); // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { getViewDetailsById } = useGlobalView(); // derived data const view = getViewDetailsById(viewId); if (!view) return null; const totalFilters = calculateTotalFilters(view.query_data.filters ?? {}); return ( <> setUpdateViewModal(false)} /> setDeleteViewModal(false)} />

{truncateText(view.name, 75)}

{view?.description &&

{view.description}

}

{totalFilters} {totalFilters === 1 ? "filter" : "filters"}

{ e.preventDefault(); e.stopPropagation(); setUpdateViewModal(true); }} > Edit View { e.preventDefault(); e.stopPropagation(); setDeleteViewModal(true); }} > Delete View
); });