-
{trim(name, 25)}
{rank}
diff --git a/src/components/profile/Preview/index.tsx b/src/components/profile/Preview/index.tsx
index a4a37b8c..34559c5e 100644
--- a/src/components/profile/Preview/index.tsx
+++ b/src/components/profile/Preview/index.tsx
@@ -1,13 +1,10 @@
-import { Typography } from '@/components/common';
+import { GifSafeImage, Typography } from '@/components/common';
import SocialMediaIcon from '@/components/profile/SocialMediaIcon';
import { PublicProfile } from '@/lib/types/apiResponses';
import { SocialMediaType } from '@/lib/types/enums';
-import { getLevel, getProfilePicture, isSrcAGif } from '@/lib/utils';
-import Image from 'next/image';
+import { fixUrl, getLevel, getProfilePicture } from '@/lib/utils';
import styles from './style.module.scss';
-const fixUrl = (url: string) => (url.includes('://') ? url : `http://${url}`);
-
interface PreviewStatProps {
title: string;
value: number;
@@ -31,13 +28,12 @@ interface PreviewProps {
const Preview = ({ user, pfpCacheBust }: PreviewProps) => {
return (
-
{user.firstName} {user.lastName}
diff --git a/src/components/profile/Preview/style.module.scss b/src/components/profile/Preview/style.module.scss
index 4e26475c..0ad749a1 100644
--- a/src/components/profile/Preview/style.module.scss
+++ b/src/components/profile/Preview/style.module.scss
@@ -2,6 +2,7 @@
align-items: center;
display: flex;
flex-direction: column;
+
text-align: center;
.pfp {
@@ -33,6 +34,7 @@
.bio {
white-space: pre-wrap;
+ word-break: break-word;
}
.socials {
diff --git a/src/components/profile/UserHandleNotFound/index.tsx b/src/components/profile/UserHandleNotFound/index.tsx
new file mode 100644
index 00000000..4bc258d8
--- /dev/null
+++ b/src/components/profile/UserHandleNotFound/index.tsx
@@ -0,0 +1,18 @@
+import { SignInButton } from '@/components/auth';
+import { Typography, VerticalForm } from '@/components/common';
+import Cat404 from '@/public/assets/graphics/cat404.png';
+import Image from 'next/image';
+
+export interface UserHandleNotFoundProps {
+ handle: string;
+}
+
+export const UserHandleNotFound = ({ handle }: UserHandleNotFoundProps) => (
+
+
+ No user with handle ‘{handle}’ was found.
+
+
+
+
+);
diff --git a/src/components/profile/UserProfilePage/index.tsx b/src/components/profile/UserProfilePage/index.tsx
new file mode 100644
index 00000000..ad1d5a60
--- /dev/null
+++ b/src/components/profile/UserProfilePage/index.tsx
@@ -0,0 +1,172 @@
+import { Carousel, GifSafeImage, Typography } from '@/components/common';
+import { EventCard } from '@/components/events';
+import SocialMediaIcon from '@/components/profile/SocialMediaIcon';
+import { config, showToast } from '@/lib';
+import { PublicAttendance, type PublicProfile } from '@/lib/types/apiResponses';
+import { SocialMediaType } from '@/lib/types/enums';
+import { copy, fixUrl, getLevel, getProfilePicture, getUserRank } from '@/lib/utils';
+import EditIcon from '@/public/assets/icons/edit.svg';
+import LeaderboardIcon from '@/public/assets/icons/leaderboard-icon.svg';
+import MajorIcon from '@/public/assets/icons/major-icon.svg';
+import ProfileIcon from '@/public/assets/icons/profile-icon.svg';
+import { Tooltip } from '@mui/material';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import styles from './style.module.scss';
+
+export interface UserProfilePageProps {
+ handleUser: PublicProfile;
+ isSignedInUser: boolean;
+ signedInAttendances: PublicAttendance[];
+ attendances?: PublicAttendance[];
+}
+
+export const UserProfilePage = ({
+ handleUser,
+ attendances,
+ signedInAttendances,
+ isSignedInUser,
+}: UserProfilePageProps) => {
+ // animate the progress bar
+ const [progress, setProgress] = useState(0);
+ useEffect(() => setProgress(handleUser.points % 100), [handleUser.points]);
+
+ return (
+
+
+
+
+
+
+
+
+
{`${handleUser.firstName} ${handleUser.lastName}`}
+
+
+ {
+ copy(window.location.href);
+ showToast('Profile link copied!');
+ }}
+ >
+ @{handleUser.handle}
+
+
+
+
+
+
{getUserRank(handleUser.points)}
+
+
+ {handleUser.points.toLocaleString()} Leaderboard Points
+
+
+ {isSignedInUser && (
+
+ )}
+
+
+
+
+ {isSignedInUser ? 'My' : `${handleUser.firstName}'s`} Progress
+
+
+
Level {getLevel(handleUser.points)}
+
{handleUser.points % 100}/100
+
+
+
+ {isSignedInUser ? 'You need ' : `${handleUser.firstName} needs `}
+ {100 - (handleUser.points % 100)} more points to level up to
+
+ {getUserRank(handleUser.points + 100)}
+
+
+
+
+
+
+
About me
+
+
+
Class of {handleUser.graduationYear}
+
+
{handleUser.major}
+
+
+ {handleUser.userSocialMedia?.map(social => (
+
+
+
+ ))}
+
+
+
+ Bio
+
+ {handleUser.bio || Nothing here...}
+
+
+ {isSignedInUser && (
+
+ )}
+
+ {(attendances || isSignedInUser) && (
+
+
+ Recently Attended Events
+ {!handleUser.isAttendancePublic && (
+
+ (hidden for other users)
+
+ )}
+
+
+ {(isSignedInUser ? signedInAttendances : (attendances as PublicAttendance[])).map(
+ ({ event }) => (
+ uuid === event.uuid)}
+ />
+ )
+ )}
+
+
+ )}
+
Portal Profile Page
-
- Manage Account
-
-
- );
-};
+const UserProfilePage: NextPage = () => null;
export default UserProfilePage;
-const getServerSidePropsFunc: GetServerSideProps = async () => ({
- props: {},
-});
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+ const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+ const user = await UserAPI.getCurrentUser(token);
+
+ return {
+ redirect: {
+ destination: `${config.userProfileRoute}${user.handle}`,
+ permanent: false,
+ },
+ };
+};
export const getServerSideProps = withAccessType(
getServerSidePropsFunc,
diff --git a/src/pages/profile/edit.tsx b/src/pages/profile/edit.tsx
index a35932ae..37f40d92 100644
--- a/src/pages/profile/edit.tsx
+++ b/src/pages/profile/edit.tsx
@@ -1,4 +1,4 @@
-import { Cropper } from '@/components/common';
+import { Cropper, GifSafeImage } from '@/components/common';
import {
EditBlock,
EditField,
@@ -9,19 +9,18 @@ import {
} from '@/components/profile';
import { config, showToast } from '@/lib';
import { AuthAPI, ResumeAPI, UserAPI } from '@/lib/api';
-import majors from '@/lib/constants/majors.json';
+import majors from '@/lib/constants/majors';
import socialMediaTypes from '@/lib/constants/socialMediaTypes';
import withAccessType from '@/lib/hoc/withAccessType';
import { CookieService, PermissionService } from '@/lib/services';
import { PrivateProfile } from '@/lib/types/apiResponses';
import { CookieType, SocialMediaType } from '@/lib/types/enums';
-import { capitalize, getMessagesFromError, getProfilePicture, isSrcAGif } from '@/lib/utils';
+import { capitalize, getMessagesFromError, getProfilePicture } from '@/lib/utils';
import DownloadIcon from '@/public/assets/icons/download-icon.svg';
import DropdownIcon from '@/public/assets/icons/dropdown-arrow-1.svg';
import styles from '@/styles/pages/profile/edit.module.scss';
import { AxiosError } from 'axios';
import type { GetServerSideProps } from 'next';
-import Image from 'next/image';
import Link from 'next/link';
import { FormEvent, useEffect, useId, useMemo, useState } from 'react';
@@ -36,7 +35,8 @@ function reportError(title: string, error: unknown) {
}
function fixUrl(input: string, prefix?: string): string {
- if (!input || input.startsWith('https://')) {
+ // Return input as-is if it's blank or includes a protocol
+ if (!input || input.includes('://')) {
return input;
}
// Encourage https://
@@ -278,7 +278,7 @@ const EditProfilePage = ({ user: initUser, authToken }: EditProfileProps) => {
onDragLeave={() => setPfpDrop(false)}
>
@@ -376,7 +375,7 @@ const EditProfilePage = ({ user: initUser, authToken }: EditProfileProps) => {
-
+
About Me
@@ -385,7 +384,7 @@ const EditProfilePage = ({ user: initUser, authToken }: EditProfileProps) => {
{
}
name="major"
- options={data.majors}
+ options={majors}
element="select"
placeholder="Major"
error={errors.major}
diff --git a/src/pages/u/[handle].tsx b/src/pages/u/[handle].tsx
index 98b20c60..2e7d800f 100644
--- a/src/pages/u/[handle].tsx
+++ b/src/pages/u/[handle].tsx
@@ -1,30 +1,61 @@
+import {
+ UserHandleNotFound,
+ UserHandleNotFoundProps,
+ UserProfilePage,
+ UserProfilePageProps,
+} from '@/components/profile';
import { config } from '@/lib';
import { UserAPI } from '@/lib/api';
import withAccessType from '@/lib/hoc/withAccessType';
import { CookieService, PermissionService } from '@/lib/services';
-import type { PublicProfile } from '@/lib/types/apiResponses';
+import { setServerCookie } from '@/lib/services/CookieService';
import { CookieType } from '@/lib/types/enums';
import type { GetServerSideProps } from 'next/types';
-interface UserProfilePageProps {
- user: PublicProfile;
-}
+type UserHandlePageProps = UserHandleNotFoundProps | UserProfilePageProps;
-const UserProfilePage = ({ user }: UserProfilePageProps) => {
- return {JSON.stringify(user, null, 2)};
+const isUserHandleNotFound = (props: UserHandlePageProps): props is UserHandleNotFoundProps =>
+ 'handle' in props;
+
+const UserHandlePage = (props: UserHandlePageProps) => {
+ if (isUserHandleNotFound(props)) {
+ const { handle } = props;
+ return ;
+ }
+
+ return ;
};
-export default UserProfilePage;
+export default UserHandlePage;
const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res }) => {
const handle = params?.handle as string;
const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
try {
- const user = await UserAPI.getUserByHandle(token, handle);
+ const [handleUser, user, signedInAttendances] = await Promise.all([
+ UserAPI.getUserByHandle(token, handle).catch(() => null),
+ UserAPI.getCurrentUser(token),
+ UserAPI.getAttendancesForCurrentUser(token),
+ ]);
+ setServerCookie(CookieType.USER, JSON.stringify(user), { req, res });
+
+ // render UserHandleNotFoundPage when user with handle is not retrieved
+ if (handleUser === null) return { props: { handle } };
+
+ const isSignedInUser = handleUser.uuid === user.uuid;
+
+ let attendances = null;
+ if (!isSignedInUser && handleUser.isAttendancePublic)
+ attendances = (await UserAPI.getAttendancesForUserByUUID(token, user.uuid)).slice(0, 10);
+
+ // render UserProfilePage
return {
props: {
- user,
+ handleUser,
+ isSignedInUser,
+ signedInAttendances,
+ attendances,
},
};
} catch (err: any) {
diff --git a/src/styles/pages/about.module.scss b/src/styles/pages/about.module.scss
index 4f6d4e78..6cc06b17 100644
--- a/src/styles/pages/about.module.scss
+++ b/src/styles/pages/about.module.scss
@@ -45,8 +45,10 @@
gap: 0.5rem;
margin-bottom: 0.7rem;
- .theme {
+ .icon {
fill: currentColor;
+ height: 24px;
+ width: 24px;
}
}
}
diff --git a/src/styles/pages/about.module.scss.d.ts b/src/styles/pages/about.module.scss.d.ts
index b50acecd..e0297ef6 100644
--- a/src/styles/pages/about.module.scss.d.ts
+++ b/src/styles/pages/about.module.scss.d.ts
@@ -4,9 +4,9 @@ export type Styles = {
description: string;
discordPreview: string;
header: string;
+ icon: string;
logo: string;
socials: string;
- theme: string;
};
export type ClassNames = keyof Styles;
diff --git a/src/styles/pages/profile/edit.module.scss b/src/styles/pages/profile/edit.module.scss
index 0f00b6f5..d1f2c4a3 100644
--- a/src/styles/pages/profile/edit.module.scss
+++ b/src/styles/pages/profile/edit.module.scss
@@ -33,9 +33,14 @@
.columnLeft {
border-right: 0.5px solid vars.$light-primary-2;
flex: none;
+ margin-bottom: -2rem; // extend column all the way to the bottom
margin-right: 2rem;
+ max-height: calc(100vh - 4rem); // subtract height of navbar
+ overflow-y: auto;
padding: 2rem;
padding-left: 0;
+ position: sticky;
+ top: 4rem;
width: 24rem;
h2 {