Merge pull request #6 from gastongaiduk/shared-components

Shared components

src/components/GameLeaderboards.vue

@@ -10,8 +10,9 @@ import {useUserStore} from '../stores/user';
 import {useGamesStore} from "../stores/games";
 import {Game} from "../models/RecentlyPlayedGames.ts";
 import {supabase} from "../utils/supabaseClient.ts";
-import Tooltip from "./Tooltip.vue";
-import ConfirmModal from "./ConfirmModal.vue";
+import ConfirmModal from "./_shared/ConfirmModal.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
+import BackButton from "./_shared/BackButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -40,10 +41,6 @@ function hideUnsubscribeModal() {
   isUnsubscribeModalVisible.value = false;
 }
 
-function goBack() {
-  router.back();
-}
-
 function selectLeaderboard(leaderboard: Leaderboard) {
   postStore.selectLeaderboard(leaderboard);
 }
@@ -146,13 +143,8 @@ onMounted(async () => {
 
 <template>
   <div class="leaderboard-container">
-    <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshLeaderboards" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <BackButton></BackButton>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshLeaderboards"></RefreshButton>
     <h1 class="leaderboard-title">{{ selectedGame?.Title }}</h1>
     <div v-if="leaderboards && leaderboards.Results.length" style="text-align: center">
       <button v-if="!subscribedToGame" class="subscribe-button" @click="showSubscribeModal" :disabled="loadingSubscription">
@@ -217,16 +209,6 @@ onMounted(async () => {
   text-align: center;
 }
 
-.back-button, .refresh-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
 .subscribe-button, .unsubscribe-button {
   background-color: #f5a623;
   color: #1a1a2e;
@@ -246,18 +228,14 @@ button:disabled {
   color: #e0e1dd;
 }
 
-.back-button:hover, .refresh-button:hover, .subscribe-button:hover {
+.subscribe-button:hover {
   background-color: #d48821;
 }
 
 .unsubscribe-button:hover {
   background-color: #d9534f;
 }
 
-.refresh-button {
-  float: right;
-}
-
 .leaderboard-list {
   list-style-type: none;
   padding: 0;

src/components/Home.vue

@@ -7,9 +7,9 @@ import {usePostStore} from '../stores/postStore';
 import {useUserStore} from '../stores/user';
 import {useGamesStore} from "../stores/games";
 import {GameList, Game} from "../models/RecentlyPlayedGames.ts";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 import {supabase} from "../utils/supabaseClient.ts";
-import Tooltip from "./Tooltip.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -91,12 +91,7 @@ onMounted(async () => {
 <template>
   <div class="retro-container">
     <BurgerMenu :updates-number="updatesNumber ? updatesNumber : 0"></BurgerMenu>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshGames" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshGames"></RefreshButton>
     <h1 class="retro-title">Welcome {{ user.username }}</h1>
     <div v-if="games.lastPlayedGames">
       <ul v-if="games.lastPlayedGames.length" class="game-list">
@@ -128,24 +123,6 @@ onMounted(async () => {
   font-family: 'Press Start 2P', cursive;
 }
 
-.refresh-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
-.refresh-button:hover {
-  background-color: #d48821;
-}
-
-.refresh-button {
-  float: right;
-}
-
 .retro-title {
   font-size: 24px;
   color: #f5a623;

src/components/LeaderboardEntries.vue

@@ -11,7 +11,8 @@ import {useFriendsState} from "../stores/friends.ts";
 import {Game} from "../models/RecentlyPlayedGames.ts";
 import {Leaderboard} from "../models/GameLeaderboards.ts";
 import {useGamesStore} from "../stores/games.ts";
-import Tooltip from "./Tooltip.vue";
+import RefreshButton from "./_shared/RefreshButton.vue";
+import BackButton from "./_shared/BackButton.vue";
 
 const router = useRouter();
 const postStore = usePostStore();
@@ -21,10 +22,6 @@ const games = useGamesStore();
 
 const repository = new GameRepository();
 
-function goBack() {
-  router.back();
-}
-
 const props = defineProps({
   id: {
     type: String,
@@ -122,13 +119,8 @@ function isFriend(user: string) {
 
 <template>
   <div class="entries-container">
-    <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
-    <Tooltip text="Refresh content" position="left" style="float: right">
-      <button class="refresh-button" @click="refreshScores" :disabled="loadingRefresh">
-        <i v-if="loadingRefresh" class="fa fa-spinner fa-spin"></i>
-        <i v-else class="fa fa-refresh"></i>
-      </button>
-    </Tooltip>
+    <BackButton></BackButton>
+    <RefreshButton :loading-state="loadingRefresh" @click="refreshScores"></RefreshButton>
     <h1 class="entries-title">{{ selectedLeaderboard?.Title }}</h1>
     <h2 class="entries-title">{{ selectedGame?.Title }}</h2>
     <div v-if="entries">
@@ -173,24 +165,6 @@ h2.entries-title {
   text-align: center;
 }
 
-.back-button, .refresh-button {
-  background-color: #f5a623;
-  color: #1a1a2e;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 10px;
-}
-
-.back-button:hover, .refresh-button:hover {
-  background-color: #d48821;
-}
-
-.refresh-button {
-  float: right;
-}
-
 .entries-list {
   list-style-type: none;
   padding: 0;

src/components/LeaderboardsUpdates.vue

@@ -6,7 +6,7 @@ import {supabase} from "../utils/supabaseClient.ts";
 import {usePostStore} from "../stores/postStore.ts";
 import {Leaderboard} from "../models/GameLeaderboards.ts";
 import {Game} from "../models/RecentlyPlayedGames.ts";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 
 const router = useRouter();
 const postStore = usePostStore();

src/components/RACredentials.vue

@@ -4,7 +4,7 @@ import {useRouter} from "vue-router";
 
 import {useUserStore} from '../stores/user'
 import axios from "axios";
-import BurgerMenu from "./BurgerMenu.vue";
+import BurgerMenu from "./_shared/BurgerMenu.vue";
 
 const router = useRouter();
 const user = useUserStore();
@@ -49,6 +49,9 @@ async function handleSubmit() {
 }
 
 onMounted(() => {
+  if (!user.isLoggedIn()) {
+    router.push("/login");
+  }
   if (user.isSet() && user.username && user.key) {
     usernameInput.value = user.username;
     keyInput.value = user.key;

src/components/_shared/BackButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+
+function goBack() {
+  router.back();
+}
+
+</script>
+
+<template>
+  <button class="back-button" @click="goBack"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
+</template>
+
+<style scoped>
+.back-button {
+  background-color: #f5a623;
+  color: #1a1a2e;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.back-button:hover {
+  background-color: #d48821;
+}
+</style>

src/components/BurgerMenu.vue → src/components/_shared/BurgerMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue';
 import {useRoute, useRouter} from "vue-router";
-import {useUserStore} from "../stores/user.ts";
+import {useUserStore} from "../../stores/user.ts";
 import ConfirmModal from "./ConfirmModal.vue";
 
 const router = useRouter();

src/components/_shared/RefreshButton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Tooltip from "./Tooltip.vue";
+import {ref} from "vue";
+
+const emit = defineEmits(['click'])
+
+const props = defineProps({
+  loadingState: {
+    type: Boolean,
+    required: true
+  },
+})
+
+const loading = ref<boolean>(false);
+
+function clickAction() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    emit('click');
+  }, 1000);
+}
+</script>
+
+<template>
+  <Tooltip text="Refresh content" position="left" style="float: right">
+    <button class="refresh-button" @click="clickAction" :disabled="props.loadingState || loading">
+      <i v-if="props.loadingState || loading" class="fa fa-spinner fa-spin"></i>
+      <i v-else class="fa fa-refresh"></i>
+    </button>
+  </Tooltip>
+</template>
+
+<style scoped>
+.refresh-button {
+  background-color: #f5a623;
+  color: #1a1a2e;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.refresh-button:hover {
+  background-color: #d48821;
+}
+
+.refresh-button {
+  float: right;
+}
+</style>