Skip to content

Commit

Permalink
refactor: peterportal alert (#1130)
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinWu098 authored Jan 27, 2025
1 parent 5d8a039 commit afbc80e
Showing 1 changed file with 43 additions and 46 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Close } from '@mui/icons-material';
import { Alert, AlertTitle, Box, IconButton, useMediaQuery } from '@mui/material';
import { Alert, Box, IconButton, Link, useMediaQuery, useTheme } from '@mui/material';
import { AACourse, AASection, WebsocDepartment, WebsocSchool, WebsocAPIResponse, GE } from '@packages/antalmanac-types';
import { useCallback, useEffect, useState } from 'react';
import LazyLoad from 'react-lazyload';
Expand Down Expand Up @@ -165,56 +165,53 @@ const LoadingMessage = () => {
);
};

const ErrorMessage = ({ }: { courseData: (WebsocSchool | WebsocDepartment | AACourse)[] }) => {
const ErrorMessage = () => {
const theme = useTheme();
const isDark = useThemeStore((store) => store.isDark);

const formData = RightPaneStore.getFormData();
const deptValue = formData.deptValue?.replace(' ', '').toUpperCase() || 'UNKNOWN';
const courseNumber = formData.courseNumber?.replace(/\s+/g, '').toUpperCase() || 'UNKNOWN';
const courseName = deptValue !== 'UNKNOWN' && courseNumber !== 'UNKNOWN'
? `${deptValue}${courseNumber}`
: null;
const deptValue = formData.deptValue.replace(' ', '').toUpperCase() || null;
const courseNumber = formData.courseNumber.replace(/\s+/g, '').toUpperCase() || null;
const courseId = deptValue && courseNumber ? `${deptValue}${courseNumber}` : null;

return (
<Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
{courseName && (
<Alert
severity="info"
onClick={() => window.open(`https://peterportal.org/course/${courseName}`, '_blank')}
sx={{
width: '100%',
cursor: 'pointer',
backgroundColor: isDark ? '#2a3136' : 'rgb(240, 248, 255)',
border: `1px solid ${isDark ? '#202224' : '#90caf9'}`,
color: isDark ? '#ece6e6' : '#1e88e5',
fontSize: '1rem',
'& .MuiAlertTitle-root': {
fontSize: '1.1rem',
},
padding: '0.6rem',
boxSizing: 'border-box',
marginTop: '3rem',
'&:hover': {
backgroundColor: isDark ? '#1f2529' : 'rgb(230, 240, 255)',
},
}}
>
<AlertTitle>
<span style={{ color: 'black' }}>
Search for{' '}
<span
style={{color: '#5191D6', textDecoration: 'underline', }}
>
{deptValue} {courseNumber}
</span>{' '}
on PeterPortal
</span>
</AlertTitle>

</Alert>
)}
<Box
sx={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
{courseId ? (
<Link href={`https://peterportal.org/course/${courseId}`} target="_blank" sx={{ width: '100%' }}>
<Alert
variant="filled"
severity="info"
sx={{
display: 'flex',
alignItems: 'center',
fontSize: 14,
backgroundColor: theme.palette.primary.main,
color: 'white',
}}
>
<span>
Search for{' '}
<span style={{ textDecoration: 'underline' }}>
{deptValue} {courseNumber}
</span>{' '}
on PeterPortal!
</span>
</Alert>
</Link>
) : null}

<img
src={isDark ? darkNoNothing : noNothing}
alt="No Results Found"
style={{ objectFit: 'contain', width: '80%', height: '80%' }}
style={{ objectFit: 'contain', width: '80%', height: '80%', pointerEvents: 'none' }}
/>
</Box>
);
Expand Down Expand Up @@ -327,7 +324,7 @@ export default function CourseRenderPane(props: { id?: number }) {
{loading ? (
<LoadingMessage />
) : error || courseData.length === 0 ? (
<ErrorMessage courseData={courseData} />
<ErrorMessage />
) : (
<>
<RecruitmentBanner />
Expand Down

0 comments on commit afbc80e

Please sign in to comment.