feat: fix editing mods, specifically tags

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.

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} />

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)}>

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
+          });
         }
       });
   };

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 }
+    })
+  }))
 });