Refactor all API related functions

web/admin-gui/src/utils/database.ts

@@ -24,35 +24,39 @@ export interface GetArticle {
 	}
 }
 
-export async function getArticles(id: string): Promise<GetArticle> {
+export function fetchArticle(id: string): Promise<GetArticle> {
-	return await fetch(`${baseApiUrl}/articles/${id}`, {
+	return new Promise((resolve, reject) => {
-		credentials: 'include',
+		fetch(`${baseApiUrl}/articles/${id}`, {
-		method: 'GET',
+			credentials: 'include',
+			method: 'GET',
+		})
+			.then(response => response.json())
+			.then(article => resolve(article))
+			.catch(error => reject(error))
 	})
-		.then(result => result.json())
 }
 
-export async function deleteArticle(id: string) {
+export function deleteArticle(id: string): Promise<any> {
-	return await fetch(`${baseApiUrl}/articles/${id}`, {
+	return new Promise((resolve, reject) => {
-		credentials: 'include',
+		fetch(`${baseApiUrl}/articles/${id}`, {
-		method: 'DELETE',
+			credentials: 'include',
+			method: 'DELETE'
+		})
+			.then(result => result.json())
+			.then(article => resolve(article))
+			.catch(error => reject(error))
 	})
-		.then(result => result.json())
 }
 
-async function sendArticle(article: Article, method: 'POST' | 'PUT'): Promise<object> {
+export function sendArticleWithMethod(article: Article, method: 'POST' | 'PUT'): Promise<any> {
-	return await fetch(`${baseApiUrl}/articles/${article.titleID}`, {
+	return new Promise((resolve, reject) => {
-		credentials: 'include',
+		fetch(`${baseApiUrl}/articles/${article.titleID}`, {
-		method,
+			credentials: 'include',
-		body: JSON.stringify(article)
+			method,
+			body: JSON.stringify(article)
+		})
+			.then(result => result.json())
+			.then(article => resolve(article))
+			.catch(error => reject(error))
 	})
-		.then(result => result.json())
 }
-
-export async function postArticle(article: Article): Promise<object> {
-	return await sendArticle(article, 'POST')
-}
-
-export async function editArticle(article: Article): Promise<object> {
-	return await sendArticle(article, 'PUT')
-}

web/admin-gui/src/views/ArticlesEdit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Modal from '@/components/ModalSuccessError.vue';
-import { editArticle, getArticles, type Article } from '@/utils/database';
+import { fetchArticle, sendArticleWithMethod, type Article, type GetArticle } from '@/utils/database';
 import Editor from '@tinymce/tinymce-vue';
 import { onMounted, ref, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -8,44 +8,46 @@ import { useRoute, useRouter } from 'vue-router';
 const article: Ref<Article | void> = ref()
 const editorData: Ref<string> = ref('')
 const router = useRouter()
+const route = useRoute()
 
 const successModalShow = ref(false)
 const errorModalShow = ref(false)
 const errorModalDescription: Ref<string> = ref("Quelque chose s'est mal passé...")
 
+function displayErrorMessage(message: string): void {
+	errorModalDescription.value = message
+	errorModalShow.value = true
+}
+
+async function getArticle(): Promise<GetArticle | undefined> {
+	try {
+		return await fetchArticle(route.params.articleID as string)
+	} catch {
+		displayErrorMessage("Impossible de récupérer l'article. Vérifiez l'URL. Tentez-vous d'accéder au mode édition directement depuis un lien ?")
+		return undefined
+	}
+}
+
 onMounted(async () => {
-	await getArticles(useRoute().params.articleID as string)
+	article.value = (await getArticle())?.content[0]
-		.then(articleFetch => {
+	editorData.value = article.value?.content.html ?? ""
-			article.value = articleFetch.content[0]
-			editorData.value = article.value.content.html
-		})
-		.catch(error => {
-			errorModalDescription.value = "Impossible de récupérer l'article. Vérifiez l'URL. Tentez-vous d'accéder au mode édition directement depuis un lien ?"
-			errorModalShow.value = true
-			console.error(error)
-		})
 })
 
 function abort() {
 	router.push('/articles')
 }
 
-async function saveContent() {
+function saveContent() {
 	if (article.value == undefined) return;
-	article.value.content.html = editorData.value
-	await editArticle(article.value)
-		.then(() => {
-			successModalShow.value = true
-		})
-		.catch(error => {
-			errorModalDescription.value = `Impossible de sauvegarder l'article. (${error.toString()})`
-			errorModalShow.value = true
-			console.error(error)
-		})
 
+	article.value.content.html = editorData.value
+
+	sendArticleWithMethod(article.value, 'PUT')
+		.then(() => successModalShow.value = true)
+		.catch(error => displayErrorMessage(`Impossible de sauvegarder l'article. (${error.toString()})`))
 }
 </script>
-	
+
 <template>
 	<div class="container">
 		<div id="editor">

web/admin-gui/src/views/ArticlesNew.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { postArticle, type Article } from '@/utils/database';
+import { sendArticleWithMethod, type Article } from '@/utils/database';
 import { ref, type Ref } from 'vue';
-import { RouterLink, useRouter } from 'vue-router'
+import { RouterLink, useRouter } from 'vue-router';
 
 const router = useRouter()
 
@@ -29,7 +29,7 @@ function isFormEmpty(): boolean {
 	return title.value === '' || rawTags.value === ''
 }
 
-async function createArticle() {
+async function createArticle(): Promise<Article> {
 	const article: Article = {
 		titleID: generateTitleID(title.value),
 		title: title.value,
@@ -40,7 +40,12 @@ async function createArticle() {
 		online: false,
 		tags: tags.value
 	}
-	await postArticle(article)
+	await sendArticleWithMethod(article, 'POST')
+	return article
+}
+
+async function formSubmitHandler(): Promise<void> {
+	const article = await createArticle()
 	router.push(`/articles/edit/${article.titleID}`)
 }
 </script>
@@ -48,7 +53,7 @@ async function createArticle() {
 <template>
 	<main>
 		<h2>Créer un nouvel article</h2>
-		<form @submit.prevent="createArticle()">
+		<form @submit.prevent="formSubmitHandler()">
 			<div class="inputs-group">
 				<div class="label-input">
 					<label for="title">Titre de l'article</label>