bug(update story metadata)

The edit story metadata form referenced nonexisting key in userdata objecti for google groups.
Changed to correct key and added refetching of story metadata for each
form update.

Author: erikvatt

components/stories/editStoryMetadata.tsx

@@ -154,7 +154,7 @@ export const EditStoryMetadataForm = ({id, name, description, keywords, teamkata
                 ({ group }: { group: { name: string } }) => (
                   <option
                     value={
-                      userInfo?.groups.filter((g: any) => g.name === group.name)[0]
+                      userInfo?.googleGroups.filter((g: any) => g.name === group.name)[0]
                         .email
                     }
                     key={group.name}

lib/rest/restApi.ts

@@ -19,6 +19,7 @@ export const fetchAccessRequestUrl = (datasetId: string) => `${apiUrl()}/accessR
 export const fetchBQDatasetsUrl = (projectId: string) => `${apiUrl()}/bigquery/datasets?projectId=${projectId}`
 export const fetchBQTablesUrl = (projectId: string, datasetId: string) => `${apiUrl()}/bigquery/tables?projectId=${projectId}&datasetId=${datasetId}`
 export const fetchBQColumnsUrl = (projectId: string, datasetId: string, tableId: string) => `${apiUrl()}/bigquery/columns?projectId=${projectId}&datasetId=${datasetId}&tableId=${tableId}`
+export const fetchStoryMetadataURL = (id: string) => `${apiUrl()}/stories/${id}`
 export const searchTeamKatalogenUrl = (gcpGroups?: string[]) => {
   const parameters = gcpGroups?.length ? gcpGroups.map(group => `gcpGroups=${encodeURIComponent(group)}`).join('&') : ''
   const query = parameters ? `?${parameters}` : ''

pages/story/[id]/edit.tsx

@@ -1,20 +1,52 @@
-import { Loader } from "@navikt/ds-react";
 import { useRouter } from "next/router"
 import { EditStoryMetadataForm } from "../../../components/stories/editStoryMetadata";
-import { useDataStoryQuery } from "../../../lib/schema/graphql";
+import LoaderSpinner from "../../../components/lib/spinner";
+import { fetchStoryMetadataURL, fetchTemplate } from "../../../lib/rest/restApi";
+import { useEffect, useState } from "react";
+import ErrorMessage from "../../../components/lib/error";
+
+const getStoryMetadata = async (id: string) => {
+    const url = fetchStoryMetadataURL(id);
+    return fetchTemplate(url)
+}
+
+export const useGetStoryMetadata = (id: string)=>{
+    const [storyMetadata, setStoryMetadata] = useState<any>(null)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState(null)
+
+
+    useEffect(()=>{
+        if(!id) return
+        getStoryMetadata(id).then((res)=> res.json())
+        .then((story)=>
+        {
+            setError(null)
+            setStoryMetadata(story)
+        })
+        .catch((err)=>{
+            setError(err)
+            setStoryMetadata(null)            
+        }).finally(()=>{
+            setLoading(false)
+        })
+    }, [id])
+
+    return {storyMetadata, loading, error}
+}
+
 
 const EditStoryPage = ()=>{
     const router = useRouter()
     const id = router.query.id;
-    const storyQuery = useDataStoryQuery({variables: {id:id as string}})
-    if(storyQuery.error){
-        return <div>{storyQuery.error.message}</div>
-    }
-
-    if(storyQuery.loading || !storyQuery.data){
-        return <Loader></Loader>
-    }
-    const story = storyQuery.data.dataStory
+    const data = useGetStoryMetadata(id as string)
+
+    if (data.error) return <ErrorMessage error={data.error} />
+    if (data.loading || !data.storyMetadata)
+      return <LoaderSpinner />
+
+    const story = data.storyMetadata
+
     return <div>
         <EditStoryMetadataForm 
             id={id as string}