Skip to content

Commit f3e20d8

Browse files
RChandler234RChandler234
committed
#2136 - redisperse a lot of code
1 parent a61c560 commit f3e20d8

7 files changed

Lines changed: 95 additions & 127 deletions

File tree

‎src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/AvailabilityScheduleView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ interface AvailabilityScheduleViewProps {
1717
existingMeetingData: Map<number, string>;
1818
setCurrentAvailableUsers: (val: User[]) => void;
1919
setCurrentUnavailableUsers: (val: User[]) => void;
20-
dateRange: string;
20+
dateRangeTitle: string;
2121
}
2222

2323
const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
@@ -27,7 +27,7 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
2727
existingMeetingData,
2828
setCurrentAvailableUsers,
2929
setCurrentUnavailableUsers,
30-
dateRange
30+
dateRangeTitle
3131
}) => {
3232
const totalUsers = usersToAvailabilities.size;
3333

@@ -63,7 +63,7 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
6363

6464
return (
6565
<Grid container>
66-
<TimeSlot backgroundColor={HeatmapColors[0]} text={dateRange} />
66+
<TimeSlot backgroundColor={HeatmapColors[0]} text={dateRangeTitle} />
6767
{EnumToArray(DAY_NAMES).map((day) => (
6868
<TimeSlot backgroundColor={HeatmapColors[0]} text={day} fontSize={'1em'} />
6969
))}

‎src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/AvailabilityView.tsx‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,50 @@ import { DesignReview, User } from 'shared';
33
import { useState } from 'react';
44
import AvailabilityScheduleView from './AvailabilityScheduleView';
55
import UserAvailabilites from './UserAvailabilitesView';
6+
import { getWeekDateRange } from '../../../utils/design-review.utils';
7+
import { dateRangePipe } from '../../../utils/pipes';
68

79
interface AvailabilityViewProps {
810
usersToAvailabilities: Map<User, number[]>;
9-
existingMeetingData: Map<number, string>;
10-
designReviewName: string;
11-
selectedStartDateTime: Date | null;
12-
conflictingDesignReviews: DesignReview[];
13-
dateRange: string;
11+
designReview: DesignReview;
12+
selectedDate: Date;
13+
allDesignReviews: DesignReview[];
1414
}
1515

1616
const AvailabilityView: React.FC<AvailabilityViewProps> = ({
1717
usersToAvailabilities,
18-
existingMeetingData,
19-
designReviewName,
20-
selectedStartDateTime,
21-
conflictingDesignReviews,
22-
dateRange
18+
designReview,
19+
selectedDate,
20+
allDesignReviews
2321
}) => {
2422
const availableUsers = new Map<number, User[]>();
2523
const unavailableUsers = new Map<number, User[]>();
24+
const existingMeetingData = new Map<number, string>();
25+
2626
const [currentAvailableUsers, setCurrentAvailableUsers] = useState<User[]>([]);
2727
const [currentUnavailableUsers, setCurrentUnavailableUsers] = useState<User[]>([]);
28+
const [startDateRange, endDateRange] = getWeekDateRange(selectedDate);
29+
30+
const currentWeekDesignReviews = allDesignReviews.filter((currDr) => {
31+
const drDate = new Date(currDr.dateScheduled).getTime();
32+
const startRange = startDateRange.getTime();
33+
const endRange = endDateRange.getTime();
34+
35+
return drDate >= startRange && drDate <= endRange;
36+
});
37+
38+
const conflictingDesignReviews = allDesignReviews.filter(
39+
(currDr) =>
40+
currDr.dateScheduled.toLocaleDateString() === selectedDate.toLocaleDateString() &&
41+
allDesignReviews.some((designReview) =>
42+
designReview.meetingTimes.some((time) => currDr.meetingTimes.includes(time))
43+
) &&
44+
currDr.designReviewId !== designReview.designReviewId
45+
);
46+
47+
currentWeekDesignReviews.forEach((designReview) =>
48+
designReview.meetingTimes.forEach((meetingTime) => existingMeetingData.set(meetingTime, 'build'))
49+
);
2850

2951
return (
3052
<Grid container>
@@ -36,16 +58,16 @@ const AvailabilityView: React.FC<AvailabilityViewProps> = ({
3658
existingMeetingData={existingMeetingData}
3759
setCurrentAvailableUsers={setCurrentAvailableUsers}
3860
setCurrentUnavailableUsers={setCurrentUnavailableUsers}
39-
dateRange={dateRange}
61+
dateRangeTitle={dateRangePipe(startDateRange, endDateRange)}
4062
/>
4163
</Grid>
4264
<Grid item xs={3}>
4365
<UserAvailabilites
4466
currentAvailableUsers={currentAvailableUsers}
4567
currentUnavailableUsers={currentUnavailableUsers}
4668
usersToAvailabilities={usersToAvailabilities}
47-
designReviewName={designReviewName}
48-
selectedStartDateTime={selectedStartDateTime}
69+
designReview={designReview}
70+
selectedDate={selectedDate}
4971
conflictingDesignReviews={conflictingDesignReviews}
5072
/>
5173
</Grid>

‎src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx‎

Lines changed: 21 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import { Autocomplete, Box, Checkbox, Grid, TextField, useTheme } from '@mui/material';
22
import PageLayout from '../../../components/PageLayout';
3-
import { getDateRange } from '../../../utils/design-review.utils';
43
import AvailabilityView from './AvailabilityView';
54
import { useAllUsers } from '../../../hooks/users.hooks';
65
import LoadingIndicator from '../../../components/LoadingIndicator';
76
import ErrorPage from '../../ErrorPage';
87
import { userToAutocompleteOption } from '../../../utils/teams.utils';
9-
import { useEffect, useMemo, useState } from 'react';
8+
import { useState } from 'react';
109
import CheckBoxIcon from '@mui/icons-material/CheckBox';
1110
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
1211
import { DatePicker, TimePicker } from '@mui/x-date-pickers';
1312
import { DesignReview, User, UserWithScheduleSettings } from 'shared';
14-
import { wbsPipe } from 'shared';
1513
import { useAllDesignReviews } from '../../../hooks/design-reviews.hooks';
14+
import { designReviewNamePipe } from '../../../utils/pipes';
1615

1716
interface DesignReviewDetailPageProps {
1817
designReview: DesignReview;
1918
}
2019

2120
const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designReview }) => {
2221
const theme = useTheme();
22+
const [requiredUsers, setRequiredUsers] = useState([].map(userToAutocompleteOption));
23+
const [optionalUsers, setOptionalUsers] = useState([].map(userToAutocompleteOption));
24+
const [date, setDate] = useState(new Date(`${new Date().toLocaleDateString()} 12:00:00`));
25+
26+
const usersToAvailabilities = new Map<User, number[]>();
2327

2428
const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: allUsers } = useAllUsers();
2529
const {
@@ -29,75 +33,6 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
2933
isLoading: allDesignReviewsIsLoading
3034
} = useAllDesignReviews();
3135

32-
const [requiredUsers, setRequiredUsers] = useState([].map(userToAutocompleteOption));
33-
const [optionalUsers, setOptionalUsers] = useState([].map(userToAutocompleteOption));
34-
const [selectedStartDateTime, setselectedStartDateTime] = useState(
35-
new Date(`${new Date().toLocaleDateString()} 12:00:00`)
36-
);
37-
const [selectedEndDateTime, setselectedEndDateTime] = useState(new Date(`${new Date().toLocaleDateString()} 12:00:00`));
38-
const [usersToAvailabilities, setUsersToAvailabilities] = useState<Map<User, number[]>>(new Map());
39-
const [existingMeetingData, setexistingMeetingData] = useState<Map<number, string>>(new Map());
40-
const [dateRange, setDateRange] = useState('');
41-
const designReviewName = `${wbsPipe(designReview.wbsNum)} - ${designReview.wbsName}`;
42-
const [startDateRange, endDateRange] = getDateRange(selectedStartDateTime);
43-
44-
const conflictingDesignReviews = useMemo(
45-
() =>
46-
allDesignReviews
47-
? allDesignReviews.filter(
48-
(currDr) =>
49-
currDr.dateScheduled.toLocaleDateString() === selectedStartDateTime.toLocaleDateString() &&
50-
allDesignReviews.some((designReview) =>
51-
designReview.meetingTimes.some((time) => currDr.meetingTimes.includes(time))
52-
) &&
53-
currDr.designReviewId !== designReview.designReviewId
54-
)
55-
: [],
56-
[allDesignReviews, selectedStartDateTime, designReview]
57-
);
58-
59-
// Ensures the existing meeting data information only shows up on the current date range
60-
const currentWeekDesignReviews = useMemo(() => {
61-
return allDesignReviews
62-
? allDesignReviews.filter((currDr) => {
63-
const drDate = new Date(currDr.dateScheduled).getTime();
64-
const startRange = startDateRange.getTime();
65-
const endRange = endDateRange.getTime();
66-
67-
return drDate >= startRange && drDate <= endRange;
68-
})
69-
: [];
70-
}, [allDesignReviews, startDateRange, endDateRange]);
71-
72-
// Sets the existing meeting data for the icons that get displayed on the calander
73-
useEffect(() => {
74-
if (currentWeekDesignReviews) {
75-
const newExistingMeetingData = new Map<number, string>();
76-
currentWeekDesignReviews?.forEach((designReview) =>
77-
designReview.meetingTimes.forEach((meetingTime) => newExistingMeetingData.set(meetingTime, 'build'))
78-
);
79-
setexistingMeetingData(newExistingMeetingData);
80-
}
81-
}, [currentWeekDesignReviews]);
82-
83-
useEffect(() => {
84-
if (designReview && designReview.confirmedMembers.length > 0) {
85-
const newUsersToAvailabilities = new Map<User, number[]>();
86-
designReview.confirmedMembers.forEach((user: UserWithScheduleSettings) => {
87-
newUsersToAvailabilities.set(user, user.scheduleSettings?.availability ?? []);
88-
});
89-
setUsersToAvailabilities(newUsersToAvailabilities);
90-
}
91-
}, [designReview]);
92-
93-
useEffect(() => {
94-
setDateRange(
95-
`${(startDateRange.getMonth() + 1).toString()}/${startDateRange.getDate().toString()} - ${(
96-
endDateRange.getMonth() + 1
97-
).toString()}/${endDateRange.getDate().toString()}`
98-
);
99-
}, [startDateRange, endDateRange]);
100-
10136
if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
10237
if (allDesignReviewsIsError) return <ErrorPage message={allDesignReviewsError?.message} />;
10338
if (allUsersIsLoading || !allUsers || allDesignReviewsIsLoading || !allDesignReviews) return <LoadingIndicator />;
@@ -106,19 +41,15 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
10641

10742
const handleDateChange = (newDate: Date | null) => {
10843
if (newDate) {
109-
const updatedDateTime = new Date(selectedStartDateTime);
44+
const updatedDateTime = new Date();
11045
updatedDateTime.setFullYear(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
111-
setselectedStartDateTime(updatedDateTime);
46+
setDate(updatedDateTime);
11247
}
11348
};
11449

115-
const handleTimeChange = (newTime: Date | null, isStartTime: boolean) => {
116-
if (newTime) {
117-
const updatedDateTime = new Date(selectedStartDateTime);
118-
updatedDateTime.setHours(newTime.getHours(), newTime.getMinutes());
119-
isStartTime ? setselectedStartDateTime(updatedDateTime) : setselectedEndDateTime(updatedDateTime);
120-
}
121-
};
50+
designReview.confirmedMembers.forEach((user: UserWithScheduleSettings) => {
51+
usersToAvailabilities.set(user, user.scheduleSettings?.availability ?? []);
52+
});
12253

12354
return (
12455
<PageLayout title="Scheduling">
@@ -148,13 +79,13 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
14879
width: '100%'
14980
}}
15081
>
151-
{designReviewName}
82+
{designReviewNamePipe(designReview)}
15283
</Box>
15384
</Grid>
15485
<Grid item xs={2}>
15586
<DatePicker
15687
label={'Date'}
157-
value={selectedStartDateTime}
88+
value={setDate}
15889
onChange={handleDateChange}
15990
renderInput={(params) => <TextField {...params} />}
16091
/>
@@ -163,17 +94,17 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
16394
<TimePicker
16495
label={'Start Time'}
16596
views={['hours']}
166-
value={selectedStartDateTime}
167-
onChange={(newTime) => handleTimeChange(newTime, true)}
97+
value={date}
98+
onChange={(newTime) => {}}
16899
renderInput={(params) => <TextField {...params} />}
169100
/>
170101
</Grid>
171102
<Grid item xs={2}>
172103
<TimePicker
173104
label={'End Time'}
174105
views={['hours']}
175-
value={selectedEndDateTime}
176-
onChange={(newTime) => handleTimeChange(newTime, false)}
106+
value={date}
107+
onChange={(newTime) => {}}
177108
renderInput={(params) => <TextField {...params} />}
178109
/>
179110
</Grid>
@@ -276,11 +207,9 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
276207
</Grid>
277208
<AvailabilityView
278209
usersToAvailabilities={usersToAvailabilities}
279-
existingMeetingData={existingMeetingData}
280-
designReviewName={designReviewName}
281-
selectedStartDateTime={selectedStartDateTime}
282-
conflictingDesignReviews={conflictingDesignReviews}
283-
dateRange={dateRange}
210+
designReview={designReview}
211+
selectedDate={date}
212+
allDesignReviews={allDesignReviews}
284213
/>
285214
</PageLayout>
286215
);

‎src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/FinalizeDesignReviewDetailsModal.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@ import { Box, Grid, TextField, ToggleButton, ToggleButtonGroup, Typography } fro
22
import NERModal from '../../../components/NERModal';
33
import { useState } from 'react';
44
import { getHourFromDate } from '../../../utils/design-review.utils';
5+
import { DesignReview } from 'shared';
6+
import { designReviewNamePipe } from '../../../utils/pipes';
57

68
interface FinalizeDesignReviewProps {
79
open: boolean;
810
setOpen: (val: boolean) => void;
911
onSubmit?: () => void;
10-
designReviewName: string;
11-
selectedStartDateTime: Date | null;
12+
designReview: DesignReview;
13+
selectedDate: Date;
1214
designReviewConflicts?: String[];
1315
}
1416

1517
const FinalizeDesignReviewDetailsModal = ({
1618
open,
1719
setOpen,
1820
onSubmit,
19-
designReviewName,
20-
selectedStartDateTime,
21+
designReview,
22+
selectedDate,
2123
designReviewConflicts
2224
}: FinalizeDesignReviewProps) => {
2325
const handleClose = () => {
@@ -28,13 +30,8 @@ const FinalizeDesignReviewDetailsModal = ({
2830
const [location, setLocation] = useState('');
2931
const [zoomLink, setZoomLink] = useState('');
3032

31-
// Need to do this so it can be called in the title
32-
if (!selectedStartDateTime) {
33-
return null;
34-
}
35-
36-
const title = `${designReviewName} on ${selectedStartDateTime?.toDateString()} at ${getHourFromDate(
37-
selectedStartDateTime
33+
const title = `${designReviewNamePipe(designReview)} on ${selectedDate.toDateString()} at ${getHourFromDate(
34+
selectedDate
3835
)}`;
3936

4037
const handleMeetingTypeChange = (_event: any, newMeetingType: string[]) => {

‎src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/UserAvailabilitesView.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ interface UserAvailabilitiesProps {
1313
currentAvailableUsers: User[];
1414
currentUnavailableUsers: User[];
1515
usersToAvailabilities: Map<User, number[]>;
16-
designReviewName: string;
17-
selectedStartDateTime: Date | null;
16+
designReview: DesignReview;
17+
selectedDate: Date;
1818
conflictingDesignReviews: DesignReview[];
1919
}
2020

2121
const UserAvailabilites: React.FC<UserAvailabilitiesProps> = ({
2222
currentAvailableUsers,
2323
currentUnavailableUsers,
2424
usersToAvailabilities,
25-
designReviewName,
26-
selectedStartDateTime,
25+
designReview,
26+
selectedDate,
2727
conflictingDesignReviews
2828
}) => {
2929
const theme = useTheme();
@@ -118,8 +118,8 @@ const UserAvailabilites: React.FC<UserAvailabilitiesProps> = ({
118118
open={showFinalizeDesignReviewDetailsModal}
119119
setOpen={setShowFinalizeDesignReviewDetailsModal}
120120
designReviewConflicts={designReviewConflicts}
121-
designReviewName={designReviewName}
122-
selectedStartDateTime={selectedStartDateTime}
121+
designReview={designReview}
122+
selectedDate={selectedDate}
123123
/>
124124
</Box>
125125
</Box>

‎src/frontend/src/utils/design-review.utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const getStartOfWeek = (currentDate: Date) => {
8080
return startOfWeek;
8181
};
8282

83-
export const getDateRange = (selectedDate: Date) => {
83+
export const getWeekDateRange = (selectedDate: Date) => {
8484
const startDate = getStartOfWeek(selectedDate);
8585
const endDate = new Date(startDate);
8686
endDate.setDate(startDate.getDate() + 6);

0 commit comments

Comments
 (0)