@@ -5,7 +5,7 @@ import { useParams } from 'next/navigation';
55import { graphql } from '@/gql' ;
66import { TypeDataset , TypeUseCase } from '@/gql/generated/graphql' ;
77import { useQuery } from '@tanstack/react-query' ;
8- import { Avatar , Card , Spinner , Text } from 'opub-ui' ;
8+ import { Card , Text } from 'opub-ui' ;
99
1010import { GraphQL } from '@/lib/api' ;
1111import { formatDate } from '@/lib/utils' ;
@@ -21,6 +21,21 @@ const UseCasedetails: any = graphql(`
2121 id
2222 title
2323 summary
24+ isIndividualUsecase
25+ user {
26+ fullName
27+ email
28+ profilePicture {
29+ url
30+ }
31+ }
32+ organization {
33+ name
34+ contactEmail
35+ logo {
36+ url
37+ }
38+ }
2439 website
2540 metadata {
2641 metadataItem {
@@ -44,23 +59,30 @@ const UseCasedetails: any = graphql(`
4459 name
4560 contactEmail
4661 logo {
47- path
62+ url
4863 }
4964 }
5065 logo {
5166 name
5267 path
53- url
5468 }
5569 datasets {
5670 title
5771 id
72+ isIndividualDataset
73+ user {
74+ fullName
75+ id
76+ profilePicture {
77+ url
78+ }
79+ }
5880 downloadCount
5981 description
6082 organization {
6183 name
6284 logo {
63- path
85+ url
6486 }
6587 }
6688 metadata {
@@ -138,8 +160,7 @@ const UseCaseDetailPage = () => {
138160 const hasContributors =
139161 UseCaseDetails ?. useCase ?. contributors &&
140162 UseCaseDetails ?. useCase ?. contributors ?. length > 0 ;
141-
142-
163+ console . log ( UseCaseDetails ) ;
143164
144165 return (
145166 < div >
@@ -159,7 +180,6 @@ const UseCaseDetailPage = () => {
159180 < div className = " bg-onSurfaceDefault" >
160181 < div className = "container flex flex-row" >
161182 < div className = "w-full border-solid border-greyExtralight py-8 pr-8 lg:w-3/4 lg:border-r-2 lg:py-10 lg:pr-8" >
162-
163183 < PrimaryDetails data = { UseCaseDetails } isLoading = { isLoading } />
164184 </ div >
165185 < div className = "hidden lg:block lg:w-1/4" >
@@ -208,102 +228,111 @@ const UseCaseDetailPage = () => {
208228 icon : `/Sectors/${ dataset . sectors [ 0 ] . name } .svg` ,
209229 label : 'Sectors' ,
210230 } ,
211- { icon : '/fallback.svg' , label : 'Published by' } ,
231+ {
232+ icon : dataset . isIndividualDataset
233+ ? dataset ?. user ?. profilePicture
234+ ? `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ dataset . user . profilePicture . url } `
235+ : '/profile.png'
236+ : dataset ?. organization ?. logo
237+ ? `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ dataset . organization . logo . url } `
238+ : '/org.png' ,
239+ label : 'Published by' ,
240+ } ,
212241 ] }
213242 description = { dataset . description || '' }
214243 />
215244 ) ) }
216245 </ div >
217246 </ div >
218247 </ div >
219- { ( hasSupportingOrganizations || hasPartnerOrganizations || hasContributors ) && (
248+ { ( hasSupportingOrganizations ||
249+ hasPartnerOrganizations ||
250+ hasContributors ) && (
220251 < div className = " bg-primaryBlue" >
221252 < div className = "container flex flex-wrap gap-8 py-10 lg:flex-nowrap " >
222253 { hasSupportingOrganizations && (
223- < div className = "w-full lg:w-2/4" >
224- < Text variant = "heading2xl" color = "onBgDefault" >
225- Supported by
226- </ Text >
227- < div className = "mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 " >
228- { UseCaseDetails ?. useCase ?. supportingOrganizations ?. map (
229- ( org : any ) => (
230- < div
231- key = { org . id }
232- className = " rounded-4 bg-surfaceDefault p-4"
233- >
234- < Image
235- src = { `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ org . logo ?. url } ` }
236- alt = { org . name }
237- width = { 140 }
238- height = { 100 }
239- className = " object-contain"
240- />
241- </ div >
242- )
243- ) }
244- </ div >
254+ < div className = "w-full lg:w-2/4" >
255+ < Text variant = "heading2xl" color = "onBgDefault" >
256+ Supported by
257+ </ Text >
258+ < div className = "mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 " >
259+ { UseCaseDetails ?. useCase ?. supportingOrganizations ?. map (
260+ ( org : any ) => (
261+ < div
262+ key = { org . id }
263+ className = " rounded-4 bg-surfaceDefault p-4"
264+ >
265+ < Image
266+ src = { `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ org . logo ?. url } ` }
267+ alt = { org . name }
268+ width = { 140 }
269+ height = { 100 }
270+ className = " object-contain"
271+ />
272+ </ div >
273+ )
274+ ) }
245275 </ div >
246- ) }
276+ </ div >
277+ ) }
247278 { hasPartnerOrganizations && (
248- < div className = "w-full lg:w-2/4" >
249- < Text variant = "heading2xl" color = "onBgDefault" >
250- Partnered by
251- </ Text >
252- < div className = "mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 " >
253- { UseCaseDetails ?. useCase ?. partnerOrganizations ?. map (
254- ( org : any ) => (
255- < div
256- key = { org . id }
257- className = " rounded-4 bg-surfaceDefault p-4"
258- >
259- < Image
260- src = { `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ org . logo ?. url } ` }
261- alt = { org . name }
262- width = { 140 }
263- height = { 100 }
264- className = " object-contain"
265- />
266- </ div >
267- )
268- ) }
269- </ div >
270- </ div >
271- ) }
272- </ div >
273- { hasContributors && (
274- < div className = "container py-10" >
275- < div className = "flex flex-col" >
276- < Text variant = "heading2xl" color = "onBgDefault" >
277- Contributors{ ' ' }
278- </ Text >
279- < Text color = "onBgDefault" variant = "headingLg" >
280- Publisher and Contributors who have added to the Use
281- Case
282- </ Text >
283- </ div >
284- < div className = "mt-8 flex flex-wrap items-center justify-start gap-8" >
285- { UseCaseDetails ?. useCase ?. contributors ?. map (
286- ( contributor : any ) => (
287- < Image
288- alt = { contributor . fullName }
289- width = { 120 }
290- height = { 120 }
291- className = "rounded-full object-cover"
292- key = { contributor . id }
293- src = {
294- contributor . profilePicture ?. url
295- ? `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ contributor . profilePicture ?. url } `
296- : '/profile.png'
297- }
298- />
279+ < div className = "w-full lg:w-2/4" >
280+ < Text variant = "heading2xl" color = "onBgDefault" >
281+ Partnered by
282+ </ Text >
283+ < div className = "mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 " >
284+ { UseCaseDetails ?. useCase ?. partnerOrganizations ?. map (
285+ ( org : any ) => (
286+ < div
287+ key = { org . id }
288+ className = " rounded-4 bg-surfaceDefault p-4"
289+ >
290+ < Image
291+ src = { `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ org . logo ?. url } ` }
292+ alt = { org . name }
293+ width = { 140 }
294+ height = { 100 }
295+ className = " object-contain"
296+ />
297+ </ div >
299298 )
300299 ) }
301300 </ div >
302301 </ div >
303302 ) }
303+ </ div >
304+ { hasContributors && (
305+ < div className = "container py-10" >
306+ < div className = "flex flex-col" >
307+ < Text variant = "heading2xl" color = "onBgDefault" >
308+ Contributors{ ' ' }
309+ </ Text >
310+ < Text color = "onBgDefault" variant = "headingLg" >
311+ Publisher and Contributors who have added to the Use Case
312+ </ Text >
313+ </ div >
314+ < div className = "mt-8 flex flex-wrap items-center justify-start gap-8" >
315+ { UseCaseDetails ?. useCase ?. contributors ?. map (
316+ ( contributor : any ) => (
317+ < Image
318+ alt = { contributor . fullName }
319+ width = { 120 }
320+ height = { 120 }
321+ className = "rounded-full object-cover"
322+ key = { contributor . id }
323+ src = {
324+ contributor . profilePicture ?. url
325+ ? `${ process . env . NEXT_PUBLIC_BACKEND_URL } /${ contributor . profilePicture ?. url } `
326+ : '/profile.png'
327+ }
328+ />
329+ )
330+ ) }
331+ </ div >
332+ </ div >
333+ ) }
304334 </ div >
305335 ) }
306- < div className = "mt-10 bg-surfaceDefault" > </ div >
307336 </ >
308337 ) }
309338 </ div >
0 commit comments