Merge pull request #281 from navikt/perf/no-more-graphql

Refactor ART02: Use rest api for product areas feature

Author: MengZhuNAV

components/dataproducts/dataproductList.tsx

@@ -59,6 +59,7 @@ export const DataproductsList = ({ datasets }: DataproductsListProps) => {
                                             type={'Dataset'}
                                             keywords={dataset.keywords}
                                             link={`/dataproduct/${dataset.dataproductID}/${dataset.dataproduct.slug}/${dataset.id}`}
+                                            productAreas={[]}
                                         />
                                     })
                                     }

components/productArea/content.tsx

@@ -1,9 +1,10 @@
 import { Tabs } from "@navikt/ds-react";
 import { PAItem } from "../../pages/productArea/[id]";
 import SearchResultLink from "../search/searchResultLink";
-import { useProductAreasQuery, useTeamkatalogenQuery } from "../../lib/schema/graphql";
+import { useTeamkatalogenQuery } from "../../lib/schema/graphql";
 import { useContext } from "react";
 import { UserState } from "../../lib/context";
+import { useGetProductAreas } from "../../lib/rest/productAreas";
 
 interface ProductAreaContentProps {
     currentItem: PAItem
@@ -15,9 +16,11 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
     const tk = useTeamkatalogenQuery({
         variables: { q: '' },
     })
-    const po = useProductAreasQuery()
+    const {productAreas, loading, error} = useGetProductAreas()
     const userInfo= useContext(UserState)
 
+    if (loading) return <div>Laster...</div>
+    if (error) return <div>Noe gikk galt</div>
     return (
         <Tabs
             value={currentTab}
@@ -72,7 +75,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             link={`/story/${s.id}`}
                             type={s.__typename}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                         />
                     ))}
                     {currentItem.stories.length == 0 && "Ingen fortellinger"}
@@ -92,7 +95,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             description={d.description}
                             link={`/dataproduct/${d.id}/${d.slug}`}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                         />
                     ))}
                     {currentItem.dataproducts.length == 0 && "Ingen dataprodukter"}
@@ -118,7 +121,7 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
                             id={ip.id}
                             innsiktsproduktType={ip.type}
                             teamkatalogen={tk.data}
-                            productAreas={po.data}
+                            productAreas={productAreas}
                             editable={!!userInfo?.googleGroups?.find(it=> it.email == ip.group)}
                         />
                     ))}

components/productArea/productAreaLinks.tsx

@@ -1,18 +1,19 @@
 import { Heading, Link } from '@navikt/ds-react'
-import { useProductAreasQuery } from '../../lib/schema/graphql'
 import ExploreAreasIcon from '../lib/icons/exploreAreasIcon'
+import { useGetProductAreas } from '../../lib/rest/productAreas'
+
+const ProductAreaHasItems = (p: any)=> !!p?.teams.filter((it: any)=> it.dataproductsNumber+ it.storiesNumber> 0).length
 
 const ProductAreaLinks = () => {
   var defaultProductAreaID = '6b149078-927b-4570-a1ce-97bbb9499fb6'
-  const productAreasQuery = useProductAreasQuery()
-
-  if (productAreasQuery.data && productAreasQuery.data.productAreas.length > 0) {
-    defaultProductAreaID =
-    productAreasQuery.data.productAreas.find(
-      (it) => it.id == '6b149078-927b-4570-a1ce-97bbb9499fb6'
-    )?.id || productAreasQuery.data.productAreas[0].id
+  const {productAreas} = useGetProductAreas()
+  const productAreaWithItems = productAreas?.filter(it=> ProductAreaHasItems(it));
+  if(productAreaWithItems.length>0){
+    defaultProductAreaID = productAreaWithItems.find(it=> it.id== defaultProductAreaID)?.id || productAreaWithItems[0].id
+  }else{
+    return null
   }
-  
+
   return (
     <div className="border border-border-default bg-white rounded-lg w-11/12 md:w-[17rem] md:h-[22rem] p-4 pt-8 flex items-center flex-col gap-8">
       <ExploreAreasIcon />

components/productArea/productAreaMobileMenu.tsx

@@ -1,15 +1,14 @@
 import { Back, Next } from "@navikt/ds-icons"
 import { Button, Heading, Modal } from "@navikt/ds-react"
 import { useState } from "react"
-import { ProductAreasQuery } from "../../lib/schema/graphql"
 import { PAItems } from "../../pages/productArea/[id]"
 
 interface MobileMenuProps {
     open: boolean
     setOpen: (value: boolean) => void
     productAreaItems: PAItems
     setCurrentItem: (newCurrent: number) => void
-    productAreas: ProductAreasQuery['productAreas']
+    productAreas: any[]
     selectProductArea: (productAreaId: string) => void
 }
 

components/productArea/productAreaView.tsx

@@ -2,32 +2,36 @@ import { System } from '@navikt/ds-icons'
 import { Heading } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { ProductAreasQuery } from '../../lib/schema/graphql'
 import { PAItem, PAItems } from '../../pages/productArea/[id]'
 import ProductAreaContent from './content'
 import ProductAreaMobileMenu from './productAreaMobileMenu'
 import ProductAreaSidebar from './sidebar'
 
 interface ProductAreaViewProps {
   paItems: PAItems
-  productAreas: ProductAreasQuery['productAreas']
+  productAreas: any[]
 }
 
 const ProductAreaView = ({ paItems, productAreas }: ProductAreaViewProps) => {
   const router = useRouter()
-  const currentItemName = (router.query.team as string) || paItems[0].name
+  const currentItemName = (router.query.team as string) || paItems.length && paItems[0].name || ''
   const teamIdx = paItems.findIndex(
     (it) => it.name.toLowerCase() === currentItemName.toLowerCase() || it.id === currentItemName
   )
 
   const currentItem = teamIdx > 0 ? teamIdx : 0
 
   const initialTab = (item: PAItem) => {
-    return item.dashboardURL ? 'dashboard' : 'stories'
+    return item?.dashboardURL ? 'dashboard' : 'stories'
   }
 
   const [currentTab, setCurrentTab] = useState(initialTab(paItems[teamIdx]))
   const [open, setOpen] = useState(false)
+
+  if(!currentItemName){
+    return <div>Ingen produktområder samsvarer med søkekriteriene</div>
+  }
+
   const pathComponents = router.asPath.split('?')[0].split('/')
   const currentProductAreaId = pathComponents[pathComponents.length - 1]
 

components/productArea/sidebar.tsx

@@ -2,15 +2,14 @@ import { Data } from '@navikt/ds-icons'
 import { Select } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
 import * as React from 'react'
-import { ProductAreasQuery } from '../../lib/schema/graphql'
 import { PAItems } from '../../pages/productArea/[id]'
 import DataproductLogo from '../lib/icons/dataproductLogo'
 
 interface ProductAreaSidebarProps {
   productAreaItems: PAItems
   setCurrentItem: (newCurrent: number) => void
   currentItem: number
-  productAreas: ProductAreasQuery['productAreas']
+  productAreas: any
   selectProductArea: (productAreaId: string) => void
 }
 
@@ -23,23 +22,23 @@ const ProductAreaSidebar = ({
 }: ProductAreaSidebarProps) => {
   const relevantProductAreas = productAreas
     .filter(
-      (it) =>
-        it.dataproducts.length ||
-        it.stories.length ||
-        it.insightProducts.length
-    ).sort((l, r) => (l.name < r.name ? -1 : 1))
+      (it: any) =>
+        it.dataproductsNumber ||
+        it.storiesNumber ||
+        it.insightProductsNumber
+    ).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))
   return (
     <div className="pr-[2rem] w-96 pt-[1.6rem] hidden md:block">
       <Select
         className="w-full mb-[1rem]"
         label=""
         onChange={(e) => selectProductArea(e.target.value)}
         value={
-          relevantProductAreas.find((it) => it.name == productAreaItems[0].name)
+          relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
             ?.id
         }
       >
-        {relevantProductAreas.map((it, index) => (
+        {relevantProductAreas.map((it: any, index: number) => (
           <option key={index} value={it.id}>
             {it.name}
           </option>

components/search/resultList.tsx

@@ -4,7 +4,6 @@ import {
   SearchContentWithOptionsQuery,
   SearchOptions,
   useDeleteStoryMutation,
-  useProductAreasQuery,
   useTeamkatalogenQuery,
 } from '../../lib/schema/graphql'
 import ErrorMessage from '../lib/error'
@@ -16,6 +15,7 @@ import { SearchParam } from '../../pages/search'
 import { useRouter } from 'next/router'
 import { USER_INFO } from '../../lib/queries/userInfo/userInfo'
 import { UserState } from '../../lib/context'
+import { useGetProductAreas } from '../../lib/rest/productAreas'
 
 const Results = ({ children }: { children: React.ReactNode }) => (
   <div className="results">{children}</div>
@@ -87,7 +87,7 @@ const ResultList = ({
     variables: { q: '' },
   })
 
-  const po = useProductAreasQuery()
+  const {productAreas} = useGetProductAreas()
   const [deleteStoryQuery] = useDeleteStoryMutation()
   const userInfo= useContext(UserState)
   const deleteStory = (id: string) => deleteStoryQuery({
@@ -150,7 +150,7 @@ const ResultList = ({
                     teamkatalogenURL: it.result.teamkatalogenURL,
                   }}
                   teamkatalogen={tk.data}
-                  productAreas={po.data}
+                  productAreas={productAreas}
                 />
               )
               )
@@ -170,7 +170,7 @@ const ResultList = ({
                     link={`/dataproduct/${d.result.id}/${d.result.slug}`}
                     datasets={d.result.datasets}
                     teamkatalogen={tk.data}
-                    productAreas={po.data}
+                    productAreas={productAreas}
                   />
                 )
             )}
@@ -191,7 +191,7 @@ const ResultList = ({
             keywords={d.keywords}
             link={`/dataproduct/${d.id}/${d.slug}`}
             teamkatalogen={tk.data}
-            productAreas={po.data}
+            productAreas={productAreas}
           />
         ))}
       </Results>
@@ -214,7 +214,7 @@ const ResultList = ({
               resourceType={"datafortelling"}
               link={`/story/${s.id}`}
               teamkatalogen={tk.data}
-              productAreas={po.data}
+              productAreas={productAreas}
               keywords={s.keywords}
               editable = {true}
               description= {s.description}
@@ -242,7 +242,7 @@ const ResultList = ({
               name={p.name}
               link={p.link}
               teamkatalogen={tk.data}
-              productAreas={po.data}
+              productAreas={productAreas}
               description= {p.description}
               innsiktsproduktType={p.type}
               editable={!!userInfo?.googleGroups?.find(it=> it.email == p.group)}     

components/search/searchResultLink.tsx

@@ -4,13 +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 { ProductAreasQuery, TeamkatalogenQuery, useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
+import { TeamkatalogenQuery, 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 { USER_INFO } from '../../lib/queries/userInfo/userInfo'
-import { GET_PRODUCT_AREAS } from '../../lib/queries/productAreas/productAreas'
 import TagPill from '../lib/tagPill'
 
 export interface SearchResultProps {
@@ -33,7 +32,7 @@ export interface SearchResultProps {
     }
   }[]
   teamkatalogen?: TeamkatalogenQuery,
-  productAreas?: ProductAreasQuery,
+  productAreas?: any[],
   editable?: boolean,
   deleteResource?: (id: string) => Promise<any>,
 }
@@ -57,7 +56,7 @@ export const SearchResultLink = ({
   const [modal, setModal] = useState(false)
 
   const tk = teamkatalogen?.teamkatalogen.find((it) => it.url == group?.teamkatalogenURL)
-  const po = productAreas?.productAreas.find((it) => it.id == tk?.productAreaID)
+  const po = productAreas?.find((it) => it.id == tk?.productAreaID)
   const owner = tk?.name || group?.group
   const router = useRouter();
   const [error, setError] = useState<string | undefined>(undefined)
@@ -78,9 +77,6 @@ export const SearchResultLink = ({
         id: id
       },
       refetchQueries:[
-        {
-          query: GET_PRODUCT_AREAS,
-        },
         {
           query: USER_INFO,
         }