Merge pull request #326 from navikt/refactor/ART12-insightproduct-and-story

Refactor/art12 insightproduct and story

Author: MengZhuNAV

components/insightProducts/editInsightProduct.tsx

@@ -17,7 +17,7 @@ import * as yup from 'yup'
 import { useContext, useState } from 'react'
 import TagsSelector from '../lib/tagsSelector'
 import { UserState } from "../../lib/context";
-import { useUpdateInsightProductMetadataMutation } from '../../lib/schema/graphql'
+import { updateInsightProduct } from '../../lib/rest/insightProducts'
 
 const schema = yup.object().shape({
     name: yup.string().nullable().required('Skriv inn navnet på innsiktsproduktet'),
@@ -50,8 +50,9 @@ export const EditInsightProductMetadataForm = ({ id, name, description, type, li
     const [teamID, setTeamID] = useState<string>('')
     const userInfo = useContext(UserState)
     const [isPrivacyCheckboxChecked, setIsPrivacyCheckboxChecked] = useState(false)
+    const [error, setError] = useState<Error | undefined>(undefined)
+    const [loading, setLoading] = useState(false)
 
-    const [updateInsightProductQuery, { loading, error }] = useUpdateInsightProductMetadataMutation()
     const {
         register,
         handleSubmit,
@@ -95,8 +96,6 @@ export const EditInsightProductMetadataForm = ({ id, name, description, type, li
 
     const onSubmit = async (data: any) => {
         const editInsightProductData = {
-            variables: {
-                id: id,
                 name: data.name,
                 description: data.description,
                 type: data.type,
@@ -106,17 +105,21 @@ export const EditInsightProductMetadataForm = ({ id, name, description, type, li
                 productAreaID: productAreaID,
                 teamID: teamID,
                 group: data.group,
-            },
         }
 
-        updateInsightProductQuery(editInsightProductData).then(() => {
+        setLoading(true)
+        updateInsightProduct(id, editInsightProductData).then(() => {
+            setError(undefined)
             amplitudeLog('skjema fullført', { skjemanavn: 'endre-innsiktsprodukt' })
             router.back()
         }).catch(e => {
             console.log(e)
+            setError(e)
             amplitudeLog('skjemainnsending feilet', {
                 skjemanavn: 'endre-innsiktsprodukt',
             })
+        }).finally(() => {
+            setLoading(false)
         })
     }
 

components/insightProducts/newInsightProduct.tsx

@@ -17,7 +17,7 @@ import * as yup from 'yup'
 import { ChangeEvent, useContext, useState } from 'react'
 import TagsSelector from '../lib/tagsSelector'
 import { UserState } from "../../lib/context";
-import { CREATE_INSIGHT_PRODUCT } from '../../lib/queries/insightProducts/createInsightProduct'
+import { createInsightProduct } from '../../lib/rest/insightProducts'
 
 const schema = yup.object().shape({
     name: yup.string().nullable().required('Skriv inn navnet på innsiktsproduktet'),
@@ -28,7 +28,7 @@ const schema = yup.object().shape({
     link: yup
         .string()
         .required('Du må legge til en lenke til innsiktsproduktet')
-        .url('Lenken må være en gyldig URL'), // Add this line to validate the link as a URL    type: yup.string().required('Du må velge en type for innsiktsproduktet'),
+        .url('Lenken må være en gyldig URL, fks. https://valid.url.to.page'), // Add this line to validate the link as a URL    type: yup.string().required('Du må velge en type for innsiktsproduktet'),
     group: yup.string().required('Du må skrive inn en gruppe for innsiktsproduktet')
 })
 
@@ -48,6 +48,7 @@ export const NewInsightProductForm = () => {
     const [teamID, setTeamID] = useState<string>('')
     const userData = useContext(UserState)
     const [isPrivacyCheckboxChecked, setIsPrivacyCheckboxChecked] = useState(false)
+    const [backendError, setBackendError] = useState<Error | undefined>(undefined)
 
     const handlePrivacyCheckboxChange = () => {
         setIsPrivacyCheckboxChecked(!isPrivacyCheckboxChecked)
@@ -93,8 +94,6 @@ export const NewInsightProductForm = () => {
 
     const onSubmit = async (data: any) => {
         const inputData = {
-            variables: {
-                input: {
                     name: data.name,
                     description: valueOrNull(data.description),
                     keywords: data.keywords,
@@ -104,15 +103,15 @@ export const NewInsightProductForm = () => {
                     link: data.link,
                     type: data.type,
                     group: data.group,
-                },
-            },
-            refetchQueries: ['searchContent'],
         }
 
         try {
             await createInsightProduct(inputData)
+            setBackendError(undefined)
             amplitudeLog('skjema fullført', { skjemanavn: 'ny-innsiktsprodukt' })
+            router.push('/user/insightProducts')
         } catch (e) {
+            setBackendError(new Error('Internal server error'))
             amplitudeLog('skjemainnsending feilet', {
                 skjemanavn: 'ny-innsiktsprodukt',
             })
@@ -121,15 +120,6 @@ export const NewInsightProductForm = () => {
 
     }
 
-    const [createInsightProduct, { loading, error: backendError }] = useMutation(
-        CREATE_INSIGHT_PRODUCT,
-        {
-            onCompleted: (data) => {
-                router.push("/")
-            },
-        }
-    )
-
     const onCancel = () => {
         amplitudeLog(
             'Klikker på: Avbryt',

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