From 071e3c7b885e44d9fd1a88da3439ef0485b5e2c7 Mon Sep 17 00:00:00 2001
From: BFlorian91 <b.florian91@icloud.com>
Date: Thu, 23 Nov 2023 01:12:43 +0100
Subject: [PATCH] feat: add useDeleteSnippet and fix error with type of tags in
 the CardSnippet

---
 src/assets/icons/CrossIcon.vue      | 16 ++++++++++++++++
 src/assets/icons/TrashIcon.vue      | 16 ++++++++++++++++
 src/components/CardSnippet.vue      | 16 +++++++++++++---
 src/composables/useDeleteSnippet.ts | 29 +++++++++++++++++++++++++++++
 src/views/EditSnippetView.vue       | 13 ++++++++++++-
 src/views/HomeView.vue              |  6 +++---
 src/views/ShowSnippetView.vue       | 19 +++++++++++++++++--
 tailwind.config.js                  |  2 +-
 8 files changed, 107 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/CrossIcon.vue
 create mode 100644 src/assets/icons/TrashIcon.vue
 create mode 100644 src/composables/useDeleteSnippet.ts

diff --git a/src/assets/icons/CrossIcon.vue b/src/assets/icons/CrossIcon.vue
new file mode 100644
index 0000000..0b22727
--- /dev/null
+++ b/src/assets/icons/CrossIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
diff --git a/src/assets/icons/TrashIcon.vue b/src/assets/icons/TrashIcon.vue
new file mode 100644
index 0000000..f4e4f94
--- /dev/null
+++ b/src/assets/icons/TrashIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/CardSnippet.vue b/src/components/CardSnippet.vue
index 7e7604c..eccbe83 100644
--- a/src/components/CardSnippet.vue
+++ b/src/components/CardSnippet.vue
@@ -21,12 +21,16 @@ defineProps({
     type: String,
     default: "",
   },
-  tag: {
-    type: Array<string>,
+  tags: {
+    type: String,
     default: "",
   },
 });
 
+const splitTags = (tags: string) => {
+  return tags.split(",");
+};
+
 onMounted(() => {
   Prism.highlightAll();
 });
@@ -49,7 +53,13 @@ onMounted(() => {
         </div>
         <div class="relative mt-4">
           <h3 class="text-sm font-bold text-gray-300">
-            {{ tag }}
+            <span
+              v-for="(tag, index) in splitTags(tags)"
+              :key="index"
+              :class="`p-1.5 py-1 mb-4 mr-1 rounded-md text-gray-800 bg-vue text-xs overflow-hidden`"
+            >
+              {{ tag }}
+            </span>
           </h3>
         </div>
         <div
diff --git a/src/composables/useDeleteSnippet.ts b/src/composables/useDeleteSnippet.ts
new file mode 100644
index 0000000..5ae882a
--- /dev/null
+++ b/src/composables/useDeleteSnippet.ts
@@ -0,0 +1,29 @@
+import { ref } from "vue";
+import { db } from "../services/firebase/firebase.config";
+import { doc, deleteDoc } from "firebase/firestore";
+
+export function useDeleteSnippet() {
+  const error = ref<string | null>(null);
+  const isDeleting = ref(false);
+
+  const deleteSnippet = async (snippetId: string): Promise<void> => {
+    try {
+      isDeleting.value = true;
+      const snippetDocRef = doc(db, "snippets", snippetId);
+      await deleteDoc(snippetDocRef);
+      console.log("Snippet deleted successfully.");
+      error.value = null;
+    } catch (e) {
+      error.value =
+        e instanceof Error ? e.message : "Could not delete the snippet.";
+    } finally {
+      isDeleting.value = false;
+    }
+  };
+
+  return {
+    error,
+    isDeleting,
+    deleteSnippet,
+  };
+}
diff --git a/src/views/EditSnippetView.vue b/src/views/EditSnippetView.vue
index b528476..dd7d3d3 100644
--- a/src/views/EditSnippetView.vue
+++ b/src/views/EditSnippetView.vue
@@ -5,6 +5,7 @@ import InputForRichText from "../components/InputForRichText.vue";
 import { useAuthStore } from "../store/authStore";
 import { useUpdateSnippet } from "../composables/useUpdateSnippet";
 import { useGetSnippets } from "../composables/useGetSnippets";
+import CrossIcon from "../assets/icons/CrossIcon.vue";
 import { useRouter } from "vue-router";
 
 const authStore = useAuthStore();
@@ -45,6 +46,10 @@ const handleSubmit = (event: Event) => {
   router.push(`/snippet/${id}`);
 };
 
+const pushBack = () => {
+  router.push(`/snippet/${id}`);
+};
+
 onMounted(async () => {
   if (!authStore.isLoggedIn) {
     router.push("/login");
@@ -60,8 +65,14 @@ onMounted(async () => {
   >
     <div class="px-4 max-w-full sm:px-0 sm:mx-auto sm:w-full sm:max-w-[720px]">
       <div
-        class="bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
+        class="relative bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >
+        <button
+          class="absolute top-6 right-6 text-danger opacity-60"
+          @click="pushBack"
+        >
+          <CrossIcon />
+        </button>
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <h3
             class="pb-11 text-center text-2xl font-bold leading-9 tracking-tight text-primary"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 962ceaf..2f422d0 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -10,8 +10,8 @@ import LoadingCircle from "../components/LoadingCircle.vue";
 const { snippets, fetchSnippets, isLoading, error } = useGetSnippets();
 const { filteredSnippets } = useFilter(snippets);
 
-onMounted(() => {
-  fetchSnippets();
+onMounted(async () => {
+  await fetchSnippets();
 });
 </script>
 
@@ -36,7 +36,7 @@ onMounted(() => {
             :code="snippet.code"
             :title="snippet.title"
             :description="snippet.description"
-            :tag="snippet.tags"
+            :tags="snippet.tags"
           />
         </div>
       </section>
diff --git a/src/views/ShowSnippetView.vue b/src/views/ShowSnippetView.vue
index d13abad..b5fefbd 100644
--- a/src/views/ShowSnippetView.vue
+++ b/src/views/ShowSnippetView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import Prism from "prismjs";
 import { useRouter } from "vue-router";
-import { onMounted, reactive, nextTick } from "vue";
+import { onMounted, reactive, nextTick, watch } from "vue";
 import { useAuthStore } from "../store/authStore";
 import { useGetSnippets } from "../composables/useGetSnippets";
+import { useDeleteSnippet } from "../composables/useDeleteSnippet";
 import { useClipboard } from "@vueuse/core";
+import TrashIcon from "../assets/icons/TrashIcon.vue";
 import PencilIcon from "../assets/icons/PencilIcon.vue";
 import CopyIcon from "../assets/icons/CopyIcon.vue";
 import LoadingCircle from "../components/LoadingCircle.vue";
@@ -41,6 +43,7 @@ const fillSnippetData = () => {
 };
 
 const { copy, copied } = useClipboard();
+const { isDeleting, deleteSnippet } = useDeleteSnippet();
 
 const handleEdit = () => {
   router.push(`/edit/${id}`);
@@ -56,6 +59,12 @@ onMounted(async () => {
   await nextTick();
   Prism.highlightAll();
 });
+
+watch(isDeleting, (value) => {
+  if (value) {
+    router.push("/");
+  }
+});
 </script>
 
 <template>
@@ -67,11 +76,17 @@ onMounted(async () => {
         class="relative bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >
         <button
-          class="absolute top-6 right-6 text-white opacity-60"
+          class="absolute top-6 right-6 text-secondary opacity-60"
           @click="handleEdit"
         >
           <PencilIcon />
         </button>
+        <button
+          class="absolute top-6 left-6 text-danger opacity-60"
+          @click="deleteSnippet(snippetData.id)"
+        >
+          <TrashIcon />
+        </button>
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <h3
             class="pb-11 text-center text-2xl font-bold leading-9 tracking-tight text-primary"
diff --git a/tailwind.config.js b/tailwind.config.js
index 441f8ac..3d2b8f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ export default {
         hover: "#58D5BA",
         ring: "#277F70",
         button: "#24292F]",
-        danger: "#e3342f",
+        danger: "#FF9592",
         card: "#0F1B1B",
         background: "#262a31",
         darktext: "#1d1d1d",