Skip to content

Commit 189980c

Browse files
lhvymere-z
lhvy
and
mere-z
authored
Fix React runtime errors (#1046)
* Fix warnings and errors on landing and home pages Co-authored-by: Meredith Zhang <[email protected]> * Fix React warning on home page menus Co-authored-by: Meredith Zhang <[email protected]> * Address review comments --------- Co-authored-by: Meredith Zhang <[email protected]>
1 parent 074a984 commit 189980c

20 files changed

+145
-112
lines changed

‎client/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const App: React.FC = () => {
147147
setAssignedColors,
148148
} = useContext(CourseContext);
149149

150-
const decodedAssignedColors = useColorsDecoder(assignedColors);
150+
const decodedAssignedColors = useColorsDecoder(assignedColors, currentTheme);
151151
const { user, setUser, groupsSidebarCollapsed, setGroupsSidebarCollapsed } = useContext(UserContext);
152152

153153
setDropzoneRange(days.length, earliestStartTime, latestEndTime);

‎client/src/components/controls/ColorOptions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ const ColorOptions: FC<ColorOptionsProps> = ({
3434
onCustomColorSelect,
3535
}) => {
3636
// Get the current theme as from AppContext
37-
const { themeObject } = useContext(AppContext);
37+
const { themeObject, currentTheme } = useContext(AppContext);
3838

3939
const decodedColors = colors.map((color) => {
40-
const decodedColor = useColorDecoder(color);
40+
const decodedColor = useColorDecoder(color, currentTheme);
4141
return decodedColor;
4242
});
4343

@@ -46,7 +46,7 @@ const ColorOptions: FC<ColorOptionsProps> = ({
4646
{/* Default Theme Colors (1-4) */}
4747
<ListItem sx={{ display: 'flex', flexDirection: 'row', gap: 1.2 }} disablePadding>
4848
{colors.slice(0, maxDefaultColors).map((color, index) => (
49-
<ListItem disablePadding>
49+
<ListItem component="div" disablePadding key={color}>
5050
<StyledColorIconButton
5151
border={themeObject.palette.secondary.main}
5252
bgColor={decodedColors[index]}
@@ -60,7 +60,7 @@ const ColorOptions: FC<ColorOptionsProps> = ({
6060
{/* Default Theme Colors (5-7) */}
6161
<ListItem sx={{ display: 'flex', flexDirection: 'row', gap: 1.2 }} disablePadding>
6262
{colors.slice(maxDefaultColors, colors.length - 1).map((color, index) => (
63-
<ListItem disablePadding>
63+
<ListItem component="div" disablePadding key={color}>
6464
<StyledColorIconButton
6565
border={themeObject.palette.secondary.main}
6666
bgColor={decodedColors[index + maxDefaultColors]}
@@ -70,7 +70,7 @@ const ColorOptions: FC<ColorOptionsProps> = ({
7070
/>
7171
</ListItem>
7272
))}
73-
<ListItem disablePadding>
73+
<ListItem component="div" disablePadding>
7474
<StyledColorIconButton
7575
border={themeObject.palette.secondary.main}
7676
bgColor={themeObject.palette.secondary.dark}

‎client/src/components/controls/ColorPicker.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Box, Button, ButtonGroup, ListItem, Popover, TextField } from '@mui/material';
22
import { Colorful } from '@uiw/react-color';
3-
import { useEffect, useState } from 'react';
3+
import { useContext, useEffect, useState } from 'react';
44

55
import { colors } from '../../constants/timetable';
6+
import { AppContext } from '../../context/AppContext';
67
import { useColorDecoder } from '../../hooks/useColorDecoder';
78
import { ColorPickerProps } from '../../interfaces/PropTypes';
89
import { ColorIndicatorBox, StyledButtonContainer } from '../../styles/ControlStyles';
@@ -23,7 +24,8 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
2324

2425
const [showCustomColorPicker, setShowCustomColorPicker] = useState(false);
2526

26-
const decodedColor = useColorDecoder(color);
27+
const { currentTheme } = useContext(AppContext);
28+
const decodedColor = useColorDecoder(color, currentTheme);
2729
const [textFieldValue, setTextFieldValue] = useState(oklchToHex(decodedColor));
2830

2931
useEffect(() => {
@@ -32,7 +34,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
3234

3335
return (
3436
<Box m={1} display="flex" justifyContent="center" alignItems="center">
35-
<ColorIndicatorBox backgroundColor={useColorDecoder(color)} onClick={handleOpenColorPicker} />
37+
<ColorIndicatorBox backgroundColor={useColorDecoder(color, currentTheme)} onClick={handleOpenColorPicker} />
3638
<StyledButtonContainer>
3739
<ButtonGroup>
3840
<Button

‎client/src/components/controls/CourseSelect.tsx‎

Lines changed: 60 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { Autocomplete, Box, Button, Chip, InputAdornment, TextField, useMediaQuery, useTheme } from '@mui/material';
1111
import { styled } from '@mui/system';
1212
import Fuse from 'fuse.js';
13-
import React, { useContext, useEffect, useRef, useState } from 'react';
13+
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
1414
import { ListChildComponentProps, VariableSizeList } from 'react-window';
1515

1616
import { ThemeType } from '../../constants/theme';
@@ -327,6 +327,14 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
327327
setSelectedFaculty('');
328328
};
329329

330+
const keyOf = (x: { code: string; career: string }) => `${x.code}|${x.career}`;
331+
const mergedOptions = useMemo(() => {
332+
const map = new Map<string, CourseOverview>();
333+
options.forEach((x) => map.set(keyOf(x), x));
334+
selectedValue.forEach((x) => map.set(keyOf(x), x));
335+
return Array.from(map.values());
336+
}, [options, selectedValue]);
337+
330338
const shrinkLabel = inputValue.length > 0 || selectedValue.length > 0;
331339

332340
const OuterElementContext = React.createContext({});
@@ -413,7 +421,7 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
413421
disableListWrap
414422
noOptionsText="No Results"
415423
selectOnFocus={false}
416-
options={options}
424+
options={mergedOptions}
417425
value={selectedValue}
418426
onChange={onChange}
419427
inputValue={inputValue}
@@ -424,34 +432,38 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
424432
filterOptions={(o) => o}
425433
ListboxComponent={ListboxComponent}
426434
isOptionEqualToValue={(option, value) => option.code === value.code && option.career === value.career}
427-
renderOption={(props, option, { selected }) => (
428-
<li {...props}>
429-
<StyledOption>
430-
<StyledIcon>
431-
{selectedValue.find((course: CourseOverview) => course.code === option.code) ? (
432-
<CheckRounded />
433-
) : (
434-
<AddRounded />
435-
)}
436-
</StyledIcon>
437-
<span>{option.code}</span>
438-
<Weak>{!(isMedium || isTiny) && option.name}</Weak>
439-
<Career>{getCourseCareer(option.career)}</Career>
440-
<RightContainer>
441-
{option.online && (
442-
<StyledIconRight>
443-
<VideocamOutlined />
444-
</StyledIconRight>
445-
)}
446-
{option.inPerson && (
447-
<StyledIconRight>
448-
<PersonOutline />
449-
</StyledIconRight>
450-
)}
451-
</RightContainer>
452-
</StyledOption>
453-
</li>
454-
)}
435+
renderOption={(props, option, { selected }) => {
436+
const { key, ...rest } = props;
437+
438+
return (
439+
<li key={key} {...rest}>
440+
<StyledOption>
441+
<StyledIcon>
442+
{selectedValue.find((course: CourseOverview) => course.code === option.code) ? (
443+
<CheckRounded />
444+
) : (
445+
<AddRounded />
446+
)}
447+
</StyledIcon>
448+
<span>{option.code}</span>
449+
<Weak>{!(isMedium || isTiny) && option.name}</Weak>
450+
<Career>{getCourseCareer(option.career)}</Career>
451+
<RightContainer>
452+
{option.online && (
453+
<StyledIconRight>
454+
<VideocamOutlined />
455+
</StyledIconRight>
456+
)}
457+
{option.inPerson && (
458+
<StyledIconRight>
459+
<PersonOutline />
460+
</StyledIconRight>
461+
)}
462+
</RightContainer>
463+
</StyledOption>
464+
</li>
465+
);
466+
}}
455467
renderInput={(params) => (
456468
<StyledTextField
457469
{...params}
@@ -491,19 +503,24 @@ const CourseSelect: React.FC<CourseSelectProps> = ({ assignedColors, handleSelec
491503
/>
492504
)}
493505
renderTags={(value: CoursesList, getTagProps) =>
494-
value.map((option: CourseOverview, index: number) => (
495-
<StyledChip
496-
label={option.code}
497-
color="primary"
498-
backgroundColor={assignedColors[option.code]}
499-
deleteIcon={<CloseRounded />}
500-
{...getTagProps({ index })}
501-
onDelete={() => {
502-
setSelectedValue(selectedValue.filter((course) => course.code !== option.code));
503-
handleRemove(option.code);
504-
}}
505-
/>
506-
))
506+
value.map((option: CourseOverview, index: number) => {
507+
const { key, ...rest } = getTagProps({ index });
508+
509+
return (
510+
<StyledChip
511+
key={key}
512+
{...rest}
513+
label={option.code}
514+
color="primary"
515+
backgroundColor={assignedColors[option.code]}
516+
deleteIcon={<CloseRounded />}
517+
onDelete={() => {
518+
setSelectedValue(selectedValue.filter((course) => course.code !== option.code));
519+
handleRemove(option.code);
520+
}}
521+
/>
522+
);
523+
})
507524
}
508525
/>
509526
</StyledSelect>

‎client/src/components/controls/TermSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const TermSelect: React.FC<TermSelectProps> = () => {
115115
open={open}
116116
onClose={handleClose}
117117
onOpen={handleOpen}
118-
value={termName.concat(', ', term?.substring(2))}
118+
value={termName !== '' ? termName.concat(', ', term.substring(2)) : ''}
119119
onChange={selectTerm}
120120
>
121121
{Array.from(termDataStrList).map((term, index) => {

‎client/src/components/landingPage/HeroSection/HeroSection.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ const HeroSection = () => {
2323
}}
2424
></div>
2525
<div className="flex flex-col justify-center z-10 items-center text-center md:items-start md:text-left w-full md:w-1/2">
26-
<p className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal">
26+
<div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal mb-4">
2727
Intuitively
28-
<FlipWords words={words} duration={4000} className="text-[#0070f3]" /> <br />
28+
<FlipWords words={words} duration={4000} className="text-[#0070f3]" />
29+
<br />
2930
the perfect UNSW timetable.
30-
</p>
31+
</div>
3132
<p className="text-lg sm:text-2xl md:text-3xl mt-4 font-sans">
3233
Drag and drop your university classes <br /> and events to prepare for a term.
3334
</p>

‎client/src/components/sidebar/About.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ const FeatList = styled('ul')`
2525
`;
2626

2727
const About: React.FC = () => {
28-
const currDirectors = team.directors.sort().map((director) => <li>{director}</li>);
29-
const currSubcommittee = team.subcommittee.sort().map((subcommittee) => <li>{subcommittee}</li>);
28+
const currDirectors = team.directors.sort().map((director) => <li key={director}>{director}</li>);
29+
const currSubcommittee = team.subcommittee.sort().map((subcommittee) => <li key={subcommittee}>{subcommittee}</li>);
3030
return (
3131
<>
3232
<Typography gutterBottom variant="body2">

‎client/src/components/sidebar/CollapseButton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ const StyledCollapseButton = styled(IconButton)`
1313
color: ${({ theme }) => theme.palette.text.primary};
1414
`;
1515

16-
const StyledExpandMoreIcon = styled(ExpandMoreIcon)<{ collapsed: boolean }>`
16+
const StyledExpandMoreIcon = styled(ExpandMoreIcon, { shouldForwardProp: (prop) => prop !== 'collapsed' })<{
17+
collapsed: boolean;
18+
}>`
1719
transform: ${({ collapsed }) => (collapsed ? 'rotate(270deg)' : 'rotate(90deg)')};
1820
`;
1921

‎client/src/components/sidebar/ColorThemePreview.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,8 @@ const StyledPreviewContainer = styled(List)`
1212
padding: 0 0.7rem;
1313
`;
1414

15-
const StyledListItem = styled(ListItem, {
16-
shouldForwardProp: (prop) => prop !== 'backgroundColor' && prop !== 'preveiewTheme',
17-
})<{
15+
const StyledListItem = styled(ListItem, { shouldForwardProp: (prop) => prop !== 'backgroundColor' })<{
1816
backgroundColor: string;
19-
preveiewTheme?: string;
2017
}>`
2118
background-color: ${({ backgroundColor }) => backgroundColor};
2219
width: 10px;
@@ -26,7 +23,7 @@ const StyledListItem = styled(ListItem, {
2623
`;
2724

2825
interface ColorThemePreviewProps {
29-
previewTheme?: string;
26+
previewTheme: string;
3027
}
3128

3229
export const ColorThemePreview = ({ previewTheme }: ColorThemePreviewProps) => {
@@ -37,9 +34,7 @@ export const ColorThemePreview = ({ previewTheme }: ColorThemePreviewProps) => {
3734
}),
3835
);
3936
const colorPreview = useMemo(() => {
40-
return Object.values(decodedColors).map((color) => (
41-
<StyledListItem key={color} backgroundColor={color} preveiewTheme={previewTheme} />
42-
));
37+
return Object.values(decodedColors).map((color) => <StyledListItem key={color} backgroundColor={color} />);
4338
}, [colors, previewTheme]);
4439

4540
return <StyledPreviewContainer>{colorPreview}</StyledPreviewContainer>;

‎client/src/components/sidebar/CustomModal.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Close } from '@mui/icons-material';
22
import { Dialog, DialogContent, DialogTitle, Divider, IconButton, Tooltip, Typography } from '@mui/material';
3-
import { styled } from '@mui/system';
3+
import { styled } from '@mui/material/styles';
44
import React from 'react';
55

66
import { CustomModalProps } from '../../interfaces/PropTypes';
@@ -17,12 +17,9 @@ const CloseButton = styled(IconButton)`
1717
top: 10px;
1818
`;
1919

20-
const StyledTypography = styled(Typography)`
21-
margin-top: 10px;
22-
margin-bottom: 10px;
23-
`;
24-
25-
const ShowModalButton = styled(IconButton)<{ isSelected: boolean }>`
20+
const ShowModalButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== 'isSelected' })<{
21+
isSelected: boolean;
22+
}>`
2623
display: flex;
2724
flex-direction: row;
2825
gap: 16px;
@@ -76,8 +73,10 @@ const CustomModal: React.FC<CustomModalProps> = ({
7673
fullWidth
7774
maxWidth="sm"
7875
>
79-
<StyledDialogTitle>
80-
<StyledTypography variant="h5">{description}</StyledTypography>
76+
<StyledDialogTitle id="customized-dialog-title">
77+
<Typography variant="h5" component="span" sx={{ marginTop: '10px', marginBottom: '10px', display: 'block' }}>
78+
{description}
79+
</Typography>
8180
<CloseButton color="inherit" aria-label="close" onClick={toggleIsOpen}>
8281
<Close />
8382
</CloseButton>

0 commit comments

Comments
 (0)