From c8000b55cdaa452010a5715dbc2062cf262e46e5 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Sun, 30 Jul 2023 23:22:36 +0200
Subject: [PATCH] - update pages

---
 index.html                |  2 +-
 src/App.vue               | 11 ++++-
 src/components/Body.vue   |  6 +--
 src/components/Header.vue | 18 +++++++-
 src/router.js             | 15 +++++--
 src/style.css             |  1 -
 src/views/Home.vue        | 79 +----------------------------------
 src/views/NotFound.vue    | 14 +++++++
 src/views/Show.vue        | 87 +++++++++++++++++++++++++++++++++++++++
 9 files changed, 144 insertions(+), 89 deletions(-)
 create mode 100644 src/views/NotFound.vue
 create mode 100644 src/views/Show.vue
diff --git a/index.html b/index.html
index e00107b..2d99b06 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <title>Kamil Niemczycki CV</title>
   </head>
-  <body>
+  <body class="min-h-screen">
     <div id="cv"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 019d790..f3be424 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,11 @@
 <script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const isErrorPage = computed(() => route.name === 'NotFound');
+
 function print() {
   window.print();
 }
@@ -17,10 +24,10 @@ function print() {
 </style>
 
 <template>
-  <div class="print-section">
+  <div v-if="!isErrorPage" class="print-section">
     <button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
   </div>
-  <main class="main bg-blob">
+  <main class="main bg-white">
     <router-view />
   </main>
 </template>
diff --git a/src/components/Body.vue b/src/components/Body.vue
index 308a913..4bbaaa6 100644
--- a/src/components/Body.vue
+++ b/src/components/Body.vue
@@ -8,16 +8,16 @@ import Links from './Side/Links.vue';
 
 const props = defineProps({
     token: {
+        type: String,
         default: null,
-        type: [String, null],
     },
     rodo: {
+        type: String,
         default: null,
-        type: [String, null],
     },
     loading: {
-        required: true,
         type: Boolean,
+        default: false,
     },
 });
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 289bd6e..c06cbdd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -6,21 +6,35 @@ import ContactList from './Header/ContactList.vue';
 defineProps({
     loading: {
         tyle: Boolean,
+        default: false,
     },
     email: {
         type: String,
+        default: 'contact@kamilcraft.com',
     },
     tel: {
         type: Object,
+        default: {
+            hasPhoneNumber: false,
+            phoneNumber: '',
+            formattedPhoneNumber: '',
+        },
     },
     locations: {
         type: Array,
+        default: [
+            'Wrocław',
+            'Legnica',
+            'Remote',
+        ],
     },
     position: {
-        type: [String, null],
+        type: String,
+        default: null,
     },
     mission: {
         type: Array,
+        default: [],
     },
 });
 </script>
@@ -50,7 +64,7 @@ defineProps({
 </style>
 
 <template>
-    <div class="flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
+    <div class="bg-blob flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
         <div class="flex-shrink-0 w-32 h-32">
             <img class="w-full h-full" alt="Profilowe" src="/me.webp" />
         </div>
diff --git a/src/router.js b/src/router.js
index 01d618d..403a947 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,17 +1,26 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-const Home = import('./views/Home.vue');
+const Home = () => import('./views/Home.vue');
+const Show = () => import('./views/Show.vue');
+const NotFound = () => import('./views/NotFound.vue');
 
 export default createRouter({
     history: createWebHistory(),
     routes: [
         {
             path: '/',
+            name: 'Home',
             component: Home,
         },
         {
             path: '/show/:token',
-            component: Home,
-        }
+            name: 'Show',
+            component: Show,
+        },
+        {
+            path: '/:pathMatch(.*)*',
+            name: 'NotFound',
+            component: NotFound
+        },
     ],
 });
diff --git a/src/style.css b/src/style.css
index da2cbf6..1c723de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -13,7 +13,6 @@
 
 .bg-blob {
     background-image: var(--theme-bg-blob);
-    background-color: white;
     background-repeat: no-repeat;
     background-size: 170px;
     background-position: -25px -22px;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 718a8d7..afb5e98 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,87 +1,12 @@
 <script setup>
-import { onMounted, ref, reactive } from 'vue';
 import { useRoute } from 'vue-router';
 import Header from '../components/Header.vue';
 import Body from '../components/Body.vue';
-
-const loading = ref(false);
-const token = ref(null);
-const email = ref('contact@kamilcraft.com');
-const tel = reactive({
-    hasPhoneNumber: false,
-    phoneNumber: '',
-    formattedPhoneNumber: '',
-});
-
-const locations = reactive([
-    'Wrocław',
-    'Legnica',
-    'Remote',
-]);
-
-const position = ref(null);
-const mission = reactive([]);
-const rodo = ref(null);
-
-onMounted(() => {
-    const router = useRoute();
-    token.value = router.params['token'] ?? null;
-
-    if (token.value) {
-        loading.value = true;
-        const apiUrl = import.meta.env.VITE_API_URL;
-        fetch(`${apiUrl}/v1/cv/${token.value}`, {
-            method: 'GET',
-            cache: "no-cache",
-            credentials: "same-origin",
-            headers: {
-                "Content-Type": "application/json",
-            }
-        }).then(response => (response.json().then(data => ({ status: response.status, data }))))
-            .then(response => {
-                setTimeout(() => showData(response), 1000);
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    }
-});
-
-function showData(response) {
-    if (response.status === 200) {
-        const data = response.data;
-        email.value = data.email;
-        tel.hasPhoneNumber = true;
-        tel.phoneNumber = data.phone.number;
-        tel.formattedPhoneNumber = data.phone.formattedNumber;
-        while(locations.length > 0) {
-            locations.pop();
-        }
-        if (data.position) {
-            position.value = data.position;
-        }
-        data.locations?.forEach(value => {
-            locations.push(value);
-        });
-        data.mission?.forEach(value => {
-            mission.push(value);
-        });
-        if (data.rodo) {
-            rodo.value = data.rodo;
-        }
-        loading.value = false;
-    }
-}
 </script>
 
 <template>
     <div class="grid grid-rows-[max-content_max-content_auto] h-full">
-        <Header :loading="loading"
-                :email="email"
-                :tel="tel"
-                :locations="locations"
-                :position="position"
-                :mission="mission" />
-        <Body :token="token" :rodo="rodo" :loading="loading" />
+        <Header />
+        <Body />
     </div>
 </template>
\ No newline at end of file
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..ccaf3f7
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import Header from '../components/Header.vue';
+import Body from '../components/Body.vue';
+</script>
+
+<template>
+    <div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4">
+        <header>
+            <h1 class="text-3xl mb-4">Błąd 404</h1>
+        </header>
+        <p>Strona nie została znaleziona.</p>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/views/Show.vue b/src/views/Show.vue
new file mode 100644
index 0000000..718a8d7
--- /dev/null
+++ b/src/views/Show.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import Header from '../components/Header.vue';
+import Body from '../components/Body.vue';
+
+const loading = ref(false);
+const token = ref(null);
+const email = ref('contact@kamilcraft.com');
+const tel = reactive({
+    hasPhoneNumber: false,
+    phoneNumber: '',
+    formattedPhoneNumber: '',
+});
+
+const locations = reactive([
+    'Wrocław',
+    'Legnica',
+    'Remote',
+]);
+
+const position = ref(null);
+const mission = reactive([]);
+const rodo = ref(null);
+
+onMounted(() => {
+    const router = useRoute();
+    token.value = router.params['token'] ?? null;
+
+    if (token.value) {
+        loading.value = true;
+        const apiUrl = import.meta.env.VITE_API_URL;
+        fetch(`${apiUrl}/v1/cv/${token.value}`, {
+            method: 'GET',
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: {
+                "Content-Type": "application/json",
+            }
+        }).then(response => (response.json().then(data => ({ status: response.status, data }))))
+            .then(response => {
+                setTimeout(() => showData(response), 1000);
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    }
+});
+
+function showData(response) {
+    if (response.status === 200) {
+        const data = response.data;
+        email.value = data.email;
+        tel.hasPhoneNumber = true;
+        tel.phoneNumber = data.phone.number;
+        tel.formattedPhoneNumber = data.phone.formattedNumber;
+        while(locations.length > 0) {
+            locations.pop();
+        }
+        if (data.position) {
+            position.value = data.position;
+        }
+        data.locations?.forEach(value => {
+            locations.push(value);
+        });
+        data.mission?.forEach(value => {
+            mission.push(value);
+        });
+        if (data.rodo) {
+            rodo.value = data.rodo;
+        }
+        loading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="grid grid-rows-[max-content_max-content_auto] h-full">
+        <Header :loading="loading"
+                :email="email"
+                :tel="tel"
+                :locations="locations"
+                :position="position"
+                :mission="mission" />
+        <Body :token="token" :rodo="rodo" :loading="loading" />
+    </div>
+</template>
\ No newline at end of file
