fix: build issue

package.json

@@ -18,6 +18,7 @@
     "@primer/octicons": "^19.11.0",
     "dayjs": "^1.11.13",
     "octokit": "^4.0.2",
+    "pinia": "^2.2.4",
     "slugify": "^1.6.6",
     "vue": "^3.4.29",
     "vue-loading-overlay": "^6.0.6",

src/App.vue

@@ -1,18 +1,33 @@
 <script setup>
 import Navbar from "@/components/global/Navbar.vue";
 import { RouterView } from "vue-router";
-import { provide, ref } from "vue";
+import { onMounted, provide, ref } from "vue";
+import useOctokitStore from "@/stores/octokit.js";
+import { initOctokit } from "@/api/index.js";
+import { useLoader } from "@/helpers/index.js";
 
 const navButtonConfig = ref({});
+const isOctokitInitialised = ref(false);
 provide("set-nav-button-config", navButtonConfig);
+
+onMounted(async () => {
+  const loader = useLoader().show();
+  const instance = await initOctokit();
+
+  const octokitStore = useOctokitStore();
+  octokitStore.setOctokit(instance);
+  isOctokitInitialised.value = true;
+  loader.hide();
+});
 </script>
 
 <template>
   <v-app>
-    <vue-progress-bar></vue-progress-bar>
     <Navbar />
     <v-main>
-      <RouterView />
+      <template v-if="isOctokitInitialised">
+        <RouterView />
+      </template>
     </v-main>
   </v-app>
 </template>

src/api/index.js

@@ -8,41 +8,64 @@ import {
   sessionReviewStatus,
 } from "@/api/session";
 import config from "@/../config.js";
+import useOctokitStore from "@/stores/octokit";
 
-const auth = await config.githubAuthToken();
-const username = config.githubOwner;
-const repo = config.githubRepo;
+export async function initOctokit() {
+  try {
+    const auth = await config.githubAuthToken();
+    const username = config.githubOwner;
+    const repo = config.githubRepo;
 
-const githubConfig = { auth, username, repo };
+    const octokit = new Octokit({ auth });
 
-const octokit = new Octokit({ auth: githubConfig.auth });
+    const { data } = await octokit.rest.users.getAuthenticated();
 
-const { data } = await octokit.rest.users.getAuthenticated();
+    return {
+      githubConfig: { auth, username, repo },
+      githubUserData: data,
+      octokit,
+    };
+  } catch (error) {
+    console.error(error);
+  }
+}
 
 export async function getLoginData() {
   return data;
 }
 
 export async function getSessionsList(currPage, cache) {
-  return sessionsList(octokit, githubConfig, currPage, cache, data.login);
+  const { githubConfig, githubUserData, octokit } = useOctokitStore();
+  return sessionsList(
+    octokit,
+    githubConfig,
+    currPage,
+    cache,
+    githubUserData.login,
+  );
 }
 
 export async function deleteBySessionNumber(sessionNumber) {
+  const { githubConfig, octokit } = useOctokitStore();
   return deleteSession(octokit, githubConfig, sessionNumber);
 }
 
 export async function reviewBySessionNumber(sessionNumber, pullRequestId) {
+  const { githubConfig, octokit } = useOctokitStore();
   return reviewSession(octokit, githubConfig, sessionNumber, pullRequestId);
 }
 
 export async function getCheckStatus(sessionNumber) {
+  const { githubConfig, octokit } = useOctokitStore();
   return checkStatus(octokit, githubConfig, sessionNumber);
 }
 
 export async function getSessionReviewStatus(sessionNumber) {
+  const { githubConfig, octokit } = useOctokitStore();
   return sessionReviewStatus(octokit, githubConfig, sessionNumber);
 }
 
 export async function createSessionByName(name) {
+  const { githubConfig, octokit } = useOctokitStore();
   return createSession(octokit, githubConfig, name);
 }

src/main.js

@@ -6,9 +6,12 @@ import App from "./App.vue";
 import router from "@/router";
 import vuetify from "@/plugins/vuetify";
 import { LoadingPlugin } from "vue-loading-overlay";
+import { createPinia } from "pinia";
 
 const app = createApp(App);
+const pinia = createPinia();
 
+app.use(pinia);
 app.use(vuetify);
 app.use(router);
 app.use(LoadingPlugin);

src/stores/octokit.js

@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const useOctokitStore = defineStore("octokit", () => {
+  const githubConfig = ref(null);
+  const githubUserData = ref(null);
+  const octokit = ref(null);
+
+  function setOctokit(instance) {
+    githubConfig.value = instance.githubConfig;
+    githubUserData.value = instance.githubUserData;
+    octokit.value = instance.octokit;
+  }
+
+  return {
+    githubConfig,
+    githubUserData,
+    octokit,
+    setOctokit,
+  };
+});
+
+export default useOctokitStore;