From 53e65bd09ae89ab424dc06848dc42918e7cbbd1a Mon Sep 17 00:00:00 2001
From: Zachary Knight <knightzac@gmail.com>
Date: Mon, 23 Sep 2024 19:24:45 +0000
Subject: [PATCH 1/3] feat: fix editing mods, specifically tags

---
 src/lib/components/mods/ModForm.svelte   | 16 +++++++++-------
 src/lib/components/utils/TagList.svelte  | 12 +++++++-----
 src/routes/mod/[modId]/+page.svelte      |  4 +++-
 src/routes/mod/[modId]/edit/+page.svelte | 19 +++++++------------
 src/routes/mod/[modId]/edit/+page.ts     | 14 ++++++++++++--
 5 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/mods/ModForm.svelte b/src/lib/components/mods/ModForm.svelte
index a62f7e055..92383e6a5 100644
--- a/src/lib/components/mods/ModForm.svelte
+++ b/src/lib/components/mods/ModForm.svelte
@@ -12,6 +12,7 @@
   import ModCompatibility from '$lib/components/mods/compatibility/ModCompatibilityEdit.svelte';
   import { getTranslate } from '@tolgee/svelte';
   import { SlideToggle } from '@skeletonlabs/skeleton';
+  import { onMount } from 'svelte';
 
   export const { t } = getTranslate();
 
@@ -45,14 +46,15 @@
     onSubmit: (submitted: ModData) => onSubmit(trimNonSchema(submitted, modSchema))
   });
 
-  let tags = [];
-  $: {
-    const anyData = $data;
-    if (anyData.tags) {
-      tags = anyData.tags;
-      delete anyData.tags;
-    }
+  let tags = $data.tags;
+  const computeTags = () => {
     $data.tagIDs = tags.map((tag) => tag.id);
+  };
+
+  onMount(computeTags);
+
+  $: if (tags) {
+    computeTags();
   }
 
   // The GQL type NewMod does not have a compatibility field.
diff --git a/src/lib/components/utils/TagList.svelte b/src/lib/components/utils/TagList.svelte
index ac88464da..00af1eeb6 100644
--- a/src/lib/components/utils/TagList.svelte
+++ b/src/lib/components/utils/TagList.svelte
@@ -3,7 +3,7 @@
   import type { Tag } from '$lib/generated/graphql';
   import { queryStore, getContextClient } from '@urql/svelte';
   import { Autocomplete, type AutocompleteOption, InputChip, type PopupSettings, popup } from '@skeletonlabs/skeleton';
-  import { onMount } from 'svelte';
+  import { afterUpdate, onMount } from 'svelte';
   import TagDisplay from './TagDisplay.svelte';
 
   const client = getContextClient();
@@ -32,11 +32,11 @@
     target: 'popupAutocomplete',
     placement: 'bottom-start'
   };
-
   let tagList = [];
-  const loadTagList = () => (tagList = tags.map((t: Tag) => t.name));
+  const loadTagList = tags ? () => (tagList = tags.map((t: Tag) => t.name)) : () => {};
 
   onMount(loadTagList);
+  afterUpdate(loadTagList);
 
   const addTag = (tag: AutocompleteOption) => {
     const realTag = $getAllTags.data?.getTags?.find((t) => t.id == tag.value);
@@ -55,7 +55,9 @@
   const removeTag = (label: string) => {
     const idx = tags.findIndex((t) => t.name === label);
     tags = [...tags.slice(0, idx), ...tags.slice(idx + 1)];
-
+    if (tags.length == null) {
+      tags = [];
+    }
     loadTagList();
   };
 
@@ -64,7 +66,7 @@
 
 <div class="tags">
   {#if !editable}
-    {#if tags.length > 0}
+    {#if tags && tags.length > 0}
       <div class="text-md flex flex-row flex-wrap gap-1">
         {#each tags as tag}
           <TagDisplay {tag} {popupTriggerEvent} />
diff --git a/src/routes/mod/[modId]/+page.svelte b/src/routes/mod/[modId]/+page.svelte
index 14b42f9c6..53869231f 100644
--- a/src/routes/mod/[modId]/+page.svelte
+++ b/src/routes/mod/[modId]/+page.svelte
@@ -101,7 +101,9 @@
       <h1 class="text-4xl font-bold">{$mod.data.mod.name}</h1>
       <div>
         {#if canUserEdit}
-          <button class="variant-ghost-primary btn" on:click={() => goto(base + '/mod/' + modId + '/edit')}>
+          <button
+            class="variant-ghost-primary btn"
+            on:click={() => goto(base + '/mod/' + modId + '/edit', { invalidateAll: true })}>
             <span class="material-icons pr-2">edit</span>
             Edit</button>
           <button class="variant-ghost-primary btn" on:click={() => modalStore.trigger(deleteModal)}>
diff --git a/src/routes/mod/[modId]/edit/+page.svelte b/src/routes/mod/[modId]/edit/+page.svelte
index b947ae554..cb36ba7af 100644
--- a/src/routes/mod/[modId]/edit/+page.svelte
+++ b/src/routes/mod/[modId]/edit/+page.svelte
@@ -1,28 +1,21 @@
 <script lang="ts">
-  import { getContextClient, queryStore } from '@urql/svelte';
-  import { EditModDocument, GetModDocument } from '$lib/generated';
+  import { getContextClient } from '@urql/svelte';
+  import { EditModDocument } from '$lib/generated';
   import { goto } from '$app/navigation';
   import ModForm from '$lib/components/mods/ModForm.svelte';
   import type { ModData } from '$lib/models/mods';
   import { base } from '$app/paths';
   import MetaDescriptors from '$lib/components/utils/MetaDescriptors.svelte';
-  import { get } from 'svelte/store';
   import type { PageData } from './$types';
   import { getToastStore } from '@skeletonlabs/skeleton';
+  import { get } from 'svelte/store';
 
   export let data: PageData;
 
-  const { modId } = data;
-
   const client = getContextClient();
-
   const toastStore = getToastStore();
 
-  const mod = queryStore({
-    query: GetModDocument,
-    client,
-    variables: { mod: modId }
-  });
+  $: ({ modId, mod } = data);
 
   const onSubmit = (modData: ModData) => {
     client
@@ -45,7 +38,9 @@
             background: 'variant-filled-success',
             timeout: 5000
           });
-          goto(base + '/mod/' + value.data.updateMod.id);
+          goto(base + '/mod/' + modId, {
+            invalidateAll: true
+          });
         }
       });
   };
diff --git a/src/routes/mod/[modId]/edit/+page.ts b/src/routes/mod/[modId]/edit/+page.ts
index 9a95a14e6..9bd8d7dff 100644
--- a/src/routes/mod/[modId]/edit/+page.ts
+++ b/src/routes/mod/[modId]/edit/+page.ts
@@ -1,5 +1,15 @@
+import { GetModDocument } from '$lib/generated';
+import { loadWaitForNoFetch } from '$lib/utils/gql';
+import { queryStore } from '@urql/svelte';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params }) => ({
-  ...params
+export const load: PageLoad = async ({ params, parent }) => ({
+  ...params,
+  ...(await loadWaitForNoFetch({
+    mod: queryStore({
+      query: GetModDocument,
+      client: (await parent()).client,
+      variables: { mod: params.modId }
+    })
+  }))
 });

From cf794c4353593ae6930732cd40cc192209e8df01 Mon Sep 17 00:00:00 2001
From: Zachary Knight <knightzac@gmail.com>
Date: Sat, 28 Sep 2024 23:33:21 +0000
Subject: [PATCH 2/3] fix: cleanup statements for tags

---
 src/lib/components/mods/ModForm.svelte   |  3 ---
 src/lib/components/utils/TagList.svelte  | 12 ++++++------
 src/routes/mod/[modId]/+page.svelte      |  4 +---
 src/routes/mod/[modId]/+page.ts          |  3 ++-
 src/routes/mod/[modId]/edit/+page.svelte |  4 +---
 src/routes/mod/[modId]/edit/+page.ts     |  3 ++-
 6 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/mods/ModForm.svelte b/src/lib/components/mods/ModForm.svelte
index 92383e6a5..30aa98ab8 100644
--- a/src/lib/components/mods/ModForm.svelte
+++ b/src/lib/components/mods/ModForm.svelte
@@ -12,7 +12,6 @@
   import ModCompatibility from '$lib/components/mods/compatibility/ModCompatibilityEdit.svelte';
   import { getTranslate } from '@tolgee/svelte';
   import { SlideToggle } from '@skeletonlabs/skeleton';
-  import { onMount } from 'svelte';
 
   export const { t } = getTranslate();
 
@@ -51,8 +50,6 @@
     $data.tagIDs = tags.map((tag) => tag.id);
   };
 
-  onMount(computeTags);
-
   $: if (tags) {
     computeTags();
   }
diff --git a/src/lib/components/utils/TagList.svelte b/src/lib/components/utils/TagList.svelte
index 00af1eeb6..a09c02bd7 100644
--- a/src/lib/components/utils/TagList.svelte
+++ b/src/lib/components/utils/TagList.svelte
@@ -3,7 +3,7 @@
   import type { Tag } from '$lib/generated/graphql';
   import { queryStore, getContextClient } from '@urql/svelte';
   import { Autocomplete, type AutocompleteOption, InputChip, type PopupSettings, popup } from '@skeletonlabs/skeleton';
-  import { afterUpdate, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import TagDisplay from './TagDisplay.svelte';
 
   const client = getContextClient();
@@ -33,10 +33,10 @@
     placement: 'bottom-start'
   };
   let tagList = [];
-  const loadTagList = tags ? () => (tagList = tags.map((t: Tag) => t.name)) : () => {};
+  const loadTagList = () => (tagList = tags.map((t: Tag) => t.name));
 
   onMount(loadTagList);
-  afterUpdate(loadTagList);
+  // afterUpdate(loadTagList);
 
   const addTag = (tag: AutocompleteOption) => {
     const realTag = $getAllTags.data?.getTags?.find((t) => t.id == tag.value);
@@ -55,9 +55,9 @@
   const removeTag = (label: string) => {
     const idx = tags.findIndex((t) => t.name === label);
     tags = [...tags.slice(0, idx), ...tags.slice(idx + 1)];
-    if (tags.length == null) {
-      tags = [];
-    }
+    // if (tags.length == null) {
+    //   tags = [];
+    // }
     loadTagList();
   };
 
diff --git a/src/routes/mod/[modId]/+page.svelte b/src/routes/mod/[modId]/+page.svelte
index 53869231f..14b42f9c6 100644
--- a/src/routes/mod/[modId]/+page.svelte
+++ b/src/routes/mod/[modId]/+page.svelte
@@ -101,9 +101,7 @@
       <h1 class="text-4xl font-bold">{$mod.data.mod.name}</h1>
       <div>
         {#if canUserEdit}
-          <button
-            class="variant-ghost-primary btn"
-            on:click={() => goto(base + '/mod/' + modId + '/edit', { invalidateAll: true })}>
+          <button class="variant-ghost-primary btn" on:click={() => goto(base + '/mod/' + modId + '/edit')}>
             <span class="material-icons pr-2">edit</span>
             Edit</button>
           <button class="variant-ghost-primary btn" on:click={() => modalStore.trigger(deleteModal)}>
diff --git a/src/routes/mod/[modId]/+page.ts b/src/routes/mod/[modId]/+page.ts
index 8ac7651dc..3bda9d975 100644
--- a/src/routes/mod/[modId]/+page.ts
+++ b/src/routes/mod/[modId]/+page.ts
@@ -11,7 +11,8 @@ export const load: PageLoad = async ({ params, parent }) => ({
     mod: queryStore({
       query: GetModDocument,
       client: (await parent()).client,
-      variables: { mod: params.modId }
+      variables: { mod: params.modId },
+      requestPolicy: 'network-only'
     })
   }))
 });
diff --git a/src/routes/mod/[modId]/edit/+page.svelte b/src/routes/mod/[modId]/edit/+page.svelte
index cb36ba7af..c6c71ce32 100644
--- a/src/routes/mod/[modId]/edit/+page.svelte
+++ b/src/routes/mod/[modId]/edit/+page.svelte
@@ -38,9 +38,7 @@
             background: 'variant-filled-success',
             timeout: 5000
           });
-          goto(base + '/mod/' + modId, {
-            invalidateAll: true
-          });
+          goto(base + '/mod/' + modId);
         }
       });
   };
diff --git a/src/routes/mod/[modId]/edit/+page.ts b/src/routes/mod/[modId]/edit/+page.ts
index 9bd8d7dff..f0214fff8 100644
--- a/src/routes/mod/[modId]/edit/+page.ts
+++ b/src/routes/mod/[modId]/edit/+page.ts
@@ -9,7 +9,8 @@ export const load: PageLoad = async ({ params, parent }) => ({
     mod: queryStore({
       query: GetModDocument,
       client: (await parent()).client,
-      variables: { mod: params.modId }
+      variables: { mod: params.modId },
+      requestPolicy: 'network-only'
     })
   }))
 });

From 440e849ee05e1a26962cdde693a8a1b047a0c5c1 Mon Sep 17 00:00:00 2001
From: Zachary Knight <knightzac19@users.noreply.github.com>
Date: Sat, 28 Sep 2024 19:39:26 -0400
Subject: [PATCH 3/3] fix: remove commented out code

---
 src/lib/components/utils/TagList.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/components/utils/TagList.svelte b/src/lib/components/utils/TagList.svelte
index a09c02bd7..ff16f85fa 100644
--- a/src/lib/components/utils/TagList.svelte
+++ b/src/lib/components/utils/TagList.svelte
@@ -36,7 +36,6 @@
   const loadTagList = () => (tagList = tags.map((t: Tag) => t.name));
 
   onMount(loadTagList);
-  // afterUpdate(loadTagList);
 
   const addTag = (tag: AutocompleteOption) => {
     const realTag = $getAllTags.data?.getTags?.find((t) => t.id == tag.value);
@@ -55,9 +54,6 @@
   const removeTag = (label: string) => {
     const idx = tags.findIndex((t) => t.name === label);
     tags = [...tags.slice(0, idx), ...tags.slice(idx + 1)];
-    // if (tags.length == null) {
-    //   tags = [];
-    // }
     loadTagList();
   };