Skip to content

Commit

Permalink
refactored grouped logic into util file
Browse files Browse the repository at this point in the history
  • Loading branch information
@rydersitcawich
rydersitcawich committed Jan 21, 2024
1 parent 729ec90 commit d4d2f23
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 150 deletions.
51 changes: 19 additions & 32 deletions frontend/alert/components/AutoComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useOnClickOutside } from "pcx-shared-components/src/useOnClickOutside";
import { Input } from "./Input";
import { Section } from "../types";
import GroupSuggestion from "./GroupSuggestion";
import { groupByProperty } from "../util";

/* A function that takes in a search term and returns a promise with both the search term and
the search results.
Expand Down Expand Up @@ -137,18 +138,17 @@ interface TSuggestion {
}

interface AutoCompleteProps {
defaultValue: string,
setTimeline: React.Dispatch<React.SetStateAction<string | null>>,
selectedCourses: Set<Section>,
setSelectedCourses: React.Dispatch<React.SetStateAction<Set<Section>>>,
value: string,
setValue: React.Dispatch<React.SetStateAction<string>>,
inputRef: React.RefObject<HTMLInputElement>,
clearSelections: () => void,
clearInputValue: () => void,
defaultValue: string;
setTimeline: React.Dispatch<React.SetStateAction<string | null>>;
selectedCourses: Set<Section>;
setSelectedCourses: React.Dispatch<React.SetStateAction<Set<Section>>>;
value: string;
setValue: React.Dispatch<React.SetStateAction<string>>;
inputRef: React.RefObject<HTMLInputElement>;
clearSelections: () => void;
clearInputValue: () => void;
}


const AutoComplete = ({
defaultValue = "",
setTimeline,
Expand Down Expand Up @@ -187,13 +187,11 @@ const AutoComplete = ({
inputRef.current.value = generateCoursesValue();
} else if (selectedCourses.size === 1) {
// display the one selected section
setValue(
selectedCourses.values().next().value.section_id
);
setValue(selectedCourses.values().next().value.section_id);
inputRef.current.value = selectedCourses
.values()
.next().value.section_id;
}
}
}
}, [selectedCourses]);

Expand Down Expand Up @@ -247,24 +245,13 @@ const AutoComplete = ({
* Returns suggested suggestion grouped by course
* @return suggestions
*/
const groupedSuggestions = suggestions
.sort((a, b) => a.section_id.localeCompare(b.section_id))
.reduce((res, obj) => {
const [courseName, midNum, endNum] = obj.section_id.split("-");
const { activity } = obj;

if (res[`${courseName}-${midNum}`]) {
if (res[`${courseName}-${midNum}`][activity]) {
res[`${courseName}-${midNum}`][activity].push(obj);
} else {
res[`${courseName}-${midNum}`][activity] = [obj];
}
} else {
res[`${courseName}-${midNum}`] = { [activity]: [obj] };
}

return res;
}, {});
const groupedSuggestions = groupByProperty(
suggestions,
(a, b) => a.section_id.localeCompare(b.section_id),
"-",
(obj) => obj.section_id,
(obj) => obj.activity
);

return (
<Container
Expand Down
10 changes: 5 additions & 5 deletions frontend/alert/components/managealert/AlertHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ const GridSubtitle = styled.div`

// Component for an alert entry (renders as a row in CSS grid)
interface AlertHeaderProps {
course: string;
rownum: number;
courseCode: string;
rowNum: number;
}
export const AlertHeader = ({ course, rownum }: AlertHeaderProps) => {
export const AlertHeader = ({ courseCode, rowNum }: AlertHeaderProps) => {
return (
<>
<GridCourseTitle column={1} valign border>
<GridSubtitle>{course.toUpperCase()}</GridSubtitle>
<GridSubtitle>{courseCode.toUpperCase()}</GridSubtitle>
</GridCourseTitle>
{/* used to make sure grid line goes to end */}
{Array.from({ length: 7 }, (_, index) => (
<GridItem
column={index + 2}
row={rownum}
row={rowNum}
border
halign
valign
Expand Down
20 changes: 10 additions & 10 deletions frontend/alert/components/managealert/AlertItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface AlertItemProps {
status: SectionStatus;
actions: AlertAction;
closed: AlertAction;
rownum: number;
rowNum: number;
checked: boolean;
toggleAlert: () => void;
alertHandler: () => void;
Expand All @@ -52,7 +52,7 @@ export const AlertItem = ({
status,
actions,
closed,
rownum,
rowNum,
checked,
toggleAlert,
alertHandler,
Expand All @@ -76,14 +76,14 @@ export const AlertItem = ({

return (
<>
<GridItem column={1} row={rownum} border halign valign>
<GridItem column={1} row={rowNum} border halign valign>
<input
type="checkbox"
checked={checked}
onChange={toggleAlert}
/>
</GridItem>
<GridItem column={2} row={rownum} border halign valign talign>
<GridItem column={2} row={rowNum} border halign valign talign>
{alertLastSent ? (
<P size="0.7rem">{alertLastSent}</P>
) : (
Expand All @@ -92,21 +92,21 @@ export const AlertItem = ({
</P>
)}
</GridItem>
<GridItem column={3} row={rownum} border halign valign talign>
<GridItem column={3} row={rowNum} border halign valign talign>
<P size="0.7rem">{course}</P>
</GridItem>
<StatusGridItem column={4} row={rownum} border halign valign>
<StatusGridItem column={4} row={rowNum} border halign valign>
<StatusInd background={statuscolor} />
<P size="0.7rem">{statustext}</P>
</StatusGridItem>
<GridItem border column={5} row={rownum} halign valign></GridItem>
<GridItem border column={6} row={rownum} halign valign>
<GridItem border column={5} row={rowNum} halign valign></GridItem>
<GridItem border column={6} row={rowNum} halign valign>
<ToggleSwitch type={actions} handleChange={alertHandler} />
</GridItem>
<GridItem border column={7} row={rownum} halign valign>
<GridItem border column={7} row={rowNum} halign valign>
<ToggleSwitch type={closed} handleChange={closedHandler} />
</GridItem>
<GridItem border column={8} row={rownum} halign valign>
<GridItem border column={8} row={rowNum} halign valign>
<TrashImg
src="/svg/trash.svg"
width="1.15rem"
Expand Down
113 changes: 10 additions & 103 deletions frontend/alert/components/managealert/ManageAlertUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { AlertItem } from "./AlertItem";
import { maxWidth, PHONE } from "../../constants";
import { Alert, AlertAction, SectionStatus, TAlertSel } from "../../types";
import { AlertHeader } from "./AlertHeader";
import { groupByProperty } from "../../util";

const Container = styled.div`
background: #ffffff;
Expand Down Expand Up @@ -91,90 +92,7 @@ export const ManageAlert = ({
const [searchTimeout, setSearchTimeout] = useState<number>();
const [numSelected, setNumSelected] = useState(0);

// Alerts for testing
var alert1: Alert = {
id: 1,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "cis-1100-001",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert2: Alert = {
id: 2,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "cis-1100-002",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert3: Alert = {
id: 3,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "cis-1200-001",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert4: Alert = {
id: 4,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "stat-4300-002",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert5: Alert = {
id: 5,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "stat-4300-001",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert6: Alert = {
id: 6,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "math-1400-001",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert7: Alert = {
id: 7,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "math-1410-002",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var alert8: Alert = {
id: 8,
originalCreatedAt: "2023-09-11T12:00:00Z",
section: "stat-4100-001",
alertLastSent: "2023-09-11T12:00:00Z",
status: SectionStatus.OPEN,
actions: AlertAction.ONALERT,
closedNotif: AlertAction.ONCLOSED,
};
var testAlerts: Alert[];
testAlerts = [
alert1,
alert2,
alert3,
alert4,
alert5,
alert6,
alert7,
alert8,
];
let rowNum = 0;

useEffect(() => {
setNumSelected(
Expand All @@ -195,24 +113,16 @@ export const ManageAlert = ({
);
};

let rowNum = 0;

/**
* Returns alerts grouped by course
* @return grouped alerts
*/
const groupedAlerts = testAlerts
.sort((a, b) => a.section.localeCompare(b.section))
.reduce((res, obj) => {
const [courseName, midNum, endNum] = obj.section.split("-");
if (res[`${courseName}-${midNum}`]) {
res[`${courseName}-${midNum}`].push(obj);
} else {
res[`${courseName}-${midNum}`] = [obj];
}

return res;
}, {});
const groupedAlerts = groupByProperty(
alerts,
(a, b) => a.section.localeCompare(b.section),
"-",
(obj) => obj.section
);

return (
<Container>
Expand All @@ -229,18 +139,15 @@ export const ManageAlert = ({
/>
<AlertGrid>
{Object.keys(groupedAlerts).map((key) => {
rowNum++;
return (
<>
<AlertHeader course={key} rownum={rowNum} />
<AlertHeader courseCode={key} rowNum={++rowNum} />
{groupedAlerts[key]?.map?.((alert) => {
console.log(alert);
rowNum++;
return (
<AlertItem
key={alert.id}
checked={alertSel[alert.id]}
rownum={rowNum}
rowNum={++rowNum}
alertLastSent={alert.alertLastSent}
course={alert.section}
status={alert.status}
Expand Down
32 changes: 32 additions & 0 deletions frontend/alert/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,35 @@ export const mapActivityToString = (activity) => {

return activity in activityStringMap ? activityStringMap[activity] : "";
};

export function groupByProperty(
array,
sortingFn,
splitPattern,
keyExtractor,
activityExtractor = (obj) => undefined
) {
return array.sort(sortingFn).reduce((res, obj) => {
const key = keyExtractor(obj);
const activity = activityExtractor(obj);
const [courseName, midNum, endNum] = key.split(splitPattern);
if (activity) {
if (res[`${courseName}-${midNum}`]) {
if (res[`${courseName}-${midNum}`][activity]) {
res[`${courseName}-${midNum}`][activity].push(obj);
} else {
res[`${courseName}-${midNum}`][activity] = [obj];
}
} else {
res[`${courseName}-${midNum}`] = { [activity]: [obj] };
}
} else {
if (res[`${courseName}-${midNum}`]) {
res[`${courseName}-${midNum}`].push(obj);
} else {
res[`${courseName}-${midNum}`] = [obj];
}
}
return res;
}, {});
}

0 comments on commit d4d2f23

Please sign in to comment.