Merge pull request #132 from osu-tournament-rating/develop

Develop

app/actions.ts

@@ -11,6 +11,7 @@ import { getIronSession } from 'iron-session';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { NextResponse } from 'next/server';
 
 export async function getSession(onlyData: boolean = false) {
   const session = await getIronSession<SessionUser>(cookies(), sessionOptions);
@@ -64,10 +65,11 @@ export async function login(cookie: {
 
   const loggedUser = await getLoggedUser(cookie.accessToken);
 
-  if (loggedUser.error)
-    return {
-      error: loggedUser.error,
-    };
+  if (loggedUser.error) {
+    return NextResponse.redirect(
+      new URL('/unauthorized', process.env.REACT_APP_ORIGIN_URL)
+    );
+  }
 
   session.id = loggedUser.id;
   session.userId = loggedUser.userId;
@@ -82,7 +84,9 @@ export async function login(cookie: {
   await session.save();
 
   /* await changeOsuModeCookie(res.osuPlayMode); */
-  return redirect('/');
+  return NextResponse.redirect(
+    new URL('/', process.env.REACT_APP_ORIGIN_URL)
+  );
 }
 
 export async function getLoggedUser(accessToken: string) {
@@ -94,22 +98,11 @@ export async function getLoggedUser(accessToken: string) {
       'Access-Control-Allow-Origin': `${process.env.REACT_APP_ORIGIN_URL}`,
       Authorization: `Bearer ${accessToken}`,
     },
-    /* next: {
-      revalidate: 120,
-      tags: ['user-me'],
-    }, */
   });
 
   if (!res?.ok) {
-    /* let refreshToken = cookies().get('OTR-Refresh-Token')?.value || null;
-
-    if (refreshToken !== null && (res?.status === 401 || res?.status === 400))
-      refreshAccessToken(); */
-
     const errorMessage = await res.text();
 
-    console.log(errorMessage);
-
     return {
       error: {
         status: res.status,
@@ -510,11 +503,14 @@ export async function fetchDashboard() {
 }
 
 export async function fetchUserPageTitle(player: string | number) {
+  const session = await getSession(true);
+
   let res = await fetch(
     `${process.env.REACT_APP_API_URL}/players/${player}/info`,
     {
       headers: {
         'Content-Type': 'application/json',
+        Authorization: `Bearer ${session.accessToken}`,
       },
     }
   );
@@ -537,6 +533,7 @@ export async function fetchUserPage(player: string | number) {
     {
       headers: {
         'Content-Type': 'application/json',
+        Authorization: `Bearer ${session?.accessToken}`,
       },
     }
   );

components/Dashboard/UserMainCard/UserMainCard.module.css

@@ -20,7 +20,6 @@
 
 .tierImage {
   position: relative;
-  /* height: 100%; */
   width: 100%;
   aspect-ratio: 1;
   border-radius: 50vw;
@@ -29,7 +28,6 @@
 
 .tierImage img {
   object-fit: contain;
-  background: linear-gradient(225deg, #4c94ff 0%, #216bda 100%);
 }
 
 .username {

components/Dashboard/UserMainCard/UserMainCard.tsx

@@ -9,7 +9,11 @@ export default function UserMainCard({ data }: { data: {} }) {
     <div className={styles.userContainer}>
       <div className={styles.tierImageContainer}>
         <div className={styles.tierImage}>
-          <Image src={''} alt={"Player's Tier"} fill />
+          <Image
+            src={`/icons/ranks/${data.rankProgress.currentTier}.svg`}
+            alt={"Player's Tier"}
+            fill
+          />
         </div>
       </div>
       <div className={styles.rankings}>

components/Dashboard/UserRatingProgressBar/UserRatingProgressBar.module.css

@@ -61,8 +61,8 @@
   width: 2em;
   height: 2em;
   aspect-ratio: 1;
-  background: linear-gradient(225deg, #4c94ff 0%, #216bda 100%);
   border-radius: 50vh;
+  position: relative;
 }
 
 .container .text {

components/Dashboard/UserRatingProgressBar/UserRatingProgressBar.tsx

@@ -1,4 +1,5 @@
 'use client';
+import Image from 'next/image';
 import styles from './UserRatingProgressBar.module.css';
 
 const currentTierNumber = (current) => {
@@ -37,7 +38,15 @@ export default function UserRatingProgressBar({ data }: { data: {} }) {
             </div>
           </div>
         ))}
-        <div className={styles.nextRank}></div>
+        {data.nextMajorTier && (
+          <div className={styles.nextRank}>
+            <Image
+              src={`/icons/ranks/${data.nextMajorTier}.svg`}
+              alt={data.nextMajorTier}
+              fill
+            />
+          </div>
+        )}
       </div>
       <div className={styles.text}>
         <span>{data.ratingForNextMajorTier.toFixed(0)} TR</span> until{' '}

components/Leaderboard/Leaderboard.module.css

@@ -71,7 +71,8 @@
   text-align: center;
 }
 
-.table tbody td:nth-child(2) {
+.table tbody td:nth-child(2),
+.table tbody td:nth-child(2) a {
   display: flex;
   flex-flow: row;
   align-items: center;
@@ -106,6 +107,6 @@
   height: 1.8rem;
   width: 1.8rem;
   border-radius: 50vw;
-  background-color: hsla(var(--gray-300));
   margin: auto;
+  position: relative;
 }

components/Leaderboard/Leaderboard.tsx

@@ -1,7 +1,9 @@
 'use client';
+import { useUser } from '@/util/hooks';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/image';
+import Link from 'next/link';
 import FormattedNumber from '../FormattedNumber/FormattedNumber';
 import Pagination from '../Pagination/Pagination';
 import styles from './Leaderboard.module.css';
@@ -13,6 +15,8 @@ export default function Leaderboard({
   params: {};
   data: {};
 }) {
+  const user = useUser();
+
   return (
     <div className={styles.leaderboardContainer} id="leaderboard">
       <div className={styles.header}>
@@ -36,22 +40,40 @@ export default function Leaderboard({
           {data.leaderboard.map((player, index) => {
             return (
               <tr
-                /* className={player.globalRank === 7 ? styles.me : ''} */ // DO CHECK IF AUTH USER IS PLAYER ID
+                className={user?.id === player.playerId ? styles.me : ''}
                 key={index}
               >
                 <td>#{player.globalRank}</td>
                 <td>
-                  <div className={styles.propic}>
+                  <Link href={`/users/${player.playerId}`}>
+                    <div className={styles.propic}>
+                      <Image
+                        src={`http://a.ppy.sh/${player.osuId}`}
+                        alt={`${player.name}'s Propic`}
+                        fill
+                      />
+                    </div>
+                    {player.name}
+                  </Link>
+                </td>
+                <td>
+                  <div className={styles.rank}>
                     <Image
-                      src={`http://a.ppy.sh/${player.osuId}`}
-                      alt={`${player.name}'s Propic`}
+                      src={`/icons/ranks/${player.tier}.svg`}
+                      alt={player.tier}
+                      style={
+                        player.tier === 'Elite Grandmaster'
+                          ? { padding: '0.25em' }
+                          : player.tier.includes('Silver')
+                          ? {
+                              filter:
+                                'drop-shadow(rgba(0, 0, 0, 0.1) 0px 0.2px 0.2px)',
+                            }
+                          : {}
+                      }
                       fill
                     />
                   </div>
-                  {player.name}
-                </td>
-                <td>
-                  <div className={styles.rank}>{player.tier}</div>
                 </td>
                 <td>{Math.floor(player.rating)}</td>
                 <td>{player.matchesPlayed}</td>