thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: completed cycle dynamic importing and refactor

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-02-28 14:53:10 +05:30
parent 443c9300dd
commit 17e09d70e2
4 changed files with 163 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
apps/app/components/cycles/completed-cycles-list.tsx Normal file
View File

@ -0,0 +1,82 @@
// react
import { useState } from "react";
// next
import { useRouter } from "next/router";
import useSWR from "swr";
// components
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
// types
import { ICycle, SelectCycleType } from "types";
import { CompletedCycleIcon } from "components/icons";
import cyclesService from "services/cycles.service";
import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys";
type Props = {
setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
};
export const CompletedCyclesList: React.FC<Props> = ({
setCreateUpdateCycleModal,
setSelectedCycle,
}) => {
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: completedCycles } = useSWR(
workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cyclesService.getCompletedCycles(workspaceSlug as string, projectId as string)
: null
);
const handleDeleteCycle = (cycle: ICycle) => {
setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
setCycleDeleteModal(true);
};
const handleEditCycle = (cycle: ICycle) => {
setSelectedCycle({ ...cycle, actionType: "edit" });
setCreateUpdateCycleModal(true);
};
return (
<>
{completedCycles && (
<>
<DeleteCycleModal
isOpen={
cycleDeleteModal &&
!!selectedCycleForDelete &&
selectedCycleForDelete.actionType === "delete"
}
setIsOpen={setCycleDeleteModal}
data={selectedCycleForDelete}
/>
{completedCycles?.completed_cycles.length > 0 ? (
completedCycles.completed_cycles.map((cycle) => (
<SingleCycleCard
key={cycle.id}
cycle={cycle}
handleDeleteCycle={() => handleDeleteCycle(cycle)}
handleEditCycle={() => handleEditCycle(cycle)}
/>
))
) : (
<div className="flex flex-col items-center justify-center gap-4 text-center">
<CompletedCycleIcon height="56" width="56" />
<h3 className="text-gray-500">
No completed cycles yet. Create with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
</h3>
</div>
)}
</>
)}
</>
);
};

2
apps/app/components/cycles/cycles-list-view.tsx → apps/app/components/cycles/cycles-list.tsx
View File

@ -13,7 +13,7 @@ type TCycleStatsViewProps = {
type: "current" | "upcoming" | "completed"; type: "current" | "upcoming" | "completed";
}; };
export const CyclesListView: React.FC<TCycleStatsViewProps> = ({ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
cycles, cycles,
setCreateUpdateCycleModal, setCreateUpdateCycleModal,
setSelectedCycle, setSelectedCycle,

3
apps/app/components/cycles/index.ts
View File

@ -1,4 +1,5 @@
export * from "./cycles-list-view"; export * from "./completed-cycles-list";
export * from "./cycles-list";
export * from "./delete-cycle-modal"; export * from "./delete-cycle-modal";
export * from "./form"; export * from "./form";
export * from "./modal"; export * from "./modal";

192
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -1,30 +1,47 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import dynamic from "next/dynamic";
import useSWR from "swr"; import useSWR from "swr";
import { PlusIcon } from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/24/outline";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
// lib // lib
import { requiredAuth } from "lib/auth"; import { requiredAuth } from "lib/auth";
import { CyclesIcon } from "components/icons";
// services // services
import cycleService from "services/cycles.service"; import cycleService from "services/cycles.service";
import projectService from "services/project.service"; import projectService from "services/project.service";
import workspaceService from "services/workspace.service";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// components // components
import { CreateUpdateCycleModal, CyclesListView } from "components/cycles"; import { CreateUpdateCycleModal, CyclesList } from "components/cycles";
// ui // ui
import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui"; import { HeaderButton, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons // icons
// types // types
import { ICycle, SelectCycleType } from "types"; import { SelectCycleType } from "types";
import type { NextPage, GetServerSidePropsContext } from "next"; import type { NextPage, GetServerSidePropsContext } from "next";
// fetching keys // fetching keys
import { CYCLE_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys"; import {
CYCLE_COMPLETE_LIST,
CYCLE_CURRENT_AND_UPCOMING_LIST,
PROJECT_DETAILS,
} from "constants/fetch-keys";
const CompletedCyclesList = dynamic(
() => import("components/cycles").then((a) => a.CompletedCyclesList),
{
ssr: false,
loading: () => (
<Loader className="mb-5">
<Loader.Item height="12rem" width="100%" />
</Loader>
),
}
);
const ProjectCycles: NextPage = () => { const ProjectCycles: NextPage = () => {
const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>(); const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
@ -34,22 +51,17 @@ const ProjectCycles: NextPage = () => {
query: { workspaceSlug, projectId }, query: { workspaceSlug, projectId },
} = useRouter(); } = useRouter();
const { data: activeWorkspace } = useSWR(
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
);
const { data: activeProject } = useSWR( const { data: activeProject } = useSWR(
activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
activeWorkspace && projectId workspaceSlug && projectId
? () => projectService.getProject(activeWorkspace.slug, projectId as string) ? () => projectService.getProject(workspaceSlug as string, projectId as string)
: null : null
); );
const { data: cycles } = useSWR<ICycle[]>( const { data: currentAndUpcomingCycles } = useSWR(
activeWorkspace && projectId ? CYCLE_LIST(projectId as string) : null, workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
activeWorkspace && projectId workspaceSlug && projectId
? () => cycleService.getCycles(activeWorkspace.slug, projectId as string) ? () => cycleService.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
: null : null
); );
@ -61,18 +73,6 @@ const ProjectCycles: NextPage = () => {
else return "current"; else return "current";
}; };
const currentCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date, c.end_date) === "current"
);
const upcomingCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date, c.end_date) === "upcoming"
);
const completedCycles = cycles?.filter(
(c) => getCycleStatus(c.start_date, c.end_date) === "completed"
);
useEffect(() => { useEffect(() => {
if (createUpdateCycleModal) return; if (createUpdateCycleModal) return;
const timer = setTimeout(() => { const timer = setTimeout(() => {
@ -110,92 +110,56 @@ const ProjectCycles: NextPage = () => {
handleClose={() => setCreateUpdateCycleModal(false)} handleClose={() => setCreateUpdateCycleModal(false)}
data={selectedCycle} data={selectedCycle}
/> />
{cycles ? ( <div className="space-y-8">
cycles.length > 0 ? ( <h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3>
<div className="space-y-8"> <div className="space-y-5">
<h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3> <CyclesList
<div className="space-y-5"> cycles={currentAndUpcomingCycles?.current_cycle ?? []}
<CyclesListView setCreateUpdateCycleModal={setCreateUpdateCycleModal}
cycles={currentCycles ?? []} setSelectedCycle={setSelectedCycle}
setCreateUpdateCycleModal={setCreateUpdateCycleModal} type="current"
setSelectedCycle={setSelectedCycle} />
type="current" </div>
/> <div className="space-y-5">
</div> <Tab.Group>
<div className="space-y-5"> <Tab.List
<Tab.Group> as="div"
<Tab.List className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
as="div"
className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Upcoming
</Tab>
<Tab
className={({ selected }) =>
`rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Completed
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel as="div" className="mt-8 space-y-5">
<CyclesListView
cycles={upcomingCycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle}
type="upcoming"
/>
</Tab.Panel>
<Tab.Panel as="div" className="mt-8 space-y-5">
<CyclesListView
cycles={completedCycles ?? []}
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle}
type="completed"
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
) : (
<div className="flex h-full w-full flex-col items-center justify-center px-4">
<EmptySpace
title="You don't have any cycle yet."
description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
Icon={CyclesIcon}
> >
<EmptySpaceItem <Tab
title="Create a new cycle" className={({ selected }) =>
description={ `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
<span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre> shortcut to
create a new cycle
</span>
} }
Icon={PlusIcon} >
action={() => { Upcoming
const e = new KeyboardEvent("keydown", { </Tab>
key: "q", <Tab
}); className={({ selected }) =>
document.dispatchEvent(e); `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}} }
/> >
</EmptySpace> Completed
</div> </Tab>
) </Tab.List>
) : ( <Tab.Panels>
<Loader className="space-y-5"> <Tab.Panel as="div" className="mt-8 space-y-5">
<Loader.Item height="150px" /> <CyclesList
<Loader.Item height="150px" /> cycles={currentAndUpcomingCycles?.upcoming_cycle ?? []}
</Loader> setCreateUpdateCycleModal={setCreateUpdateCycleModal}
)} setSelectedCycle={setSelectedCycle}
type="upcoming"
/>
</Tab.Panel>
<Tab.Panel as="div" className="mt-8 space-y-5">
<CompletedCyclesList
setCreateUpdateCycleModal={setCreateUpdateCycleModal}
setSelectedCycle={setSelectedCycle}
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
</AppLayout> </AppLayout>
); );
}; };