plane/apps/app/components/issues/list-view.tsx

import React, { useState } from "react";

import { useRouter } from "next/router";

import useSWR from "swr";

import { Disclosure, Transition } from "@headlessui/react";
// hooks
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
import useIssuesProperties from "hooks/use-issue-properties";
import useIssueView from "hooks/use-issue-view";
// services
import stateService from "services/state.service";
import workspaceService from "services/workspace.service";
// ui
import { Spinner } from "components/ui";
// components
import { CreateUpdateIssueModal } from "components/issues/modal";
import SingleListIssue from "components/core/list-view/single-issue";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types
import { IIssue, IWorkspaceMember, UserAuth } from "types";
// fetch-keys
import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";

// types
type Props = {
  issues: IIssue[];
  handleEditIssue: (issue: IIssue) => void;
  userAuth: UserAuth;
};

export const IssuesListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
  const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
  const [preloadedData, setPreloadedData] = useState<
    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
  >(undefined);

  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);

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

  const { data: people } = useSWR<IWorkspaceMember[]>(
    workspaceSlug ? WORKSPACE_MEMBERS : null,
    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
  );

  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);

  if (issueView !== "list") return <></>;

  return (
    <>
      <CreateUpdateIssueModal
        isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
        handleClose={() => setIsCreateIssuesModalOpen(false)}
        prePopulateData={{
          ...preloadedData,
        }}
      />
      <div className="flex flex-col space-y-5">
        {Object.keys(groupedByIssues).map((singleGroup) => (
          <Disclosure key={singleGroup} as="div" defaultOpen>
            {({ open }) => (
              <div className="rounded-lg bg-white">
                <div className="rounded-t-lg bg-gray-100 px-4 py-3">
                  <Disclosure.Button>
                    <div className="flex items-center gap-x-2">
                      <span>
                        <ChevronDownIcon
                          className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
                        />
                      </span>
                      {selectedGroup !== null ? (
                        <h2 className="font-medium capitalize leading-5">
                          {singleGroup === null || singleGroup === "null"
                            ? selectedGroup === "priority" && "No priority"
                            : selectedGroup === "created_by"
                            ? people?.find((p) => p.member.id === singleGroup)?.member
                                ?.first_name ?? "Loading..."
                            : addSpaceIfCamelCase(singleGroup)}
                        </h2>
                      ) : (
                        <h2 className="font-medium leading-5">All Issues</h2>
                      )}
                      <p className="text-sm text-gray-500">
                        {groupedByIssues[singleGroup as keyof IIssue].length}
                      </p>
                    </div>
                  </Disclosure.Button>
                </div>
                <Transition
                  show={open}
                  enter="transition duration-100 ease-out"
                  enterFrom="transform opacity-0"
                  enterTo="transform opacity-100"
                  leave="transition duration-75 ease-out"
                  leaveFrom="transform opacity-100"
                  leaveTo="transform opacity-0"
                >
                  <Disclosure.Panel>
                    <div className="divide-y-2">
                      {groupedByIssues[singleGroup] ? (
                        groupedByIssues[singleGroup].length > 0 ? (
                          groupedByIssues[singleGroup].map((issue: IIssue) => {
                            const assignees = [
                              ...(issue?.assignees_list ?? []),
                              ...(issue?.assignees ?? []),
                            ]?.map((assignee) => {
                              const tempPerson = people?.find(
                                (p) => p.member.id === assignee
                              )?.member;

                              return tempPerson;
                            });

                            return (
                              <SingleListIssue
                                key={issue.id}
                                type="issue"
                                issue={issue}
                                properties={properties}
                                editIssue={() => handleEditIssue(issue)}
                                userAuth={userAuth}
                              />
                            );
                          })
                        ) : (
                          <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
                        )
                      ) : (
                        <div className="flex h-full w-full items-center justify-center">
                          <Spinner />
                        </div>
                      )}
                    </div>
                  </Disclosure.Panel>
                </Transition>
                <div className="p-3">
                  <button
                    type="button"
                    className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
                    onClick={() => {
                      setIsCreateIssuesModalOpen(true);
                      if (selectedGroup !== null) {
                        const stateId =
                          selectedGroup === "state_detail.name"
                            ? states?.find((s) => s.name === singleGroup)?.id ?? null
                            : null;
                        setPreloadedData({
                          state: stateId !== null ? stateId : undefined,
                          [selectedGroup]: singleGroup,
                          actionType: "createIssue",
                        });
                      } else {
                        setPreloadedData({
                          actionType: "createIssue",
                        });
                      }
                    }}
                  >
                    <PlusIcon className="h-3 w-3" />
                    Add issue
                  </button>
                </div>
              </div>
            )}
          </Disclosure>
        ))}
      </div>
    </>
  );
};