Skip to content

refactor(admin-dashboard): replace JSX with MUI components #2045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eunicode merged 1 commit into from
Nov 26, 2025
Merged

refactor(admin-dashboard): replace JSX with MUI components #2045

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 44 additions & 44 deletions client/src/components/admin/dashboard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

import UpcomingEvent from '../../presentational/upcomingEvent';
import EventOverview from '../eventOverview';
import DonutChartContainer from '../donutChartContainer';
Expand All @@ -8,7 +12,7 @@ import Tab from '../../../common/tabs/tab';
import LocationTableReport from '../reports';
import '../../../sass/Dashboard.scss';
import './index.scss';
import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend} from '../../../utils/globalSettings';
import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../../../utils/globalSettings';

const AdminDashboard = () => {
const defaultChartType = 'All Events';
Expand All @@ -30,31 +34,23 @@ const AdminDashboard = () => {
const [processedCheckins, setCheckins] = useState(null);

// Volunteers SignedIn By Event Type
const [
totalVolunteersByEventType,
setVolunteersSignedInByEventType,
] = useState({});
const [
totalVolunteerHoursByEventType,
setVolunteeredHoursByEventType,
] = useState({});
const [totalVolunteersByEventType, setVolunteersSignedInByEventType] =
useState({});
const [totalVolunteerHoursByEventType, setVolunteeredHoursByEventType] =
useState({});
const [totalVolunteerAvgHoursByEventType, setAvgHoursByEventType] = useState(
{}
{},
);

// Volunteers SignedIn By HackNight Property
const [
totalVolunteersByHackNightProp,
setVolunteersSignedInByHackNightProp,
] = useState({});
const [totalVolunteersByHackNightProp, setVolunteersSignedInByHackNightProp] =
useState({});
const [
totalVolunteerHoursByHackNightProp,
setVolunteeredHoursByHackNightProp,
] = useState({});
const [
totalVolunteerAvgHoursByHackNightProp,
setAvgHoursByHackNightProp,
] = useState({});
const [totalVolunteerAvgHoursByHackNightProp, setAvgHoursByHackNightProp] =
useState({});

// Volunteers To Chart
const [totalVolunteers, setVolunteersToChart] = useState({});
Expand All @@ -72,7 +68,7 @@ const AdminDashboard = () => {
'x-customrequired-header': headerToSend,
},
},
signal
signal,
Copy link
Member

@akibrhast akibrhast Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i assume most people are using vscode ... would implement a .prettierconfig to remove these kind of unwanted or sudden addition of commas an spaces in pull requests.

would help those who are reviewing the pull request, to review faster with less strain

Copy link
Member

@geolunalg geolunalg Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akibrhast I think there is already an implementation of some sort of linting. I would also be hesitant to assume anyone is using a particular IDE. I think this can be discussed during our team meeting.

);
const events = await eventsRes.json();
const checkinsRes = await fetch(
Expand All @@ -82,7 +78,7 @@ const AdminDashboard = () => {
'x-customrequired-header': headerToSend,
},
},
signal
signal,
);
const checkins = await checkinsRes.json();
processData(events, checkins);
Expand Down Expand Up @@ -132,7 +128,7 @@ const AdminDashboard = () => {
const capitalize = (str, lower = false) =>
(lower ? str.toLowerCase() : str).replace(
/(?:^|\s|["'([{])+\S/g,
(match) => match.toUpperCase()
(match) => match.toUpperCase(),
);
let type = capitalize(event[propName], true);
event[propName] = type;
Expand Down Expand Up @@ -168,15 +164,15 @@ const AdminDashboard = () => {
events,
checkins,
uniqueEventTypes,
'eventType'
'eventType',
);
setVolunteersSignedInByEventType(totalVolunteersByEventType);

let totalVolunteersByHackNightProp = extractVolunteersSignedInByProperty(
events,
checkins,
hackNightUniqueLocations,
'hacknight'
'hacknight',
);
setVolunteersSignedInByHackNightProp(totalVolunteersByHackNightProp);

Expand All @@ -185,30 +181,30 @@ const AdminDashboard = () => {
events,
checkins,
uniqueEventTypes,
'eventType'
'eventType',
);
setVolunteeredHoursByEventType(totalVolunteerHoursByEventType);

let totalVolunteerHoursByHackNightProp = findTotalVolunteerHours(
events,
checkins,
hackNightUniqueLocations,
'hacknight'
'hacknight',
);
setVolunteeredHoursByHackNightProp(totalVolunteerHoursByHackNightProp);

// Data for 3 chart 'total average hours'
let totalVolunteerAvgHoursByEventType = findAverageVolunteerHours(
totalVolunteersByEventType,
totalVolunteerHoursByEventType,
uniqueEventTypes
uniqueEventTypes,
);
setAvgHoursByEventType(totalVolunteerAvgHoursByEventType);

let totalVolunteerAvgHoursByHackNightProp = findAverageVolunteerHours(
totalVolunteersByHackNightProp,
totalVolunteerHoursByHackNightProp,
hackNightUniqueLocations
hackNightUniqueLocations,
);
setAvgHoursByHackNightProp(totalVolunteerAvgHoursByHackNightProp);

Expand All @@ -222,7 +218,7 @@ const AdminDashboard = () => {
events,
checkins,
uniqueTypes,
propName
propName,
) {
let result = {};
let type;
Expand Down Expand Up @@ -277,7 +273,7 @@ const AdminDashboard = () => {
function findAverageVolunteerHours(
totalVolunteers,
totalVolunteerHours,
uniqueTypes
uniqueTypes,
) {
let result = {};
uniqueTypes.forEach((el) => (result[el] = parseInt('0')));
Expand Down Expand Up @@ -377,25 +373,29 @@ const AdminDashboard = () => {
return function cleanup() {
abortController.abort();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
<div className="flex-container">
<div className="dashboard admin-dashboard-wrap">
<div className="admin-header">
<h1>Stats by Location - Volunteer Hours</h1>
</div>
<Box className="flex-container">
<Box className="dashboard admin-dashboard-wrap">
<Box className="admin-header">
<Typography
variant="h1"
sx={{ fontFamily: '"Open Sans", sans-serif', marginBottom: '0' }}
>
Stats by Location - Volunteer Hours
</Typography>
</Box>

{!isLoading && nextEvent.length ? (
!isCheckInReady &&
!isCheckInReady && (
<div className="event-header">You have 1 upcoming event:</div>
) : (
<div className="event-header">Current event:</div>
)
}
) : (
<div className="event-header">Current event:</div>
)}

<div className="admin-upcoming-event">
<Box className="admin-upcoming-event">
{isLoading ? (
<Loading />
) : (
Expand All @@ -405,7 +405,7 @@ const AdminDashboard = () => {
setCheckInReady={setCheckInReady}
/>
)}
</div>
</Box>

<TabsContainer active={0}>
<Tab title="Table Report">
Expand Down Expand Up @@ -467,8 +467,8 @@ const AdminDashboard = () => {
)}
</Tab>
</TabsContainer>
</div>
</div>
</Box>
</Box>
);
};

Expand Down
Loading