Merge pull request #146 from osu-tournament-rating/fix/manage-dashboa…

…rd-modes

Dashboard error page

app/dashboard/error.module.css

@@ -0,0 +1,47 @@
+.errorDiv {
+  position: relative;
+  min-height: 60dvh;
+  height: 70dvh;
+  max-height: 70dvh;
+  margin: var(--main-padding);
+  margin-top: 0;
+}
+
+.errorDiv .content {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--internal-gap);
+  gap: var(--internal-gap);
+  z-index: 2;
+}
+
+.errorDiv img {
+  z-index: 1;
+}
+
+.errorDiv h1 {
+  font-size: 4rem;
+}
+
+.errorDiv span {
+  font-size: 3.5rem;
+  letter-spacing: -2%;
+  text-align: center;
+  max-width: 40vw;
+}
+
+.errorDiv button {
+  margin-top: 1.3rem;
+  padding: 1rem 3rem;
+  width: fit-content;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  font-size: 1rem;
+  transition: background-color 0.2s ease-out;
+}

app/dashboard/error.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import backgroundError from '@/public/images/error-background.svg';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import Balancer from 'react-wrap-balancer';
+import styles from './error.module.css';
+
+const errors = {
+  '4': {
+    title: 'No data',
+    message: "You don't have any data for the selected ruleset",
+    reloadBtn: true,
+  },
+  '404': {
+    title: '404',
+    message: "We don't have that page",
+    reloadBtn: false,
+  },
+};
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  let errorContent = !isNaN(error.message)
+    ? errors[error.message]
+    : errors['404'];
+
+  return (
+    <div className={styles.errorDiv}>
+      <Image src={backgroundError} alt="Error background" fill />
+      <div className={styles.content}>
+        <h1>{errorContent.title}</h1>
+        <span>{errorContent.message}</span>
+        {errorContent.reloadBtn && (
+          <button
+            onClick={
+              // Attempt to recover by trying to re-render the segment
+              () => reset()
+            }
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

app/dashboard/page.tsx

@@ -29,45 +29,19 @@ export default async function page({
 }) {
   const data = await fetchDashboard();
 
+  if (!data.generalStats || !data.playerInfo) {
+    throw Error('4');
+  }
+
   return (
     <main className={styles.main}>
-      {/* <div className={styles.notices}>
-        <Notice title={'About your TR'}>
-          Your TR (tournament rating) is calculated based on your match cost
-          relative to other players in your matches, see{' '}
-          <a href="#">
-            <strong>here</strong>
-          </a>{' '}
-          for a more detailed explanation. If you notice that someone&apos;s
-          rating is significantly higher than others of similar skill level,
-          that means they are consistently outperforming in tournaments and
-          should participate against higher-rated opponents in more challenging
-          settings in order to have a more accurate rating.
-        </Notice>
-        <Notice title={'Heads up!'} type={'alert'}>
-          Missing tournament data? Don&apos;t worry! We are aggressively adding
-          tournament data, so check back later.
-          <br />
-          Help us populate your data first by submitting your matches{' '}
-          <a href="/submit">
-            <strong>here!</strong>
-          </a>
-        </Notice>
-        <Notice
-          title={'You have no data for this time period!'}
-          type={'error'}
-          text={
-            "If you've never played osu! tournaments before, welcome! You can start earning TR simply by playing in osu! tournament matches."
-          }
-        />
-      </div> */}
       <UserMainCard data={data?.generalStats} />
       <div className={styles.mainGraphContainer}>
         <FilterButtons params={searchParams} />
         <div className={styles.graphContainer}>
           <div className={styles.header}>
             <div className={styles.rating}>
-              <span>{Math.round(data.generalStats.rating)}</span>
+              <span>{Math.round(data.generalStats?.rating)}</span>
               <span
                 className={clsx(
                   styles.change,
@@ -76,15 +50,15 @@ export default async function page({
                     : styles.negative
                 )}
               >
-                {data.matchStats.ratingGained.toFixed(0) !== 0 &&
-                  data.matchStats.ratingGained.toFixed(0)}
+                {data.matchStats.ratingGained?.toFixed(0) !== 0 &&
+                  data.matchStats.ratingGained?.toFixed(0)}
               </span>
             </div>
             <div className={styles.stats}>
               <div className={styles.item}>
                 <div className={styles.text}>Highest rating</div>
                 <span className={styles.score}>
-                  {data.matchStats.highestRating.toFixed(0)}
+                  {data.matchStats.highestRating?.toFixed(0)}
                 </span>
               </div>
               <div className={styles.item}>
@@ -115,13 +89,13 @@ export default async function page({
           <div className={styles.cardStat}>
             <span>Average opponent rating</span>
             <span className={styles.value}>
-              {data?.matchStats.averageOpponentRating.toFixed(0)}
+              {data?.matchStats.averageOpponentRating?.toFixed(0)}
             </span>
           </div>
           <div className={styles.cardStat}>
             <span>Average teammate rating</span>
             <span className={styles.value}>
-              {data?.matchStats.averageTeammateRating.toFixed(0)}
+              {data?.matchStats.averageTeammateRating?.toFixed(0)}
             </span>
           </div>
           <div className={styles.cardStat}>
@@ -143,19 +117,19 @@ export default async function page({
           <div className={styles.cardStat}>
             <span>Average misses</span>
             <span className={styles.value}>
-              {data?.matchStats.matchAverageMissesAggregate.toFixed(0)}
+              {data?.matchStats.matchAverageMissesAggregate?.toFixed(0)}
             </span>
           </div>
           <div className={styles.cardStat}>
             <span>Average accuracy</span>
             <span className={styles.value}>
-              {data?.matchStats.matchAverageAccuracyAggregate.toFixed(2)}%
+              {data?.matchStats.matchAverageAccuracyAggregate?.toFixed(2)}%
             </span>
           </div>
           <div className={styles.cardStat}>
             <span>Average maps played</span>
             <span className={styles.value}>
-              {data?.matchStats.averageGamesPlayedAggregate.toFixed(0)}
+              {data?.matchStats.averageGamesPlayedAggregate?.toFixed(0)}
             </span>
           </div>
         </GridCard>

components/NavBar/ModeSwitcher/ModeSwitcher.module.css

@@ -20,7 +20,7 @@
   background-color: hsla(var(--gray-100));
   border-radius: var(--main-borderRadius);
   overflow: hidden;
-  z-index: 1;
+  z-index: 2;
 }
 
 .item {