binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: cycles loading, fix: cycles favorite mutation (#379)

Browse source
This commit is contained in:
Aaryan Khandelwal 2023-03-07 11:04:51 +05:30 • committed by GitHub
parent b54a1f221f
commit 64978969a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 206 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

59
apps/app/components/cycles/cycles-list.tsx
View file

@ -6,12 +6,13 @@ import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
// types
import { ICycle, SelectCycleType } from "types";
import { Loader } from "components/ui";
type TCycleStatsViewProps = {
cycles: ICycle[];
cycles: ICycle[] | undefined;
setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
type: "current" | "upcoming" | "completed";
type: "current" | "upcoming" | "draft";
};
export const CyclesList: React.FC<TCycleStatsViewProps> = ({
@ -44,31 +45,37 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
setIsOpen={setCycleDeleteModal}
data={selectedCycleForDelete}
/>
{cycles.length > 0 ? (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{cycles.map((cycle) => (
<SingleCycleCard
key={cycle.id}
cycle={cycle}
handleDeleteCycle={() => handleDeleteCycle(cycle)}
handleEditCycle={() => handleEditCycle(cycle)}
/>
))}
</div>
{cycles ? (
cycles.length > 0 ? (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{cycles.map((cycle) => (
<SingleCycleCard
key={cycle.id}
cycle={cycle}
handleDeleteCycle={() => handleDeleteCycle(cycle)}
handleEditCycle={() => handleEditCycle(cycle)}
/>
))}
</div>
) : (
<div className="flex flex-col items-center justify-center gap-4 text-center">
{type === "upcoming" ? (
<UpcomingCycleIcon height="56" width="56" />
) : type === "draft" ? (
<CompletedCycleIcon height="56" width="56" />
) : (
<CurrentCycleIcon height="56" width="56" />
)}
<h3 className="text-gray-500">
No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
</h3>
</div>
)
) : (
<div className="flex flex-col items-center justify-center gap-4 text-center">
{type === "upcoming" ? (
<UpcomingCycleIcon height="56" width="56" />
) : type === "completed" ? (
<CompletedCycleIcon height="56" width="56" />
) : (
<CurrentCycleIcon height="56" width="56" />
)}
<h3 className="text-gray-500">
No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
</h3>
</div>
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
<Loader.Item height="300px" />
</Loader>
)}
</>
);