Skip to content

Commit

Permalink
Merge branch 'master' into eric/fix_ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgu0114
rgu0114 committed Dec 19, 2024
2 parents 32fc4b7 + 2b9f742 commit 91c3b36
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 52 deletions.
8 changes: 0 additions & 8 deletions src/components/includes/CourseSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,6 @@ function CourseSelection({ user, isEdit, allCourses }: Props): React.ReactElemen
setSelectedCourseIds(selectedCourses.map(course => course.courseId));
}, [selectedCourses]);

useEffect(() => {
if (user && user.wrapped) {
setDisplayWrapped(true);
} else {
setDisplayWrapped(false);
}
}, [user])

const onSelectCourse = (course: FireCourse, addCourse: boolean) => {
setSelectedCourses((previousSelectedCourses) => (
addCourse
Expand Down
5 changes: 4 additions & 1 deletion src/components/includes/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ type Props = {
admin?: boolean;
snackbars: Announcement[];
countdownZero?: boolean;
setDisplayWrapped?: React.Dispatch<React.SetStateAction<boolean>>;
};

const TopBar = (props: Props) => {
Expand All @@ -45,6 +46,7 @@ const TopBar = (props: Props) => {
const email: string | undefined = user?.email;
const notificationTracker = useNotificationTracker(email);
const countdownZero = props.countdownZero;
const setDisplayWrapped = props.setDisplayWrapped;

useEffect(() => {
if (notificationTracker !== undefined && notificationTracker.notificationList !== undefined) {
Expand Down Expand Up @@ -112,6 +114,7 @@ const TopBar = (props: Props) => {
iconClick={() => setShowMenu(!showMenu)}
showMenu={showMenu}
countdownZero={countdownZero}
setDisplayWrapped={setDisplayWrapped}
/>
<div className="userProfile" onClick={() => setShowMenu(!showMenu)}>
<img
Expand Down Expand Up @@ -182,4 +185,4 @@ const mapStateToProps = (state: RootState) => ({
});

export default connect(mapStateToProps, {})(TopBar);
TopBar.defaultProps = { countdownZero: false };
TopBar.defaultProps = { countdownZero: false, setDisplayWrapped: () => {} };
43 changes: 39 additions & 4 deletions src/components/includes/TopBarNotifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@ type Props = {
showMenu: boolean;
/** Determines whether the wrapped countdown has reached 0 */
countdownZero?: boolean | undefined;
}
setDisplayWrapped?: React.Dispatch<React.SetStateAction<boolean>>;
};

const TopBarNotifications = ({notificationTracker, user, showMenu, iconClick, countdownZero}: Props) => {
const TopBarNotifications = (
{ notificationTracker, user, showMenu, iconClick, countdownZero, setDisplayWrapped }: Props) => {
const [dropped, toggleDropped] = useState(false);
const [hasWrapped, setHasWrapped] = useState(false);

const notifications = notificationTracker?.notificationList?.sort((a, b) => {
return b.createdAt.toDate().getTime() - a.createdAt.toDate().getTime();
Expand All @@ -42,6 +45,14 @@ const TopBarNotifications = ({notificationTracker, user, showMenu, iconClick, co
viewedTrackable(user, notificationTracker, true)
}

useEffect(() => {
if (user && user.wrapped) {
setHasWrapped(true);
} else {
setHasWrapped(false);
}
}, [user]);

useEffect(() => {
if(notificationTracker !== undefined && !hasViewed && dropped) {
periodicClearNotifications(user, notificationTracker);
Expand Down Expand Up @@ -87,12 +98,19 @@ const TopBarNotifications = ({notificationTracker, user, showMenu, iconClick, co
toggleDropped(!dropped);
}

const handleNotifClick = () => {
if (setDisplayWrapped) {
// Check if the setter exists
setDisplayWrapped(true); // Set the state to true
}
};

return (
<div ref={dropdownRef}>
<div className="notifications__top" onClick={() => iconClicked()}>
<img
className="notifications__icon"
src={countdownZero ? ribbonNotif : notification}
src={countdownZero && hasWrapped ? ribbonNotif : notification}
alt="Notification icon"
/>
{!hasViewed && <img className="notifications__indicator" src={notif} alt="Notification indicator" />}
Expand Down Expand Up @@ -138,6 +156,23 @@ const TopBarNotifications = ({notificationTracker, user, showMenu, iconClick, co
</div>
))
)}
{/* Additional notification when countdownZero is true */}
{hasWrapped && countdownZero && (
<div
onClick={() => handleNotifClick()}
className="notifications__notification"
style={{ backgroundColor: "#DBE8FD", borderRadius: "8px" }}
>
<div className="notification__header">
<div className="notification__title">Queue Me In Wrapped</div>
</div>
<div className="notification__content">
Queue Me In Wrapped has been added to your notifications queue.
You can revisit your office
hour statistics any time by clicking here!
</div>
</div>
)}
</div>
</div>
);
Expand All @@ -149,4 +184,4 @@ const mapStateToProps = (state: RootState) => ({


export default connect(mapStateToProps, {})(TopBarNotifications);
TopBarNotifications.defaultProps = { countdownZero: false };
TopBarNotifications.defaultProps = { countdownZero: false, setDisplayWrapped: () => {} };
41 changes: 30 additions & 11 deletions src/components/includes/Wrapped.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ const Wrapped= (props: Props): JSX.Element => {
const usersRef = firebase.firestore().collection('users');
if (doc.exists) {
const studentData = doc.data() as {
numVisits: number;
numVisits: number;
personalityType: string;
timeHelpingStudents: number;
totalMinutes: number;
Expand Down Expand Up @@ -405,6 +405,7 @@ const Wrapped= (props: Props): JSX.Element => {
const StudentsHelpedBanner = () => (
<div>
<Asterik/>
{/* fix month to be ta month not student month */}
YOU HAD THE MOST VISITS IN {month} <Asterik/>
YOU HAD THE MOST VISITS IN {month} <Asterik/>
</div>
Expand All @@ -421,8 +422,12 @@ const Wrapped= (props: Props): JSX.Element => {
const S = [S0, S1, S2, S3, S4, S5, S6, S7, S8, S9];
const N = [N0, N1, N2, N3, N4, N5, N6, N7, N8, N9];

const NumberPeople = () => {
const digits = wrappedData.totalMinutes.toString().split('');
type NumberPplProps = {
num: number;
}

const NumberPeople = ({num} : NumberPplProps) => {
const digits = num.toString().split('');
const length = digits.length;
const getSvgImage = (index :number, digit: number) => {
switch (length) {
Expand Down Expand Up @@ -502,17 +507,31 @@ const Wrapped= (props: Props): JSX.Element => {
<div>
<div className="visit">
<div style={{ display: "flex", justifyContent: "flex-end", fontWeight: "bold" }}>
<div className="visit top-text">YOU WORKED SO HARD THIS YEAR!</div>
<div className="visit top-text">
YOU WORKED SO HARD THIS YEAR!
</div>
<div className="visit mid-text">
<Typography variant="h3" style={{ fontWeight: 700 }}>
WITH...
</Typography>
</div>
<div className="visit num-visits"> {wrappedData.numVisits} </div>
<img src={Couple} className="visit couple" alt="" />
<img src={Girl} className="visit girl" alt="" />
<div className="visit bottom-text">
<Typography variant="h3" style={{ fontWeight: 700 }}>
<div className="visit num-visits">
{wrappedData.numVisits}
</div>
<img
src={Couple}
className="visit couple"
alt=""
/>
<img
src={Girl}
className="visit girl"
alt=""
/>
<div
className="visit bottom-text"
>
<Typography variant="h3">
{wrappedData.numVisits === 1 ? "VISIT " : "VISITS " }
TO OFFICE HOURS
</Typography>
Expand All @@ -528,7 +547,7 @@ const Wrapped= (props: Props): JSX.Element => {
SPENDING A TOTAL OF...
</div>
<div>
<NumberPeople/>
<NumberPeople num={wrappedData.totalMinutes}/>
</div>
<div className="timeSpent minutes-text">
MINUTES
Expand Down Expand Up @@ -659,7 +678,7 @@ const Wrapped= (props: Props): JSX.Element => {
YOU MADE LIFE EASIER FOR...
</div>
<div>
<NumberPeople/>
<NumberPeople num={wrappedData.numStudentsHelped}/>
</div>
<div className="taStudentsHelped students">
STUDENTS
Expand Down
31 changes: 19 additions & 12 deletions src/components/includes/WrappedCountdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,24 @@ const WrappedCountdown: React.FC<WrappedCountdownProps> = ({ setDisplayWrapped,
const [confettiShown, setConfettiShown] = useState<boolean>(false);
const [isZeroCounter, setIsZeroCounter] = useState<boolean>(false);

// Countdown timer effect
// Countdown timer effect to update every second
useEffect(() => {
const updatedTime = calculateTimeRemaining(wrappedDate);
setTimeRemaining(updatedTime);
// Start a timer that updates the status of the countodwn every second,
// Avoids adding `timeRemaining` in dependency array to prevent infinite render
const timer = setInterval(() => {
const updatedTime = calculateTimeRemaining(wrappedDate);
setTimeRemaining(updatedTime);

// Stop countdown and set `isZeroCounter` when time reaches zero
if (updatedTime.total <= 0) {
setIsZeroCounter(true);
setCountdownZero(true)
}
}, [wrappedDate, timeRemaining, setCountdownZero]);
// Stop the timer if countdown reaches zero
if (updatedTime.total <= 0) {
clearInterval(timer);
setIsZeroCounter(true);
setCountdownZero(true);
}
}, 1000);

return () => clearInterval(timer);
}, [wrappedDate, setCountdownZero]);

// Trigger confetti with a delay only the first time `isZeroCounter` becomes true
useEffect(() => {
Expand Down Expand Up @@ -81,15 +88,15 @@ const WrappedCountdown: React.FC<WrappedCountdownProps> = ({ setDisplayWrapped,
<>
<div>
<div className="countdownContainer_boxes">{prependZero(timeRemaining.days)}</div>
<p className="counter_sub">DAYS</p>
<p className="counter_sub">{timeRemaining.days <= 1 ? "DAY" : "DAYS"}</p>
</div>
<div>
<div className="countdownContainer_boxes">{prependZero(timeRemaining.hours)}</div>
<p className="counter_sub">HOURS</p>
<p className="counter_sub">{timeRemaining.hours <= 1 ? "HOUR" : "HOURS"}</p>
</div>
<div>
<div className="countdownContainer_boxes">{prependZero(timeRemaining.minutes)}</div>
<p className="counter_sub">MINUTES</p>
<p className="counter_sub">{timeRemaining.minutes <= 1 ? "MINUTE" : "MINUTES"}</p>
</div>
<div className="textContainer">
<p className="top">Queue Me In</p>
Expand Down
25 changes: 10 additions & 15 deletions src/components/pages/SplitView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,6 @@ const SplitView = ({
updateSession(sessionHook);
}, [sessionHook, updateSession]);

useEffect(() => {
if (user && user.wrapped) {
setDisplayWrapped(true);
} else {
setDisplayWrapped(false);
}
}, [user]);

// Handle browser back button
history.listen((location) => {
setActiveView(
Expand Down Expand Up @@ -209,6 +201,7 @@ const SplitView = ({
courseId={match.params.courseId}
course={course}
countdownZero={countdownZero}
setDisplayWrapped={setDisplayWrapped}
/>
{banners.map((banner, index) => (
<Banner
Expand Down Expand Up @@ -265,8 +258,8 @@ const SplitView = ({
<div className="warningArea">
<div>&#9888;</div>
<div>
Please make sure to enable browser notifications in your system
settings.
Please make sure to enable browser notifications in your system
settings.
</div>
</div>
)}
Expand All @@ -277,11 +270,13 @@ const SplitView = ({
<Loader active={true} content="Loading" />
))}
<ProductUpdates />
<WrappedCountdown
setDisplayWrapped={setDisplayWrapped}
setCountdownZero={setCountdownZero}
wrappedDate={{ launchDate: launch, startDate: start }}
/>
{user && user.wrapped ? (
<WrappedCountdown
setDisplayWrapped={setDisplayWrapped}
setCountdownZero={setCountdownZero}
wrappedDate={{ launchDate: launch, startDate: start }}
/>
) : null}
{displayFeedbackPrompt ? (
<FeedbackPrompt
onClose={submitFeedback(removedQuestionId, course, session.sessionId)}
Expand Down
2 changes: 1 addition & 1 deletion src/styles/Wrapped.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
transition: background-color 0.3s;
&:hover {
background-color: rgb(255, 255, 255);
}
}
}

.dot.active {
Expand Down

0 comments on commit 91c3b36

Please sign in to comment.