From 3eb736a8c214a833d9e34c3a999086f82398ac6f Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Mon, 22 Apr 2024 23:03:15 +0200
Subject: [PATCH 1/2] Optimize Contributor Loading and Enhance Fast State
 Management

---
 .../credit-page/section/ContributorsList.vue  | 132 ++++++++----------
 .../UI/setting-page/SettingScreen.vue         |  40 +++++-
 launcher/src/store/nodeHeader.js              |   2 +
 3 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/launcher/src/components/UI/credit-page/section/ContributorsList.vue b/launcher/src/components/UI/credit-page/section/ContributorsList.vue
index 20307a64f..7efa9786b 100755
--- a/launcher/src/components/UI/credit-page/section/ContributorsList.vue
+++ b/launcher/src/components/UI/credit-page/section/ContributorsList.vue
@@ -2,9 +2,7 @@
   <div class="contributors-parent w-full h-full">
     <div v-if="loader" class="loader">
       <div class="spinner-square">
-        <div class="square-1 square"></div>
-        <div class="square-2 square"></div>
-        <div class="square-3 square"></div>
+        <div v-for="n in 3" :key="n" :class="['square', `square-${n}`]"></div>
       </div>
     </div>
     <div v-else class="contributors-list" name="contributors-list">
@@ -23,92 +21,86 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import TheContributor from "../components/TheContributor.vue";
 import { useNodeHeader } from "@/store/nodeHeader";
-import ControlService from "@/store/ControlService";
 
 const headerStore = useNodeHeader();
-
 const results = ref([]);
 const isLoading = ref(true);
+const DELAY_FOR_CHECKING_DATA = 1000;
+
+// Computed Properties
+const loader = computed(() => isLoading.value);
+
+// Watchers
+watch(
+  () => headerStore.stereumTesters,
+  (newTesters) => updateResults(newTesters, "feedback, testing & suggestions"),
+  { immediate: true }
+);
 
-const loader = computed(() => results.value.length === 0);
+watch(
+  () => headerStore.stereumTranslators,
+  (newTranslators) => updateResults(newTranslators, "translation"),
+  { immediate: true }
+);
 
-onMounted(() => {
+// Lifecycle Hooks
+onMounted(handleCreditType);
+
+onUnmounted(clearComponentState);
+
+// Methods
+function handleCreditType() {
+  isLoading.value = true;
   if (headerStore.choosedCreditType === "technical contribution") {
     fetchGithubContributors();
-  } else if (headerStore.choosedCreditType === "feedback, testing & suggestions") {
-    fetchStereumTesters();
-  } else if (headerStore.choosedCreditType === "translation") {
-    fetchStereumTranslators();
+  } else {
+    setTimeout(() => {
+      isLoading.value = results.value.length === 0;
+    }, DELAY_FOR_CHECKING_DATA);
   }
-});
-
-onUnmounted(() => {
-  results.value = [];
-  isLoading.value = true;
-});
+}
 
-const fetchStereumTranslators = async () => {
-  try {
-    const translators = await ControlService.fetchTranslators();
-    if (translators && Array.isArray(translators)) {
-      results.value = translators.sort((a, b) => a.name.localeCompare(b.name));
-      isLoading.value = results.value.length === 0;
-    } else {
-      console.error("fetchTranslators did not return an array");
-    }
-  } catch (error) {
-    console.error("Error fetching translators:", error);
-    isLoading.value = true;
+function updateResults(newData, creditType) {
+  if (headerStore.choosedCreditType === creditType) {
+    results.value = newData;
+    isLoading.value = false;
   }
-};
+}
 
-const fetchStereumTesters = async () => {
+async function fetchGithubContributors() {
   try {
-    const testers = await ControlService.fetchGitHubTesters();
-    if (testers && Array.isArray(testers)) {
-      results.value = testers;
-      console.log("testers fetched:", JSON.stringify(results.value));
-      isLoading.value = results.value.length === 0;
-    } else {
-      console.error("fetchTesters did not return an array");
-    }
+    const response = await fetch("https://api.github.com/repos/stereum-dev/ethereum-node/contributors");
+    if (!response.ok) throw new Error("Network response was not ok");
+    const contributors = await response.json();
+    results.value = contributors.map((contributor, index) => ({
+      id: index,
+      name: contributor.login,
+      avatar: contributor.avatar_url,
+      score: contributor.contributions,
+    }));
   } catch (error) {
-    console.error("Error fetching Testers:", error);
-    isLoading.value = true;
+    console.error("Error fetching data:", error);
+  } finally {
+    isLoading.value = false;
   }
-};
+}
 
-const fetchGithubContributors = () => {
+function getClass(index) {
+  if (headerStore.choosedCreditType === "translation") return {};
+  return {
+    "gold-border": index === 0,
+    "silver-border": index === 1,
+    "bronze-border": index === 2,
+  };
+}
+
+function clearComponentState() {
+  results.value = [];
   isLoading.value = true;
-  fetch("https://api.github.com/repos/stereum-dev/ethereum-node/contributors")
-    .then((response) => {
-      if (!response.ok) throw new Error("Network response was not ok");
-      return response.json();
-    })
-    .then((data) => {
-      results.value = data.map((contributor, index) => ({
-        id: index,
-        name: contributor.login,
-        avatar: contributor.avatar_url,
-        score: contributor.contributions,
-      }));
-    })
-    .catch((error) => console.error("Error fetching data:", error))
-    .finally(() => (isLoading.value = false));
-};
-
-const getClass = (index) => {
-  const baseClasses = {};
-  if (headerStore.choosedCreditType !== "translation") {
-    if (index === 0) baseClasses["gold-border"] = true;
-    else if (index === 1) baseClasses["silver-border"] = true;
-    else if (index === 2) baseClasses["bronze-border"] = true;
-  }
-  return baseClasses;
-};
+}
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/setting-page/SettingScreen.vue b/launcher/src/components/UI/setting-page/SettingScreen.vue
index 6aadffcd7..1bffa3003 100644
--- a/launcher/src/components/UI/setting-page/SettingScreen.vue
+++ b/launcher/src/components/UI/setting-page/SettingScreen.vue
@@ -34,11 +34,14 @@ import VolumeSlider from "./components/VolumeSlider";
 import OutputOptions from "./components/OutputOptions.vue";
 import LanguageBtn from "./components/LanguageBtn.vue";
 import CreditButtons from "./section/CreditButtons.vue";
-import { ref, computed } from "vue";
-// import LanguagePanel from "./section/LanguagePanel.vue";
+import { ref, computed, onMounted } from "vue";
 import CreditBtn from "./components/CreditBtn.vue";
 import { useRouter } from "vue-router";
 import { useLangStore } from "@/store/languages";
+import { useNodeHeader } from "@/store/nodeHeader";
+import ControlService from "@/store/ControlService";
+
+const headerStore = useNodeHeader();
 
 const mainBox = ref("general");
 // const langActive = ref(false);
@@ -56,6 +59,39 @@ const toggleSettings = (name) => {
   mainBox.value = name;
 };
 
+onMounted(() => {
+  if (!headerStore.stereumTesters.length || !headerStore.stereumTranslators.length) {
+    fetchStereumTesters();
+    fetchStereumTranslators();
+  }
+});
+
+const fetchStereumTesters = async () => {
+  try {
+    const testers = await ControlService.fetchGitHubTesters();
+    if (testers && Array.isArray(testers)) {
+      headerStore.stereumTesters = testers;
+    } else {
+      console.error("fetchTesters did not return an array");
+    }
+  } catch (error) {
+    console.error("Error fetching Testers:", error);
+  }
+};
+
+const fetchStereumTranslators = async () => {
+  try {
+    const translators = await ControlService.fetchTranslators();
+    if (translators && Array.isArray(translators)) {
+      headerStore.stereumTranslators = translators.sort((a, b) => a.name.localeCompare(b.name));
+    } else {
+      console.error("fetchTranslators did not return an array");
+    }
+  } catch (error) {
+    console.error("Error fetching translators:", error);
+  }
+};
+
 const langActiveBox = () => {
   // langActive.value = !langActive.value;
   router.push("/");
diff --git a/launcher/src/store/nodeHeader.js b/launcher/src/store/nodeHeader.js
index dd11409c9..7f93a9944 100755
--- a/launcher/src/store/nodeHeader.js
+++ b/launcher/src/store/nodeHeader.js
@@ -3,6 +3,8 @@ import { defineStore } from "pinia";
 export const useNodeHeader = defineStore("nodeHeader", {
   state: () => {
     return {
+      stereumTesters: [],
+      stereumTranslators: [],
       //Service Modals begin
       isServiceAvailable: true,
       showGrafanaWindow: false,

From cebfb34fe4e5e499904d3e9b9fd348fc66cf1bf0 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Tue, 23 Apr 2024 08:26:30 +0200
Subject: [PATCH 2/2] UPDATE: clear additional logs and comments

---
 launcher/src/components/UI/setting-page/SettingScreen.vue | 5 +----
 launcher/src/store/nodeHeader.js                          | 3 +++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/launcher/src/components/UI/setting-page/SettingScreen.vue b/launcher/src/components/UI/setting-page/SettingScreen.vue
index 1bffa3003..49c86ddfb 100644
--- a/launcher/src/components/UI/setting-page/SettingScreen.vue
+++ b/launcher/src/components/UI/setting-page/SettingScreen.vue
@@ -41,12 +41,10 @@ import { useLangStore } from "@/store/languages";
 import { useNodeHeader } from "@/store/nodeHeader";
 import ControlService from "@/store/ControlService";
 
-const headerStore = useNodeHeader();
-
 const mainBox = ref("general");
-// const langActive = ref(false);
 const router = useRouter();
 const langStore = useLangStore();
+const headerStore = useNodeHeader();
 
 const sidebarButtons = ref([
   { name: "general", label: "General" },
@@ -93,7 +91,6 @@ const fetchStereumTranslators = async () => {
 };
 
 const langActiveBox = () => {
-  // langActive.value = !langActive.value;
   router.push("/");
   langStore.settingPageIsVisible = true;
 };
diff --git a/launcher/src/store/nodeHeader.js b/launcher/src/store/nodeHeader.js
index 7f93a9944..8e989a85b 100755
--- a/launcher/src/store/nodeHeader.js
+++ b/launcher/src/store/nodeHeader.js
@@ -3,8 +3,11 @@ import { defineStore } from "pinia";
 export const useNodeHeader = defineStore("nodeHeader", {
   state: () => {
     return {
+      //Stereum contributers begin (credit page)
       stereumTesters: [],
       stereumTranslators: [],
+      //Stereum contributers end
+
       //Service Modals begin
       isServiceAvailable: true,
       showGrafanaWindow: false,