Merge pull request #28 from abhaykv04/dev

Restrict Name Lengths & Single Queue Delete Feature
abhaykumarvats · Jan 2, 2023 · bc189fd · bc189fd · vercel · Jan 2, 2023
2 parents 7a5d598 + 2db4a84
commit bc189fd
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "fifo",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

diff --git a/src/app.html b/src/app.html
@@ -1,30 +1,88 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="%sveltekit.assets%/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="%sveltekit.assets%/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="%sveltekit.assets%/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="%sveltekit.assets%/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="%sveltekit.assets%/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="%sveltekit.assets%/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="%sveltekit.assets%/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="%sveltekit.assets%/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%sveltekit.assets%/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="%sveltekit.assets%/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%sveltekit.assets%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="%sveltekit.assets%/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%sveltekit.assets%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+    <meta
+      name="msapplication-TileImage"
+      content="%sveltekit.assets%/ms-icon-144x144.png"
+    />
+    <title>f•i•f•o | Simply, Rotating Queues</title>
+    %sveltekit.head%
+  </head>
 
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<link rel="apple-touch-icon" sizes="57x57" href="%sveltekit.assets%/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="%sveltekit.assets%/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="%sveltekit.assets%/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="%sveltekit.assets%/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="%sveltekit.assets%/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="%sveltekit.assets%/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="%sveltekit.assets%/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="%sveltekit.assets%/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192" href="%sveltekit.assets%/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="%sveltekit.assets%/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
-	<link rel="manifest" href="%sveltekit.assets%/manifest.json">
-	<meta name="msapplication-TileImage" content="%sveltekit.assets%/ms-icon-144x144.png">
-	<title>f•i•f•o | Simply, Rotating Queues</title>
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/src/lib/AddEditQ.svelte b/src/lib/AddEditQ.svelte
@@ -47,6 +47,11 @@
   const handleItemAdd = () => {
     if (!newItemValue) return;
 
+    if (newItemValue.length > 10) {
+      error = "item name must be less than 10 characters";
+      return;
+    }
+
     const newItem = {
       id: crypto.randomUUID(),
       value: newItemValue,
@@ -68,6 +73,11 @@
       return;
     }
 
+    if (name.length > 10) {
+      error = "queue name must be less than 10 characters";
+      return;
+    }
+
     if (!items.length) {
       error = "please add atleast one item";
       return;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -11,11 +11,18 @@
     const localState = window.localStorage.getItem("fifo");
     if (localState) queues = JSON.parse(localState);
   }
+  let deleteButtonLabel = "";
 
   // Handlers
   const handleDeleteAll = () => {
+    if (!deleteButtonLabel.length) {
+      deleteButtonLabel = "Sure?";
+      return;
+    }
+
     if (browser) {
       queues = [];
+      deleteButtonLabel = "";
       localStorage.removeItem("fifo");
     }
   };
@@ -29,12 +36,15 @@
 
 <h2 class="flex justify-between items-center">
   My Queues
-  <button
-    class="filled py-1 text-base font-normal flex items-center gap-2"
-    on:click={handleDeleteAll}
-  >
-    Delete All {@html DangerIcon}
-  </button>
+  {#if queues.length}
+    <button
+      class="filled py-1 text-base font-normal flex items-center gap-2"
+      on:click={handleDeleteAll}
+    >
+      {deleteButtonLabel || "Delete All"}
+      {@html DangerIcon}
+    </button>
+  {/if}
 </h2>
 
 <ul>

diff --git a/src/routes/edit/[id]/+page.svelte b/src/routes/edit/[id]/+page.svelte
@@ -3,20 +3,59 @@
   import Divider from "$lib/Divider.svelte";
   import AddEditQ from "$lib/AddEditQ.svelte";
   import type { PageData } from "./$types";
-  import { ArrowRightIcon } from "$lib/icons";
+  import { ArrowRightIcon, DangerIcon } from "$lib/icons";
   import { goto } from "$app/navigation";
+  import { browser } from "$app/environment";
+  import type { QueueType } from "$lib/types";
 
   // Props
   export let data: PageData;
   const { id, name, items, showCounter } = data;
+
+  // State
+  let deleteButtonLabel = "";
+
+  // Utils
+  const syncWithLocalStorage = () => {
+    const currentState = localStorage.getItem("fifo");
+
+    if (currentState) {
+      const newState = JSON.parse(currentState).filter(
+        (queue: QueueType) => queue.id !== id
+      );
+
+      localStorage.setItem("fifo", JSON.stringify(newState));
+    }
+
+    goto("/");
+  };
+
+  // Handlers
+  const handleDelete = () => {
+    if (!deleteButtonLabel) {
+      deleteButtonLabel = "Sure?";
+      return;
+    }
+
+    browser && syncWithLocalStorage();
+  };
 </script>
 
 <Divider />
 
 <div class="flex justify-between">
-  <h2>Edit Queue</h2>
-  <button class="flex items-center gap-2" on:click={() => goto(`/use/${id}`)}>
-    Use {@html ArrowRightIcon}
+  <div class="flex gap-2">
+    <h2>Edit Queue</h2>
+    <button class="flex items-center gap-2" on:click={() => goto(`/use/${id}`)}>
+      {@html ArrowRightIcon}
+    </button>
+  </div>
+  <button
+    class="filled flex items-center gap-2 py-0 text-base"
+    on:click={handleDelete}
+  >
+    {deleteButtonLabel || "Delete"}
+    {@html DangerIcon}
   </button>
 </div>
 

diff --git a/src/routes/use/[id]/+page.svelte b/src/routes/use/[id]/+page.svelte
@@ -120,7 +120,7 @@
     >
       <span class="font-bold">{value}</span>
 
-      <span class="flex items-center gap-2">
+      <span class="flex items-center">
         {#if index === 0}
           <span class="text-sm italic mr-2">Up Next</span>
         {/if}

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,8 +1,14 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      },
+    },
   },
   plugins: [],
-}
+};