feat: add cars page

rsbuild.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
       'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
       'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
       'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID),
+      'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
     },
   },
 });

src/pages/CarsPage.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h2>Cars</h2>
+    <Loader v-if="showLoader"/>
+    <div class="flex flex-column gap-3" v-else>
+      <Card v-for="(car, i) in cars" :key="i">
+        <template #title> {{car.name}} </template>
+        <template #subtitle> {{car.type}} </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import Loader from '@/components/Loader.vue';
+  import Card from 'primevue/card'
+  import { useCarsStore } from '@/store/cars.js';
+
+  const carsStore = useCarsStore();
+
+  const cars = computed(() => carsStore.cars);
+  const showLoader = computed(() => carsStore.showLoader);
+</script>
+

src/pages/SignIn.vue

@@ -3,14 +3,17 @@
   import { ref } from 'vue';
   import { useAuthStore } from '@/store/auth';
   import Loader from '@/components/Loader.vue';
+  import { useRouter } from 'vue-router';
 
-  const authStore = useAuthStore()
+  const authStore = useAuthStore();
+  const router = useRouter();
 
   const email = ref('')
   const password = ref('')
 
   const signin = async () => {
     await authStore.auth('signIn',{ email: email.value, password: password.value })
+    await router.push('/cars');
   }
 
 </script>

src/pages/SignUp.vue

@@ -3,14 +3,17 @@
   import { ref } from 'vue';
   import { useAuthStore } from '@/store/auth';
   import Loader from '@/components/Loader.vue';
+  import { useRouter } from 'vue-router';
 
   const authStore = useAuthStore()
+  const router = useRouter();
 
   const email = ref('')
   const password = ref('')
 
   const signup = async () => {
     await authStore.auth('signUp', { email: email.value, password: password.value })
+    await router.push('/cars');
   }
 
 </script>

src/router/index.ts

@@ -13,6 +13,11 @@ const router = createRouter({
       path: '/sign-in',
       name: 'SignIn',
       component: () => import('../pages/SignIn.vue')
+    },
+    {
+      path: '/cars',
+      name: 'Cars',
+      component: () => import('../pages/CarsPage.vue')
     }
   ]
 })

src/store/auth.ts

@@ -52,40 +52,41 @@ export const useAuthStore = defineStore('auth', () => {
         token: data.idToken,
       }
     } catch (e) {
-      if (!(e instanceof AxiosError)){
-        error.value = 'Something went wrong';
-        return;
-      }
-
+      if (e instanceof AxiosError){
         switch (e?.response?.data?.error?.message) {
           case 'EMAIL_EXISTS':
             error.value = 'Email already exists';
-          return;
+             break;
           case 'OPERATION_NOT_ALLOWED':
             error.value = 'Operation not allowed';
-          return;
+             break;
           case 'TOO_MANY_ATTEMPTS_TRY_LATER':
             error.value = 'Too many attempts';
-          return;
+             break;
           case 'EMAIL_NOT_FOUND':
             error.value = 'Email not found';
-          return;
+             break;
           case 'INVALID_LOGIN_CREDENTIALS':
             error.value = 'Invalid credentials';
-          return;
+             break;
           case 'INVALID_PASSWORD':
             error.value = 'Invalid password';
-          return;
+             break;
           case 'WEAK_PASSWORD':
             error.value = 'Password is weak';
-          return;
+             break;
           case 'USER_DISABLED':
             error.value = 'User disabled';
-          return;
+             break;
           default:
             error.value = 'Something went wrong';
-          return;
+             break;
         }
+      } else {
+        error.value = 'Something went wrong';
+      }
+
+      throw new Error(error.value);
     } finally {
       loading.value = false;
     }

src/store/cars.ts

@@ -0,0 +1,25 @@
+import api from '@/utils/api.ts';
+import { defineStore } from 'pinia';
+import { onMounted, ref } from 'vue';
+
+export const useCarsStore = defineStore('cars', () => {
+  const cars = ref([]);
+  const showLoader = ref(false);
+
+  onMounted(async () => {
+    try {
+      showLoader.value = true;
+      const response = await api.get(`/cars.json`);
+      cars.value = Object.values(response.data)
+    } catch (e) {
+      console.log(e);
+    } finally {
+      showLoader.value = false;
+    }
+  });
+
+  return {
+    cars,
+    showLoader,
+  }
+})

src/utils/api.ts

@@ -0,0 +1,25 @@
+import router from '@/router';
+import { useAuthStore } from '@/store/auth.ts';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.FIREBASE_DATABASE_URL,
+});
+
+api.interceptors.request.use((config) => {
+  const authStore = useAuthStore();
+  let params = new URLSearchParams();
+  params.append('auth', authStore.userInfo.token);
+  config.params = params;
+
+  return config
+})
+
+api.interceptors.response.use(null, (response) => {
+  if (response.status === 401) {
+    router.push('/sign-in')
+  }
+  return response;
+})
+
+export default api;