Update whisky journal rating scale

src/app/whiskyjournal/page.tsx

@@ -26,17 +26,6 @@ export default function WhiskyJournalPage() {
 
       <main id="main-content">
         <Container size="lg">
-          <Group mb="xl" justify="space-between">
-            <Title>Cam&apos;s whisky journal</Title>
-            <Button
-              variant="default"
-              component="a"
-              href="/admin/whiskyjournal/add"
-              leftSection={<IconPlus />}
-            >
-              Add new whisky
-            </Button>
-          </Group>
           <WhiskyJournal />
         </Container>
       </main>

src/components/irishbingo.tsx

@@ -96,8 +96,7 @@ export default function IrishBingo() {
   };
 
   const [modalCardOpened, setModalCardOpened] = useState(false);
-  const [modalInstructionsOpened, setModalIntstructionsOpened] =
-    useState(false);
+  const [modalInstructionsOpened, setModalInstructionsOpened] = useState(false);
 
   return (
     <Grid>
@@ -114,7 +113,7 @@ export default function IrishBingo() {
               variant="subtle"
               size="lg"
               aria-label="Open game instructions modal"
-              onClick={() => setModalIntstructionsOpened(true)}
+              onClick={() => setModalInstructionsOpened(true)}
             >
               <IconInfoCircle />
             </ActionIcon>
@@ -124,7 +123,7 @@ export default function IrishBingo() {
         <Modal
           size="auto"
           opened={modalInstructionsOpened}
-          onClose={() => setModalIntstructionsOpened(false)}
+          onClose={() => setModalInstructionsOpened(false)}
           role="dialog"
           aria-modal="true"
           aria-labelledby="ib_instructions"
@@ -201,7 +200,7 @@ export default function IrishBingo() {
               <Button
                 variant="subtle"
                 mt="md"
-                onClick={() => setModalIntstructionsOpened(false)}
+                onClick={() => setModalInstructionsOpened(false)}
               >
                 Close instructions modal
               </Button>

src/components/whiskyjournal.tsx

@@ -9,11 +9,22 @@ import {
   Accordion,
   TextInput,
   ActionIcon,
+  Title,
+  Tooltip,
+  Modal,
+  Container,
+  Center,
 } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
+import {
+  IconX,
+  IconDownload,
+  IconInfoCircle,
+  IconPlus,
+} from "@tabler/icons-react";
 import { WhiskyCard } from "@/components/whiskycard";
 import BackToTop from "@/components/backtotop";
 import { readWhiskyJournal } from "@/services/whiskyjournal";
+import { WhiskyPricingScale, WhiskyRatingScale } from "./whiskyscoringscales";
 
 export interface Whisky {
   last_edited: Date;
@@ -49,6 +60,7 @@ export default function WhiskyJournal() {
 
     fetchWhiskies();
   }, []);
+
   const whiskyData = whiskies;
 
   const [grainFilter, setGrainFilter] = useState<string | null>(null);
@@ -137,12 +149,132 @@ export default function WhiskyJournal() {
     { value: "ageDesc", label: "Age Descending" },
   ];
 
+  const [modalScalesOpened, setModalScalesOpened] = useState(false);
+
   if (loading) {
     return <Text>Fetching journal...</Text>;
   }
 
+  const exportToCSV = () => {
+    const headers = [
+      "Last Edited",
+      "Whisky ID",
+      "Name",
+      "Distillery",
+      "Country/Region",
+      "Age",
+      "Grain",
+      "ABV",
+      "Rating",
+      "Price",
+      "Notes",
+    ];
+    const rows = searchedWhiskyData.map((whisky) => [
+      `"${whisky.last_edited.toISOString()}"`,
+      `"${whisky.whisky_id}"`,
+      `"${whisky.name}"`,
+      `"${whisky.distillery}"`,
+      `"${whisky.country_region}"`,
+      `"${whisky.age}"`,
+      `"${whisky.grain}"`,
+      `"${whisky.abv}"`,
+      `"${whisky.rating}"`,
+      `"${whisky.price}"`,
+      `"${whisky.notes}"`,
+    ]);
+
+    const csvContent =
+      "data:text/csv;charset=utf-8," +
+      [headers, ...rows].map((e) => e.join(",")).join("\n");
+
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    const today = new Date().toISOString().split("T")[0];
+    link.setAttribute("download", `whisky_journal_${today}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <>
+      <Group mb="xl" justify="space-between">
+        <Group gap="xs">
+          <Title>Cam&apos;s whisky journal</Title>
+          <Tooltip
+            label="Whisky rating scales"
+            openDelay={250}
+            position="right"
+            offset={5}
+          >
+            <ActionIcon
+              variant="subtle"
+              size="lg"
+              aria-label="Open modal detailing whisky rating scales"
+              onClick={() => setModalScalesOpened(true)}
+            >
+              <IconInfoCircle />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+        <Button
+          variant="default"
+          component="a"
+          href="/admin/whiskyjournal/add"
+          leftSection={<IconPlus />}
+        >
+          Add new whisky
+        </Button>
+      </Group>
+
+      <Modal
+        size="auto"
+        opened={modalScalesOpened}
+        onClose={() => setModalScalesOpened(false)}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="whisky_scales"
+        withCloseButton={false}
+        transitionProps={{
+          transition: "fade",
+          duration: 300,
+          timingFunction: "linear",
+        }}
+        overlayProps={{
+          backgroundOpacity: 0.75,
+          blur: 3,
+        }}
+      >
+        <Container>
+          <Title order={2} mb="sm" id="whisky_scales">
+            Whisky rating scales
+          </Title>
+
+          <Title order={3} mt="lg" mb="sm">
+            Pricing scale
+          </Title>
+
+          <WhiskyPricingScale />
+
+          <Title order={3} mt="lg" mb="sm">
+            Rating scale
+          </Title>
+
+          <WhiskyRatingScale />
+
+          <Center>
+            <Button
+              variant="subtle"
+              mt="md"
+              onClick={() => setModalScalesOpened(false)}
+            >
+              Close modal
+            </Button>
+          </Center>
+        </Container>
+      </Modal>
+
       <Accordion variant="contained" mb="md">
         <Accordion.Item value="Sort and filter">
           <Accordion.Control>Sort and filter</Accordion.Control>
@@ -210,25 +342,36 @@ export default function WhiskyJournal() {
         </Accordion.Item>
       </Accordion>
 
-      <TextInput
-        mb="md"
-        aria-label="Search whisky names"
-        placeholder="Search whisky names..."
-        value={searchQuery}
-        onChange={handleSearch}
-        style={{ flex: 1 }}
-        rightSection={
-          searchQuery && (
-            <ActionIcon
-              onClick={() => setSearchQuery("")}
-              variant="default"
-              aria-label="Clear search query"
-            >
-              <IconX />
-            </ActionIcon>
-          )
-        }
-      />
+      <Group justify="space-between">
+        <TextInput
+          mb="md"
+          aria-label="Search whisky names"
+          placeholder="Search whisky names..."
+          value={searchQuery}
+          onChange={handleSearch}
+          style={{ flex: 1, minWidth: 100 }}
+          rightSection={
+            searchQuery && (
+              <ActionIcon
+                onClick={() => setSearchQuery("")}
+                variant="default"
+                aria-label="Clear search query"
+              >
+                <IconX />
+              </ActionIcon>
+            )
+          }
+        />
+
+        <Button
+          onClick={exportToCSV}
+          mb="md"
+          variant="default"
+          leftSection={<IconDownload />}
+        >
+          Download CSV
+        </Button>
+      </Group>
 
       <Text m="sm">
         Showing {searchedWhiskyData.length} of {whiskyData.length} whiskies

src/components/whiskyjournaledit.tsx

@@ -11,7 +11,6 @@ import {
   Stack,
   Text,
   Textarea,
-  List,
   Rating,
   Select,
   NumberInput,
@@ -22,6 +21,10 @@ import { deleteWhisky, updateWhisky } from "@/services/whiskyjournal";
 import { Whisky } from "@/components/whiskycard";
 import { useRouter } from "next/navigation";
 import { IconTaxPound } from "@tabler/icons-react";
+import {
+  WhiskyPricingScale,
+  WhiskyRatingScale,
+} from "@/components/whiskyscoringscales";
 
 export const WhiskyJournalEdit = ({ whiskyData }: { whiskyData: Whisky }) => {
   const [modalOpened, setModalOpened] = useState(false);
@@ -156,18 +159,19 @@ export const WhiskyJournalEdit = ({ whiskyData }: { whiskyData: Whisky }) => {
             <Text fw={500}>
               Rate the whisky out of 5<span style={{ color: "red" }}> *</span>
             </Text>
+
+            <WhiskyRatingScale />
+
             <Rating mb="lg" {...form.getInputProps("rating")} />
           </Stack>
           <Stack>
             <Text fw={500}>
               How pricey is the whisky?
               <span style={{ color: "red" }}> *</span>
             </Text>
-            <List type="ordered">
-              <List.Item>Under £40 a bottle</List.Item>
-              <List.Item>£40 - £85 a bottle</List.Item>
-              <List.Item>Over £85 a bottle</List.Item>
-            </List>
+
+            <WhiskyPricingScale />
+
             <Rating
               mb="lg"
               size="xl"

src/components/whiskyscoringscales.tsx

@@ -13,11 +13,11 @@ export const WhiskyPricingScale = () => {
 export const WhiskyRatingScale = () => {
   return (
     <List type="ordered">
-      <List.Item>Would only drink again if paid</List.Item>
       <List.Item>Unhappy about drinking again</List.Item>
       <List.Item>Shrugs, can drink it</List.Item>
-      <List.Item>Tasty, would order at a bar</List.Item>
-      <List.Item>Would happily buy bottles of it</List.Item>
+      <List.Item>Solid, though perhaps unspectacular</List.Item>
+      <List.Item>Tasty, would choose to order at a bar</List.Item>
+      <List.Item>Exceptional, top tier</List.Item>
     </List>
   );
 };

tests/public-database/01_whiskyjournal.spec.ts

@@ -57,3 +57,18 @@ test("Can search whiskies by name", async ({ page }) => {
     /Johnnie Walker Black Label/,
   );
 });
+
+const fs = require("fs");
+test("Download CSV and check contents", async ({ page }) => {
+  await page.goto("/whiskyjournal");
+  const [download] = await Promise.all([
+    page.waitForEvent("download"),
+    page.getByRole("button", { name: "Download CSV" }).click(),
+  ]);
+
+  const path = await download.path();
+  const csv = fs.readFileSync(path, "utf-8");
+  const rows = csv.split("\n");
+
+  expect(rows.length).toBeGreaterThan(30);
+});