Seamlessly Unifying Testers Page Across App and Website (stereum-dev#…

…1444) * Update vue.config.js to access stereum.net * Refactr the testers in the contributors * Fix the Testers same with the stereum.net
NeoPlays · Sep 8, 2023 · ae54a95 · ae54a95
1 parent fe8d1e5
commit ae54a95
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 112 deletions.
diff --git a/launcher/src/components/UI/credit/TechnicalBox.vue b/launcher/src/components/UI/credit/TechnicalBox.vue
@@ -5,7 +5,7 @@
       <option value="testers">{{ $t("creditPanel.testers") }}</option>
     </select>
     <div v-if="compToggl" class="wrapper">
-      <the-contributor
+      <TheContributor
         v-for="(result, index) in results"
         :key="result.id"
         :class="{
@@ -18,33 +18,48 @@
         :crown="index == 0"
         :rank="index + 1"
         :score="result.score"
-      ></the-contributor>
+      />
     </div>
     <div v-else class="wrapper">
-      <div class="testers-container">
-        <test-contributor
-          v-for="result in filterTesters"
-          :key="result.id"
-          :name="result.name"
-          :avatar="result.avatar"
-        ></test-contributor>
+      <div v-if="flag" 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>
       </div>
+      <TheContributor
+        v-for="(result, index) in testerResults"
+        v-else
+        :key="result.score"
+        :class="{
+          'gold-border': index === 0,
+          'silver-border': index === 1,
+          'bronze-border': index === 2,
+        }"
+        :name="result.username"
+        :avatar="result.avatar"
+        :crown="index == 0"
+        :rank="index + 1"
+        :score="result.score"
+      />
     </div>
   </div>
 </template>
 <script>
 import { mapWritableState } from "pinia";
 import { useFooter } from "@/store/theFooter";
 import TheContributor from "./TheContributor.vue";
-import TestContributor from "./TestContributor.vue";
 export default {
-  components: { TheContributor, TestContributor },
+  components: { TheContributor },
   data() {
     return {
       results: [],
       issuesVal: [],
       techToggl: "developers",
       compToggl: true,
+      isLoading: true,
+      testerResults: [],
     };
   },
 
@@ -55,15 +70,45 @@ export default {
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
     }),
+    flag() {
+      return this.testerResults.length == [] ? true : false;
+    },
   },
+
   updated() {
     this.toggleHandler();
   },
   created() {
     this.github();
-    this.issues();
+  },
+  mounted() {
+    this.stereumTesters();
   },
   methods: {
+    async stereumTesters() {
+      try {
+        const response = await fetch("/api");
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        const responseData = await response.json();
+        const testersData = responseData.data.testers;
+
+        const results = testersData.map((tester) => ({
+          username: tester.username,
+          avatar: tester.avatarUrl,
+          score: tester.testsCount,
+        }));
+
+        this.testerResults = results;
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
     github() {
       fetch("https://api.github.com/repos/stereum-dev/ethereum-node/contributors")
         .then((response) => {
@@ -84,25 +129,6 @@ export default {
           this.results = results;
         });
     },
-    issues() {
-      fetch("https://api.github.com/repos/stereum-dev/ethereum-node/issues")
-        .then((response) => {
-          if (response.ok) {
-            return response.json();
-          }
-        })
-        .then((data) => {
-          const results = [];
-          for (const id in data) {
-            results.push({
-              id: id,
-              name: data[id].user.login,
-              avatar: data[id].user.avatar_url,
-            });
-          }
-          this.issuesVal = results;
-        });
-    },
     toggleHandler() {
       if (this.techToggl === "developers") {
         return (this.compToggl = true);
@@ -163,7 +189,7 @@ export default {
   display: flex;
   width: 100%;
   height: 70vh;
-  gap: 2.2%;
+
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
@@ -198,4 +224,58 @@ export default {
   background: #324b3f;
   border-radius: 10px;
 }
+.loader {
+  width: 100%;
+  height: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
+.spinner-square {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.square {
+  width: 5%;
+  height: 40%;
+  border-radius: 20px;
+  margin-right: 5%;
+}
+
+.square-1 {
+  animation: square-anim 1200ms 0s infinite;
+}
+
+.square-2 {
+  animation: square-anim 1200ms 200ms infinite;
+}
+
+.square-3 {
+  animation: square-anim 1200ms 400ms infinite;
+}
+
+@keyframes square-anim {
+  0% {
+    height: 40%;
+    background-color: #336666;
+  }
+  20% {
+    height: 40%;
+  }
+  40% {
+    height: 80%;
+    background-color: #478e8e;
+  }
+  80% {
+    height: 40%;
+  }
+  100% {
+    height: 40%;
+    background-color: #336666;
+  }
+}
 </style>
diff --git a/launcher/src/components/UI/credit/TestContributor.vue b/launcher/src/components/UI/credit/TestContributor.vue
diff --git a/launcher/src/components/UI/credit/TheContributor.vue b/launcher/src/components/UI/credit/TheContributor.vue
@@ -69,6 +69,7 @@ export default {
   border-radius: 30px;
   flex-direction: column;
   margin-top: 2%;
+  margin-right: 2%;
   margin-bottom: 1%;
   position: relative;
 }

diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -330,24 +330,6 @@ export default {
   align-items: center;
   flex-direction: column;
 }
-/*.proposed-part {
-  margin-bottom: 1%;
-}*/
-/*.finilized-part {
-  border-top: 1px solid #c1c1c1;
-}*/
-
-/*.rows-title {
-  width: 95%;
-  height: 20%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 50%;
-  font-weight: 700;
-  text-transform: uppercase;
-  margin: 0.5% 0;
-}*/
 .Finalized-row,
 .proposed-rows {
   width: 100%;

diff --git a/launcher/vue.config.js b/launcher/vue.config.js
@@ -1,5 +1,16 @@
 const path = require("path");
 module.exports = {
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "https://stereum.net",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/api": "/api/github/testers",
+        },
+      },
+    },
+  },
   parallel: false,
   pluginOptions: {
     electronBuilder: {