CRUD Operations for Cards using Dexie and Use lucide-react for most i…

…cons 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).
cindyc-dev · Apr 14, 2024 · 594deed · 594deed
1 parent be80a81
commit 594deed
Show file tree

Hide file tree

Showing 12 changed files with 388 additions and 150 deletions.
diff --git a/devlog/drawing.excalidraw b/devlog/drawing.excalidraw
@@ -6339,8 +6339,8 @@
     },
     {
       "type": "text",
-      "version": 3164,
-      "versionNonce": 2068747775,
+      "version": 3165,
+      "versionNonce": 432942080,
       "isDeleted": false,
       "id": "iT1SZhbPAv9caN7-p5pKv",
       "fillStyle": "solid",
@@ -6363,7 +6363,7 @@
       "frameId": null,
       "roundness": null,
       "boundElements": [],
-      "updated": 1712450439073,
+      "updated": 1713059632482,
       "link": null,
       "locked": false,
       "fontSize": 20,
@@ -6686,8 +6686,8 @@
     },
     {
       "type": "text",
-      "version": 3170,
-      "versionNonce": 386731377,
+      "version": 3171,
+      "versionNonce": 1383764992,
       "isDeleted": false,
       "id": "ncbgTZUY6CtdceGt6gbtv",
       "fillStyle": "solid",
@@ -6710,7 +6710,7 @@
       "frameId": null,
       "roundness": null,
       "boundElements": [],
-      "updated": 1712450439074,
+      "updated": 1713059632484,
       "link": null,
       "locked": false,
       "fontSize": 20,
@@ -6787,8 +6787,8 @@
     },
     {
       "type": "text",
-      "version": 1839,
-      "versionNonce": 1982430751,
+      "version": 1840,
+      "versionNonce": 388541440,
       "isDeleted": false,
       "id": "YTN77m9y2Wq7pJhqDVHne",
       "fillStyle": "solid",
@@ -6810,7 +6810,7 @@
       "frameId": null,
       "roundness": null,
       "boundElements": [],
-      "updated": 1712450439076,
+      "updated": 1713059632485,
       "link": null,
       "locked": false,
       "fontSize": 20,
@@ -7273,8 +7273,8 @@
     },
     {
       "type": "text",
-      "version": 110,
-      "versionNonce": 2043426641,
+      "version": 111,
+      "versionNonce": 1309152256,
       "isDeleted": false,
       "id": "cyKurcgaR_98FPwU_eJRE",
       "fillStyle": "hachure",
@@ -7296,7 +7296,7 @@
       "frameId": null,
       "roundness": null,
       "boundElements": [],
-      "updated": 1712450439078,
+      "updated": 1713059632487,
       "link": null,
       "locked": false,
       "fontSize": 16,
@@ -7381,8 +7381,8 @@
     },
     {
       "type": "text",
-      "version": 57,
-      "versionNonce": 28467775,
+      "version": 58,
+      "versionNonce": 87239680,
       "isDeleted": false,
       "id": "Kyh8DqgjlgGht1G4ejdXt",
       "fillStyle": "solid",
@@ -7402,7 +7402,7 @@
       "frameId": null,
       "roundness": null,
       "boundElements": [],
-      "updated": 1712450439080,
+      "updated": 1713059632488,
       "link": null,
       "locked": false,
       "fontSize": 20,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@t3-oss/env-nextjs": "^0.9.2",
@@ -31,6 +32,7 @@
     "clsx": "^2.1.0",
     "crypto-js": "^4.2.0",
     "dexie": "^4.0.1",
+    "dexie-react-hooks": "^1.1.7",
     "lucide-react": "^0.365.0",
     "next": "^14.1.3",
     "next-themes": "^0.3.0",

diff --git a/src/app/create/columns.tsx b/src/app/create/columns.tsx
@@ -1,67 +1,41 @@
 "use client";
 
 import { type ColumnDef } from "@tanstack/react-table";
-import { z } from "zod";
-import { LuTextCursorInput } from "react-icons/lu";
-import { RiCheckboxMultipleFill } from "react-icons/ri";
-import { FaInfoCircle } from "react-icons/fa";
+import { TextCursorInput, CopyCheck, Info } from "lucide-react";
+import { type Card, type CardType } from "~/types/cards";
 
-// 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
-// Being used for card dropdown options
-export const CARD_TYPE = [
-  "MCQ",
-  "Type",
-  "Slide",
-  // ... new card types here (and then add them below...)
-];
 // Used to render card dropdown options
 export const CARD_RENDER: Record<CardType, React.ReactNode> = {
   MCQ: (
     <span className="flex items-center gap-2">
-      <RiCheckboxMultipleFill /> Multiple Choice Question
+      <CopyCheck /> Multiple Choice Question
     </span>
   ),
   Type: (
     <span className="flex items-center gap-2">
-      <LuTextCursorInput />
+      <TextCursorInput />
       Type-it-out
     </span>
   ),
   Slide: (
     <span className="flex items-center gap-2">
-      <FaInfoCircle /> Information Slide
+      <Info /> Information Slide
     </span>
   ),
 };
-// For card "type" field validation
-export const ZodCardTypeEnum = z.enum(
-  CARD_TYPE as unknown as readonly [string, ...string[]],
-);
-export const MUST_HAVE_ANSWER_CARD_TYPES: CardType[] = ["MCQ", "Type"];
-// For TypeScript
-export type CardType = z.infer<typeof ZodCardTypeEnum>;
-
-export type Card = {
-  id: string;
-  type: CardType;
-  text: string;
-  answerOptions?: string[];
-  timeLimit?: number;
-  correctAnswer?: string[] | number[];
-};
 
 export const columns: ColumnDef<Card>[] = [
   {
     accessorKey: "text",
     header: "Question/Text",
   },
-  {
-    accessorKey: "answerOptions",
-    header: "Answer Options",
-    cell: ({ row }) => {
-      return <div></div>;
-    },
-  },
+  // {
+  //   accessorKey: "answerOptions",
+  //   header: "Answer Options",
+  //   cell: ({ row }) => {
+  //     return <div></div>;
+  //   },
+  // },
   {
     accessorKey: "correctAnswer",
     header: "Correct Answer",

diff --git a/src/app/create/data-table.tsx b/src/app/create/data-table.tsx
@@ -15,10 +15,10 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { type Card } from "./columns";
-import { Dialog, DialogTrigger } from "~/components/ui/dialog";
 import { Button } from "~/components/ui/button";
-import DialogCard from "./dialog-card";
+import SidebarCardEdit from "./sidebar-card-edit";
+import { type Card } from "~/types/cards";
+import { Sheet, SheetTrigger } from "~/components/ui/sheet";
 
 interface DataTableProps<TData> {
   columns: ColumnDef<TData>[];
@@ -27,7 +27,7 @@ interface DataTableProps<TData> {
 
 export function DataTable({ columns, data }: DataTableProps<Card>) {
   // TODO make this a searchParam
-  const [focusCard, setFocusCard] = useState<Card | null>(null);
+  const [focusCard, setFocusCard] = useState<Card | undefined>();
 
   const table = useReactTable({
     data,
@@ -40,7 +40,7 @@ export function DataTable({ columns, data }: DataTableProps<Card>) {
   }, [focusCard]);
 
   return (
-    <div className="rounded-md border">
+    <div className="max-w-[90vw] rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -76,20 +76,28 @@ export function DataTable({ columns, data }: DataTableProps<Card>) {
                   </TableCell>
                 ))}
                 <TableCell>
-                  <Dialog>
-                    <DialogTrigger asChild>
+                  <Sheet
+                    open={
+                      focusCard !== undefined &&
+                      focusCard.id === row.original.id
+                    }
+                    onOpenChange={(open) => !open && setFocusCard(undefined)}
+                  >
+                    <SheetTrigger asChild>
                       <Button
                         type="button"
                         onClick={() => {
-                          console.log({ rowData: row.original });
                           setFocusCard({ ...row.original });
                         }}
                       >
                         Edit
                       </Button>
-                    </DialogTrigger>
-                    {focusCard && <DialogCard card={focusCard} />}
-                  </Dialog>
+                    </SheetTrigger>
+                    <SidebarCardEdit
+                      card={focusCard}
+                      handleClose={() => setFocusCard(undefined)}
+                    />
+                  </Sheet>
                 </TableCell>
               </TableRow>
             ))

diff --git a/src/app/create/db.tsx b/src/app/create/db.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import Dexie, { type Table } from "dexie";
-import { type Card } from "./columns";
+import { type Card } from "~/types/cards";
 
 export class MySubClassedDexie extends Dexie {
   cards!: Table<Card>;