Skip to content

Commit 6f3d820

Browse files
Deepthi-ChandDeepthi-Chand
authored
Merge pull request #291 from CivicDataLab/update/nextjs
Update/nextjs
2 parents c971eb7 + 22bde61 commit 6f3d820

33 files changed

+5545
-4051
lines changed

‎app/[locale]/[state]/analytics/components/RadioButton.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ $md-radio-checked-size: 10px;
5353
}
5454

5555
&:after {
56-
top: $md-radio-size / 2 - $md-radio-checked-size / 2;
57-
left: $md-radio-size / 2 - $md-radio-checked-size / 2;
56+
top: calc($md-radio-size / 2 - $md-radio-checked-size / 2);
57+
left: calc($md-radio-size / 2 - $md-radio-checked-size / 2);
5858
width: $md-radio-checked-size;
5959
height: $md-radio-checked-size;
6060
transform: scale(0);

‎app/[locale]/[state]/analytics/components/analytics-layout.tsx‎

Lines changed: 86 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,14 @@ export function AnalyticsMainLayout() {
5656
const [view, setView] = useQueryState('view');
5757
const routerParams = useParams();
5858

59-
const statesListData = useQuery([`states_list`], () =>
60-
GraphQL(
61-
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
62-
PLATFORM_STATES_LIST
63-
)
64-
);
59+
const statesListData = useQuery({
60+
queryKey: [`states_list`],
61+
queryFn: () =>
62+
GraphQL(
63+
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
64+
PLATFORM_STATES_LIST
65+
),
66+
});
6567

6668
const [currentSelectedState, setCurrentSelectedState] = useState(
6769
statesListData.data?.getStates.find(
@@ -81,11 +83,11 @@ export function AnalyticsMainLayout() {
8183

8284
// const stateCode = STATE_CODES[routerParams.state as keyof typeof STATE_CODES];
8385

84-
const mapData = useQuery(
85-
[
86+
const mapData = useQuery({
87+
queryKey: [
8688
`mapQuery_district_${currentSelectedState.code}_${indicator}_${timePeriodSelected}`,
8789
],
88-
() =>
90+
queryFn: () =>
8991
GraphQL(
9092
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
9193
ANALYTICS_DISTRICT_MAP_DATA,
@@ -97,19 +99,18 @@ export function AnalyticsMainLayout() {
9799
},
98100
}
99101
),
100-
{
101-
enabled: Boolean(view === 'map'),
102-
refetchOnMount: false,
103-
refetchOnWindowFocus: false,
104-
refetchOnReconnect: false,
105-
}
106-
);
107102

108-
const revenueMapData = useQuery(
109-
[
103+
enabled: Boolean(view === 'map'),
104+
refetchOnMount: false,
105+
refetchOnWindowFocus: false,
106+
refetchOnReconnect: false,
107+
});
108+
109+
const revenueMapData = useQuery({
110+
queryKey: [
110111
`mapQuery_revenue-circle_${currentSelectedState.code}_${indicator}_${timePeriodSelected}`,
111112
],
112-
() =>
113+
queryFn: () =>
113114
GraphQL(
114115
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
115116
ANALYTICS_REVENUE_MAP_DATA,
@@ -121,17 +122,16 @@ export function AnalyticsMainLayout() {
121122
},
122123
}
123124
),
124-
{
125-
enabled: Boolean(view === 'map'),
126-
refetchOnMount: false,
127-
refetchOnWindowFocus: false,
128-
refetchOnReconnect: false,
129-
}
130-
);
131125

132-
const districtGeographiesData = useQuery(
133-
[`geographies_data_district_${currentSelectedState.code}`],
134-
() =>
126+
enabled: Boolean(view === 'map'),
127+
refetchOnMount: false,
128+
refetchOnWindowFocus: false,
129+
refetchOnReconnect: false,
130+
});
131+
132+
const districtGeographiesData = useQuery({
133+
queryKey: [`geographies_data_district_${currentSelectedState.code}`],
134+
queryFn: () =>
135135
GraphQL(
136136
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
137137
ANALYTICS_GEOGRAPHY_DATA,
@@ -142,16 +142,14 @@ export function AnalyticsMainLayout() {
142142
},
143143
}
144144
),
145-
{
146-
refetchOnMount: false,
147-
refetchOnWindowFocus: false,
148-
refetchOnReconnect: false,
149-
}
150-
);
151-
152-
const revenueGeographiesData = useQuery(
153-
[`geographies_data_revenue_${currentSelectedState.code}`],
154-
() =>
145+
refetchOnMount: false,
146+
refetchOnWindowFocus: false,
147+
refetchOnReconnect: false,
148+
});
149+
150+
const revenueGeographiesData = useQuery({
151+
queryKey: [`geographies_data_revenue_${currentSelectedState.code}`],
152+
queryFn: () =>
155153
GraphQL(
156154
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
157155
ANALYTICS_GEOGRAPHY_DATA,
@@ -162,48 +160,44 @@ export function AnalyticsMainLayout() {
162160
},
163161
}
164162
),
165-
{
166-
refetchOnMount: false,
167-
refetchOnWindowFocus: false,
168-
refetchOnReconnect: false,
169-
}
170-
);
171-
172-
const timePeriods = useQuery(
173-
[`timePeriods`],
174-
() =>
163+
refetchOnMount: false,
164+
refetchOnWindowFocus: false,
165+
refetchOnReconnect: false,
166+
});
167+
168+
const timePeriods = useQuery({
169+
queryKey: [`timePeriods`],
170+
queryFn: () =>
175171
GraphQL(
176172
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
177173
ANALYTICS_TIME_PERIODS
178174
),
179-
{
180-
refetchOnMount: false,
181-
refetchOnWindowFocus: false,
182-
refetchOnReconnect: false,
183-
}
184-
);
185-
186-
const indicatorsData = useQuery(
187-
[`indicators_${indicator}`],
188-
() =>
175+
refetchOnMount: false,
176+
refetchOnWindowFocus: false,
177+
refetchOnReconnect: false,
178+
});
179+
180+
const indicatorsData = useQuery({
181+
queryKey: [`indicators_${indicator}`],
182+
queryFn: () =>
189183
GraphQL(
190184
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
191185
ANALYTICS_INDICATORS,
192186
{
193187
indcFilter: { slug: indicator },
194188
}
195189
),
196-
{
197-
enabled: Boolean(view === 'map'),
198-
refetchOnMount: false,
199-
refetchOnWindowFocus: false,
200-
refetchOnReconnect: false,
201-
}
202-
);
203-
204-
const tableData = useQuery(
205-
[`table_data_${currentSelectedState.code}_${indicator}_${districtCode}`],
206-
() =>
190+
enabled: Boolean(view === 'map'),
191+
refetchOnMount: false,
192+
refetchOnWindowFocus: false,
193+
refetchOnReconnect: false,
194+
});
195+
196+
const tableData = useQuery({
197+
queryKey: [
198+
`table_data_${currentSelectedState.code}_${indicator}_${districtCode}`,
199+
],
200+
queryFn: () =>
207201
GraphQL(
208202
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
209203
ANALYTICS_TABLE_DATA,
@@ -221,13 +215,11 @@ export function AnalyticsMainLayout() {
221215
},
222216
}
223217
),
224-
{
225-
enabled: Boolean(view === 'table'),
226-
refetchOnMount: false,
227-
refetchOnWindowFocus: false,
228-
refetchOnReconnect: false,
229-
}
230-
);
218+
enabled: Boolean(view === 'table'),
219+
refetchOnMount: false,
220+
refetchOnWindowFocus: false,
221+
refetchOnReconnect: false,
222+
});
231223

232224
const [filteredTableData, setFilteredTableData] = useState(
233225
tableData.data?.tableData
@@ -438,9 +430,11 @@ export function OutputWindowComponent({ currentState, time_period }: any) {
438430
? ANALYTICS_DISTRICT_DATA
439431
: ANALYTICS_REVENUE_TABLE_DATA;
440432

441-
const sidePaneData: any = useQuery(
442-
[`sidePaneData_${indicator}_${region}_${boundary}_${time_period}`],
443-
() =>
433+
const sidePaneData: any = useQuery({
434+
queryKey: [
435+
`sidePaneData_${indicator}_${region}_${boundary}_${time_period}`,
436+
],
437+
queryFn: () =>
444438
GraphQL(
445439
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
446440
sidePaneQuery,
@@ -455,29 +449,25 @@ export function OutputWindowComponent({ currentState, time_period }: any) {
455449
},
456450
}
457451
),
458-
{
459-
refetchOnMount: false,
460-
refetchOnWindowFocus: false,
461-
refetchOnReconnect: false,
462-
}
463-
);
464-
465-
const indicatorDescriptions: any = useQuery(
466-
[`indicators_${indicator}`],
467-
() =>
452+
refetchOnMount: false,
453+
refetchOnWindowFocus: false,
454+
refetchOnReconnect: false,
455+
});
456+
457+
const indicatorDescriptions: any = useQuery({
458+
queryKey: [`indicators_${indicator}`],
459+
queryFn: () =>
468460
GraphQL(
469461
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
470462
ANALYTICS_INDICATORS,
471463
{
472464
indcFilter: { slug: indicator },
473465
}
474466
),
475-
{
476-
refetchOnMount: false,
477-
refetchOnWindowFocus: false,
478-
refetchOnReconnect: false,
479-
}
480-
);
467+
refetchOnMount: false,
468+
refetchOnWindowFocus: false,
469+
refetchOnReconnect: false,
470+
});
481471

482472
return (
483473
<>

‎app/[locale]/[state]/analytics/components/chart-view.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,22 +99,20 @@ export const ChartView = ({
9999
},
100100
];
101101

102-
const indicatorsQuery = useQuery(
103-
[`indicatorsByCategory_${currentSelectedState.code}`],
104-
() =>
102+
const indicatorsQuery = useQuery({
103+
queryKey: [`indicatorsByCategory_${currentSelectedState.code}`],
104+
queryFn: () =>
105105
GraphQL(
106106
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
107107
ANALYTICS_INDICATORS_BY_CATEGORY,
108108
{
109109
stateCode: currentSelectedState?.code,
110110
}
111111
),
112-
{
113-
refetchOnMount: false,
114-
refetchOnWindowFocus: false,
115-
refetchOnReconnect: false,
116-
}
117-
);
112+
refetchOnMount: false,
113+
refetchOnWindowFocus: false,
114+
refetchOnReconnect: false,
115+
});
118116

119117
useEffect(() => {
120118
setLoading(true);
@@ -168,6 +166,9 @@ export const ChartView = ({
168166
// next: {
169167
// tags: ['chart-data'],
170168
// }
169+
// -----------
170+
171+
// cache: 'no-store', // Prevent caching for dynamic data
171172
}
172173
)
173174
.then((response) => response.json())

‎app/[locale]/[state]/analytics/components/factor-list.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,22 +62,20 @@ export function FactorList({ currentState }: any) {
6262

6363
const [downloadReportLoading, setDownloadReportLoading] = useState(false);
6464

65-
const indicatorsQuery = useQuery(
66-
[`indicatorsByCategory_${currentState.code}`],
67-
() =>
65+
const indicatorsQuery = useQuery({
66+
queryKey: [`indicatorsByCategory_${currentState.code}`],
67+
queryFn: () =>
6868
GraphQL(
6969
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
7070
ANALYTICS_INDICATORS_BY_CATEGORY,
7171
{
7272
stateCode: currentState?.code,
7373
}
7474
),
75-
{
76-
refetchOnMount: false,
77-
refetchOnWindowFocus: false,
78-
refetchOnReconnect: false,
79-
}
80-
);
75+
refetchOnMount: false,
76+
refetchOnWindowFocus: false,
77+
refetchOnReconnect: false,
78+
});
8179

8280
const indicatorNodes = indicatorsQuery?.data?.indicatorsByCategory;
8381

0 commit comments

Comments
 (0)