Skip to content

Commit e383ef1

Browse files
sanjaypinnasanjaypinna
committed
update the layout of resources and charts in details page
1 parent f82edfd commit e383ef1

File tree

3 files changed

+47
-48
lines changed

3 files changed

+47
-48
lines changed

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useRef } from 'react';
1+
import { useEffect, useRef, useState } from 'react';
22
import Image from 'next/image';
33
import Link from 'next/link';
44
import { useParams } from 'next/navigation';
@@ -50,7 +50,7 @@ const DetailsQuery: any = graphql(`
5050
`);
5151

5252
interface DetailsProps {
53-
setShowcharts: (vars:boolean) => void;
53+
setShowcharts: (vars: boolean) => void;
5454
}
5555

5656
const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
@@ -63,9 +63,11 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
6363
);
6464

6565
useEffect(() => {
66-
setShowcharts(false)
66+
if (data && data?.getChartData.length <= 0) {
67+
setShowcharts(false);
68+
}
6769
}, [data]);
68-
70+
6971
const renderChart = (item: any) => {
7072
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
7173
// Register the map
@@ -78,8 +80,11 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
7880
return <ReactECharts option={item?.chart?.options} ref={chartRef} />;
7981
};
8082

83+
const [isexpanded, setIsexpanded] = useState(false);
84+
const toggleDescription = () => setIsexpanded(!isexpanded);
85+
8186
return (
82-
<div className="mt-10 flex w-full flex-col gap-4 p-2">
87+
<div className=" flex w-full flex-col gap-4 p-2">
8388
{isLoading ? (
8489
<div className=" mt-8 flex justify-center">
8590
<Spinner />
@@ -111,12 +116,26 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
111116
<div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
112117
<div className="flex flex-col gap-1 py-2 text-start">
113118
<Text className="font-semi-bold">{item.name}</Text>
114-
<Text>{item.description}</Text>
119+
<Text className=" hidden lg:block">
120+
{item.description.length > 260 && !isexpanded
121+
? `${item.description.slice(0, 260)}...`
122+
: item.description}
123+
{item.description.length > 260 && (
124+
<Button
125+
kind="tertiary"
126+
size="slim"
127+
onClick={toggleDescription}
128+
className="text-blue-600 w-fit"
129+
>
130+
{isexpanded ? 'See Less' : 'See More'}
131+
</Button>
132+
)}
133+
</Text>
115134
</div>
116135
<div className="flex gap-2">
117136
<Button kind="secondary" className="p-2">
118137
<Icon
119-
source={Icons.share}
138+
source={Icons.diagonal}
120139
size={20}
121140
color="default"
122141
/>

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
'use client';
22

3-
import { useEffect, useRef, useState } from 'react';
4-
import Link from 'next/link';
5-
import { useParams } from 'next/navigation';
63
import { graphql } from '@/gql';
74
import { useQuery } from '@tanstack/react-query';
5+
import Link from 'next/link';
6+
import { useParams } from 'next/navigation';
87
import {
98
Accordion,
109
AccordionContent,
@@ -16,13 +15,12 @@ import {
1615
Icon,
1716
Spinner,
1817
Table,
19-
Tag,
20-
Text,
18+
Text
2119
} from 'opub-ui';
20+
import { useEffect, useRef, useState } from 'react';
2221

23-
import { GraphQL } from '@/lib/api';
24-
import { formatDate } from '@/lib/utils';
2522
import { Icons } from '@/components/icons';
23+
import { GraphQL } from '@/lib/api';
2624

2725
const datasetResourceQuery: any = graphql(`
2826
query datasetResources($datasetId: UUID!) {
@@ -68,35 +66,7 @@ const Resources = () => {
6866
)
6967
);
7068

71-
// Use an object to manage the expanded state for each resource individually
72-
const [showMore, setShowMore] = useState<{ [key: number]: boolean }>({});
73-
const [isDescriptionLong, setIsDescriptionLong] = useState<{
74-
[key: number]: boolean;
75-
}>({});
76-
77-
const descriptionRefs = useRef<(HTMLDivElement | null)[]>([]);
7869

79-
// Toggle showMore for a specific resource
80-
const toggleShowMore = (index: number) => {
81-
setShowMore((prevState) => ({
82-
...prevState,
83-
[index]: !prevState[index],
84-
}));
85-
};
86-
87-
// Measure the height of the description and set the `isDescriptionLong` flag accordingly
88-
useEffect(() => {
89-
descriptionRefs.current.forEach((descriptionElement, index) => {
90-
if (descriptionElement) {
91-
const isLong =
92-
descriptionElement.scrollHeight > descriptionElement.clientHeight;
93-
setIsDescriptionLong((prevState) => ({
94-
...prevState,
95-
[index]: isLong,
96-
}));
97-
}
98-
});
99-
}, [getResourceDetails.data]);
10070

10171
const generateColumnData = () => {
10272
return [
@@ -212,7 +182,7 @@ const Resources = () => {
212182
const [isexpanded, setIsexpanded] = useState(false);
213183
const toggleDescription = () => setIsexpanded(!isexpanded);
214184
return (
215-
<div className="w-full lg:px-28 lg:py-10 p-6">
185+
<div >
216186
{getResourceDetails.isLoading ? (
217187
<div className="mt-8 flex justify-center">
218188
<Spinner />
@@ -232,7 +202,7 @@ const Resources = () => {
232202
(item: any, index: number) => (
233203
<div
234204
key={index}
235-
className="mx-6 mt-5 flex flex-col gap-6 border-1 border-solid border-greyExtralight bg-surfaceDefault p-6 lg:mx-0"
205+
className="mt-5 flex flex-col gap-6 border-1 border-solid border-greyExtralight bg-surfaceDefault p-6 lg:mx-0"
236206
>
237207
<div className="flex flex-wrap justify-between gap-4">
238208
<div className="flex w-full flex-col gap-4 ">

‎app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const DatasetDetailsPage = () => {
8282
]}
8383
/>
8484
<div className="flex">
85-
<div className="w-full gap-10 border-r-2 border-solid border-greyExtralight p-6 lg:p-10 lg:w-3/4">
85+
<div className="w-full gap-10 border-r-2 border-solid border-greyExtralight p-6 lg:w-3/4 lg:p-10">
8686
{isLoading ? (
8787
<div className=" mt-8 flex justify-center">
8888
<Spinner />
@@ -93,9 +93,15 @@ const DatasetDetailsPage = () => {
9393
isLoading={isLoading}
9494
/>
9595
)}
96-
<Details setShowcharts={setShowcharts} />
96+
<div className="mt-10">
97+
{showCharts ? (
98+
<Details setShowcharts={setShowcharts} />
99+
) : (
100+
<Resources />
101+
)}
102+
</div>
97103
</div>
98-
<div className=" hidden w-1/4 gap-10 py-10 px-7 lg:block">
104+
<div className=" hidden w-1/4 gap-10 px-7 py-10 lg:block">
99105
{isLoading ? (
100106
<div className=" mt-8 flex justify-center">
101107
<Spinner />
@@ -107,7 +113,11 @@ const DatasetDetailsPage = () => {
107113
)}
108114
</div>
109115
</div>
110-
<Resources />
116+
{showCharts && (
117+
<div className="w-full p-6 lg:px-28 lg:py-10">
118+
<Resources />
119+
</div>
120+
)}
111121
</main>
112122
);
113123
};

0 commit comments

Comments
 (0)