From 977c12428acf27eef079ba44254a6b576d78eaf4 Mon Sep 17 00:00:00 2001
From: Spencer Spenst <spencerspenst@gmail.com>
Date: Fri, 29 Sep 2023 23:01:47 -0700
Subject: [PATCH] PLEASE

---
 components/cards/card.tsx                    |  2 +-
 components/level/info/formattedLevelInfo.tsx |  6 ++--
 components/level/info/suggestedPanel.tsx     | 31 ++++++++++----------
 contexts/levelContext.ts                     |  3 ++
 pages/level/[username]/[slugName].tsx        |  3 ++
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/components/cards/card.tsx b/components/cards/card.tsx
index 4ffadbaf4..ab0aa705c 100644
--- a/components/cards/card.tsx
+++ b/components/cards/card.tsx
@@ -12,7 +12,7 @@ export default function Card({ children, id, title, tooltip }: CardProps) {
   const tooltipId = `card-tooltip-${id}`;
 
   return (
-    <div className='flex flex-col justify-center rounded-lg border max-w-full'
+    <div className='flex flex-col justify-center rounded-lg border max-w-full w-fit'
       id={id}
       style={{
         backgroundColor: 'var(--bg-color-2)',
diff --git a/components/level/info/formattedLevelInfo.tsx b/components/level/info/formattedLevelInfo.tsx
index 246eef816..909b03af1 100644
--- a/components/level/info/formattedLevelInfo.tsx
+++ b/components/level/info/formattedLevelInfo.tsx
@@ -232,7 +232,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
       backgroundColor: 'var(--bg-color-4)',
       height: 1,
     }} />
-    <div className='flex flex-col gap-2'>
+    <div className='flex flex-col gap-4'>
       <Tab.Group selectedIndex={levelContext?.sidebarIndex} onChange={levelContext?.setSidebarIndex}>
         <Tab.List className='flex flex-wrap gap-x-1 items-start rounded-[10px] p-1 border w-fit' style={{
           borderColor: 'var(--bg-color-4)',
@@ -243,7 +243,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
             }
           }}>
             {({ selected }) => (
-              <div className={classNames('py-1 px-2 rounded-md', selected ? 'tab-active' : 'tab')}>
+              <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
                 Reviews
               </div>
             )}
@@ -254,7 +254,7 @@ export default function FormattedLevelInfo({ level }: FormattedLevelInfoProps) {
             }
           }}>
             {({ selected }) => (
-              <div className={classNames('py-1 px-2 rounded-md', selected ? 'tab-active' : 'tab')}>
+              <div className={classNames('py-1 px-2 rounded-md transition', selected ? 'tab-active' : 'tab')}>
                 Suggestions
               </div>
             )}
diff --git a/components/level/info/suggestedPanel.tsx b/components/level/info/suggestedPanel.tsx
index 981ef0bad..738d04387 100644
--- a/components/level/info/suggestedPanel.tsx
+++ b/components/level/info/suggestedPanel.tsx
@@ -1,28 +1,34 @@
 import DidYouKnowTip from '@root/components/page/didYouKnowTip';
+import { LevelContext } from '@root/contexts/levelContext';
 import useHomePageData, { HomepageDataType } from '@root/hooks/useHomePageData';
-import Collection from '@root/models/db/collection';
 import Level, { EnrichedLevel } from '@root/models/db/level';
 import User from '@root/models/db/user';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Card from '../../cards/card';
 import ChapterSelectCard from '../../cards/chapterSelectCard';
 import RecommendedLevel from '../../homepage/recommendedLevel';
 
 interface SuggestedPanelProps {
-  chapter?: string;
-  collection?: Collection;
   level: Level;
   reqUser: User | undefined | null;
 }
 
-export default function SuggestedPanel({ chapter, collection, level, reqUser }: SuggestedPanelProps) {
+export default function SuggestedPanel({ level, reqUser }: SuggestedPanelProps) {
+  const levelContext = useContext(LevelContext);
+
+  const collection = levelContext?.collection;
+  const chapter = levelContext?.chapter;
   let nextLevel: EnrichedLevel | undefined = undefined;
   let lastLevelInCollection = false;
 
+  console.log(collection);
+
   if (collection && collection.levels) {
     const levelIndex = collection.levels.findIndex((l) => l._id === level._id);
 
+    console.log(levelIndex, collection.levels.length);
+
     if (levelIndex + 1 < collection.levels.length) {
       nextLevel = collection.levels[levelIndex + 1] as EnrichedLevel;
     } else {
@@ -30,6 +36,7 @@ export default function SuggestedPanel({ chapter, collection, level, reqUser }:
     }
   }
 
+  // TODO: don't use SWR here, or at least don't refetch every time you switch to the panel
   const { data } = useHomePageData([HomepageDataType.RecommendedLevel], nextLevel !== undefined);
   const recommendedLevel = data && data[HomepageDataType.RecommendedLevel];
   const [queryParams, setQueryParams] = useState({});
@@ -45,15 +52,7 @@ export default function SuggestedPanel({ chapter, collection, level, reqUser }:
   const hrefOverride = nextLevel ? `/level/${nextLevel.slug}?${queryParams}` : undefined;
 
   return (<>
-    <div className='flex flex-col gap-1'>
-      <h3 className='text-center text-2xl p-1'>
-        Congratulations!
-      </h3>
-      <h4 className='text-md'>
-        You completed {level.name}!
-      </h4>
-    </div>
-    <div className='flex flex-col gap-4 justify-center items-center'>
+    <div className='flex flex-col gap-4'>
       {!reqUser ?
         <div className='text-center'>
           <Link href='/signup' className='underline font-bold'>Sign up</Link> (or use a <Link href='/play-as-guest' className='underline font-bold'>Guest Account</Link>) to save your progress and get access to more features.
@@ -65,10 +64,10 @@ export default function SuggestedPanel({ chapter, collection, level, reqUser }:
               {level.name} is the last level in <Link className='font-bold hover:underline' href={`/collection/${collection.slug}`}>{collection.name}</Link>.
             </div>
           }
-          {chapter && !isNaN(Number(chapter)) ?
+          {chapter !== undefined && lastLevelInCollection ?
             <Card id='campaign' title='Head back to the campaign!'>
               <div className='p-3'>
-                <ChapterSelectCard chapter={Number(chapter)} />
+                <ChapterSelectCard chapter={chapter} />
               </div>
             </Card>
             :
diff --git a/contexts/levelContext.ts b/contexts/levelContext.ts
index cbc2bfb1a..bbae7468a 100644
--- a/contexts/levelContext.ts
+++ b/contexts/levelContext.ts
@@ -1,3 +1,4 @@
+import Collection from '@root/models/db/collection';
 import { createContext } from 'react';
 import { KeyedMutator } from 'swr';
 import ProStatsLevelType from '../constants/proStatsLevelType';
@@ -45,6 +46,8 @@ export interface ProStatsCommunityStepData {
 }
 
 interface LevelContextInterface {
+  chapter: number | undefined;
+  collection: Collection | undefined;
   getReviews: () => void;
   inCampaign: boolean; // true means you are playing an unbeaten level in the campaign
   level: EnrichedLevel;
diff --git a/pages/level/[username]/[slugName].tsx b/pages/level/[username]/[slugName].tsx
index 4ae71ed84..0dd3ef3a4 100644
--- a/pages/level/[username]/[slugName].tsx
+++ b/pages/level/[username]/[slugName].tsx
@@ -66,6 +66,7 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
   // handle pressing "Next level"
   useEffect(() => {
     setLevel(_level);
+    setSidebarIndex(0);
   }, [_level]);
 
   const mutateLevel = useCallback(() => {
@@ -218,6 +219,8 @@ export default function LevelPage({ _level, reqUser }: LevelProps) {
         }}
       />
       <LevelContext.Provider value={{
+        chapter: !isNaN(Number(chapter)) ? Number(chapter) : undefined,
+        collection: collection,
         getReviews: getReviews,
         inCampaign: !!chapter && level.userMoves !== level.leastMoves,
         level: level,