Staging

app/actions.ts

@@ -17,24 +17,29 @@ export async function getUserData() {
         cookies().get('OTR-Access-Token')?.value
       }`,
     },
-    next: {
+    /* next: {
       revalidate: 120,
       tags: ['user-me'],
-    },
+    }, */
   });
 
   if (res.status !== 200) {
+    const errorMessage = await res.text();
+
     return {
       error: {
         status: res.status,
         text: res.statusText,
+        message: errorMessage,
       },
     };
   }
 
-  res = await res.json();
+  if (res.status === 200) {
+    res = await res.json();
 
-  return res;
+    return res;
+  }
 
   /* .then((response) => {
       return response.json();
@@ -48,6 +53,32 @@ export async function getUserData() {
     }); */
 }
 
+export async function checkUserLogin() {
+  let res = await fetch(`${process.env.REACT_APP_API_URL}/me/validate`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': `${process.env.REACT_APP_ORIGIN_URL}`,
+      Cookie: `${cookies().get('OTR-Access-Token')?.name}=${
+        cookies().get('OTR-Access-Token')?.value
+      }`,
+    },
+  });
+
+  if (!res?.ok) {
+    const errorCode = res?.status;
+
+    return {
+      error: {
+        errorCode,
+      },
+    };
+  }
+
+  return await getUserData();
+}
+
 export async function revalidateUserData() {
   return revalidateTag('user-me');
 }
@@ -411,6 +442,52 @@ export async function fetchDashboard() {
   return data;
 }
 
+export async function fetchUserPageTitle(player: string | number) {
+  let res = await fetch(
+    `${process.env.REACT_APP_API_URL}/players/${player}/info`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  if (res?.ok) {
+    res = await res.json();
+    return res;
+  }
+
+  return null;
+}
+
+export async function fetchUserPage(player: string | number) {
+  const isUserLogged = await checkUserLogin();
+
+  let res = await fetch(
+    `${process.env.REACT_APP_API_URL}/stats/${player}${
+      isUserLogged ? `?comparerId=${isUserLogged?.userId}` : ''
+    }`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  if (!res?.ok) {
+    return redirect('/');
+  }
+
+  res = await res.json();
+
+  /* TEMPORARY BEHAVIOR */
+  if (res?.generalStats === null) {
+    return redirect('/');
+  }
+
+  return res;
+}
+
 export async function paginationParamsToURL(params: {}) {
   let url = '';
 

app/dashboard/page.module.css

@@ -106,3 +106,9 @@
 .cardStat .value {
   font-weight: 600;
 }
+
+.noGraphText {
+  font-style: italic;
+  font-weight: 400;
+  font-size: 0.9rem;
+}

app/dashboard/page.tsx

@@ -1,3 +1,4 @@
+import { fetchDashboard } from '@/app/actions';
 import AreaChart from '@/components/Charts/AreaChart/AreaChart';
 import BarChart from '@/components/Charts/BarChart/BarChart';
 import DoughnutChart from '@/components/Charts/DoughnutChart/DoughnutChart';
@@ -11,7 +12,6 @@ import UserMainCard from '@/components/Dashboard/UserMainCard/UserMainCard';
 import FormattedNumber from '@/components/FormattedNumber/FormattedNumber';
 import Notice from '@/components/Notice/Notice';
 import clsx from 'clsx';
-import { fetchDashboard } from '../actions';
 import styles from './page.module.css';
 
 import type { Metadata } from 'next';
@@ -67,7 +67,7 @@ export default async function page({
         <div className={styles.graphContainer}>
           <div className={styles.header}>
             <div className={styles.rating}>
-              <span>{Math.floor(data.generalStats.rating)}</span>
+              <span>{Math.round(data.generalStats.rating)}</span>
               <span
                 className={clsx(
                   styles.change,
@@ -191,44 +191,39 @@ export default async function page({
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />
         </GridCard>
-        <GridCard title={'Most played with teammates - TO DO'}>
-          <PlayersBarChart />
+        <GridCard title={'Most played with teammates'}>
+          <PlayersBarChart players={data?.frequentTeammates} />
         </GridCard>
-        <GridCard title={'Most played with opponents - TO DO'}>
-          <PlayersBarChart />
+        <GridCard title={'Most played with opponents'}>
+          <PlayersBarChart players={data?.frequentOpponents} />
         </GridCard>
       </StatsGrid>
       <StatsGrid>
-        <GridCard title={'Tournaments over time - TO DO'}>
-          <div className={styles.chart}>
-            <AreaChart />
-          </div>
-        </GridCard>
-        <GridCard title={'Most common team size'}>
+        <GridCard title={'Most common format'}>
           <BarChart
             mainAxe={'x'}
             teamSizes={data?.tournamentStats.teamSizeCounts}
           />
         </GridCard>
-        <GridCard title={'Most common format - TO DO'}>
-          <BarChart mainAxe={'x'} />
-        </GridCard>
-        <GridCard title={'Summary of placements - TO DO'}>
-          <BarChart mainAxe={'x'} />
-        </GridCard>
         <GridCard title={'Best tournament performances'}>
           <BarChart
             mainAxe={'y'}
             bestTournamentPerformances={data?.tournamentStats.bestPerformances}
           />
         </GridCard>
         <GridCard title={'Worst tournament performances'}>
-          <BarChart
-            mainAxe={'y'}
-            worstTournamentPerformances={
-              data?.tournamentStats.worstPerformances
-            }
-          />
+          {data?.tournamentStats.worstPerformances.length > 0 ? (
+            <BarChart
+              mainAxe={'y'}
+              worstTournamentPerformances={
+                data?.tournamentStats.worstPerformances
+              }
+            />
+          ) : (
+            <span className={styles.noGraphText}>
+              Play 6 or more tournaments to populate this graph!
+            </span>
+          )}
         </GridCard>
       </StatsGrid>
     </main>

app/globals.css

@@ -99,6 +99,22 @@
   --mods-FM-bg-row: 101, 38%, 63%, 0.15;
   --mods-TB-bg: 191, 26%, 57%;
   --mods-TB-bg-row: 191, 26%, 57%, 0.15;
+
+  --accent-color: 216, 100%, 65%;
+  --accent-secondary-color: var(--blue-300);
+
+  /* CHARTS */
+  --tooltip-color: 0, 0%, 100%;
+  --tooltip-gain: var(--green-400);
+  --tooltip-loss: var(--red-400);
+
+  /* BADGES */
+  --badge-provisional-background: var(--yellow-400);
+  --badge-provisional-foreground: var(--yellow-900);
+
+  /* USER RATING TIER */
+  --tier-bar-background: var(--gray-300);
+  --tier-bar-accent: var(--accent-color);
 }
 
 * {

app/layout.tsx

@@ -1,5 +1,6 @@
 import Footer from '@/components/Footer/Footer';
 import NavBar from '@/components/NavBar/NavBar';
+import UserProvider from '@/util/UserLoggedContext';
 import type { Metadata } from 'next';
 import { Viewport } from 'next';
 import { Inter } from 'next/font/google';
@@ -31,9 +32,11 @@ export default function RootLayout({
   return (
     <html lang="en" className={inter.variable}>
       <body>
-        <NavBar />
-        {children}
-        <Footer />
+        <UserProvider>
+          <NavBar />
+          {children}
+          <Footer />
+        </UserProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -6,18 +6,9 @@ import decoration4 from '@/public/decorations/decoration-4.svg';
 import fullLogo from '@/public/logos/full-logo.svg';
 import Image from 'next/image';
 import Balancer from 'react-wrap-balancer';
-import { getUserData } from './actions';
 import styles from './page.module.css';
 
-export const revalidate = 60;
-
-const getUser = async () => {
-  return await getUserData();
-};
-
 export default async function Home() {
-  const user = await getUser();
-
   return (
     <main className={styles.main}>
       <div className={styles.row}>

app/users/[id]/page.module.css

@@ -0,0 +1,114 @@
+.main {
+  gap: var(--main-padding);
+}
+
+.notices {
+  display: flex;
+  flex-flow: column;
+  gap: 0.8rem;
+}
+
+.mainGraphContainer {
+  display: flex;
+  flex-flow: column;
+  gap: var(--internal-gap);
+}
+
+.graphContainer {
+  display: flex;
+  flex-flow: column;
+  background-color: hsla(var(--gray-100));
+  border-radius: var(--main-borderRadius);
+  padding: var(--main-padding);
+  gap: 1.2rem;
+}
+
+.graphContainer .header {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.graphContainer .chart,
+.chart {
+  height: 18rem;
+}
+
+.header .rating {
+  display: flex;
+  flex-flow: row;
+  font-size: 3.4rem;
+  font-weight: 600;
+  gap: 0.6rem;
+  line-height: 3.4rem;
+}
+
+.rating .change {
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+  display: flex;
+  flex-flow: row;
+  align-items: flex-end;
+}
+
+.change.positive {
+  color: hsla(var(--green-400));
+}
+
+.change.positive::before {
+  content: '+';
+}
+
+.change.negative {
+  color: hsla(var(--red-400));
+}
+
+.change.negative::before {
+  content: '-';
+}
+
+.header .stats {
+  display: flex;
+  flex-flow: row;
+  gap: 4rem;
+  align-items: flex-end;
+}
+
+.stats .item {
+  display: flex;
+  flex-flow: row;
+  gap: 1.1rem;
+  font-size: 1.1rem;
+  font-weight: 400;
+}
+
+.item .score {
+  font-weight: 600;
+}
+
+.item #rank::before {
+  content: '#';
+}
+
+.item #percentile::after {
+  content: '%';
+}
+
+.cardStat {
+  display: flex;
+  flex-flow: row;
+  gap: 1rem;
+  font-size: 1.2rem;
+}
+
+.cardStat .value {
+  font-weight: 600;
+}
+
+.noGraphText {
+  font-style: italic;
+  font-weight: 400;
+  font-size: 0.9rem;
+}