import { useEffect, useState } from "react"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { Tab } from "@headlessui/react"; // hooks import { useDashboard } from "hooks/store"; // components import { DurationFilterDropdown, TabsList, WidgetIssuesList, WidgetLoader, WidgetProps, } from "components/dashboard/widgets"; // helpers import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"; // types import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types"; // constants import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard"; const WIDGET_KEY = "created_issues"; export const CreatedIssuesWidget: React.FC = observer((props) => { const { dashboardId, workspaceSlug } = props; // states const [fetching, setFetching] = useState(false); // store hooks const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard(); // derived values const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY); const widgetStats = getWidgetStats(workspaceSlug, dashboardId, WIDGET_KEY); const selectedTab = widgetDetails?.widget_filters.tab ?? "pending"; const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none"; const handleUpdateFilters = async (filters: Partial) => { if (!widgetDetails) return; setFetching(true); await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, { widgetKey: WIDGET_KEY, filters, }); const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter); fetchWidgetStats(workspaceSlug, dashboardId, { widget_key: WIDGET_KEY, issue_type: filters.tab ?? selectedTab, ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}), }).finally(() => setFetching(false)); }; useEffect(() => { const filterDates = getCustomDates(selectedDurationFilter); fetchWidgetStats(workspaceSlug, dashboardId, { widget_key: WIDGET_KEY, issue_type: selectedTab, ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}), }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const filterParams = getRedirectionFilters(selectedTab); const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST; if (!widgetDetails || !widgetStats) return ; return (
Created by you { if (val === selectedDurationFilter) return; // switch to pending tab if target date is changed to none if (val === "none" && selectedTab !== "completed") { handleUpdateFilters({ target_date: val, tab: "pending" }); return; } // switch to upcoming tab if target date is changed to other than none if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") { handleUpdateFilters({ target_date: val, tab: "upcoming", }); return; } handleUpdateFilters({ target_date: val }); }} />
tab.key === selectedTab)} onChange={(i) => { const selectedTab = tabsList[i]; handleUpdateFilters({ tab: selectedTab.key ?? "pending" }); }} className="h-full flex flex-col" >
{tabsList.map((tab) => ( ))}
); });