-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: updateSnippet composable and fix somes minors others things
- Loading branch information
Showing
8 changed files
with
217 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
// useSnippets.ts | ||
import { ref, Ref } from "vue"; | ||
import { db } from "../services/firebase/firebase.config"; | ||
import { collection, doc, getDoc, getDocs } from "firebase/firestore"; | ||
import { Snippet } from "../utils/types/snippet"; | ||
|
||
export function useGetSnippets() { | ||
const snippets: Ref<Snippet[]> = ref([]); | ||
const snippet: Ref<Snippet | null> = ref(null); | ||
const isLoading: Ref<boolean> = ref(false); | ||
const error: Ref<string | null> = ref(null); | ||
|
||
const fetchSnippets = async () => { | ||
isLoading.value = true; | ||
error.value = null; | ||
try { | ||
const querySnapshot = await getDocs(collection(db, "snippets")); | ||
snippets.value = querySnapshot.docs.map((doc) => ({ | ||
...(doc.data() as Snippet), | ||
id: doc.id, | ||
})); | ||
} catch (err) { | ||
error.value = (err as Error).message ?? "Could not fetch the snippets."; | ||
} finally { | ||
isLoading.value = false; | ||
} | ||
}; | ||
|
||
const fetchSnippetById = async (id: string) => { | ||
console.log(id); | ||
isLoading.value = true; | ||
error.value = null; | ||
try { | ||
const docRef = doc(db, "snippets", id); | ||
const docSnap = await getDoc(docRef); | ||
if (docSnap.exists()) { | ||
snippet.value = { ...(docSnap.data() as Snippet) }; | ||
} else { | ||
throw new Error("Snippet not found"); | ||
} | ||
} catch (err) { | ||
error.value = (err as Error).message ?? "Could not fetch the snippet."; | ||
} finally { | ||
isLoading.value = false; | ||
} | ||
}; | ||
|
||
return { | ||
snippets, | ||
snippet, | ||
fetchSnippets, | ||
fetchSnippetById, | ||
isLoading, | ||
error, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { ref } from "vue"; | ||
import { db } from "../services/firebase/firebase.config"; | ||
import { doc, updateDoc, serverTimestamp } from "firebase/firestore"; | ||
import { Snippet } from "../utils/types/snippet"; | ||
|
||
export function useUpdateSnippet() { | ||
const error = ref<string | null>(null); | ||
const isUpdating = ref(false); | ||
|
||
const updateSnippet = async (snippetData: Snippet): Promise<void> => { | ||
try { | ||
isUpdating.value = true; | ||
const snippetId = snippetData.id; | ||
if (!snippetId) { | ||
throw new Error("Snippet ID is missing."); | ||
} | ||
|
||
const fullSnippetData = { | ||
...snippetData, | ||
updatedAt: serverTimestamp(), | ||
}; | ||
|
||
const snippetDocRef = doc(db, "snippets", snippetId); | ||
await updateDoc(snippetDocRef, fullSnippetData); | ||
error.value = null; | ||
} catch (e) { | ||
error.value = | ||
e instanceof Error ? e.message : "Could not update the snippet."; | ||
} finally { | ||
isUpdating.value = false; | ||
} | ||
}; | ||
|
||
return { | ||
error, | ||
isUpdating, | ||
updateSnippet, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,111 @@ | ||
<script setup lang="ts"></script> | ||
<script setup lang="ts"> | ||
import { onMounted, reactive } from "vue"; | ||
import InputForText from "../components/InputForText.vue"; | ||
import InputForRichText from "../components/InputForRichText.vue"; | ||
import { useAuthStore } from "../store/authStore"; | ||
import { useUpdateSnippet } from "../composables/useUpdateSnippet"; | ||
import { useGetSnippets } from "../composables/useGetSnippets"; | ||
import { useRouter } from "vue-router"; | ||
const authStore = useAuthStore(); | ||
const router = useRouter(); | ||
const date = new Date(); | ||
const id = router.currentRoute.value.params.id; | ||
const { snippet, fetchSnippetById } = useGetSnippets(); | ||
const snippetData = reactive({ | ||
id: id as string, | ||
title: "", | ||
description: "", | ||
code: "", | ||
language: "", | ||
tags: "", | ||
createdAt: date.toISOString(), | ||
updatedAt: date.toISOString(), | ||
authorId: authStore.idToken, | ||
visibility: true, | ||
}); | ||
const fillSnippetData = () => { | ||
if (snippet.value) { | ||
snippetData.title = snippet.value.title; | ||
snippetData.description = snippet.value.description; | ||
snippetData.code = snippet.value.code; | ||
snippetData.language = snippet.value.language; | ||
snippetData.createdAt = snippet.value.createdAt; | ||
snippetData.tags = snippet.value.tags; | ||
} | ||
}; | ||
const { updateSnippet } = useUpdateSnippet(); | ||
const handleSubmit = (event: Event) => { | ||
event.preventDefault(); | ||
updateSnippet(snippetData); | ||
router.push("/"); | ||
}; | ||
onMounted(async () => { | ||
if (!authStore.isLoggedIn) { | ||
router.push("/login"); | ||
} | ||
await fetchSnippetById(id.toString()); | ||
fillSnippetData(); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div>SnippetView</div> | ||
<div class="flex min-h-full sm:mt-20 flex-1 flex-col justify-center"> | ||
<div class="px-4 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" | ||
> | ||
<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" | ||
> | ||
Snippet: {{ snippet?.title }} | ||
</h3> | ||
</div> | ||
<form class="space-y-6"> | ||
<div> | ||
<InputForText v-model="snippetData.title" label="Title" required /> | ||
</div> | ||
|
||
<div> | ||
<InputForText | ||
v-model="snippetData.description" | ||
label="Description" | ||
/> | ||
</div> | ||
<div> | ||
<InputForText v-model="snippetData.tags" label="Tag" required /> | ||
</div> | ||
<div> | ||
<InputForText | ||
v-model="snippetData.language" | ||
label="Language" | ||
required | ||
/> | ||
</div> | ||
<div> | ||
<InputForRichText | ||
v-model="snippetData.code" | ||
label="Code" | ||
required | ||
/> | ||
</div> | ||
<div> | ||
<button | ||
type="submit" | ||
class="flex w-full justify-center text-base rounded-md shadow-neumorphic hover:shadow-inner-neumorphic bg-button px-3 py-3 font-semibold leading-6 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary" | ||
@click="handleSubmit" | ||
> | ||
Save | ||
</button> | ||
</div> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
</template> |