+ {/* Friend-of-friend read-only view */}
+ {friendUsername ? (
+ <>
+
Friends
+ {loadingFriendsFriends &&
Loading friends...
}
+ {friendsFriendsError &&
{friendsFriendsError}
}
+ {!loadingFriendsFriends && !friendsFriendsError && friendsFriends.length === 0 && (
+
This user has no friends yet.
+ )}
+ {friendsFriends.length > 0 && (
+
+ {friendsFriends.map((friend, index) => (
+
+ ))}
+
+ )}
+
+ ) : (
+
+
+ setPendingSearch(e.target.value)}
+ placeholder="Search for users..."
+ onSearch={() => handlePendingSearchChange(true)}
+ />
+
+
+ {newFriendError &&
{newFriendError}
}
+
+ {/* Only show Users section when searching */}
+ {pendingSearch ? (
+
+
Users
+ {searchResults.length === 0 && searchingNewFriends === null && (
+
Continue typing or press Enter to search...
+ )}
+ {searchResults.length === 0 && searchingNewFriends === true &&
Searching...
}
+ {searchResults.length === 0 && searchingNewFriends === false &&
No users...
}
+ {searchResults.length > 0 && (
+
+ {searchResults.map((searchResult, index) => {
+ return (
+
+ );
+ })}
+
+ )}
+
+ ) : (
+ <>
+ {/* Friend Requests section only if there are requests */}
+ {!loadingRequests && friendRequests.length > 0 && (
+
+
Friend Requests
+ {requestsError &&
{requestsError}
}
+
+ {friendRequests.map((req, index) => (
+
+ ))}
+
+
+ )}
+
+
Friends
+ {loadingFriends &&
Loading friends...
}
+ {friendsError &&
{friendsError}
}
+ {!loadingFriends && !friendsError && friends.length === 0 &&
You have no friends yet.
}
+ {!loadingFriends && friends.length > 0 && (
+
+ {friends.map((friend, index) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ )}
+
+ setPeriodShiftInWeeks((prev) => prev - 1)}
+ aria-label="Previous period"
+ >
+
+
+
+
+ Week {period.week}, {period.year}
+
+
+ {formatDateLabel(period.from)} - {formatDateLabel(period.to)}
+
+
+ {periodShiftInWeeks < 0 && (
+ setPeriodShiftInWeeks((prev) => Math.min(prev + 1, 0))}
+ aria-label="Next period"
+ >
+
+
+ )}
+ {periodShiftInWeeks >= 0 && }
+
+
+ {leaderboardTypes.length > 1 && (
+
+ {leaderboardTypes.map((item) => {
+ const isActive = item.key === selectedLeaderboardKey;
+
+ return (
+ setSelectedLeaderboardKey(item.key)}>
+ {item.icon && React.createElement(item.icon, { fontSize: "small" })}
+ {item.tabLabel}
+
+ );
+ })}
+
+ )}
+
+ {scope === LEADERBOARD_SCOPES.COHORT && cohorts.length > 1 && (
+
+ ({ value: c.id, label: c.name }))}
+ selectedValue={selectedCohort}
+ onChange={(e) => setSelectedCohort(Number(e.target.value))}
+ optionLabel={(option) => option.label}
+ optionValue={(option) => option.value}
+ placeholder="Select a classroom"
+ />
+
+ )}
+
+ {isLoading && Loading leaderboard...
}
+ {!isLoading && error && {error}
}
+ {!isLoading && !error && leaderboardData.length === 0 && {emptyMessage}
}
+
+ {!isLoading && !error && leaderboardData.length > 0 && (
+
+
+
+ Rank
+ User
+ {activeLeaderboard?.metricLabel}
+
+
+
+ {leaderboardData.map((entry, index) => {
+ const metricValue = getMetricValue(entry);
+ const userEntry = entry?.user;
+
+ const isCurrentUser =
+ userDetails?.username &&
+ userEntry?.username &&
+ userDetails.username.toLowerCase() === userEntry.username.toLowerCase();
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ );
+}
diff --git a/src/leaderboards/Leaderboards.sc.js b/src/leaderboards/Leaderboards.sc.js
new file mode 100644
index 000000000..9585e92fc
--- /dev/null
+++ b/src/leaderboards/Leaderboards.sc.js
@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import { streakFireOrange } from "../components/colors";
+
+export const PeriodNavButton = styled.button`
+ padding: 0;
+ border: none;
+ background: transparent;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--text-primary);
+ cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+ opacity: ${({ disabled }) => (disabled ? 0.55 : 1)};
+`;
+
+export const PeriodNavSpacer = styled.div`
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+`;
+
+export const Container = styled.section`
+ width: 100%;
+ max-width: 760px;
+`;
+
+export const PeriodContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin-left: 0.5em;
+ gap: 0.1em;
+`;
+
+export const WeekLabel = styled.p`
+ margin: 0;
+ font-size: 1em;
+ font-weight: 600;
+ color: var(--text-primary);
+ text-align: center;
+`;
+
+export const PeriodLabel = styled.p`
+ margin: 0;
+ font-size: 0.85em;
+ color: var(--text-secondary);
+ text-align: center;
+`;
+
+export const TabsWrapper = styled.div`
+ display: inline-flex;
+ border-radius: 10px;
+ overflow: hidden;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ width: 100%;
+
+ @media (max-width: 768px) {
+ font-size: 0.85rem;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+`;
+
+export const TabButton = styled.button`
+ display: flex;
+ font-size: 1em;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35em;
+ padding: 0.75em;
+ border: none;
+ cursor: pointer;
+ flex: 1;
+
+ background: ${({ $active }) => ($active ? streakFireOrange : "var(--active-bg)")};
+ color: ${({ $active }) => ($active ? "var(--text-primary)" : "var(--text-secondary)")};
+ font-weight: ${({ $active }) => ($active ? 500 : 400)};
+
+ transition: background 0.2s;
+ box-shadow: ${({ $active }) => ($active ? "0 4px 10px var(--shadow-color)" : "0 1px 2px var(--shadow-color)")};
+
+ transform: ${({ $active }) => ($active ? "translateY(-1px)" : "none")};
+`;
+
+export const Table = styled.table`
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+
+ @media (max-width: 768px) {
+ font-size: 0.85rem;
+ }
+`;
+
+export const TableHeadCell = styled.th`
+ padding: 0.5em;
+`;
diff --git a/src/leaderboards/leaderboardTypes.js b/src/leaderboards/leaderboardTypes.js
new file mode 100644
index 000000000..13da9ac2e
--- /dev/null
+++ b/src/leaderboards/leaderboardTypes.js
@@ -0,0 +1,55 @@
+import FitnessCenterRoundedIcon from "@mui/icons-material/FitnessCenterRounded";
+import MenuBookRoundedIcon from "@mui/icons-material/MenuBookRounded";
+import AccessAlarmsRoundedIcon from "@mui/icons-material/AccessAlarmsRounded";
+
+export const LEADERBOARD_TYPES = [
+ {
+ key: "reading_time",
+ tabLabel: "Reading Time",
+ icon: AccessAlarmsRoundedIcon,
+ metricLabel: "Time Spent",
+ formatMetric: (value) => `${formatDuration(value)}`
+ },
+ {
+ key: "read_articles",
+ tabLabel: "Read Articles",
+ icon: MenuBookRoundedIcon,
+ metricLabel: "Read Articles",
+ formatMetric: (value) => `${value}`
+ },
+ {
+ key: "exercises_done",
+ tabLabel: "Correct Exercises",
+ icon: FitnessCenterRoundedIcon,
+ metricLabel: "Exercises Done",
+ formatMetric: (value) => `${value}`
+ },
+ {
+ key: "listening_time",
+ tabLabel: "Listening Time",
+ icon: AccessAlarmsRoundedIcon,
+ metricLabel: "Time Spent",
+ formatMetric: (value) => `${formatDuration(value)}`
+ },
+];
+
+export const LEADERBOARD_SCOPES = {
+ FRIENDS: "friends",
+ COHORT: "cohort",
+};
+
+function formatDuration(ms) {
+ if (!ms || ms <= 0) return "0s";
+
+ const totalSeconds = Math.floor(ms / 1000);
+ const hours = Math.floor(totalSeconds / 3600);
+ const minutes = Math.floor((totalSeconds % 3600) / 60);
+ const seconds = totalSeconds % 60;
+
+ const parts = [];
+ if (hours) parts.push(`${hours}h`);
+ if (minutes) parts.push(`${minutes}m`);
+ if (seconds || parts.length === 0) parts.push(`${seconds}s`);
+
+ return parts.join(" ");
+}
diff --git a/src/pages/Settings/ProfileDetails.js b/src/pages/Settings/ProfileDetails.js
index d4a4c24eb..30da63675 100644
--- a/src/pages/Settings/ProfileDetails.js
+++ b/src/pages/Settings/ProfileDetails.js
@@ -1,10 +1,9 @@
-import { useHistory } from "react-router-dom";
-import { useState, useEffect, useContext, useRef } from "react";
+import { Link, useHistory } from "react-router-dom";
+import React, { Fragment, useContext, useEffect, useRef, useState } from "react";
import { UserContext } from "../../contexts/UserContext";
import { saveSharedUserInfo } from "../../utils/cookies/userInfo";
import { setTitle } from "../../assorted/setTitle";
import { APIContext } from "../../contexts/APIContext";
-import { Link } from "react-router-dom";
import LocalStorage from "../../assorted/LocalStorage";
import strings from "../../i18n/definitions";
import Form from "../_pages_shared/Form.sc";
@@ -20,26 +19,54 @@ import BackArrow from "./settings_pages_shared/BackArrow";
import FullWidthErrorMsg from "../../components/FullWidthErrorMsg.sc";
import LoadingAnimation from "../../components/LoadingAnimation";
import useFormField from "../../hooks/useFormField";
-import { EmailValidator, NonEmptyValidator } from "../../utils/ValidatorRule/Validator";
+import { EmailValidator, NonEmptyOrWhitespaceOnlyValidator } from "../../utils/ValidatorRule/Validator";
import validateRules from "../../assorted/validateRules";
import { useLocation } from "react-router-dom/cjs/react-router-dom";
import FullWidthConfirmMsg from "../../components/FullWidthConfirmMsg.sc";
+import Modal from "../../components/modal_shared/Modal";
+import {
+ AVATAR_BACKGROUND_COLORS,
+ AVATAR_CHARACTER_COLORS,
+ AVATAR_CHARACTER_IDS,
+ AVATAR_IMAGE_MAP,
+ validatedAvatarBackgroundColor,
+ validatedAvatarCharacterColor,
+ validatedAvatarCharacterId,
+} from "../../profile/avatarOptions";
+import { AvatarBackground, AvatarImage } from "../../profile/UserProfile.sc";
+import Feature from "../../features/Feature";
+import * as s from "./ProfileDetails.sc";
+import EditIcon from "@mui/icons-material/Edit";
+import CheckIcon from "@mui/icons-material/Check";
export default function ProfileDetails() {
const api = useContext(APIContext);
+ const isGamificationEnabled = Feature.has_gamification();
const state = useLocation().state || {};
- const successfulyChangedPassword = "passwordChanged" in state ? state.passwordChanged : false;
+ const fallbackRedirectPath = isGamificationEnabled ? "/profile" : "/account_settings";
+ const redirectPath = ["/profile", "/account_settings"].includes(state.from) ? state.from : fallbackRedirectPath;
+ const successfullyChangedPassword = "passwordChanged" in state ? state.passwordChanged : false;
const [errorMessage, setErrorMessage] = useState("");
const { userDetails, setUserDetails } = useContext(UserContext);
const history = useHistory();
const isPageMounted = useRef(true);
+ const [showAvatarModal, setShowAvatarModal] = useState(false);
+ const [selectedAvatarCharacterId, setSelectedAvatarCharacterId] = useState();
+ const [selectedAvatarCharacterColor, setSelectedAvatarCharacterColor] = useState();
+ const [selectedAvatarBackgroundColor, setSelectedAvatarBackgroundColor] = useState();
- const [userName, setUserName, validateUserName, isUserNameValid, userErrorMessage] = useFormField(
+ const default_error_message = "Unable to save profile details. Please try again.";
+
+ const [displayName, setDisplayName, validateDisplayName, isDisplayNameValid, displayNameErrorMessage] = useFormField(
+ "",
+ NonEmptyOrWhitespaceOnlyValidator("Please provide a display name."),
+ );
+ const [username, setUsername, validateUsername, isUsernameValid, usernameErrorMessage] = useFormField(
"",
- NonEmptyValidator("Please provide a name."),
+ NonEmptyOrWhitespaceOnlyValidator("Please provide a username."),
);
- const [userEmail, setUserEmail, validateEmail, isEmailValid, emailErrorMessage] = useFormField("", [
- NonEmptyValidator("Please provide an email."),
+ const [email, setEmail, validateEmail, isEmailValid, emailErrorMessage] = useFormField("", [
+ NonEmptyOrWhitespaceOnlyValidator("Please provide an email."),
EmailValidator,
]);
@@ -50,8 +77,13 @@ export default function ProfileDetails() {
useEffect(() => {
isPageMounted.current = true;
if (isPageMounted.current) {
- setUserEmail(userDetails.email);
- setUserName(userDetails.name);
+ setDisplayName(userDetails.name);
+ setUsername(userDetails.username);
+ setEmail(userDetails.email);
+
+ setSelectedAvatarCharacterId(validatedAvatarCharacterId(userDetails.user_avatar?.image_name));
+ setSelectedAvatarCharacterColor(validatedAvatarCharacterColor(userDetails.user_avatar?.character_color));
+ setSelectedAvatarBackgroundColor(validatedAvatarBackgroundColor(userDetails.user_avatar?.background_color));
}
return () => {
@@ -63,19 +95,40 @@ export default function ProfileDetails() {
function handleSave(e) {
e.preventDefault();
setErrorMessage("");
- if (!validateRules([validateUserName, validateEmail])) return;
+ if (!validateRules([validateDisplayName, validateUsername, validateEmail])) return;
- const newUserDetails = {
+ const updatedFormValues = {
+ name: displayName.trim(),
+ username: username.trim(),
+ email: email.trim(),
+ };
+ const updatedAvatarValues = {
+ image_name: selectedAvatarCharacterId,
+ character_color: selectedAvatarCharacterColor,
+ background_color: selectedAvatarBackgroundColor,
+ };
+ const payload = {
...userDetails,
- name: userName,
- email: userEmail,
+ ...updatedFormValues,
+ ...(isGamificationEnabled
+ ? Object.fromEntries(Object.entries(updatedAvatarValues).map(([key, value]) => [`avatar_${key}`, value]))
+ : {}),
};
- api.saveUserDetails(newUserDetails, setErrorMessage, () => {
- setUserDetails(newUserDetails);
- LocalStorage.setUserInfo(newUserDetails);
- saveSharedUserInfo(newUserDetails);
- history.push("/account_settings");
- });
+ api.saveUserDetails(
+ payload,
+ (error) => setErrorMessage(error ?? default_error_message),
+ () => {
+ const newUserDetails = {
+ ...userDetails,
+ ...updatedFormValues,
+ ...(isGamificationEnabled ? { user_avatar: updatedAvatarValues } : {}),
+ };
+ setUserDetails(newUserDetails);
+ LocalStorage.setUserInfo(newUserDetails);
+ saveSharedUserInfo(newUserDetails);
+ history.push(redirectPath);
+ },
+ );
}
if (!userDetails) {
@@ -83,12 +136,12 @@ export default function ProfileDetails() {
}
return (