From dd01a90bed6f3be8d949c34bcf72fc15250eb770 Mon Sep 17 00:00:00 2001
From: BFlorian91 <b.florian91@icloud.com>
Date: Sat, 16 Dec 2023 02:58:22 +0100
Subject: [PATCH] Feat: add remove instant from the dom without fetch, and
 authorId in editview

---
 src/components/CardSnippet.vue | 11 ++++++++++-
 src/views/EditSnippetView.vue  |  3 ++-
 src/views/HomeView.vue         |  7 +++++++
 src/views/ShowSnippetView.vue  |  7 ++++---
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/CardSnippet.vue b/src/components/CardSnippet.vue
index 0f866ad..4b1c04e 100644
--- a/src/components/CardSnippet.vue
+++ b/src/components/CardSnippet.vue
@@ -43,6 +43,10 @@ const props = defineProps({
 		type: String,
 		default: "",
 	},
+	onDelete: {
+		type: Function,
+		default: () => {},
+	},
 });
 
 const authorId = "Florian";
@@ -62,6 +66,11 @@ const handleEdit = (id: string) => {
 
 const { elapsedTime } = useElapsedTime(props.updatedAt);
 
+const handleDelete = async () => {
+	await deleteSnippet(props.id);
+	props.onDelete(props.id);
+};
+
 onMounted(async () => {
 	await nextTick();
 	Prism.highlightAll();
@@ -204,7 +213,7 @@ watch(readMore, async (newValue) => {
 						<p class="text-sm">Updated {{ elapsedTime }}</p>
 					</div>
 					<div class="flex items-center gap-4">
-						<button class="text-danger opacity-100" @click="deleteSnippet(id)">
+						<button class="text-danger opacity-100" @click="handleDelete">
 							<TrashIcon />
 						</button>
 						<button class="text-secondary opacity-60" @click="handleEdit(id)">
diff --git a/src/views/EditSnippetView.vue b/src/views/EditSnippetView.vue
index 33aa440..691dad0 100644
--- a/src/views/EditSnippetView.vue
+++ b/src/views/EditSnippetView.vue
@@ -40,10 +40,11 @@ const fillSnippetData = () => {
 
 const { updateSnippet } = useUpdateSnippet();
 
-const handleSubmit = (event: Event) => {
+const handleSubmit = async (event: Event) => {
 	event.preventDefault();
 	updateSnippet(snippetData);
 	router.push(`/snippet/${id}`);
+	await fetchSnippetById(id.toString());
 };
 
 const pushBack = () => {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0d9da4a..a1a115c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,6 +11,12 @@ const { snippets, fetchSnippets, isLoading, error } = useGetSnippets();
 const { filteredSnippets } = useFilter(snippets);
 console.log(auth.currentUser);
 
+const handleSnippetDelete = (deletedSnippetId: string) => {
+	snippets.value = snippets.value.filter(
+		(snippet) => snippet.id !== deletedSnippetId,
+	);
+};
+
 onMounted(async () => {
 	await fetchSnippets();
 });
@@ -38,6 +44,7 @@ onMounted(async () => {
 						:language="snippet.language.toLocaleLowerCase()"
 						:created-at="snippet.createdAt"
 						:updated-at="snippet.updatedAt"
+						:onDelete="handleSnippetDelete"
 					/>
 				</div>
 			</div>
diff --git a/src/views/ShowSnippetView.vue b/src/views/ShowSnippetView.vue
index f161912..a0c4c78 100644
--- a/src/views/ShowSnippetView.vue
+++ b/src/views/ShowSnippetView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Prism from "prismjs";
 import { useRouter } from "vue-router";
-import { onMounted, reactive, nextTick, watch } from "vue";
+import { onMounted, reactive, nextTick, watch, computed } from "vue";
 import { useAuthStore } from "../store/authStore";
 import { useGetSnippets } from "../composables/useGetSnippets";
 import { useDeleteSnippet } from "../composables/useDeleteSnippet";
@@ -27,7 +27,7 @@ const snippetData = reactive({
 	tags: "",
 	createdAt: date.toISOString(),
 	updatedAt: date.toISOString(),
-	authorId: authStore.idToken,
+	authorId: computed(() => authStore.getUserId()),
 	visibility: true,
 });
 
@@ -61,8 +61,9 @@ onMounted(async () => {
 });
 
 watch(isDeleting, (value) => {
+	console.log(value);
 	if (value) {
-		router.push("/");
+		fetchSnippetById(id.toString());
 	}
 });
 </script>