import React from "react"; import { useRouter } from "next/router"; // hooks import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter"; // components import { MyIssuesSelectFilters } from "components/issues"; // ui import { Tooltip } from "components/ui"; // icons import { FormatListBulletedOutlined } from "@mui/icons-material"; import { CreditCard } from "lucide-react"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { checkIfArraysHaveSameElements } from "helpers/array.helper"; // types import { TIssueViewOptions } from "types"; const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [ { type: "list", Icon: FormatListBulletedOutlined, }, { type: "spreadsheet", Icon: CreditCard, }, ]; export const MyIssuesViewOptions: React.FC = () => { const router = useRouter(); const { workspaceSlug, globalViewId } = router.query; const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters( workspaceSlug?.toString() ); const workspaceViewPathName = ["workspace-views/all-issues"]; const isWorkspaceViewPath = workspaceViewPathName.some((pathname) => router.pathname.includes(pathname) ); const showFilters = isWorkspaceViewPath || globalViewId; return (
{issueViewOptions.map((option) => ( {replaceUnderscoreIfSnakeCase(option.type)} View } position="bottom" > ))}
{showFilters && ( { const key = option.key as keyof typeof filters; if (key === "start_date" || key === "target_date") { const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value); setFilters({ [key]: valueExists ? null : option.value, }); } else { const valueExists = filters[key]?.includes(option.value); if (valueExists) setFilters({ [option.key]: ((filters[key] ?? []) as any[])?.filter( (val) => val !== option.value ), }); else setFilters({ [option.key]: [...((filters[key] ?? []) as any[]), option.value], }); } }} direction="left" height="rg" /> )}
); };