Merge pull request #355 from mytlogos/vue-setup

Vue-setup
mytlogos · Aug 13, 2022 · ed9b85b · ed9b85b
2 parents dc68f01 + 1b58366
commit ed9b85b
Show file tree

Hide file tree

Showing 50 changed files with 3,970 additions and 4,881 deletions.
diff --git a/packages/website/src/App.vue b/packages/website/src/App.vue
@@ -9,97 +9,64 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import appHeader from "./components/app-header.vue";
-import { emitBusEvent, onBusEvent } from "./bus";
 import { HttpClient } from "./Httpclient";
-import { defineComponent } from "vue";
-import { optimizedResize } from "./init";
+import { computed, watchEffect } from "vue";
 import { useSettingsStore } from "./store/settings";
-import { mapStores } from "pinia";
 import { useUserStore } from "./store/store";
 
-export default defineComponent({
-  components: {
-    appHeader,
-  },
-  computed: {
-    ...mapStores(useUserStore),
-    loggedIn(): boolean {
-      return this.userStore.loggedIn;
-    },
-  },
-  watch: {
-    loggedIn(newValue) {
-      console.log("loggedin changed: ", newValue);
+// STORES
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 
-      if (!newValue) {
-        this.loginState();
-      }
-    },
-  },
-  mounted() {
-    const store = useSettingsStore();
-    store.$subscribe(
-      () => {
-        if (store.notifications.newReleases.enabled) {
-          store.activateNewReleases();
-        } else {
-          store.deactivateNewReleases();
-        }
-      },
-      { immediate: true },
-    );
-    onBusEvent("refresh:externalUser", (data: string) => this.refreshExternalUser(data));
+// COMPUTED
+const loggedIn = computed(() => userStore.loggedIn);
 
-    onBusEvent("reset:modal", () => this.closeModal());
+// WATCHES
+watchEffect(() => {
+  console.log("loggedin changed: ", loggedIn.value);
 
-    optimizedResize.add(() => emitBusEvent("window:resize"));
-  },
+  if (!loggedIn.value) {
+    loginState();
+  }
+});
 
-  async created() {
-    if (this.loggedIn) {
-      await this.userStore.load();
+// GENERIC SETUP
+settingsStore.$subscribe(
+  () => {
+    if (settingsStore.notifications.newReleases.enabled) {
+      settingsStore.activateNewReleases();
     } else {
-      await this.loginState();
+      settingsStore.deactivateNewReleases();
     }
   },
+  { immediate: true },
+);
 
-  methods: {
-    closeModal() {
-      // TODO: modal thingis
-      // this.$store.commit("resetModal", "login");
-      // this.$store.commit("resetModal", "register");
-      // this.$store.commit("resetModal", "addList");
-      // this.$store.commit("resetModal", "addMedium");
-      // this.$store.commit("resetModal", "error");
-      // this.$store.commit("resetModal", "settings");
-    },
+if (userStore.loggedIn) {
+  userStore.load();
+} else {
+  loginState();
+}
 
-    async loginState() {
-      if (this.loggedIn) {
-        return;
-      }
-      try {
-        const newUser = await HttpClient.isLoggedIn();
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        console.log(`Logged In: ${this.loggedIn} New User: `, newUser);
+// FUNCTIONS
+async function loginState() {
+  if (loggedIn.value) {
+    return;
+  }
+  try {
+    const newUser = await HttpClient.isLoggedIn();
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    console.log(`Logged In: ${loggedIn.value} New User: `, newUser);
 
-        if (!this.loggedIn && newUser) {
-          await this.userStore.changeUser(newUser, "login");
-        } else {
-          throw Error();
-        }
-      } catch (error) {
-        setTimeout(() => this.loginState(), 5000);
-      }
-    },
-
-    refreshExternalUser(uuid: string) {
-      if (!uuid) {
-        console.error("cannot refresh externalUser without data");
-      }
-    },
-  },
-});
+    if (!loggedIn.value && newUser) {
+      await userStore.changeUser(newUser, "login");
+    } else {
+      throw Error();
+    }
+  } catch (error) {
+    setTimeout(() => loginState(), 5000);
+  }
+}
 </script>