Skip to content
This repository was archived by the owner on Nov 1, 2024. It is now read-only.

Commit 45dbc07

Browse files
MengZhuNAVMengZhuNAV
authored
Merge pull request #288 from navikt/perf/no-more-graphql-art03
Refactor ART03: Teamkatalogen queries
2 parents e5a5860 + 9570b52 commit 45dbc07

File tree

10 files changed

+83
-198
lines changed

10 files changed

+83
-198
lines changed

‎components/dataproducts/dataproductList.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export const DataproductsList = ({ datasets }: DataproductsListProps) => {
5959
type={'Dataset'}
6060
keywords={dataset.keywords}
6161
link={`/dataproduct/${dataset.dataproductID}/${dataset.dataproduct.slug}/${dataset.id}`}
62-
productAreas={[]}
6362
/>
6463
})
6564
}

‎components/lib/teamkatalogenSelector.tsx

+14-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react'
22
import { Select } from '@navikt/ds-react'
3-
import { useTeamkatalogenQuery } from '../../lib/schema/graphql'
43
import LoaderSpinner from './spinner'
54
import { Dispatch, SetStateAction } from 'react'
5+
import { useSearchTeamKatalogen } from '../../lib/rest/teamkatalogen'
66

77
type TeamkatalogenSelectorProps = {
88
gcpGroups?: string []
@@ -21,32 +21,28 @@ export interface Team {
2121
}
2222

2323
const useBuildTeamList = (gcpGroups: string [] | undefined) => {
24-
const allTeamResult = useTeamkatalogenQuery({
25-
variables: { q: '' },
26-
})
24+
const {searchResult: relevantTeamResult, loading: loadingRelevant, error: errorRelevant}=
25+
useSearchTeamKatalogen(gcpGroups?.map(it=> it.split('@')[0]) || [])
26+
const {searchResult: allTeamsResult, loading: loadingAllTeams, error: errorAllTeams} =
27+
useSearchTeamKatalogen()
2728

28-
const relevantTeamResult = useTeamkatalogenQuery({
29-
variables: { q: gcpGroups?.map(it=> it.split('@')[0]) || []},
30-
})
31-
32-
if (allTeamResult.error || relevantTeamResult.error) {
29+
if (errorAllTeams || errorRelevant) {
3330
return {
3431
error: true,
3532
}
3633
}
3734

38-
const relevantTeams = gcpGroups? relevantTeamResult.data?.teamkatalogen: undefined
39-
const allTeams = allTeamResult.data?.teamkatalogen
40-
const otherTeams = allTeamResult.data?.teamkatalogen.filter(
41-
(it) => !relevantTeams || !relevantTeams.find((t) => t.teamID == it.teamID)
35+
const relevantTeams = gcpGroups? relevantTeamResult: undefined
36+
const otherTeams = allTeamsResult?.filter(
37+
(it: any) => !relevantTeams || !relevantTeams.find((t: any) => t.teamID == it.teamID)
4238
)
4339

44-
otherTeams?.sort((a, b) => a.name.localeCompare(b.name))
40+
otherTeams?.sort((a:any, b:any) => a.name.localeCompare(b.name))
4541

4642
return {
4743
relevantTeams: relevantTeams,
4844
otherTeams: otherTeams,
49-
allTeams: allTeams,
45+
allTeams: allTeamsResult,
5046
}
5147
}
5248

@@ -64,7 +60,7 @@ export const TeamkatalogenSelector = ({
6460
const teamkatalogenURL = watch('teamkatalogenURL')
6561

6662
const updateTeamkatalogInfo = (url: string) => {
67-
const team = allTeams?.find((it) => it.url == url)
63+
const team = allTeams?.find((it:any) => it.url == url)
6864
setProductAreaID?.(team ? team.productAreaID : '')
6965
setTeamID?.(team ? team.teamID : '')
7066
}
@@ -92,12 +88,12 @@ export const TeamkatalogenSelector = ({
9288
Ingen team
9389
</option>
9490
)}
95-
{relevantTeams?.map((team) => (
91+
{relevantTeams?.map((team: any) => (
9692
<option value={team.url} key={team.name}>
9793
{team.name}
9894
</option>
9995
))}
100-
{otherTeams?.map((team) => (
96+
{otherTeams?.map((team: any) => (
10197
<option value={team.url} key={team.name}>
10298
{team.name}
10399
</option>

‎components/productArea/content.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Tabs } from "@navikt/ds-react";
22
import { PAItem } from "../../pages/productArea/[id]";
33
import SearchResultLink from "../search/searchResultLink";
4-
import { useTeamkatalogenQuery } from "../../lib/schema/graphql";
54
import { useContext } from "react";
65
import { UserState } from "../../lib/context";
76
import { useGetProductAreas } from "../../lib/rest/productAreas";
@@ -13,9 +12,6 @@ interface ProductAreaContentProps {
1312
}
1413

1514
const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductAreaContentProps) => {
16-
const tk = useTeamkatalogenQuery({
17-
variables: { q: '' },
18-
})
1915
const {productAreas, loading, error} = useGetProductAreas()
2016
const userInfo= useContext(UserState)
2117

@@ -74,8 +70,8 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
7470
keywords={s.keywords}
7571
link={`/story/${s.id}`}
7672
type={s.__typename}
77-
teamkatalogen={tk.data}
78-
productAreas={productAreas}
73+
teamkatalogenTeam={s.teamName}
74+
productArea={s.productAreaName}
7975
/>
8076
))}
8177
{currentItem.stories.length == 0 && "Ingen fortellinger"}
@@ -94,9 +90,9 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
9490
keywords={d.keywords}
9591
description={d.description}
9692
link={`/dataproduct/${d.id}/${d.slug}`}
97-
teamkatalogen={tk.data}
98-
productAreas={productAreas}
99-
/>
93+
teamkatalogenTeam={d.teamName}
94+
productArea={d.productAreaName}
95+
/>
10096
))}
10197
{currentItem.dataproducts.length == 0 && "Ingen dataprodukter"}
10298
</div>
@@ -120,9 +116,9 @@ const ProductAreaContent = ({ currentItem, currentTab, setCurrentTab }: ProductA
120116
link={ip.link}
121117
id={ip.id}
122118
innsiktsproduktType={ip.type}
123-
teamkatalogen={tk.data}
124-
productAreas={productAreas}
125119
editable={!!userInfo?.googleGroups?.find(it=> it.email == ip.group)}
120+
teamkatalogenTeam={ip.teamName}
121+
productArea={ip.productAreaName}
126122
/>
127123
))}
128124
{currentItem.insightProducts.length == 0 && "Ingen innsiktsprodukter"}

‎components/search/resultList.tsx

+7-19
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
SearchContentWithOptionsQuery,
55
SearchOptions,
66
useDeleteStoryMutation,
7-
useTeamkatalogenQuery,
87
} from '../../lib/schema/graphql'
98
import ErrorMessage from '../lib/error'
109
import LoaderSpinner from '../lib/spinner'
@@ -82,12 +81,6 @@ const ResultList = ({
8281
}
8382
// eslint-disable-next-line react-hooks/exhaustive-deps
8483
}, [search])
85-
86-
const tk = useTeamkatalogenQuery({
87-
variables: { q: '' },
88-
})
89-
90-
const {productAreas} = useGetProductAreas()
9184
const [deleteStoryQuery] = useDeleteStoryMutation()
9285
const userInfo= useContext(UserState)
9386
const deleteStory = (id: string) => deleteStoryQuery({
@@ -149,8 +142,7 @@ const ResultList = ({
149142
group: it.result.groupName,
150143
teamkatalogenURL: it.result.teamkatalogenURL,
151144
}}
152-
teamkatalogen={tk.data}
153-
productAreas={productAreas}
145+
//TODO: fix teamkatalogen
154146
/>
155147
)
156148
)
@@ -169,8 +161,7 @@ const ResultList = ({
169161
description={d.result.description}
170162
link={`/dataproduct/${d.result.id}/${d.result.slug}`}
171163
datasets={d.result.datasets}
172-
teamkatalogen={tk.data}
173-
productAreas={productAreas}
164+
//TODO: fix teamkatalogen
174165
/>
175166
)
176167
)}
@@ -190,8 +181,7 @@ const ResultList = ({
190181
name={d.name}
191182
keywords={d.keywords}
192183
link={`/dataproduct/${d.id}/${d.slug}`}
193-
teamkatalogen={tk.data}
194-
productAreas={productAreas}
184+
//TODO: fix teamkatalogen
195185
/>
196186
))}
197187
</Results>
@@ -213,9 +203,8 @@ const ResultList = ({
213203
name={s.name}
214204
resourceType={"datafortelling"}
215205
link={`/story/${s.id}`}
216-
teamkatalogen={tk.data}
217-
productAreas={productAreas}
218-
keywords={s.keywords}
206+
//TODO: fix teamkatalogen
207+
keywords={s.keywords}
219208
editable = {true}
220209
description= {s.description}
221210
deleteResource = {deleteStory}
@@ -241,9 +230,8 @@ const ResultList = ({
241230
id={p.id}
242231
name={p.name}
243232
link={p.link}
244-
teamkatalogen={tk.data}
245-
productAreas={productAreas}
246-
description= {p.description}
233+
//TODO: fix teamkatalogen
234+
description= {p.description}
247235
innsiktsproduktType={p.type}
248236
editable={!!userInfo?.googleGroups?.find(it=> it.email == p.group)}
249237
/>

‎components/search/searchResultLink.tsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown'
44
import { PluggableList } from 'react-markdown/lib'
55
import remarkGfm from 'remark-gfm'
66
import { CoApplicant, Table } from '@navikt/ds-icons'
7-
import { TeamkatalogenQuery, useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
7+
import { useDeleteInsightProductMutation, useDeleteStoryMutation } from '../../lib/schema/graphql'
88
import humanizeDate from '../../lib/humanizeDate'
99
import DeleteModal from '../lib/deleteModal'
1010
import { useState } from 'react'
@@ -31,8 +31,8 @@ export interface SearchResultProps {
3131
lastModified: string,
3232
}
3333
}[]
34-
teamkatalogen?: TeamkatalogenQuery,
35-
productAreas?: any[],
34+
teamkatalogenTeam?: string,
35+
productArea?: string,
3636
editable?: boolean,
3737
deleteResource?: (id: string) => Promise<any>,
3838
}
@@ -48,16 +48,14 @@ export const SearchResultLink = ({
4848
group,
4949
description,
5050
datasets,
51-
teamkatalogen,
52-
productAreas,
51+
teamkatalogenTeam,
52+
productArea,
5353
editable,
5454
deleteResource
5555
}: SearchResultProps) => {
5656
const [modal, setModal] = useState(false)
5757

58-
const tk = teamkatalogen?.teamkatalogen.find((it) => it.url == group?.teamkatalogenURL)
59-
const po = productAreas?.find((it) => it.id == tk?.productAreaID)
60-
const owner = tk?.name || group?.group
58+
const owner = teamkatalogenTeam || group?.group
6159
const router = useRouter();
6260
const [error, setError] = useState<string | undefined>(undefined)
6361
const [deleteInsightProductMutation] = useDeleteInsightProductMutation();
@@ -123,7 +121,7 @@ export const SearchResultLink = ({
123121
<Link className='m-2' href="#" onClick={openDeleteModal}>Slett</Link>
124122
</div>}
125123
</div>
126-
<Detail className="flex gap-2 items-center text-text-subtle"><CoApplicant /> {owner + `${po ? " - " + po.name : ""}`}</Detail>
124+
<Detail className="flex gap-2 items-center text-text-subtle"><CoApplicant /> {owner + `${productArea ? " - " + productArea : ""}`}</Detail>
127125
</div>
128126
<div className="flex flex-col gap-4">
129127
{description && (

‎lib/queries/teamkatalogen/search.ts

-12
This file was deleted.

‎lib/rest/productAreas.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const getProductAreas = async () => {
1313
}
1414

1515
const getProductArea = async (id: string) => {
16-
const url = getProductAreaUrl(id);
16+
const url = getProductAreaUrl(id)
1717
const options = {
1818
method: 'GET',
1919
headers: {

‎lib/rest/restApi.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,15 @@ export const apiUrl = () => {
77
return isServer ? 'http://nada-backend/api' : '/api'
88
}
99

10-
export const getDataproductUrl = (id: string)=> `${apiUrl()}/dataproducts/${id}`
11-
export const getDatasetUrl = (id: string)=> `${apiUrl()}/datasets/${id}`
10+
export const getDataproductUrl = (id: string) => `${apiUrl()}/dataproducts/${id}`
11+
export const getDatasetUrl = (id: string) => `${apiUrl()}/datasets/${id}`
1212
export const getProductAreasUrl = () => `${apiUrl()}/productareas`
1313
export const getProductAreaUrl = (id: string) => `${apiUrl()}/productareas/${id}`
14+
export const searchTeamKatalogenUrl = (gcpGroups?: string[]) =>
15+
{
16+
const parameters = gcpGroups?.length ? gcpGroups.map(group => `gcpGroups=${encodeURIComponent(group)}`).join('&'): ''
17+
const query = parameters ? `?${parameters}` : ''
18+
return `${apiUrl()}/teamkatalogen${query}`
19+
}
20+
21+

‎lib/rest/teamkatalogen.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useEffect, useState } from "react";
2+
import { searchTeamKatalogenUrl } from "./restApi";
3+
import { set } from "lodash";
4+
import { de } from "date-fns/locale";
5+
6+
export const searchTeamKatalogen = async (gcpGroups?: string[]) => {
7+
const url = searchTeamKatalogenUrl(gcpGroups)
8+
const options = {
9+
method: 'GET',
10+
headers: {
11+
'Content-Type': 'application/json',
12+
},
13+
14+
}
15+
return fetch(url, options)
16+
}
17+
18+
export const useSearchTeamKatalogen = (gcpGroups?: string[]) => {
19+
const [searchResult, setSearchResult] = useState<any[]>([]);
20+
const [loading, setLoading] = useState(false);
21+
const [error, setError] = useState(null);
22+
useEffect(() => {
23+
setLoading(true);
24+
searchTeamKatalogen(gcpGroups).then((res) => res.json())
25+
.then((searchResultDto) => {
26+
setError(null);
27+
setSearchResult(searchResultDto);
28+
})
29+
.catch((err) => {
30+
setError(err);
31+
setSearchResult([]);
32+
}).finally(() => {
33+
setLoading(false);
34+
})
35+
}, gcpGroups? [JSON.stringify(gcpGroups)]: [])
36+
return { searchResult, loading, error };
37+
}

0 commit comments

Comments
 (0)