Resolved endpoints for saving and deleting links

Author: lannonbr

app.js

@@ -5,11 +5,13 @@ import fastifyFormbody from "@fastify/formbody";
 
 import { Liquid } from "liquidjs";
 import webpack from "webpack";
+import { JSONFilePreset } from "lowdb/node";
 
 import fs from "node:fs";
 import path from "node:path";
 import url from "node:url";
 import childProcess from "node:child_process";
+import { randomUUID } from "node:crypto";
 
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -18,6 +20,11 @@ const viewsPath = path.join(__dirname, "views");
 const staticsPath = path.join(__dirname, "statics");
 const publicPath = path.join(__dirname, "public");
 
+const db = await JSONFilePreset(path.join(__dirname, "data", "data.json"), {
+  create: [],
+  consume: [],
+});
+
 function buildClientsideAssets() {
   if (!fs.existsSync(publicPath)) {
     fs.mkdirSync(publicPath);
@@ -81,15 +88,7 @@ app.register(fastifyView, {
 app.register(fastifyFormbody);
 
 app.get(getRoutePath(), (req, reply) => {
-  // TODO: Replace mock data with content from database
-  let links = {
-    create: [
-      { id: "1", description: "Foobar (create)", url: "https://example.com" },
-    ],
-    consume: [
-      { id: "2", description: "Foobar (consume)", url: "https://example.com" },
-    ],
-  };
+  const links = db.data;
 
   return reply.view("./views/index.liquid", {
     links,
@@ -98,22 +97,51 @@ app.get(getRoutePath(), (req, reply) => {
 });
 
 app.get(getRoutePath("links"), (req, reply) => {
-  // get all links
+  const links = db.data;
+
+  return reply.send(links);
 });
 
-app.post(getRoutePath("create"), (req, reply) => {
-  // Create a new link
+app.post(getRoutePath("create"), async (req, reply) => {
   const { type, url, description } = req.body;
 
+  const uuid = randomUUID();
+
+  db.data[type].push({
+    id: uuid,
+    url,
+    description,
+  });
+  await db.write();
+
   reply.redirect(getRoutePath());
 });
 
-app.post(getRoutePath("delete"), (req, reply) => {
-  // Delete a link
+app.post(getRoutePath("delete"), async (req, reply) => {
+  console.log(req.body.id);
+  let inCreateIdx = db.data.create.findIndex(({ id }) => req.body.id === id);
+  console.log({ inCreateIdx });
+  if (inCreateIdx !== -1) {
+    db.data.create.splice(inCreateIdx, 1);
+
+    await db.write();
+    return reply.send({ message: "link deleted" });
+  }
+
+  let inConsumeIdx = db.data.consume.findIndex(({ id }) => req.body.id === id);
+  console.log({ inConsumeIdx });
+  if (inConsumeIdx !== -1) {
+    db.data.consume.splice(inConsumeIdx, 1);
+    await db.write();
+    return reply.send({ message: "link deleted" });
+  }
 });
 
-app.post(getRoutePath("delete-all"), (req, reply) => {
-  // Delete all links
+app.post(getRoutePath("delete-all"), async (req, reply) => {
+  db.data.create = [];
+  db.data.consume = [];
+  await db.write();
+  return reply.send({ message: "Successfully deleted all posts" });
 });
 
 app.listen({ port: 3007, host: "0.0.0.0" }, (err, address) => {

package.json

@@ -27,7 +27,8 @@
   "description": "A web app that allows me to save links to pages over a week to then be put into a weeknote post at the end of the week",
   "nodemonConfig": {
     "ignore": [
-      "public/"
+      "public/",
+      "data/"
     ],
     "ext": "liquid html js json"
   }

statics/js/main.js

@@ -2,13 +2,23 @@ const routePrefix = document
   .querySelector("meta[name='routePrefix']")
   .getAttribute("content");
 
-console.log(routePrefix);
-
 for (let btn of document.getElementsByClassName("delete-link-btn")) {
-  btn.addEventListener("click", (e) => {
-    // Delete this link
-    // TODO replace with likely a POST call to delete the given link via the ID
-    e.target.parentElement.parentElement.remove();
+  btn.addEventListener("click", async (e) => {
+    let linkArticleElement = e.target.parentElement.parentElement;
+
+    let linkId = linkArticleElement.getAttribute("data-link-id");
+
+    console.log(`Going to delete ${linkId}`);
+
+    await fetch(`${routePrefix}/delete`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id: linkId }),
+    });
+
+    linkArticleElement.remove();
   });
 }
 
@@ -29,7 +39,6 @@ for (let btn of document.getElementsByClassName("add-link-btn")) {
 
     form.className = "px-2 border-b border-gray-800 py-4 bg-gray-800/30";
 
-    // TODO: Update the "Add" button to actually submit the form
     form.innerHTML = `
         <div class="flex items-start gap-3">
           <div class="flex-1">
@@ -75,28 +84,37 @@ for (let btn of document.getElementsByClassName("add-link-btn")) {
   });
 }
 
-document.querySelector(".export-btn").addEventListener("click", (e) => {
-  // TODO: Generate initial content of weeknote
-  // Something like the following:
-  /**
-   * ## Things I worked on
-   *
-   * * [create link 1](url)
-   * * [create link 2](url)
-   *
-   * ## Things I consumed
-   *
-   * * [consume link 1](url)
-   * * [consume link 2](url)
-   */
+document.querySelector(".export-btn").addEventListener("click", async (e) => {
+  const links = await fetch(`${routePrefix}/links`).then((resp) => resp.json());
+  console.log(links);
+  await navigator.clipboard.writeText(`## Things I worked on
+
+${links.create
+  .map((link) => {
+    return `- [${link.description}](${link.url})`;
+  })
+  .join("\n")}
+
+## Things I consumed
+
+${links.consume
+  .map((link) => {
+    return `- [${link.description}](${link.url})`;
+  })
+  .join("\n")}`);
+
+  console.log("Saved to clipboard!");
 });
 
-document.querySelector(".clear-btn").addEventListener("click", (e) => {
+document.querySelector(".clear-btn").addEventListener("click", async (e) => {
   const result = confirm("Are you sure you want to clear all links?");
   if (result) {
     document.querySelectorAll(".link-item").forEach((item) => {
       item.remove();
     });
-    // TODO: Send a POST request up to clear the database completely
+
+    await fetch(`${routePrefix}/delete-all`, {
+      method: "POST",
+    });
   }
 });

views/index.liquid

@@ -13,8 +13,10 @@
     <main class="min-h-screen">
       <div class="max-w-4xl mx-auto px-8 py-12">
         <header class="mb-8">
-          <h1 class="text-4xl font-bold text-white mb-2">Weekly Note</h1>
-          <p class="text-gray-500">Curate your weekly discoveries</p>
+          <h1 class="text-4xl font-bold text-white mb-2">
+            Weeknotes Collector
+          </h1>
+          <p class="text-gray-500">Save links across the web for curation</p>
         </header>
 
         <section class="mb-12">