vinvoor: refactor the cards page

vinvoor/src/cards/Cards.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { LoadingSkeleton } from "../components/LoadingSkeleton";
+import { useFetch } from "../hooks/useFetch";
+import { Card } from "../types/cards";
+import { CardsEmpty } from "./CardsEmpty";
+import { CardsTable } from "./CardsTable";
+
+export const Cards = () => {
+    const [cards, setCards] = useState<readonly Card[]>([]);
+    const { loading, error: _ } = useFetch<readonly Card[]>("cards", setCards);
+
+    return (
+        <LoadingSkeleton loading={loading}>
+            {!!cards.length ? (
+                <CardsTable cards={cards} setCards={setCards} />
+            ) : (
+                <CardsEmpty />
+            )}
+        </LoadingSkeleton>
+    );
+};

vinvoor/src/cards/CardAdd.tsx → vinvoor/src/cards/CardsAdd.tsx

@@ -3,7 +3,7 @@ import { Button, Typography } from "@mui/material";
 import { useState } from "react";
 import { ConfirmationModal } from "../components/ConfirmationModal";
 
-export const CardAdd = () => {
+export const CardsAdd = () => {
     const [open, setOpen] = useState<boolean>(false);
 
     const handleOpen = () => setOpen(true);

vinvoor/src/cards/CardDelete.tsx → vinvoor/src/cards/CardsDelete.tsx

@@ -3,14 +3,14 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { Button, IconButton, Tooltip, Typography } from "@mui/material";
 import { Dispatch, FC, SetStateAction, useState } from "react";
 import { ConfirmationModal } from "../components/ConfirmationModal";
-import { CardType } from "../types/Cards";
+import { Card } from "../types/cards";
 
 interface CardDeleteProps {
     selected: readonly string[];
-    setCards: Dispatch<SetStateAction<readonly CardType[] | undefined>>;
+    setCards: Dispatch<SetStateAction<readonly Card[]>>;
 }
 
-export const CardDelete: FC<CardDeleteProps> = ({ selected, setCards }) => {
+export const CardsDelete: FC<CardDeleteProps> = ({ selected, setCards }) => {
     const [open, setOpen] = useState<boolean>(false);
 
     const numSelected = selected.length;