From c9cb4006c04e92266809534b909832e3d6c7069e Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 09:49:23 +0100
Subject: [PATCH 01/16] add pagination

---
 src/router/index.js          |  1 +
 src/services/EventService.js | 22 ++++++------
 src/views/EventList.vue      | 67 +++++++++++++++++++++++++++++++-----
 3 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 223e068..e39261b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ const routes = [
     path: "/",
     name: "EventList",
     component: EventList,
+    props: (route) => ({ page: parseInt(route.query.page) || 1 }),
   },
   {
     path: "/event/:id",
diff --git a/src/services/EventService.js b/src/services/EventService.js
index d4621b8..f84dc90 100644
--- a/src/services/EventService.js
+++ b/src/services/EventService.js
@@ -1,19 +1,19 @@
-import axios from 'axios'
+import axios from "axios";
 
 const apiClient = axios.create({
-  baseURL: 'https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router',
+  baseURL: "https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router",
   withCredentials: false,
   headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json'
-  }
-})
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+});
 
 export default {
-  getEvents() {
-    return apiClient.get('/events')
+  getEvents(perPage, page) {
+    return apiClient.get("/events?_limit=" + perPage + "&_page=" + page);
   },
   getEvent(id) {
-    return apiClient.get('/events/' + id)
-  }
-}
+    return apiClient.get("/events/" + id);
+  },
+};
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index f844938..47075f7 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,18 +1,32 @@
 <script setup>
+  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
   import EventCard from "@/components/EventCard.vue";
   import EventService from "@/services/EventService.js";
-  import { onMounted, ref } from "vue";
 
-  const events = ref("");
+  const props = defineProps(["page"]);
+
+  const events = ref(null);
+  const totalEvents = ref(0);
+
+  const page = computed(() => props.page);
+
+  const hasNextPage = computed(() => {
+    const totalPages = Math.ceil(totalEvents.value / 2);
+    return page.value < totalPages;
+  });
 
   onMounted(() => {
-    EventService.getEvents()
-      .then((response) => {
-        events.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+    watchEffect(() => {
+      events.value = null;
+      EventService.getEvents(2, page.value)
+        .then((response) => {
+          events.value = response.data;
+          totalEvents.value = response.headers["x-total-count"];
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    });
   });
 </script>
 
@@ -20,6 +34,24 @@
   <h1>Events for Good</h1>
   <div class="events">
     <EventCard v-for="event in events" :key="event.id" :event="event" />
+
+    <div class="pagination">
+      <router-link
+        id="page-prev"
+        :to="{ name: 'EventList', query: { page: page - 1 } }"
+        rel="prev"
+        v-if="page != 1"
+        >&#60; Previous</router-link
+      >
+
+      <router-link
+        id="page-next"
+        :to="{ name: 'EventList', query: { page: page + 1 } }"
+        rel="next"
+        v-if="hasNextPage"
+        >Next &#62;</router-link
+      >
+    </div>
   </div>
 </template>
 
@@ -29,4 +61,21 @@
     flex-direction: column;
     align-items: center;
   }
+  .pagination {
+    display: flex;
+    width: 290px;
+  }
+  .pagination a {
+    flex: 1;
+    text-decoration: none;
+    color: #2c3e50;
+  }
+
+  #page-prev {
+    text-align: left;
+  }
+
+  #page-next {
+    text-align: right;
+  }
 </style>

From 3f97074e0dbfdf5857ff848f424e24b46fdb2117 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 10:09:38 +0100
Subject: [PATCH 02/16] add nested routes

---
 src/components/EventCard.vue                  |  1 +
 src/router/index.js                           | 26 ++++++++++++++++---
 src/views/EventList.vue                       |  1 -
 src/views/event/Details.vue                   |  9 +++++++
 src/views/event/Edit.vue                      |  7 +++++
 .../{EventDetails.vue => event/Layout.vue}    | 16 ++++++++----
 src/views/event/Register.vue                  |  7 +++++
 7 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 src/views/event/Details.vue
 create mode 100644 src/views/event/Edit.vue
 rename src/views/{EventDetails.vue => event/Layout.vue} (53%)
 create mode 100644 src/views/event/Register.vue

diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index 1865a94..f0a5c00 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+  import { defineProps } from "vue";
   defineProps({
     event: {
       type: Object,
diff --git a/src/router/index.js b/src/router/index.js
index e39261b..b8a131a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 import EventList from "../views/EventList.vue";
-import EventDetails from "../views/EventDetails.vue";
+import EventLayout from "../views/event/Layout.vue";
+import EventDetails from "../views/event/Details.vue";
+import EventRegister from "../views/event/Register.vue";
+import EventEdit from "../views/event/Edit.vue";
 import About from "../views/About.vue";
 
 const routes = [
@@ -12,9 +15,26 @@ const routes = [
   },
   {
     path: "/event/:id",
-    name: "EventDetails",
+    name: "EventLayout",
     props: true,
-    component: EventDetails,
+    component: EventLayout,
+    children: [
+      {
+        path: "",
+        name: "EventDetails",
+        component: EventDetails,
+      },
+      {
+        path: "register",
+        name: "EventRegister",
+        component: EventRegister,
+      },
+      {
+        path: "edit",
+        name: "EventEdit",
+        component: EventEdit,
+      },
+    ],
   },
   {
     path: "/about",
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 47075f7..4ee1e5d 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -29,7 +29,6 @@
     });
   });
 </script>
-
 <template>
   <h1>Events for Good</h1>
   <div class="events">
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
new file mode 100644
index 0000000..8bd4195
--- /dev/null
+++ b/src/views/event/Details.vue
@@ -0,0 +1,9 @@
+<script setup>
+  import { defineProps } from "vue";
+  defineProps(["event"]);
+</script>
+
+<template>
+  <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+  <p>{{ event.description }}</p>
+</template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
new file mode 100644
index 0000000..e30790d
--- /dev/null
+++ b/src/views/event/Edit.vue
@@ -0,0 +1,7 @@
+<script setup>
+  import { defineProps } from "vue";
+  defineProps(["event"]);
+</script>
+<template>
+  <p>Edit the event here</p>
+</template>
diff --git a/src/views/EventDetails.vue b/src/views/event/Layout.vue
similarity index 53%
rename from src/views/EventDetails.vue
rename to src/views/event/Layout.vue
index ffd3ee0..1a61446 100644
--- a/src/views/EventDetails.vue
+++ b/src/views/event/Layout.vue
@@ -1,11 +1,12 @@
 <script setup>
+  import { onMounted, ref, defineProps, computed } from "vue";
   import EventService from "@/services/EventService.js";
-  import { computed, onMounted, ref } from "vue";
 
   const props = defineProps(["id"]);
 
-  const event = ref("");
   const id = computed(() => props.id);
+
+  const event = ref(null);
   onMounted(() => {
     EventService.getEvent(id.value)
       .then((response) => {
@@ -16,11 +17,16 @@
       });
   });
 </script>
-
 <template>
   <div v-if="event">
     <h1>{{ event.title }}</h1>
-    <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
-    <p>{{ event.description }}</p>
+    <div id="nav">
+      <router-link :to="{ name: 'EventDetails' }">Details</router-link>
+      |
+      <router-link :to="{ name: 'EventRegister' }">Register</router-link>
+      |
+      <router-link :to="{ name: 'EventEdit' }">Edit</router-link>
+    </div>
+    <router-view :event="event" />
   </div>
 </template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
new file mode 100644
index 0000000..729d876
--- /dev/null
+++ b/src/views/event/Register.vue
@@ -0,0 +1,7 @@
+<script setup>
+  import { defineProps } from "vue";
+  defineProps(["event"]);
+</script>
+<template>
+  <p>Register for the event here</p>
+</template>

From 74505119b889814b9bdef4dbef8390f2d6c2b1b2 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 10:25:13 +0100
Subject: [PATCH 03/16] add redirect and alias

---
 src/router/index.js        | 8 +++++++-
 src/views/EventList.vue    | 1 +
 src/views/event/Layout.vue | 3 ++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index b8a131a..c26776b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,7 +14,7 @@ const routes = [
     props: (route) => ({ page: parseInt(route.query.page) || 1 }),
   },
   {
-    path: "/event/:id",
+    path: "/events/:id",
     name: "EventLayout",
     props: true,
     component: EventLayout,
@@ -36,6 +36,12 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/event/:afterEvent(.*)",
+    redirect: (to) => {
+      return { path: "/events/" + to.params.afterEvent };
+    },
+  },
   {
     path: "/about",
     name: "About",
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 4ee1e5d..47075f7 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -29,6 +29,7 @@
     });
   });
 </script>
+
 <template>
   <h1>Events for Good</h1>
   <div class="events">
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 1a61446..b52fac0 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
+  import { onMounted, ref, defineProps } from "vue";
   import EventService from "@/services/EventService.js";
 
   const props = defineProps(["id"]);
@@ -17,6 +17,7 @@
       });
   });
 </script>
+
 <template>
   <div v-if="event">
     <h1>{{ event.title }}</h1>

From 42a68fe95866e777cdfcc71b8009338cb62a4909 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 17:24:37 +0100
Subject: [PATCH 04/16] add programmatic navigation

---
 src/views/event/Layout.vue   |  2 +-
 src/views/event/Register.vue | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index b52fac0..6188df8 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { onMounted, ref, defineProps } from "vue";
+  import { onMounted, ref, defineProps, computed } from "vue";
   import EventService from "@/services/EventService.js";
 
   const props = defineProps(["id"]);
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index 729d876..b69b4ab 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,7 +1,19 @@
 <script setup>
+  import { useRouter } from "vue-router";
   import { defineProps } from "vue";
+
   defineProps(["event"]);
+  const router = useRouter();
+
+  const register = () => {
+    // Call to API
+    // If registered then redirect to event details
+    router.push({
+      name: "EventDetails",
+    });
+  };
 </script>
 <template>
   <p>Register for the event here</p>
+  <button @click="register">Register Me</button>
 </template>

From 014f13b5f9d61f99d412bf404b2e47af7b9b0c82 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 17:25:01 +0100
Subject: [PATCH 05/16] add redirect and alias

---
 src/router/index.js        | 8 +++++++-
 src/views/EventList.vue    | 1 +
 src/views/event/Layout.vue | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index b8a131a..c26776b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,7 +14,7 @@ const routes = [
     props: (route) => ({ page: parseInt(route.query.page) || 1 }),
   },
   {
-    path: "/event/:id",
+    path: "/events/:id",
     name: "EventLayout",
     props: true,
     component: EventLayout,
@@ -36,6 +36,12 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/event/:afterEvent(.*)",
+    redirect: (to) => {
+      return { path: "/events/" + to.params.afterEvent };
+    },
+  },
   {
     path: "/about",
     name: "About",
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 4ee1e5d..47075f7 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -29,6 +29,7 @@
     });
   });
 </script>
+
 <template>
   <h1>Events for Good</h1>
   <div class="events">
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 1a61446..6188df8 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -17,6 +17,7 @@
       });
   });
 </script>
+
 <template>
   <div v-if="event">
     <h1>{{ event.title }}</h1>

From 88cfcded6542734f8f90744c8cae1f9adabc243c Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 18:06:16 +0100
Subject: [PATCH 06/16] add error handling and 404s

---
 src/router/index.js        | 18 ++++++++++++++++++
 src/views/EventList.vue    |  7 +++++--
 src/views/NetworkError.vue | 11 +++++++++++
 src/views/NotFound.vue     | 15 +++++++++++++++
 src/views/event/Layout.vue | 12 +++++++++++-
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/views/NetworkError.vue
 create mode 100644 src/views/NotFound.vue

diff --git a/src/router/index.js b/src/router/index.js
index c26776b..c4c5d08 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,8 @@ import EventDetails from "../views/event/Details.vue";
 import EventRegister from "../views/event/Register.vue";
 import EventEdit from "../views/event/Edit.vue";
 import About from "../views/About.vue";
+import NotFound from "@/views/NotFound.vue";
+import NetworkError from "@/views/NetworkError.vue";
 
 const routes = [
   {
@@ -47,6 +49,22 @@ const routes = [
     name: "About",
     component: About,
   },
+  {
+    path: "/:catchAll(.*)",
+    name: "NotFound",
+    component: NotFound,
+  },
+  {
+    path: "/404/:resource",
+    name: "404Resource",
+    component: NotFound,
+    props: true,
+  },
+  {
+    path: "/network-error",
+    name: "NetworkError",
+    component: NetworkError,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 47075f7..e278f1e 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -2,9 +2,12 @@
   import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
   import EventCard from "@/components/EventCard.vue";
   import EventService from "@/services/EventService.js";
+  import { useRouter } from "vue-router";
 
   const props = defineProps(["page"]);
 
+  const router = useRouter();
+
   const events = ref(null);
   const totalEvents = ref(0);
 
@@ -23,8 +26,8 @@
           events.value = response.data;
           totalEvents.value = response.headers["x-total-count"];
         })
-        .catch((error) => {
-          console.log(error);
+        .catch(() => {
+          router.push({ name: "NetworkError" });
         });
     });
   });
diff --git a/src/views/NetworkError.vue b/src/views/NetworkError.vue
new file mode 100644
index 0000000..4de255f
--- /dev/null
+++ b/src/views/NetworkError.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="networkError">
+    <h1>Uh-Oh!</h1>
+
+    <h3>
+      It looks like you're experiencing some network issues, please take a
+      breath and <a href="#" @click="$router.go(-1)">click here</a> to try
+      again.
+    </h3>
+  </div>
+</template>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..e3e2a04
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,15 @@
+<script setup>
+  import { defineProps } from "vue";
+  defineProps({
+    resource: {
+      type: String,
+      required: true,
+      default: "page",
+    },
+  });
+</script>
+<template>
+  <h1>Oops!</h1>
+  <h3>The {{ resource }} you're looking for is not here.</h3>
+  <router-link :to="{ name: 'EventList' }">Back to the home page</router-link>
+</template>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 6188df8..e3c25bd 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,9 +1,12 @@
 <script setup>
   import { onMounted, ref, defineProps, computed } from "vue";
   import EventService from "@/services/EventService.js";
+  import { useRouter } from "vue-router";
 
   const props = defineProps(["id"]);
 
+  const router = useRouter();
+
   const id = computed(() => props.id);
 
   const event = ref(null);
@@ -13,7 +16,14 @@
         event.value = response.data;
       })
       .catch((error) => {
-        console.log(error);
+        if (error.response && error.response.status == 404) {
+          router.push({
+            name: "404Resource",
+            params: { resource: "event" },
+          });
+        } else {
+          router.push({ name: "NetworkError" });
+        }
       });
   });
 </script>

From 28f59c35aab3345b2d98d92a7ac3de47d84bb893 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Wed, 17 May 2023 18:26:24 +0100
Subject: [PATCH 07/16] add flash messages

---
 src/App.vue                  | 22 ++++++++++++++++++++++
 src/main.js                  |  5 +++--
 src/views/event/Register.vue | 11 +++++++++--
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..418cf46 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,13 @@
+<script setup>
+  import { inject } from "vue";
+
+  const GStore = inject("GStore");
+</script>
 <template>
   <div id="app">
+    <div id="flashMessage" v-if="GStore?.flashMessage">
+      {{ GStore.flashMessage }}
+    </div>
     <div id="nav">
       <router-link :to="{ name: 'EventList' }">Events</router-link> |
       <router-link :to="{ name: 'About' }">About</router-link>
@@ -9,6 +17,20 @@
 </template>
 
 <style>
+  @keyframes yellowfade {
+    from {
+      background: yellow;
+    }
+    to {
+      background: transparent;
+    }
+  }
+
+  #flashMessage {
+    animation-name: yellowfade;
+    animation-duration: 3s;
+  }
+
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
diff --git a/src/main.js b/src/main.js
index 9c06e03..73b281e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
-import { createApp } from "vue";
+import { createApp, reactive } from "vue";
 import App from "./App.vue";
 import router from "./router";
+const GStore = reactive({ flashMessage: "" });
 
 const app = createApp(App);
 
-app.use(router);
+app.use(router).provide("GStore", GStore);
 
 app.mount("#app");
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index b69b4ab..8c1dc3a 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,13 +1,20 @@
 <script setup>
-  import { useRouter } from "vue-router";
   import { defineProps } from "vue";
+  import { useRouter } from "vue-router";
+  import { inject } from "vue";
 
-  defineProps(["event"]);
+  const props = defineProps(["event"]);
   const router = useRouter();
+  const GStore = inject("GStore");
 
   const register = () => {
     // Call to API
     // If registered then redirect to event details
+    GStore.flashMessage =
+      "You are successfully registered for " + props.event.title;
+    setTimeout(() => {
+      GStore.flashMessage = "";
+    }, 3000);
     router.push({
       name: "EventDetails",
     });

From f37361a38387b4743addb96a220cf3840d1c9426 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 10:32:52 +0100
Subject: [PATCH 08/16] add nested route end

---
 src/App.vue                  | 40 ++++++++---------
 src/components/EventCard.vue | 47 ++++++++++----------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 86 ++++++++++++++++++------------------
 src/views/event/Details.vue  |  5 ++-
 src/views/event/Edit.vue     |  5 ++-
 src/views/event/Layout.vue   | 28 ++++++------
 src/views/event/Register.vue |  5 ++-
 8 files changed, 116 insertions(+), 112 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..75ceb4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,28 +9,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..f5e0493 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -14,28 +15,28 @@
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
-      <h4>{{ event.title }}</h4>
     </div>
   </router-link>
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index b8a131a..3aa09d2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 
 const routes = [
   {
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 4ee1e5d..d17f6c3 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,33 +1,33 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   });
+});
 </script>
 <template>
   <h1>Events for Good</h1>
@@ -55,26 +55,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..c7eec89 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 1a61446..f7b55bf 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,21 +1,21 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
 </script>
 <template>
   <div v-if="event">
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index 729d876..bb09a45 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Register for the event here</p>

From 62aad970bf82f1741135d9d93339e96052c02cca Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 10:42:20 +0100
Subject: [PATCH 09/16] add redirect and alias end

---
 src/App.vue                  | 40 ++++++++---------
 src/components/EventCard.vue | 47 ++++++++++----------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 86 ++++++++++++++++++------------------
 src/views/event/Details.vue  |  5 ++-
 src/views/event/Edit.vue     |  5 ++-
 src/views/event/Layout.vue   | 28 ++++++------
 src/views/event/Register.vue |  5 ++-
 8 files changed, 116 insertions(+), 112 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..75ceb4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,28 +9,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..f5e0493 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -14,28 +15,28 @@
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
-      <h4>{{ event.title }}</h4>
     </div>
   </router-link>
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index c26776b..c59de6a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 
 const routes = [
   {
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 47075f7..a6c2f5b 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,33 +1,33 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   });
+});
 </script>
 
 <template>
@@ -56,26 +56,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..c7eec89 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 6188df8..2d0d07b 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,21 +1,21 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
 </script>
 
 <template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index 729d876..bb09a45 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Register for the event here</p>

From 84374771fe0f9f2ac32c6265d08a2cd01689f0df Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 10:48:51 +0100
Subject: [PATCH 10/16] add programmatic navigation end

---
 src/App.vue                  | 40 ++++++++---------
 src/components/EventCard.vue | 45 ++++++++++---------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 86 ++++++++++++++++++------------------
 src/views/event/Details.vue  |  5 ++-
 src/views/event/Edit.vue     |  5 ++-
 src/views/event/Layout.vue   | 28 ++++++------
 src/views/event/Register.vue | 22 ++++-----
 8 files changed, 123 insertions(+), 120 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..75ceb4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,28 +9,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..3627fe7 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -21,21 +22,21 @@
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index c26776b..c59de6a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 
 const routes = [
   {
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 47075f7..a6c2f5b 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,33 +1,33 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   });
+});
 </script>
 
 <template>
@@ -56,26 +56,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..ca77bbc 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+  
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 6188df8..2d0d07b 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,21 +1,21 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
 </script>
 
 <template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index b69b4ab..c13915f 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,17 +1,17 @@
 <script setup>
-  import { useRouter } from "vue-router";
-  import { defineProps } from "vue";
+import { useRouter } from "vue-router";
+import { defineProps } from "vue";
 
-  defineProps(["event"]);
-  const router = useRouter();
+defineProps(["event"]);
+const router = useRouter();
 
-  const register = () => {
-    // Call to API
-    // If registered then redirect to event details
-    router.push({
-      name: "EventDetails",
-    });
-  };
+const register = () => {
+  // Call to API
+  // If registered then redirect to event details
+  router.push({
+    name: "EventDetails",
+  });
+};
 </script>
 <template>
   <p>Register for the event here</p>

From 712a97e593062c98b0ba1fc05b89c5fcff949b70 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 10:57:51 +0100
Subject: [PATCH 11/16] add programmatic navigation end

---
 src/App.vue                  | 40 ++++++++---------
 src/components/EventCard.vue | 47 ++++++++++----------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 86 ++++++++++++++++++------------------
 src/views/event/Details.vue  |  5 ++-
 src/views/event/Edit.vue     |  5 ++-
 src/views/event/Layout.vue   | 28 ++++++------
 src/views/event/Register.vue | 22 ++++-----
 8 files changed, 124 insertions(+), 121 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..75ceb4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,28 +9,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..f5e0493 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -14,28 +15,28 @@
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
-      <h4>{{ event.title }}</h4>
     </div>
   </router-link>
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index c26776b..c59de6a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 
 const routes = [
   {
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index 47075f7..a6c2f5b 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,33 +1,33 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   });
+});
 </script>
 
 <template>
@@ -56,26 +56,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..ca77bbc 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+  
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index 6188df8..2d0d07b 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,21 +1,21 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
 </script>
 
 <template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index b69b4ab..c13915f 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,17 +1,17 @@
 <script setup>
-  import { useRouter } from "vue-router";
-  import { defineProps } from "vue";
+import { useRouter } from "vue-router";
+import { defineProps } from "vue";
 
-  defineProps(["event"]);
-  const router = useRouter();
+defineProps(["event"]);
+const router = useRouter();
 
-  const register = () => {
-    // Call to API
-    // If registered then redirect to event details
-    router.push({
-      name: "EventDetails",
-    });
-  };
+const register = () => {
+  // Call to API
+  // If registered then redirect to event details
+  router.push({
+    name: "EventDetails",
+  });
+};
 </script>
 <template>
   <p>Register for the event here</p>

From b9526552aef1b78f8f8b58f2b8d72960e0aedadd Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 11:16:49 +0100
Subject: [PATCH 12/16] add error handling and 404s end

---
 src/App.vue                  | 40 ++++++++--------
 src/components/EventCard.vue | 47 ++++++++++---------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 90 ++++++++++++++++++------------------
 src/views/NotFound.vue       | 17 +++----
 src/views/event/Details.vue  |  5 +-
 src/views/event/Edit.vue     |  5 +-
 src/views/event/Layout.vue   | 46 +++++++++---------
 src/views/event/Register.vue | 22 ++++-----
 9 files changed, 144 insertions(+), 140 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4ee28e..75ceb4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,28 +9,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..f5e0493 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -14,28 +15,28 @@
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
-      <h4>{{ event.title }}</h4>
     </div>
   </router-link>
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index c4c5d08..18ed29a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 import NotFound from "@/views/NotFound.vue";
 import NetworkError from "@/views/NetworkError.vue";
 
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index e278f1e..0920c2f 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,36 +1,36 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
-  import { useRouter } from "vue-router";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const router = useRouter();
+const router = useRouter();
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch(() => {
-          router.push({ name: "NetworkError" });
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch(() => {
+        router.push({ name: "NetworkError" });
+      });
   });
+});
 </script>
 
 <template>
@@ -59,26 +59,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index e3e2a04..ec1edb6 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,12 +1,13 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    resource: {
-      type: String,
-      required: true,
-      default: "page",
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  resource: {
+    type: String,
+    required: true,
+    default: "page",
+  },
+});
 </script>
 <template>
   <h1>Oops!</h1>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..c7eec89 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index e3c25bd..f6d9d7e 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,31 +1,31 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
-  import { useRouter } from "vue-router";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const router = useRouter();
+const router = useRouter();
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        if (error.response && error.response.status == 404) {
-          router.push({
-            name: "404Resource",
-            params: { resource: "event" },
-          });
-        } else {
-          router.push({ name: "NetworkError" });
-        }
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      if (error.response && error.response.status == 404) {
+        router.push({
+          name: "404Resource",
+          params: { resource: "event" },
+        });
+      } else {
+        router.push({ name: "NetworkError" });
+      }
+    });
+});
 </script>
 
 <template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index b69b4ab..c13915f 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,17 +1,17 @@
 <script setup>
-  import { useRouter } from "vue-router";
-  import { defineProps } from "vue";
+import { useRouter } from "vue-router";
+import { defineProps } from "vue";
 
-  defineProps(["event"]);
-  const router = useRouter();
+defineProps(["event"]);
+const router = useRouter();
 
-  const register = () => {
-    // Call to API
-    // If registered then redirect to event details
-    router.push({
-      name: "EventDetails",
-    });
-  };
+const register = () => {
+  // Call to API
+  // If registered then redirect to event details
+  router.push({
+    name: "EventDetails",
+  });
+};
 </script>
 <template>
   <p>Register for the event here</p>

From e941dc90952a7285d53c2483c0479b236f837197 Mon Sep 17 00:00:00 2001
From: timibadass <omoyenitimi@gmail.com>
Date: Thu, 18 May 2023 14:03:16 +0100
Subject: [PATCH 13/16] add flash message end

---
 src/App.vue                  | 76 +++++++++++++++---------------
 src/components/EventCard.vue | 47 ++++++++++---------
 src/router/index.js          | 12 ++---
 src/views/EventList.vue      | 90 ++++++++++++++++++------------------
 src/views/NotFound.vue       | 17 +++----
 src/views/event/Details.vue  |  5 +-
 src/views/event/Edit.vue     |  5 +-
 src/views/event/Layout.vue   | 46 +++++++++---------
 src/views/event/Register.vue | 36 +++++++--------
 9 files changed, 169 insertions(+), 165 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 418cf46..452e643 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
-  import { inject } from "vue";
+import { inject } from "vue";
 
-  const GStore = inject("GStore");
+const GStore = inject("GStore");
 </script>
 <template>
   <div id="app">
@@ -17,42 +17,42 @@
 </template>
 
 <style>
-  @keyframes yellowfade {
-    from {
-      background: yellow;
-    }
-    to {
-      background: transparent;
-    }
+@keyframes yellowfade {
+  from {
+    background: yellow;
   }
-
-  #flashMessage {
-    animation-name: yellowfade;
-    animation-duration: 3s;
-  }
-
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
-
-  #nav {
-    padding: 30px;
-  }
-
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
-
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
-
-  h4 {
-    font-size: 20px;
+  to {
+    background: transparent;
   }
+}
+
+#flashMessage {
+  animation-name: yellowfade;
+  animation-duration: 3s;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index f0a5c00..f5e0493 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,11 +1,12 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    event: {
-      type: Object,
-      required: true,
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
 
 <template>
@@ -14,28 +15,28 @@
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
-      <h4>{{ event.title }}</h4>
     </div>
   </router-link>
 </template>
 
 <style scoped>
-  .event-card {
-    padding: 20px;
-    width: 250px;
-    cursor: pointer;
-    border: 1px solid #39495c;
-    margin-bottom: 18px;
-  }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
-  .event-card:hover {
-    transform: scale(1.01);
-    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
-  }
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .event-link {
-    color: #2c3e50;
-    text-decoration: none;
-  }
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index c4c5d08..18ed29a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
-import EventList from "../views/EventList.vue";
-import EventLayout from "../views/event/Layout.vue";
-import EventDetails from "../views/event/Details.vue";
-import EventRegister from "../views/event/Register.vue";
-import EventEdit from "../views/event/Edit.vue";
-import About from "../views/About.vue";
+import EventList from "@/views/EventList.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import About from "@/views/About.vue";
 import NotFound from "@/views/NotFound.vue";
 import NetworkError from "@/views/NetworkError.vue";
 
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index e278f1e..0920c2f 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,36 +1,36 @@
 <script setup>
-  import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
-  import { useRouter } from "vue-router";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const props = defineProps(["page"]);
+const props = defineProps(["page"]);
 
-  const router = useRouter();
+const router = useRouter();
 
-  const events = ref(null);
-  const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
 
-  const page = computed(() => props.page);
+const page = computed(() => props.page);
 
-  const hasNextPage = computed(() => {
-    const totalPages = Math.ceil(totalEvents.value / 2);
-    return page.value < totalPages;
-  });
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
 
-  onMounted(() => {
-    watchEffect(() => {
-      events.value = null;
-      EventService.getEvents(2, page.value)
-        .then((response) => {
-          events.value = response.data;
-          totalEvents.value = response.headers["x-total-count"];
-        })
-        .catch(() => {
-          router.push({ name: "NetworkError" });
-        });
-    });
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
+      .then((response) => {
+        events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
+      })
+      .catch(() => {
+        router.push({ name: "NetworkError" });
+      });
   });
+});
 </script>
 
 <template>
@@ -59,26 +59,26 @@
 </template>
 
 <style scoped>
-  .events {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .pagination {
-    display: flex;
-    width: 290px;
-  }
-  .pagination a {
-    flex: 1;
-    text-decoration: none;
-    color: #2c3e50;
-  }
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
 
-  #page-prev {
-    text-align: left;
-  }
+#page-prev {
+  text-align: left;
+}
 
-  #page-next {
-    text-align: right;
-  }
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index e3e2a04..ec1edb6 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,12 +1,13 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps({
-    resource: {
-      type: String,
-      required: true,
-      default: "page",
-    },
-  });
+import { defineProps } from "vue";
+
+defineProps({
+  resource: {
+    type: String,
+    required: true,
+    default: "page",
+  },
+});
 </script>
 <template>
   <h1>Oops!</h1>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 8bd4195..35b4476 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 
 <template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
index e30790d..c7eec89 100644
--- a/src/views/event/Edit.vue
+++ b/src/views/event/Edit.vue
@@ -1,6 +1,7 @@
 <script setup>
-  import { defineProps } from "vue";
-  defineProps(["event"]);
+import { defineProps } from "vue";
+
+defineProps(["event"]);
 </script>
 <template>
   <p>Edit the event here</p>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
index e3c25bd..f6d9d7e 100644
--- a/src/views/event/Layout.vue
+++ b/src/views/event/Layout.vue
@@ -1,31 +1,31 @@
 <script setup>
-  import { onMounted, ref, defineProps, computed } from "vue";
-  import EventService from "@/services/EventService.js";
-  import { useRouter } from "vue-router";
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const props = defineProps(["id"]);
+const props = defineProps(["id"]);
 
-  const router = useRouter();
+const router = useRouter();
 
-  const id = computed(() => props.id);
+const id = computed(() => props.id);
 
-  const event = ref(null);
-  onMounted(() => {
-    EventService.getEvent(id.value)
-      .then((response) => {
-        event.value = response.data;
-      })
-      .catch((error) => {
-        if (error.response && error.response.status == 404) {
-          router.push({
-            name: "404Resource",
-            params: { resource: "event" },
-          });
-        } else {
-          router.push({ name: "NetworkError" });
-        }
-      });
-  });
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      if (error.response && error.response.status == 404) {
+        router.push({
+          name: "404Resource",
+          params: { resource: "event" },
+        });
+      } else {
+        router.push({ name: "NetworkError" });
+      }
+    });
+});
 </script>
 
 <template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index 8c1dc3a..2a9e02b 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,24 +1,24 @@
 <script setup>
-  import { defineProps } from "vue";
-  import { useRouter } from "vue-router";
-  import { inject } from "vue";
+import { defineProps } from "vue";
+import { useRouter } from "vue-router";
+import { inject } from "vue";
 
-  const props = defineProps(["event"]);
-  const router = useRouter();
-  const GStore = inject("GStore");
+const props = defineProps(["event"]);
+const router = useRouter();
+const GStore = inject("GStore");
 
-  const register = () => {
-    // Call to API
-    // If registered then redirect to event details
-    GStore.flashMessage =
-      "You are successfully registered for " + props.event.title;
-    setTimeout(() => {
-      GStore.flashMessage = "";
-    }, 3000);
-    router.push({
-      name: "EventDetails",
-    });
-  };
+const register = () => {
+  // Call to API
+  // If registered then redirect to event details
+  GStore.flashMessage =
+    "You are successfully registered for " + props.event.title;
+  setTimeout(() => {
+    GStore.flashMessage = "";
+  }, 3000);
+  router.push({
+    name: "EventDetails",
+  });
+};
 </script>
 <template>
   <p>Register for the event here</p>

From 6723f731a8634ee0efa93f710b5ce16d4ffcfd28 Mon Sep 17 00:00:00 2001
From: 4YourCompany <77233863+4YourCompany@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:00:11 +0100
Subject: [PATCH 14/16] zmiana1

---
 src/views/EventList.vue     | 2 ++
 src/views/event/Details.vue | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index d17f6c3..4d228f7 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -30,6 +30,7 @@ onMounted(() => {
 });
 </script>
 <template>
+  <div>
   <h1>Events for Good</h1>
   <div class="events">
     <EventCard v-for="event in events" :key="event.id" :event="event" />
@@ -51,6 +52,7 @@ onMounted(() => {
         >Next &#62;</router-link
       >
     </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
index 35b4476..fa12e88 100644
--- a/src/views/event/Details.vue
+++ b/src/views/event/Details.vue
@@ -5,6 +5,8 @@ defineProps(["event"]);
 </script>
 
 <template>
+   <div>
   <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
-  <p>{{ event.description }}</p>
+   <p>{{ event.description }}</p>
+</div>
 </template>

From 812241e325eb32a8c8121c32dd81b08cccaece4a Mon Sep 17 00:00:00 2001
From: 4YourCompany <77233863+4YourCompany@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:09:42 +0100
Subject: [PATCH 15/16] zmiana4

---
 src/views/event/Register.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index bb09a45..e6398c4 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -1,8 +1,14 @@
 <script setup>
 import { defineProps } from "vue";
+const register = () => {
+  console.log("registering for event");
+};
 
 defineProps(["event"]);
 </script>
 <template>
+  <div>
   <p>Register for the event here</p>
+  <button @click="register">register me!</button>
+</div>
 </template>

From 4c9f3088ff9ae11f27f6a44b1ca1672b18cc42d5 Mon Sep 17 00:00:00 2001
From: 4YourCompany <77233863+4YourCompany@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:22:21 +0100
Subject: [PATCH 16/16] zmiana6

---
 src/views/event/Register.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
index 8b49f81..4cb55d3 100644
--- a/src/views/event/Register.vue
+++ b/src/views/event/Register.vue
@@ -17,4 +17,5 @@ const register = () => {
   <div>
   <p>Register for the event here</p>
   <button @click="register">Register Me</button>
+  </div>
 </template>