Skip to content

Commit 594deed

Browse files
chuaxc-devchuaxc-dev
committed
CRUD Operations for Cards using Dexie and Use lucide-react for most icons
Using Lucide Icons instead of React Icons for more consistent look and preference toward a lighter-weight library. Still using react icons just for brand logos as [Lucide does not have them](lucide-icons/lucide#670).
1 parent be80a81 commit 594deed

12 files changed

+388
-150
lines changed

Diff for: ‎devlog/drawing.excalidraw

+15-15
Original file line numberDiff line numberDiff line change
@@ -6339,8 +6339,8 @@
63396339
},
63406340
{
63416341
"type": "text",
6342-
"version": 3164,
6343-
"versionNonce": 2068747775,
6342+
"version": 3165,
6343+
"versionNonce": 432942080,
63446344
"isDeleted": false,
63456345
"id": "iT1SZhbPAv9caN7-p5pKv",
63466346
"fillStyle": "solid",
@@ -6363,7 +6363,7 @@
63636363
"frameId": null,
63646364
"roundness": null,
63656365
"boundElements": [],
6366-
"updated": 1712450439073,
6366+
"updated": 1713059632482,
63676367
"link": null,
63686368
"locked": false,
63696369
"fontSize": 20,
@@ -6686,8 +6686,8 @@
66866686
},
66876687
{
66886688
"type": "text",
6689-
"version": 3170,
6690-
"versionNonce": 386731377,
6689+
"version": 3171,
6690+
"versionNonce": 1383764992,
66916691
"isDeleted": false,
66926692
"id": "ncbgTZUY6CtdceGt6gbtv",
66936693
"fillStyle": "solid",
@@ -6710,7 +6710,7 @@
67106710
"frameId": null,
67116711
"roundness": null,
67126712
"boundElements": [],
6713-
"updated": 1712450439074,
6713+
"updated": 1713059632484,
67146714
"link": null,
67156715
"locked": false,
67166716
"fontSize": 20,
@@ -6787,8 +6787,8 @@
67876787
},
67886788
{
67896789
"type": "text",
6790-
"version": 1839,
6791-
"versionNonce": 1982430751,
6790+
"version": 1840,
6791+
"versionNonce": 388541440,
67926792
"isDeleted": false,
67936793
"id": "YTN77m9y2Wq7pJhqDVHne",
67946794
"fillStyle": "solid",
@@ -6810,7 +6810,7 @@
68106810
"frameId": null,
68116811
"roundness": null,
68126812
"boundElements": [],
6813-
"updated": 1712450439076,
6813+
"updated": 1713059632485,
68146814
"link": null,
68156815
"locked": false,
68166816
"fontSize": 20,
@@ -7273,8 +7273,8 @@
72737273
},
72747274
{
72757275
"type": "text",
7276-
"version": 110,
7277-
"versionNonce": 2043426641,
7276+
"version": 111,
7277+
"versionNonce": 1309152256,
72787278
"isDeleted": false,
72797279
"id": "cyKurcgaR_98FPwU_eJRE",
72807280
"fillStyle": "hachure",
@@ -7296,7 +7296,7 @@
72967296
"frameId": null,
72977297
"roundness": null,
72987298
"boundElements": [],
7299-
"updated": 1712450439078,
7299+
"updated": 1713059632487,
73007300
"link": null,
73017301
"locked": false,
73027302
"fontSize": 16,
@@ -7381,8 +7381,8 @@
73817381
},
73827382
{
73837383
"type": "text",
7384-
"version": 57,
7385-
"versionNonce": 28467775,
7384+
"version": 58,
7385+
"versionNonce": 87239680,
73867386
"isDeleted": false,
73877387
"id": "Kyh8DqgjlgGht1G4ejdXt",
73887388
"fillStyle": "solid",
@@ -7402,7 +7402,7 @@
74027402
"frameId": null,
74037403
"roundness": null,
74047404
"boundElements": [],
7405-
"updated": 1712450439080,
7405+
"updated": 1713059632488,
74067406
"link": null,
74077407
"locked": false,
74087408
"fontSize": 20,

Diff for: ‎package-lock.json

+14-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@radix-ui/react-dialog": "^1.0.5",
1616
"@radix-ui/react-label": "^2.0.2",
1717
"@radix-ui/react-select": "^2.0.0",
18+
"@radix-ui/react-separator": "^1.0.3",
1819
"@radix-ui/react-slot": "^1.0.2",
1920
"@radix-ui/react-toast": "^1.1.5",
2021
"@t3-oss/env-nextjs": "^0.9.2",
@@ -31,6 +32,7 @@
3132
"clsx": "^2.1.0",
3233
"crypto-js": "^4.2.0",
3334
"dexie": "^4.0.1",
35+
"dexie-react-hooks": "^1.1.7",
3436
"lucide-react": "^0.365.0",
3537
"next": "^14.1.3",
3638
"next-themes": "^0.3.0",

Diff for: ‎src/app/create/columns.tsx

+12-38
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,41 @@
11
"use client";
22

33
import { type ColumnDef } from "@tanstack/react-table";
4-
import { z } from "zod";
5-
import { LuTextCursorInput } from "react-icons/lu";
6-
import { RiCheckboxMultipleFill } from "react-icons/ri";
7-
import { FaInfoCircle } from "react-icons/fa";
4+
import { TextCursorInput, CopyCheck, Info } from "lucide-react";
5+
import { type Card, type CardType } from "~/types/cards";
86

9-
// TODO #code-cleanup this card type shit up lol - I'm trying to satisfy both Zod and Typescript without having to change multiple things when adding new card types
10-
// Being used for card dropdown options
11-
export const CARD_TYPE = [
12-
"MCQ",
13-
"Type",
14-
"Slide",
15-
// ... new card types here (and then add them below...)
16-
];
177
// Used to render card dropdown options
188
export const CARD_RENDER: Record<CardType, React.ReactNode> = {
199
MCQ: (
2010
<span className="flex items-center gap-2">
21-
<RiCheckboxMultipleFill /> Multiple Choice Question
11+
<CopyCheck /> Multiple Choice Question
2212
</span>
2313
),
2414
Type: (
2515
<span className="flex items-center gap-2">
26-
<LuTextCursorInput />
16+
<TextCursorInput />
2717
Type-it-out
2818
</span>
2919
),
3020
Slide: (
3121
<span className="flex items-center gap-2">
32-
<FaInfoCircle /> Information Slide
22+
<Info /> Information Slide
3323
</span>
3424
),
3525
};
36-
// For card "type" field validation
37-
export const ZodCardTypeEnum = z.enum(
38-
CARD_TYPE as unknown as readonly [string, ...string[]],
39-
);
40-
export const MUST_HAVE_ANSWER_CARD_TYPES: CardType[] = ["MCQ", "Type"];
41-
// For TypeScript
42-
export type CardType = z.infer<typeof ZodCardTypeEnum>;
43-
44-
export type Card = {
45-
id: string;
46-
type: CardType;
47-
text: string;
48-
answerOptions?: string[];
49-
timeLimit?: number;
50-
correctAnswer?: string[] | number[];
51-
};
5226

5327
export const columns: ColumnDef<Card>[] = [
5428
{
5529
accessorKey: "text",
5630
header: "Question/Text",
5731
},
58-
{
59-
accessorKey: "answerOptions",
60-
header: "Answer Options",
61-
cell: ({ row }) => {
62-
return <div></div>;
63-
},
64-
},
32+
// {
33+
// accessorKey: "answerOptions",
34+
// header: "Answer Options",
35+
// cell: ({ row }) => {
36+
// return <div></div>;
37+
// },
38+
// },
6539
{
6640
accessorKey: "correctAnswer",
6741
header: "Correct Answer",

Diff for: ‎src/app/create/data-table.tsx

+19-11
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import {
1515
TableHeader,
1616
TableRow,
1717
} from "~/components/ui/table";
18-
import { type Card } from "./columns";
19-
import { Dialog, DialogTrigger } from "~/components/ui/dialog";
2018
import { Button } from "~/components/ui/button";
21-
import DialogCard from "./dialog-card";
19+
import SidebarCardEdit from "./sidebar-card-edit";
20+
import { type Card } from "~/types/cards";
21+
import { Sheet, SheetTrigger } from "~/components/ui/sheet";
2222

2323
interface DataTableProps<TData> {
2424
columns: ColumnDef<TData>[];
@@ -27,7 +27,7 @@ interface DataTableProps<TData> {
2727

2828
export function DataTable({ columns, data }: DataTableProps<Card>) {
2929
// TODO make this a searchParam
30-
const [focusCard, setFocusCard] = useState<Card | null>(null);
30+
const [focusCard, setFocusCard] = useState<Card | undefined>();
3131

3232
const table = useReactTable({
3333
data,
@@ -40,7 +40,7 @@ export function DataTable({ columns, data }: DataTableProps<Card>) {
4040
}, [focusCard]);
4141

4242
return (
43-
<div className="rounded-md border">
43+
<div className="max-w-[90vw] rounded-md border">
4444
<Table>
4545
<TableHeader>
4646
{table.getHeaderGroups().map((headerGroup) => (
@@ -76,20 +76,28 @@ export function DataTable({ columns, data }: DataTableProps<Card>) {
7676
</TableCell>
7777
))}
7878
<TableCell>
79-
<Dialog>
80-
<DialogTrigger asChild>
79+
<Sheet
80+
open={
81+
focusCard !== undefined &&
82+
focusCard.id === row.original.id
83+
}
84+
onOpenChange={(open) => !open && setFocusCard(undefined)}
85+
>
86+
<SheetTrigger asChild>
8187
<Button
8288
type="button"
8389
onClick={() => {
84-
console.log({ rowData: row.original });
8590
setFocusCard({ ...row.original });
8691
}}
8792
>
8893
Edit
8994
</Button>
90-
</DialogTrigger>
91-
{focusCard && <DialogCard card={focusCard} />}
92-
</Dialog>
95+
</SheetTrigger>
96+
<SidebarCardEdit
97+
card={focusCard}
98+
handleClose={() => setFocusCard(undefined)}
99+
/>
100+
</Sheet>
93101
</TableCell>
94102
</TableRow>
95103
))

Diff for: ‎src/app/create/db.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

33
import Dexie, { type Table } from "dexie";
4-
import { type Card } from "./columns";
4+
import { type Card } from "~/types/cards";
55

66
export class MySubClassedDexie extends Dexie {
77
cards!: Table<Card>;

0 commit comments

Comments
 (0)