fix: loader hydration issues

Author: not-nullptr

apps/frontend/src/components/ui/servers/ServerSidebar.vue

@@ -35,7 +35,7 @@ const props = defineProps<{
   server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
-const onReinstall = () => {
-  emit("reinstall");
+const onReinstall = (...args: any[]) => {
+  emit("reinstall", ...args);
 };
 </script>

apps/frontend/src/composables/pyroServers.ts

@@ -272,7 +272,6 @@ const reinstallServer = async (
   versionId?: string,
   loaderVersionId?: string,
 ) => {
-  // launcher-meta.modrinth.com/{forge,neo,minecraft,quilt,fabric}/v0/manifest.json
   try {
     if (loader) {
       if (projectId.toLowerCase() === "neoforge") {

apps/frontend/src/pages/servers/manage/[id].vue

@@ -232,8 +232,6 @@ const handleWebSocketMessage = (data: WSEvent) => {
         }
       });
 
-      console.log(players.value);
-
       if (isInitialListCommand.value) {
         log = log.filter((line) => {
           if (line.includes("There are") && line.includes("players online")) {
@@ -270,11 +268,20 @@ const handleWebSocketMessage = (data: WSEvent) => {
   }
 };
 
+const newLoader = ref<string | null>(null);
+const newLoaderVersion = ref<string | null>(null);
+const newMCVersion = ref<string | null>(null);
+
 const handleInstallationResult = (data: WSInstallationResultEvent) => {
   switch (data.result) {
     case "ok":
       if (!serverData.value) break;
       serverData.value.status = "available";
+      if (server.general) {
+        if (newLoader.value) server.general.loader = newLoader.value;
+        if (newLoaderVersion.value) server.general.loader_version = newLoaderVersion.value;
+        if (newMCVersion.value) server.general.mc_version = newMCVersion.value;
+      }
       break;
     case "err":
       console.log("failed to install");
@@ -286,10 +293,33 @@ const handleInstallationResult = (data: WSInstallationResultEvent) => {
   }
 };
 
-const onReinstall = () => {
-  console.log("QAHHHHHHHHHHHHHHH");
+const onReinstall = (potentialArgs: any) => {
   if (!serverData.value) return;
   serverData.value.status = "installing";
+  // serverData.value.loader = potentialArgs.loader;
+  // serverData.value.loader_version = potentialArgs.lVersion;
+  // serverData.value.mc_version = potentialArgs.mVersion;
+  // if (potentialArgs?.loader) {
+  //   console.log("setting loader to", potentialArgs.loader);
+  //   serverData.value.loader = potentialArgs.loader;
+  // }
+  // if (potentialArgs?.lVersion) {
+  //   serverData.value.loader_version = potentialArgs.lVersion;
+  // }
+  // if (potentialArgs?.mVersion) {
+  //   serverData.value.mc_version = potentialArgs.mVersion;
+  // }
+  if (potentialArgs?.loader) {
+    newLoader.value = potentialArgs.loader;
+  }
+  if (potentialArgs?.lVersion) {
+    newLoaderVersion.value = potentialArgs.lVersion;
+  }
+  if (potentialArgs?.mVersion) {
+    newMCVersion.value = potentialArgs.mVersion;
+  }
+
+  console.log(serverData.value);
 };
 
 const updateStats = (currentStats: Stats["current"]) => {

apps/frontend/src/pages/servers/manage/[id]/options/loader.vue

@@ -49,7 +49,11 @@
         </Button>
         <Button
           color="primary"
-          :disabled="!selectedMCVersion || !selectedLoaderVersion"
+          :disabled="
+            selectedLoader.toLowerCase() === 'vanilla'
+              ? !selectedMCVersion
+              : !selectedMCVersion || !selectedLoaderVersion
+          "
           @click="reinstallLoader(selectedLoader)"
         >
           Reinstall
@@ -237,25 +241,25 @@
             <div class="flex items-center gap-2">
               <div
                 class="rounded-xl bg-button-bg p-2"
-                :class="data.loader === 'NeoForge' ? '[&&]:bg-bg-green' : ''"
+                :class="data.loader?.toLowerCase() === 'neoforge' ? '[&&]:bg-bg-green' : ''"
               >
                 <UiServersLoaderIcon
                   loader="NeoForge"
                   class="[&&]:size-10"
-                  :class="data.loader === 'NeoForge' ? 'text-brand' : ''"
+                  :class="data.loader?.toLowerCase() === 'neoforge' ? 'text-brand' : ''"
                 />
               </div>
               <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">NeoForge</h1>
               <span
-                v-if="data.loader === 'NeoForge'"
+                v-if="data.loader?.toLowerCase() === 'neoforge'"
                 class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
               >
                 Current
               </span>
             </div>
 
             <Button @click="selectLoader('NeoForge')">
-              {{ data.loader === "NeoForge" ? "Reinstall" : "Install" }}
+              {{ data.loader?.toLowerCase() === "neoforge" ? "Reinstall" : "Install" }}
               <ChevronRightIcon />
             </Button>
           </div>
@@ -280,7 +284,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  reinstall: [];
+  reinstall: [any?];
 }>();
 
 const tags = useTags();
@@ -351,6 +355,16 @@ const selectedLoaderVersions = computed(() => {
 });
 
 const data = computed(() => props.server.general);
+watch(
+  () => data.value?.loader,
+  () => {
+    console.log("Loader:", data.value?.loader);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
 const { data: versions } = data?.value?.upstream
   ? await useLazyAsyncData(
       `content-loader-versions`,
@@ -398,8 +412,6 @@ const reinstallCurrent = async () => {
   }
   const resolvedVersionIds = versionIds.value;
   const versionId = resolvedVersionIds.find((entry: any) => entry[version.value])?.[version.value];
-  // get the [id] url param
-  console.log(projectId, versionId);
   await props.server.general?.reinstall(serverId, false, projectId, versionId);
 };
 
@@ -411,19 +423,18 @@ const selectLoader = (loader: string) => {
 const reinstallLoader = async (loader: string) => {
   await props.server.general?.reinstall(
     serverId,
-    // if the loader is vanilla, we don't need to reinstall the loader
-    loader !== "Vanilla" && typeof loader === "string",
+    true,
     loader,
     selectedMCVersion.value,
-    selectedLoaderVersion.value,
+    loader === "Vanilla" ? "" : selectedLoaderVersion.value,
   );
-  emit("reinstall");
+  emit("reinstall", {
+    loader,
+    lVersion: selectedLoaderVersion.value,
+    mVersion: selectedMCVersion.value,
+  });
   await nextTick();
   window.scrollTo(0, 0);
-  if (data.value) {
-    data.value.loader = loader;
-    data.value.loader_version = selectedLoaderVersion.value;
-  }
 };
 
 const reinstallNew = async (project: any, versionNumber: string) => {