plane/web/components/dashboard/widgets/created-issues.tsx

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, getTabKey } from "helpers/dashboard.helper";
// types
import { EDurationFilters, 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<WidgetProps> = 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<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
  const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
  const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];

  const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
    if (!widgetDetails) return;

    setFetching(true);

    await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, {
      widgetKey: WIDGET_KEY,
      filters,
    });

    const filterDates = getCustomDates(
      filters.duration ?? selectedDurationFilter,
      filters.custom_dates ?? selectedCustomDates
    );
    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, selectedCustomDates);

    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;
  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);

  if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;

  return (
    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
      <div className="flex items-center justify-between gap-2 p-6 pl-7">
        <Link
          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
          className="text-lg font-semibold text-custom-text-300 hover:underline"
        >
          Created by you
        </Link>
        <DurationFilterDropdown
          customDates={selectedCustomDates}
          value={selectedDurationFilter}
          onChange={(val, customDates) => {
            if (val === "custom" && customDates) {
              handleUpdateFilters({
                duration: val,
                custom_dates: customDates,
              });
              return;
            }

            if (val === selectedDurationFilter) return;

            let newTab = selectedTab;
            // switch to pending tab if target date is changed to none
            if (val === "none" && selectedTab !== "completed") newTab = "pending";
            // switch to upcoming tab if target date is changed to other than none
            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";

            handleUpdateFilters({
              duration: val,
              tab: newTab,
            });
          }}
        />
      </div>
      <Tab.Group
        as="div"
        selectedIndex={selectedTabIndex}
        onChange={(i) => {
          const newSelectedTab = tabsList[i];
          handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
        }}
        className="h-full flex flex-col"
      >
        <div className="px-6">
          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
        </div>
        <Tab.Panels as="div" className="h-full">
          {tabsList.map((tab) => {
            if (tab.key !== selectedTab) return null;

            return (
              <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
                <WidgetIssuesList
                  tab={tab.key}
                  type="created"
                  workspaceSlug={workspaceSlug}
                  widgetStats={widgetStats}
                  isLoading={fetching}
                />
              </Tab.Panel>
            );
          })}
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
});