Added base project

frontend/src/stores/api.js

@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import { inject, ref } from 'vue'
+
+export const useAPIStore = defineStore('api', () => {
+  const API_BASE_URL = inject('apiBaseURL')
+
+  const token = ref()
+  const gameQueryParameters = ref({
+    page: 1,
+    filters: {
+      type: '',
+      status: '',
+      sort_by: 'began_at',
+      sort_direction: 'desc',
+    },
+  })
+
+  // AUTH
+  const postLogin = async (credentials) => {
+    const response = await axios.post(`${API_BASE_URL}/login`, credentials)
+    token.value = response.data.token
+    axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
+  }
+  const postLogout = async () => {
+    await axios.post(`${API_BASE_URL}/logout`)
+    token.value = undefined
+    delete axios.defaults.headers.common['Authorization']
+  }
+
+  // Users
+  const getAuthUser = () => {
+    return axios.get(`${API_BASE_URL}/users/me`)
+  }
+
+  //Games
+  const getGames = (resetPagination = false) => {
+    if (resetPagination) {
+      gameQueryParameters.value.page = 1
+    }
+
+    const queryParams = new URLSearchParams({
+      page: gameQueryParameters.value.page,
+      ...(gameQueryParameters.value.filters.type && {
+        type: gameQueryParameters.value.filters.type,
+      }),
+      ...(gameQueryParameters.value.filters.status && {
+        status: gameQueryParameters.value.filters.status,
+      }),
+      sort_by: gameQueryParameters.value.filters.sort_by,
+      sort_direction: gameQueryParameters.value.filters.sort_direction,
+    }).toString()
+    return axios.get(`${API_BASE_URL}/games?${queryParams}`)
+  }
+
+  return {
+    postLogin,
+    postLogout,
+    getAuthUser,
+    getGames,
+    gameQueryParameters,
+  }
+})

frontend/src/stores/auth.js

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useAPIStore } from './api'
+
+export const useAuthStore = defineStore('auth', () => {
+  const apiStore = useAPIStore()
+
+  const currentUser = ref(undefined)
+
+  const isLoggedIn = computed(() => {
+    return currentUser.value !== undefined
+  })
+
+  const currentUserID = computed(() => {
+    return currentUser.value?.id
+  })
+
+  const login = async (credentials) => {
+    await apiStore.postLogin(credentials)
+    const response = await apiStore.getAuthUser()
+    currentUser.value = response.data
+    return response.data
+  }
+
+  const logout = async () => {
+    await apiStore.postLogout()
+    currentUser.value = undefined
+  }
+
+  return {
+    currentUser,
+    isLoggedIn,
+    currentUserID,
+    login,
+    logout,
+  }
+})

frontend/src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

frontend/src/stores/socket.js

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+import { inject } from 'vue'
+
+export const useSocketStore = defineStore('socket', () => {
+  const socket = inject('socket')
+
+  const handleConnection = () => {
+    socket.on('connect', () => {
+      console.log(`[Socket] Connected -- ${socket.id}`)
+    })
+    socket.on('disconnect', () => {
+      console.log(`[Socket] Disconnected -- ${socket.id}`)
+    })
+  }
+
+  return {
+    handleConnection,
+  }
+})