Add basic author form

front/src/AuthorForm.vue

@@ -0,0 +1,30 @@
+<script setup>
+  import { ref } from 'vue'
+  import { getAuthor } from './api.js'
+  import { onBeforeRouteUpdate } from 'vue-router'
+
+
+  const props = defineProps({
+    id: String
+  });
+
+  let data = ref(null);
+  let error = ref(null);
+
+  getAuthor(data, error, props.id);
+
+  onBeforeRouteUpdate(async (to, from) => {
+    getAuthor(data, error, to.params.id);
+  })
+</script>
+
+<template>
+  <div v-if="error">{{$t('authorform.error', {err: error.message})}}</div>
+  <div v-if="data">
+    <h3 class="title">{{data.name}}</h3>
+    <p v-if="data.description">{{data.description}}</p>
+  </div>
+</template>
+
+<style scoped>
+</style>

front/src/api.js

@@ -41,6 +41,10 @@ export function getSearchBooks(data, error, searchterm, limit, offset) {
   return useFetch(data, error, baseUrl + '/search/' + encodeURIComponent(searchterm) + "?" + queryParams.toString());
 }
 
+export function getAuthor(data, error, id) {
+  return useFetch(data, error, baseUrl + '/author/' + id);
+}
+
 export function getBook(data, error, id) {
   return useFetch(data, error, baseUrl + '/book/' + id);
 }

front/src/locales/en.json

@@ -43,6 +43,9 @@
     "startread": "Start reading",
     "wantread": "I want to read it"
   },
+  "authorform": {
+    "error": "Erreur when loading author: {error}"
+  },
   "bookform": {
     "error": "Error when loading book: {error}",
     "read": "Read",

front/src/locales/fr.json

@@ -43,6 +43,9 @@
     "startread": "Commencer la lecture",
     "wantread": "Je veux le lire"
   },
+  "authorform": {
+    "error": "Erreur pendant le chargement de l'auteur: {error}"
+  },
   "bookform": {
     "error": "Erreur pendant le chargement du livre: {error}",
     "read": "Lu",

front/src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import BooksBrowser from './BooksBrowser.vue'
 import AddBook from './AddBook.vue'
+import AuthorForm from './AuthorForm.vue'
 import BookForm from './BookForm.vue'
 import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
@@ -13,11 +14,11 @@ const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
   { path: '/book/:id', component: BookForm, props: true },
+  { path: '/author/:id', component: AuthorForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
   { path: '/login', component: LogIn },
-  { path: '/book', component: LogIn },
 ]
 
 export const router = createRouter({