Skip to content

Feature/text only review #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Xx358hffy wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Feature/text only review #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
445b82b
Added animation to modal popup for Filter
Xx358hffy Jun 17, 2025
35bab73
Merge branch 'main' of github.com:devsoc-unsw/unilectives
Xx358hffy Jul 8, 2025
64b0ec3
Changed ReviewsBar to always only contain text reviews
Xx358hffy Jul 8, 2025
7b2d0b2
Fixed styling
Xx358hffy Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 82 additions & 82 deletions frontend/src/components/FilterModal/FilterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from "react";
import Dropdown from "../Dropdown/Dropdown";
import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";
import { Course } from "@/types/api";
Expand Down Expand Up @@ -105,15 +106,6 @@ export default function FilterModal({
}
});

// Show secret message if specific filters are selected
if (
selectedFaculties.includes("Arts") &&
selectedTerms.includes("-1") &&
selectedTerms.includes("-2")
) {
alert("Alss aol zlhyjo ihy...");
}

setFilters({ faculties: selectedFaculties, terms: selectedTerms });

setOpen(false);
Expand Down Expand Up @@ -157,6 +149,7 @@ export default function FilterModal({

return (
<>
<div>
{/* filter button */}
<div className="mt-4 min-w-[140px] xs:min-w-1/2">
<button
Expand All @@ -171,79 +164,86 @@ export default function FilterModal({
</div>

{/* filter dialog */}
<Dialog open={open} onClose={handleClose}>
{/* the blurred backdrop */}
<div
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-10"
aria-hidden="true"
/>

{/* Full-screen container to center the panel */}
<div className="fixed inset-0 flex w-screen items-center justify-center pl-20 z-10 ">
{/* The actual dialog panel */}
<Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full">
<button className="w-6 h-6 place-self-end" onClick={handleClose}>
<XMarkIcon />
</button>
<Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
Filter by:
</Dialog.Title>
<Dialog.Description className="text-xl font-semibold mb-2 ">
Faculty
</Dialog.Description>
{/* display the faculty tags */}
<div className="flex flex-wrap mb-4">
{faculties.map((faculty, index) => {
return styledFilterButton(
"faculty",
index,
facultiesCheckedState[index],
faculty,
);
})}
</div>
<Dialog.Description className="text-xl font-semibold mb-2">
Term
</Dialog.Description>
{/* display the term tags */}
<div className="sm:hidden flex flex-wrap mb-4">
{terms.map((term, index) => {
return styledFilterButton(
"term",
index,
termsCheckedState[index],
term,
);
})}
</div>
<div className="sm:flex hidden flex-wrap mb-4 ">
{termsShortened.map((term, index) => {
return styledFilterButton(
"term",
index,
termsCheckedState[index],
term,
);
})}
</div>

<div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
<button
className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
onClick={handleClearAll}
>
Clear All
</button>
<button
className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
onClick={handleApply}
>
Apply
</button>
</div>
</Dialog.Panel>
</div>
</Dialog>
<Transition show={open}>
<Dialog open={open} onClose={handleClose} className="fixed inset-0 z-10">
{/* Backdrop */}
<div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
{/* Modal content wrapper */}
<div className="fixed inset-0 flex items-center justify-center p-4 ">
<Transition.Child
enter="transition-transform ease-out duration-700"
enterFrom="opacity-0 scale-90"
enterTo="opacity-100 scale-100"
leave="transition-transform ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full">
<button className="w-6 h-6 place-self-end" onClick={handleClose}>
<XMarkIcon />
</button>
<Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
Filter by:
</Dialog.Title>
<Dialog.Description className="text-xl font-semibold mb-2 ">
Faculty
</Dialog.Description>
{/* display the faculty tags */}
<div className="flex flex-wrap mb-4">
{faculties.map((faculty, index) => {
return styledFilterButton(
"faculty",
index,
facultiesCheckedState[index],
faculty,
);
})}
</div>
<Dialog.Description className="text-xl font-semibold mb-2">
Term
</Dialog.Description>
{/* display the term tags */}
<div className="sm:hidden flex flex-wrap mb-4">
{terms.map((term, index) => {
return styledFilterButton(
"term",
index,
termsCheckedState[index],
term,
);
})}
</div>
<div className="sm:flex hidden flex-wrap mb-4 ">
{termsShortened.map((term, index) => {
return styledFilterButton(
"term",
index,
termsCheckedState[index],
term,
);
})}
</div>

<div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
<button
className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
onClick={handleClearAll}
>
Clear All
</button>
<button
className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
onClick={handleApply}
>
Apply
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
</>
);
}
19 changes: 2 additions & 17 deletions frontend/src/components/ReviewsBar/ReviewsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
"use client";

import Dropdown from "../Dropdown/Dropdown";
import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import ReviewModal from "../ReviewModal/ReviewModal";
import ReviewCard from "../ReviewCard/ReviewCard";
import { Review } from "@/types/api";
Expand All @@ -21,7 +20,6 @@ export default function ReviewsBar({
const [currentReviews, setCurrentReviews] = useState(reviews ? reviews : []);
const [allBookmarkedReviews, setAllBookmarkedReviews] =
useState(bookmarkedReviews);
const [displayTextReview, setDisplayTextReview] = useState(false);
const [selected, setSelected] = useState("Most Recent");

// Change review sorting based on dropdown
Expand Down Expand Up @@ -50,15 +48,10 @@ export default function ReviewsBar({
);
break;
}

if (!displayTextReview) {
return setCurrentReviews(sortedReviews);
}

setCurrentReviews(
sortedReviews.filter((r: Review) => r.title || r.description)
);
}, [displayTextReview, selected]);
}, [selected]);

return (
<div className="space-y-5 isolate">
Expand Down Expand Up @@ -90,14 +83,6 @@ export default function ReviewsBar({
{/* Switch */}
{currentReviewRef.current && currentReviewRef.current.length !== 0 && (
<>
<div className="flex items-center flex-wrap gap-1">
<ToggleSwitch
defaultValue={displayTextReview}
onChange={setDisplayTextReview}
accessibleTitle="Text only reviews"
/>
<span>Text only reviews</span>
</div>
{/* Reviews */}
{currentReviews.map((review: Review, index: number) => (
<ReviewCard
Expand Down