fix: editing mod tags and authors (#187)

* feat: fix editing mods, specifically tags

* fix: cleanup statements for tags

* fix: remove commented out code

src/lib/components/mods/ModForm.svelte

@@ -45,14 +45,13 @@
     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);
+  };
+
+  $: if (tags) {
+    computeTags();
   }
 
   // The GQL type NewMod does not have a compatibility field.

src/lib/components/utils/TagList.svelte

@@ -35,7 +35,6 @@
     target: 'popupAutocomplete',
     placement: 'bottom-start'
   };
-
   let tagList = [];
   const loadTagList = () => (tagList = tags.map((tag: Tag) => tag.name));
 
@@ -58,7 +57,6 @@
   const removeTag = (label: string) => {
     const idx = tags.findIndex((tag) => tag.name === label);
     tags = [...tags.slice(0, idx), ...tags.slice(idx + 1)];
-
     loadTagList();
   };
 
@@ -67,7 +65,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.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'
     })
   }))
 });

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,7 @@
             background: 'variant-filled-success',
             timeout: 5000
           });
-          goto(base + '/mod/' + value.data.updateMod.id);
+          goto(base + '/mod/' + modId);
         }
       });
   };

src/routes/mod/[modId]/edit/+page.ts

@@ -1,5 +1,16 @@
+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 },
+      requestPolicy: 'network-only'
+    })
+  }))
 });