Skip to content

Commit c06b63c

Browse files
ChinemeremChigboChinemeremChigbo
authored
Hide Accordion when Empty (#140)
1 parent fe4486b commit c06b63c

File tree

4 files changed

+39
-85
lines changed

4 files changed

+39
-85
lines changed

‎src/components/calendar/sidebar/ArchivedAccordion.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,19 @@ export default function ArchivedAccordion({
3232
setLocationFilter,
3333
}: ArchivedAccordionProps) {
3434
const theme = useTheme();
35-
const showToast = useCustomToast();
36-
const showToastRef = useRef(showToast);
35+
const toast = useCustomToast();
36+
const toastRef = useRef(toast);
3737

3838
const [isOpen, setIsOpen] = useState(false);
3939
const [subjects, setSubjects] = useState<Item[]>([]);
40-
const [selectedSubjectIds, setSelectedSubjectIds] = useState<number[]>([]);
4140
const [locations, setLocations] = useState<Item[]>([]);
41+
const [selectedSubjectIds, setSelectedSubjectIds] = useState<number[]>([]);
4242
const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
43+
const [loaded, setLoaded] = useState(false);
4344

4445
useEffect(() => {
45-
async function fetchSubjects() {
46+
setLoaded(false);
47+
async function fetchArchivedData() {
4648
try {
4749
const response = await fetch('/api/filter/subjects?archived=true');
4850
if (!response.ok) {
@@ -55,7 +57,7 @@ export default function ArchivedAccordion({
5557
errorMessage += response.statusText || 'Unknown error';
5658
}
5759
console.error(errorMessage);
58-
showToastRef.current({ description: errorMessage, status: 'error' });
60+
toastRef.current({ description: errorMessage, status: 'error' });
5961
return;
6062
}
6163
const data = await response.json();
@@ -66,20 +68,15 @@ export default function ArchivedAccordion({
6668
color: subject.colorGroup.colorCodes[1],
6769
}))
6870
);
69-
} catch (error: any) {
70-
const errorMessage = error?.message
71-
? `Failed to fetch subjects: ${error.message}`
71+
} catch (err: any) {
72+
const errorMessage = err?.message
73+
? `Failed to fetch subjects: ${err.message}`
7274
: 'Failed to fetch subjects.';
73-
console.error(errorMessage, error);
74-
showToastRef.current({ description: errorMessage, status: 'error' });
75+
console.error(errorMessage, err);
76+
toastRef.current({ description: errorMessage, status: 'error' });
77+
return;
7578
}
76-
}
7779

78-
fetchSubjects();
79-
}, []);
80-
81-
useEffect(() => {
82-
async function fetchLocations() {
8380
try {
8481
const response = await fetch('/api/filter/locations?archived=true');
8582
if (!response.ok) {
@@ -92,7 +89,7 @@ export default function ArchivedAccordion({
9289
errorMessage += response.statusText || 'Unknown error';
9390
}
9491
console.error(errorMessage);
95-
showToastRef.current({ description: errorMessage, status: 'error' });
92+
toastRef.current({ description: errorMessage, status: 'error' });
9693
return;
9794
}
9895
const data = await response.json();
@@ -103,16 +100,19 @@ export default function ArchivedAccordion({
103100
color: theme.colors.primaryBlue[300],
104101
}))
105102
);
106-
} catch (error: any) {
107-
const errorMessage = error?.message
108-
? `Failed to fetch locations: ${error.message}`
103+
} catch (err: any) {
104+
const errorMessage = err?.message
105+
? `Failed to fetch locations: ${err.message}`
109106
: 'Failed to fetch locations.';
110-
console.error(errorMessage, error);
111-
showToastRef.current({ description: errorMessage, status: 'error' });
107+
console.error(errorMessage, err);
108+
toastRef.current({ description: errorMessage, status: 'error' });
109+
return;
112110
}
113111
}
114112

115-
fetchLocations();
113+
fetchArchivedData().finally(() => {
114+
setLoaded(true);
115+
});
116116
}, [theme.colors.primaryBlue]);
117117

118118
const toggleSubject = useCallback(
@@ -141,6 +141,10 @@ export default function ArchivedAccordion({
141141
[setLocationFilter]
142142
);
143143

144+
if (loaded && subjects.length === 0 && locations.length === 0) {
145+
return null;
146+
}
147+
144148
const bgColor = theme.colors.white;
145149

146150
const renderItem = (

‎src/components/calendar/sidebar/CalendarSidebar.tsx‎

Lines changed: 4 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { AddIcon } from '@chakra-ui/icons';
22
import { Box, Button, Flex, useTheme } from '@chakra-ui/react';
33
import { useCallback, useEffect, useRef, useState } from 'react';
4-
import { useCustomToast } from '../../CustomToast';
54
import { TacetLogo } from '../../TacetLogo';
65
import MiniCalendar from '../MiniCalendar';
76
import AbsenceStatusAccordion from './AbsenceStatusAccordion';
@@ -28,8 +27,6 @@ const CalendarSidebar: React.FC<CalendarSidebarProps> = ({
2827

2928
const scrollRef = useRef<HTMLDivElement>(null);
3029
const [showDivider, setShowDivider] = useState(false);
31-
const [archivedSubjects, setArchivedSubjects] = useState([]);
32-
const [archivedLocations, setArchivedLocations] = useState([]);
3330

3431
useEffect(() => {
3532
const el = scrollRef.current;
@@ -94,59 +91,6 @@ const CalendarSidebar: React.FC<CalendarSidebarProps> = ({
9491
[setSearchQuery]
9592
);
9693

97-
const showToast = useCustomToast();
98-
const showToastRef = useRef(showToast);
99-
100-
useEffect(() => {
101-
async function fetchArchivedData() {
102-
try {
103-
const subjectRes = await fetch('/api/filter/subjects?archived=true');
104-
if (!subjectRes.ok) {
105-
let errorMessage = 'Failed to fetch archived subjects: ';
106-
try {
107-
const errorData = await subjectRes.json();
108-
errorMessage +=
109-
errorData?.error || subjectRes.statusText || 'Unknown error';
110-
} catch {
111-
errorMessage += subjectRes.statusText || 'Unknown error';
112-
}
113-
console.error(errorMessage);
114-
showToastRef.current({ description: errorMessage, status: 'error' });
115-
return;
116-
}
117-
118-
const locationRes = await fetch('/api/filter/locations?archived=true');
119-
if (!locationRes.ok) {
120-
let errorMessage = 'Failed to fetch archived locations: ';
121-
try {
122-
const errorData = await locationRes.json();
123-
errorMessage +=
124-
errorData?.error || locationRes.statusText || 'Unknown error';
125-
} catch {
126-
errorMessage += locationRes.statusText || 'Unknown error';
127-
}
128-
console.error(errorMessage);
129-
showToastRef.current({ description: errorMessage, status: 'error' });
130-
return;
131-
}
132-
133-
const subjectsData = await subjectRes.json();
134-
const locationsData = await locationRes.json();
135-
136-
setArchivedSubjects(subjectsData.subjects);
137-
setArchivedLocations(locationsData.locations);
138-
} catch (error: any) {
139-
const errorMessage = error?.message
140-
? `Failed to fetch archived data: ${error.message}`
141-
: 'Failed to fetch archived data.';
142-
console.error(errorMessage, error);
143-
showToastRef.current({ description: errorMessage, status: 'error' });
144-
}
145-
}
146-
147-
fetchArchivedData();
148-
}, []);
149-
15094
return (
15195
<Flex
15296
minWidth="265px"
@@ -202,12 +146,10 @@ const CalendarSidebar: React.FC<CalendarSidebarProps> = ({
202146
<SubjectAccordion setFilter={setActiveSubjectFilter} />
203147
<LocationAccordion setFilter={setActiveLocationFilter} />
204148

205-
{(archivedSubjects.length > 0 || archivedLocations.length > 0) && (
206-
<ArchivedAccordion
207-
setSubjectFilter={setArchivedSubjectFilter}
208-
setLocationFilter={setArchivedLocationFilter}
209-
/>
210-
)}
149+
<ArchivedAccordion
150+
setSubjectFilter={setArchivedSubjectFilter}
151+
setLocationFilter={setArchivedLocationFilter}
152+
/>
211153
</Box>
212154
</Box>
213155
</Flex>

‎src/components/calendar/sidebar/LocationAccordion.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ export default function LocationAccordion({
8888

8989
const toggleOpen = () => setIsOpen((prev) => !prev);
9090

91+
if (locations.length === 0) {
92+
return null;
93+
}
94+
9195
const accordionItems: AccordionItem[] = locations.map((location) => ({
9296
id: location.id,
9397
name: location.name,

‎src/components/calendar/sidebar/SubjectAccordion.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ export default function SubjectAccordion({ setFilter }: SubjectAccordionProps) {
8080

8181
const toggleOpen = () => setIsOpen((prev) => !prev);
8282

83+
if (subjects.length === 0) {
84+
return null;
85+
}
86+
8387
const accordionItems: AccordionItem[] = subjects.map((subject) => ({
8488
id: subject.id,
8589
name: subject.name,

0 commit comments

Comments
 (0)