plane/web/components/core/views/all-views.tsx

import React, { useCallback, useState } from "react";

import { useRouter } from "next/router";

import useSWR from "swr";

// react-beautiful-dnd
import { DragDropContext, DropResult } from "react-beautiful-dnd";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
// services
import stateService from "services/project_state.service";
// hooks
import useUser from "hooks/use-user";
import { useProjectMyMembership } from "contexts/project-member.context";
// components
import { AllLists, AllBoards, CalendarView, SpreadsheetView, GanttChartView } from "components/core";
import { KanBanLayout } from "components/issues/issue-layouts";
// ui
import { EmptyState, Spinner } from "components/ui";
// icons
import { TrashIcon } from "@heroicons/react/24/outline";
// images
import emptyIssue from "public/empty-state/issue.svg";
import emptyIssueArchive from "public/empty-state/issue-archive.svg";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IIssue, IIssueViewProps } from "types";
// fetch-keys
import { STATES_LIST } from "constants/fetch-keys";
// store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";

type Props = {
  addIssueToDate: (date: string) => void;
  addIssueToGroup: (groupTitle: string) => void;
  disableUserActions: boolean;
  dragDisabled?: boolean;
  emptyState: {
    title: string;
    description?: string;
    primaryButton?: {
      icon: any;
      text: string;
      onClick: () => void;
    };
    secondaryButton?: React.ReactNode;
  };
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
  handleOnDragEnd: (result: DropResult) => Promise<void>;
  openIssuesListModal: (() => void) | null;
  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
  disableAddIssueOption?: boolean;
  trashBox: boolean;
  setTrashBox: React.Dispatch<React.SetStateAction<boolean>>;
  viewProps: IIssueViewProps;
};

export const AllViews: React.FC<Props> = ({
  addIssueToDate,
  addIssueToGroup,
  disableUserActions,
  dragDisabled = false,
  emptyState,
  handleIssueAction,
  handleDraftIssueAction,
  handleOnDragEnd,
  openIssuesListModal,
  removeIssue,
  disableAddIssueOption = false,
  trashBox,
  setTrashBox,
  viewProps,
}) => {
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
    workspaceSlug: string;
    projectId: string;
    cycleId: string;
    moduleId: string;
  };

  const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);

  const { user } = useUser();
  const { memberRole } = useProjectMyMembership();

  const { groupedIssues, isEmpty, displayFilters } = viewProps;

  const { data: stateGroups } = useSWR(
    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
    workspaceSlug ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
  );
  const states = getStatesList(stateGroups);

  const handleMyIssueOpen = (issue: IIssue) => {
    setMyIssueProjectId(issue.project);
  };

  const handleTrashBox = useCallback(
    (isDragging: boolean) => {
      if (isDragging && !trashBox) setTrashBox(true);
    },
    [trashBox, setTrashBox]
  );

  const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();

  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
    if (workspaceSlug && projectId) {
      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);

      await projectStore.fetchProjectStates(workspaceSlug, projectId);
      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
      await projectStore.fetchProjectMembers(workspaceSlug, projectId);

      await issueStore.fetchIssues(workspaceSlug, projectId);
    }
  });

  return (
    // <DragDropContext onDragEnd={handleOnDragEnd}>
    //   <StrictModeDroppable droppableId="trashBox">
    //     {(provided, snapshot) => (
    //       <div
    //         className={`${
    //           trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
    //         } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
    //           snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
    //         } transition duration-300`}
    //         ref={provided.innerRef}
    //         {...provided.droppableProps}
    //       >
    //         <TrashIcon className="h-4 w-4" />
    //         Drop here to delete the issue.
    //       </div>
    //     )}
    //   </StrictModeDroppable>
    //   {groupedIssues ? (
    //     !isEmpty ||
    //     displayFilters?.layout === "kanban" ||
    //     displayFilters?.layout === "calendar" ||
    //     displayFilters?.layout === "gantt_chart" ? (
    //       <>
    //         {displayFilters?.layout === "list" ? (
    //           <AllLists
    //             states={states}
    //             addIssueToGroup={addIssueToGroup}
    //             handleIssueAction={handleIssueAction}
    //             handleDraftIssueAction={handleDraftIssueAction}
    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
    //             removeIssue={removeIssue}
    //             myIssueProjectId={myIssueProjectId}
    //             handleMyIssueOpen={handleMyIssueOpen}
    //             disableUserActions={disableUserActions}
    //             disableAddIssueOption={disableAddIssueOption}
    //             user={user}
    //             userAuth={memberRole}
    //             viewProps={viewProps}
    //           />
    //         ) : displayFilters?.layout === "kanban" ? (
    //           <AllBoards
    //             addIssueToGroup={addIssueToGroup}
    //             disableUserActions={disableUserActions}
    //             disableAddIssueOption={disableAddIssueOption}
    //             dragDisabled={dragDisabled}
    //             handleIssueAction={handleIssueAction}
    //             handleDraftIssueAction={handleDraftIssueAction}
    //             handleTrashBox={handleTrashBox}
    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
    //             myIssueProjectId={myIssueProjectId}
    //             handleMyIssueOpen={handleMyIssueOpen}
    //             removeIssue={removeIssue}
    //             states={states}
    //             user={user}
    //             userAuth={memberRole}
    //             viewProps={viewProps}
    //           />
    //         ) : displayFilters?.layout === "calendar" ? (
    //           <CalendarView
    //             handleIssueAction={handleIssueAction}
    //             addIssueToDate={addIssueToDate}
    //             disableUserActions={disableUserActions}
    //             user={user}
    //             userAuth={memberRole}
    //           />
    //         ) : displayFilters?.layout === "spreadsheet" ? (
    //           <SpreadsheetView
    //             handleIssueAction={handleIssueAction}
    //             openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
    //             disableUserActions={disableUserActions}
    //             user={user}
    //             userAuth={memberRole}
    //           />
    //         ) : (
    //           displayFilters?.layout === "gantt_chart" && <GanttChartView disableUserActions={disableUserActions} />
    //         )}
    //       </>
    //     ) : router.pathname.includes("archived-issues") ? (
    //       <EmptyState
    //         title="Archived Issues will be shown here"
    //         description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
    //         image={emptyIssueArchive}
    //         primaryButton={{
    //           text: "Go to Automation Settings",
    //           onClick: () => {
    //             router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
    //           },
    //         }}
    //       />
    //     ) : (
    //       <EmptyState
    //         title={emptyState.title}
    //         description={emptyState.description}
    //         image={emptyIssue}
    //         primaryButton={
    //           emptyState.primaryButton
    //             ? {
    //                 icon: emptyState.primaryButton.icon,
    //                 text: emptyState.primaryButton.text,
    //                 onClick: emptyState.primaryButton.onClick,
    //               }
    //             : undefined
    //         }
    //         secondaryButton={emptyState.secondaryButton}
    //       />
    //     )
    //   ) : (
    //     <div className="flex h-full w-full items-center justify-center">
    //       <Spinner />
    //     </div>
    //   )}
    // </DragDropContext>
    <div className="relative w-full h-full overflow-auto">
      <KanBanLayout />
    </div>
  );
};