Skip to content

Commit

Permalink
feat: plans page styling, change plan id from number to uuid
Browse files Browse the repository at this point in the history
  • Loading branch information
D0dii committed Sep 17, 2024
1 parent c6bfec5 commit 4e0c301
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 36 deletions.
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/themes": "^3.1.3",
"@t3-oss/env-nextjs": "^0.11.0",
Expand Down
87 changes: 70 additions & 17 deletions src/components/Plan.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,87 @@
import { useAtom } from "jotai";
import { Pencil } from "lucide-react";
import Link from "next/link";
import router from "next/router";
import React from "react";

import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { planFamily } from "@/pages/createplan/[id]";
import { plansIds } from "@/pages/plans";

export const Plan = ({ id, name }: { id: number; name: string }) => {
import { buttonVariants } from "./ui/button";

export const Plan = ({ id, name }: { id: string; name: string }) => {
const uuid = React.useMemo(() => crypto.randomUUID(), []);
const [plans, setPlans] = useAtom(plansIds);
const [plan] = useAtom(planFamily({ id }));
const [planToCopy, setPlanToCopy] = useAtom(planFamily({ id: uuid }));

const copyPlan = () => {
const newPlan = {
id: uuid,
};

void window.umami?.track("Create plan", {
numberOfPlans: plans.length,
});

setPlans([...plans, newPlan]);
setPlanToCopy({
...planToCopy,
courses: plan.courses,
groups: plan.groups,
});

setTimeout(() => {
void router.push(`/createplan/${newPlan.id}`);
}, 200);
};
const deletePlan = () => {
planFamily.remove({ id });
setPlans(plans.filter((p) => p.id !== id));
};
// return (
// <Link
// href={`/createplan/${id}`}
// className="flex h-[200px] w-[200px] flex-col items-center justify-center rounded-lg border-2 border-gray-400 bg-white p-4 text-center shadow-lg"
// >
// <div className="text-xl font-semibold">{name}</div>
// <div className="mt-2 text-gray-600">
// Kliknij w plan, aby wyświetlić szczegóły
// </div>
// </Link>
// );
const groupCount = plan.groups.filter((group) => group.isChecked).length;
return (
<div className="flex justify-between bg-slate-600 text-white">
<Link href={`/createplan/${id}`}>{name}</Link>
<button onClick={deletePlan} className="cursor-pointer">
Delete
</button>
<div className="flex h-[200px] w-[200px] flex-col items-center justify-between rounded-lg border-gray-400 bg-white p-4 text-center shadow-[0_0_5px_5px_rgba(0,0,0,0.10)]">
<div className="flex w-full justify-between">
<div className="text-xl font-semibold">{name}</div>
<Popover>
<PopoverTrigger>...</PopoverTrigger>
<PopoverContent className="w-44 p-0">
<div className="flex flex-col items-start">
<button
onClick={copyPlan}
className="w-full rounded-md rounded-b-none p-2 text-left hover:bg-slate-200"
>
Kopiuj
</button>
<button
onClick={deletePlan}
className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
>
Usuń
</button>
</div>
</PopoverContent>
</Popover>
</div>
<div className="mt-2 text-gray-600">Wybrane grupy: {groupCount}</div>
<Link
href={`/createplan/${id}`}
className={buttonVariants({
className: cn(
"flex items-center gap-2 text-nowrap rounded-md text-lg",
),
})}
>
Edytuj
<Pencil className="h-4 w-4" />
</Link>
</div>
);
};
36 changes: 36 additions & 0 deletions src/components/ui/popover.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as PopoverPrimitive from "@radix-ui/react-popover";
import * as React from "react";

import { cn } from "@/lib/utils";

const Popover = PopoverPrimitive.Root;

const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(
(
// eslint-disable-next-line react/prop-types
{ className, align = "center", side = "right", sideOffset = 4, ...props },
ref,
) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
side={side}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
</PopoverPrimitive.Portal>
),
);
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

export { Popover, PopoverTrigger, PopoverContent };
6 changes: 3 additions & 3 deletions src/pages/createplan/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export interface ExtendedGroup extends ClassBlockProps {
}

export const planFamily = atomFamily(
({ id }: { id: number }) =>
({ id }: { id: string }) =>
atomWithStorage(
`${id}-plan`,
{
Expand All @@ -68,10 +68,10 @@ export const getServerSideProps = (async (context) => {
throw new Error(`Invalid id ${id?.toString()}`);
}

const planId = parseInt(id);
const planId = id;

return { props: { planId } };
}) satisfies GetServerSideProps<{ planId: number }>;
}) satisfies GetServerSideProps<{ planId: string }>;

const CreatePlan = ({
planId,
Expand Down
17 changes: 7 additions & 10 deletions src/pages/plans.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,21 @@ import { cn } from "@/lib/utils";

import { planFamily } from "./createplan/[id]";

export const plansIds = atomWithStorage<Array<{ id: number }>>("plansIds", []);
export const plansIds = atomWithStorage<Array<{ id: string }>>("plansIds", []);

const plansAtom = atom(
(get) => get(plansIds).map((id) => get(planFamily(id))),
(get, set, values: Array<{ id: number }>) => {
(get, set, values: Array<{ id: string }>) => {
set(plansIds, values);
},
);

const Plans = () => {
const [plans, setPlans] = useAtom(plansAtom);
const router = useRouter();

const uuid = crypto.randomUUID();
const addNewPlan = () => {
const newPlan = {
id: plans.length + 1,
id: uuid,
};

void window.umami?.track("Create plan", {
Expand Down Expand Up @@ -70,15 +69,13 @@ const Plans = () => {
</div>

<div className="container mx-auto max-h-full flex-1 flex-grow overflow-y-auto p-4">
<div className="flex flex-col gap-4">
{/* <div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start"> */}
{/* <button
<div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start">
<button
onClick={addNewPlan}
className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl"
>
<span>Dodaj nowy plan</span>
</button> */}
<button onClick={addNewPlan}>Add new plan</button>
</button>
{plans.map((plan) => (
<Plan key={plan.id} id={plan.id} name={plan.name} />
))}
Expand Down
10 changes: 4 additions & 6 deletions src/pages/shareplan/[hash].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import * as React from "react";
import { LuDownloadCloud } from "react-icons/lu";

import { ReadonlyScheduleTest } from "@/components/ReadonlyScheduleTest";
Expand Down Expand Up @@ -36,20 +37,17 @@ const SharePlan = ({
plan,
hash,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
const uuid = React.useMemo(() => crypto.randomUUID(), []);
const [plans, setPlans] = useAtom(plansIds);
const [planToCopy, setPlanToCopy] = useAtom(
planFamily({ id: plans.length + 1 }),
);
const [planToCopy, setPlanToCopy] = useAtom(planFamily({ id: uuid }));

const router = useRouter();

const mondaySchedule = plan.groups.filter((group) => group.isChecked);

const copyPlan = () => {
const newPlan = {
id: plans.length + 1,
groups: plan.groups,
courses: plan.courses,
id: uuid,
};

void window.umami?.track("Create plan", {
Expand Down

0 comments on commit 4e0c301

Please sign in to comment.