Skip to content

Commit

Permalink
imperfect compare component. Displays all the information. Color-code…
Browse files Browse the repository at this point in the history 
…d checkboxes.
  • Loading branch information
@AbhiramTadepalli
AbhiramTadepalli committed Aug 24, 2024
1 parent a27bd27 commit 0ea5a36
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 40 deletions.
8 changes: 8 additions & 0 deletions components/common/Compare/compare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import React from 'react';
import SearchQuery, {
convertToProfOnly,
} from '../../../modules/SearchQuery/SearchQuery';
import searchQueryColors, {
rainbowColors,
} from '../../../modules/searchQueryColors/searchQueryColors';
import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
import type { RateMyProfessorData } from '../../../pages/api/ratemyprofessorScraper';
import type { GradesType } from '../../../pages/dashboard/index';
Expand Down Expand Up @@ -88,6 +91,11 @@ const Compare = ({
compare={courses} //*
addToCompare={addToCompare}
removeFromCompare={removeFromCompare}
colors={
courses.length === 1
? rainbowColors
: searchQueryColors.filter((searchQuery, i) => 1)
}
/>
</>
);
Expand Down
89 changes: 50 additions & 39 deletions components/common/CompareTable/compareTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ type RowProps = {
inCompare: boolean;
addToCompare: (arg0: SearchQuery) => void;
removeFromCompare: (arg0: SearchQuery) => void;
color: string;
};

function Row({
Expand All @@ -109,22 +110,13 @@ function Row({
inCompare,
addToCompare,
removeFromCompare,
color,
}: RowProps) {
const [open, setOpen] = useState(false);
console.log(course);
return (
<>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
className={'transition-transform' + (open ? ' rotate-90' : '')}
>
<KeyboardArrowIcon />
</IconButton>
</TableCell>
<TableCell>
<Checkbox
checked={inCompare}
Expand All @@ -136,17 +128,14 @@ function Row({
}
}}
disabled={gradesLoading === 'loading' || rmpLoading === 'loading'}
sx={{
color: color,
'&.Mui-checked': {
color: color,
},
}}
/>
</TableCell>
<TableCell component="th" scope="row">
<Typography className="leading-tight text-lg text-gray-600 dark:text-gray-200">
{searchQueryLabel(course) +
(typeof course.profFirst === 'undefined' &&
typeof course.profLast === 'undefined'
? ' (Overall)'
: '')}
</Typography>
</TableCell>
<TableCell align="right">
{gradesLoading === 'loading' && (
<Skeleton variant="rounded" className="rounded-full px-5 py-2">
Expand Down Expand Up @@ -201,21 +190,29 @@ function Row({
</Typography>
)}
</TableCell>
</TableRow>
<TableRow>
<TableCell className="p-0" colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<div className="p-2 md:p-4 flex flex-col gap-2">
<SingleGradesInfo
course={course}
grades={grades}
gradesLoading={gradesLoading}
/>
{typeof rmpLoading !== 'undefined' && (
<SingleProfInfo rmp={rmp} rmpLoading={rmpLoading} />
)}
</div>
</Collapse>
<TableCell align="right">
{rmpLoading === 'loading' && (
<Skeleton variant="rounded" className="rounded-full px-5 py-2">
<Typography className="text-base">5.0</Typography>
</Skeleton>
)}
{(rmpLoading === 'error' || typeof rmpLoading === 'undefined') && (
<CloseIcon />
)}
{rmpLoading === 'done' && (
<Typography
className="text-base text-black rounded-full px-5 py-2 inline"
sx={{
backgroundColor: colorMidpoint(
100,
0,
rmp.wouldTakeAgainPercentage,
),
}}
>
{rmp.wouldTakeAgainPercentage.toFixed(0) + '%'}
</Typography>
)}
</TableCell>
</TableRow>
</>
Expand All @@ -232,6 +229,7 @@ type CompareTableProps = {
compare: SearchQuery[];
addToCompare: (arg0: SearchQuery) => void;
removeFromCompare: (arg0: SearchQuery) => void;
colors: string[];
};

const CompareTable = ({
Expand All @@ -244,15 +242,18 @@ const CompareTable = ({
compare,
addToCompare,
removeFromCompare,
colors,
}: CompareTableProps) => {
//Table sorting category
const [orderBy, setOrderBy] = useState<
'none' | 'gpa' | 'rating' | 'difficulty'
'none' | 'gpa' | 'rating' | 'difficulty' | 'would_take_again'
>('none');
//Table sorting direction
const [order, setOrder] = useState<'asc' | 'desc'>('asc');
//Cycle through sorting
function handleClick(col: 'gpa' | 'rating' | 'difficulty') {
function handleClick(
col: 'gpa' | 'rating' | 'difficulty' | 'would_take_again',
) {
if (orderBy !== col) {
setOrderBy(col);
setOrder('asc');
Expand Down Expand Up @@ -344,9 +345,7 @@ const CompareTable = ({
<Table stickyHeader aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>Compare</TableCell>
<TableCell>Name</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'gpa'}
Expand Down Expand Up @@ -380,11 +379,22 @@ const CompareTable = ({
Difficulty
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'would_take_again'}
direction={orderBy === 'would_take_again' ? order : 'asc'}
onClick={() => {
handleClick('would_take_again');
}}
>
Would Take Again
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{resultsLoading === 'done'
? sortedResults.map((result) => (
? sortedResults.map((result, index) => (
<Row
key={searchQueryLabel(result)}
course={result}
Expand All @@ -401,6 +411,7 @@ const CompareTable = ({
}
addToCompare={addToCompare}
removeFromCompare={removeFromCompare}
color={colors[index]}
/>
))
: Array(10)
Expand Down
1 change: 0 additions & 1 deletion components/common/CourseOverview/courseOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,6 @@ const CourseOverview = ({
</p>
);
}
console.log(courseData?.catalog_year);
return (
<div className="flex flex-col gap-2">
{courseComponent}
Expand Down

1 comment on commit 0ea5a36

@AbhiramTadepalli
Copy link
Contributor Author

Choose a reason for hiding this comment

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

i.e no imposed limit on max courses you can add to compare. After 3 courses the colors get re-used and the checkbox defaults to purple.

Please sign in to comment.