client

Author: MengZhuNAV

components/search/resultList.tsx

@@ -8,7 +8,7 @@ import { UserState } from '../../lib/context'
 import { useSearchTeamKatalogen } from '../../lib/rest/teamkatalogen'
 import { useGetProductAreas } from '../../lib/rest/productAreas'
 import { SearchResult } from '../../lib/rest/search'
-import { useDeleteStoryMutation } from '../../lib/schema/graphql'
+import { deleteStory } from '../../lib/rest/stories'
 
 const Results = ({ children }: { children: React.ReactNode }) => (
   <div className="results">{children}</div>
@@ -58,15 +58,9 @@ const ResultList = ({
   searchParam,
   updateQuery,
 }: ResultListInterface) => {
-  const [deleteStoryQuery] = useDeleteStoryMutation()
   const userInfo = useContext(UserState)
   const { searchResult: teamkatalogen } = useSearchTeamKatalogen()
   const { productAreas } = useGetProductAreas()
-  const deleteStory = (id: string) => deleteStoryQuery({
-    variables: {
-      id: id
-    },
-  })
 
   const isDataProduct = (item: any) => !!item.datasets
 
@@ -197,7 +191,7 @@ const ResultList = ({
               keywords={s.keywords}
               editable={true}
               description={s.description}
-              deleteResource={deleteStory}
+              deleteResource={()=> deleteStory(s.id)}
             />
           ))}
         </Results>

components/search/searchResultLink.tsx

@@ -4,12 +4,12 @@ import ReactMarkdown from 'react-markdown'
 import { PluggableList } from 'react-markdown/lib'
 import remarkGfm from 'remark-gfm'
 import { CoApplicant, Table } from '@navikt/ds-icons'
-import { useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
 import humanizeDate from '../../lib/humanizeDate'
 import DeleteModal from '../lib/deleteModal'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
 import TagPill from '../lib/tagPill'
+import { deleteInsightProduct } from '../../lib/rest/insightProducts'
 
 export interface SearchResultProps {
   resourceType?: string
@@ -55,7 +55,6 @@ export const SearchResultLink = ({
   const owner = teamkatalogenTeam || group?.group
   const router = useRouter();
   const [error, setError] = useState<string | undefined>(undefined)
-  const [deleteInsightProductMutation] = useDeleteInsightProductMutation();
 
   const editResource = () => {
     if (resourceType == 'datafortelling') {
@@ -66,14 +65,6 @@ export const SearchResultLink = ({
   }
   const openDeleteModal = () => setModal(true)
 
-  const deleteInsightProduct = (id: string)=>{
-    return deleteInsightProductMutation({
-      variables:{
-        id: id
-      },
-    })
-  }
-
   const confirmDelete = () => {
     const deletePromise = resourceType == "innsiktsprodukt"?
       deleteInsightProduct(id || ''):

components/stories/editStoryMetadata.tsx

@@ -15,7 +15,7 @@ import * as yup from 'yup'
 import { useContext, useState } from 'react'
 import TagsSelector from '../lib/tagsSelector'
 import {UserState} from "../../lib/context";
-import { useUpdateStoryMetadataMutation } from '../../lib/schema/graphql'
+import { updateStory } from '../../lib/rest/stories'
 
 const schema = yup.object().shape({
   name: yup.string().nullable().required('Skriv inn navnet på datafortellingen'),
@@ -40,7 +40,8 @@ export const EditStoryMetadataForm = ({id, name, description, keywords, teamkata
   const [productAreaID, setProductAreaID] = useState<string>('')
   const [teamID, setTeamID] = useState<string>('')
   const userInfo = useContext(UserState)
-  const [updateStoryQuery, {loading, error}] = useUpdateStoryMetadataMutation()
+  const [error, setError] = useState<Error | undefined>(undefined)
+  const [loading, setLoading] = useState(false)
   const {
     register,
     handleSubmit,
@@ -77,26 +78,28 @@ export const EditStoryMetadataForm = ({id, name, description, keywords, teamkata
 
   const onSubmit = async (data: any) => {
     const editStoryData = {
-      variables: {
-        id: id,
         name: data.name,
         description: data.description,
         keywords: data.keywords,
         teamkatalogenURL: data.teamkatalogenURL,
         productAreaID: productAreaID,
         teamID: teamID,
         group: data.group,
-        },
     }
 
-    updateStoryQuery(editStoryData).then(()=>{
+    setLoading(true)
+    updateStory(id, editStoryData).then(()=>{
+      setError(undefined)
       amplitudeLog('skjema fullført', { skjemanavn: 'endre-datafortelling' })
       router.push("/user/stories")
     }).catch(e=>{
+      setError(e)
       console.log(e)
       amplitudeLog('skjemainnsending feilet', {
         skjemanavn: 'endre-datafortelling',
       })
+    }).finally(()=>{
+      setLoading(false)
     })
   }
 

components/stories/newStory.tsx

@@ -11,11 +11,12 @@ import * as yup from 'yup';
 import { ChangeEvent, useContext, useRef, useState } from 'react';
 import TagsSelector from '../lib/tagsSelector';
 import { UserState } from '../../lib/context';
-import { CREATE_STORY } from '../../lib/queries/story/createStory';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { FileTextFillIcon, FolderFillIcon, TrashIcon } from '@navikt/aksel-icons';
 import { UploadFile } from '../../lib/schema/graphql';
+import { createStory } from '../../lib/rest/stories';
+import { set } from 'lodash';
 
 const schema = yup.object().shape({
   name: yup.string().nullable().required('Skriv inn navnet på datafortellingen'),
@@ -41,6 +42,7 @@ export const NewStoryForm = () => {
   const [storyFiles, setStoryFiles] = useState<File[]>([]);
   const singleFileInputRef = useRef(null);
   const folderFileInputRef = useRef(null);
+  const [error, setError] = useState<Error | undefined>(undefined);
 
   const handleSingleFileClick = () => {
     /* @ts-expect-error */
@@ -88,44 +90,34 @@ export const NewStoryForm = () => {
   const valueOrNull = (val: string) => (val == '' ? null : val);
 
   const onSubmit = async (data: any) => {
-    const uploadData = {
-      variables: {
-        files: storyFiles.map<UploadFile>(it=>({
+        const files= storyFiles.map<UploadFile>(it=>({
           path: fixRelativePath(it),
           file: it,
-        })),
-        input: {
+        }))
+        const storyInput= {
           name: data.name,
           description: valueOrNull(data.description),
           keywords: data.keywords,
           teamkatalogenURL: data.teamkatalogenURL,
           productAreaID: productAreaID,
           teamID: teamID,
           group: data.group,
-        },
-      },
-      refetchQueries: ['searchContent', 'userInfoDetails'],
-    };
+        }
 
     try {
-      await createStory(uploadData);
+      const data = await createStory(storyInput, files);
+      setError(undefined);
       amplitudeLog('skjema fullført', { skjemanavn: 'ny-datafortelling' });
+      router.push(`/story/${data.id}`);
     } catch (e) {
+      setError(e as Error);
       amplitudeLog('skjemainnsending feilet', {
         skjemanavn: 'ny-datafortelling',
       })
       console.log(e)
     }
   }
-
-  const [createStory, { loading, error: backendError }] = useMutation(
-    CREATE_STORY,
-    {
-      onCompleted: (data) => {
-        router.push(`/story/${data.createStory.id}`);
-      },
-    },
-  )
+  
 
   const onCancel = () => {
     amplitudeLog(
@@ -316,7 +308,7 @@ export const NewStoryForm = () => {
             {renderTree(generateFileTree(storyFiles))}
           </SimpleTreeView>
         )}
-        {backendError && <ErrorMessage error={backendError} />}
+        {error && <ErrorMessage error={error} />}
         <div className="flex flex-row gap-4 mb-16">
           <Button type="button" variant="secondary" onClick={onCancel}>
             Avbryt

lib/queries/story/createStory.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { createInsightProductUrl, fetchTemplate, getInsightProductUrl, postTemplate, putTemplate, updateInsightProductUrl } from "./restApi"
+import { createInsightProductUrl, deleteTemplate, fetchTemplate, getInsightProductUrl, postTemplate, putTemplate, updateInsightProductUrl } from "./restApi"
 
 const getInsightProduct = async (id: string) => {
     const url = getInsightProductUrl(id)
@@ -39,4 +39,9 @@ export const createInsightProduct = async (insp: any) => {
 export const updateInsightProduct = async (id: string, insp: any) => {
     const url = updateInsightProductUrl(id)
     return putTemplate(url, insp).then((res)=>res.json())
+}
+
+export const deleteInsightProduct= async (id: string) => {
+    const url = updateInsightProductUrl(id)
+    return deleteTemplate(url).then((res)=>res.json())
 }

lib/queries/story/deleteInsightProduct.ts

@@ -21,13 +21,18 @@ export const deleteDatasetUrl = (id: string) => `${apiUrl()}/datasets/${id}`
 export const updateDatasetUrl = (id: string) => `${apiUrl()}/datasets/${id}`
 export const getAccessiblePseudoDatasetsUrl = () => `${apiUrl()}/datasets/pseudo/accessible`
 
+export const createStoryUrl = () => `${apiUrl()}/stories/new`
+export const updateStoryUrl = (id: string) => `${apiUrl()}/stories/${id}`
+export const deleteStoryUrl = (id: string) => `${apiUrl()}/stories/${id}`
+
 export const getProductAreasUrl = () => `${apiUrl()}/productareas`
 export const getProductAreaUrl = (id: string) => `${apiUrl()}/productareas/${id}`
 export const fetchUserDataUrl = () => `${apiUrl()}/userData`
 
 export const getInsightProductUrl = (id: string) => `${apiUrl()}/insightProducts/${id}`
 export const createInsightProductUrl = () => `${apiUrl()}/insightProducts/new`
 export const updateInsightProductUrl = (id: string) => `${apiUrl()}/insightProducts/${id}`
+export const deleteInsightProductUrl = (id: string) => `${apiUrl()}/insightProducts/${id}`
 
 export const fetchKeywordsUrl = () => `${apiUrl()}/keywords`
 export const updateKeywordsUrl = () => `${apiUrl()}/keywords`

lib/queries/story/deleteStory.ts

@@ -0,0 +1,21 @@
+import { th } from "date-fns/locale"
+import { createStoryUrl, deleteTemplate, postTemplate, putTemplate, updateStoryUrl } from "./restApi"
+import { isThenable } from "next/dist/client/components/router-reducer/router-reducer-types"
+
+export const createStory = (newStory: any, files: any[]) => {
+    const formData = new FormData()
+    files.forEach((file, idx) => {
+        formData.append(`files[${idx}][path]`, file.path)
+        formData.append(`files[${idx}[file]`, file.file)
+    })
+    formData.append('story', JSON.stringify(newStory))
+    return postTemplate(createStoryUrl(), formData).then((res) => res.json())
+}
+
+export const updateStory =(storyId: string, updatedStory: any) => {
+    return putTemplate(updateStoryUrl(storyId), updatedStory).then((res) => res.json())
+}
+
+export const deleteStory = (storyId: string) => {
+    return deleteTemplate(updateStoryUrl(storyId), {isDeleted: true}).then((res) => res.json())
+}