Next level button on postmodal

sspenst · May 19, 2024 · d806607 · d806607
1 parent 8a86bcf
commit d806607
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/components/modal/index.tsx b/components/modal/index.tsx
@@ -5,16 +5,21 @@ import classNames from 'classnames';
 import React, { Fragment, useContext } from 'react';
 
 interface ModalButtonProps {
+  className?: string;
   disabled?: boolean;
   onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   text: string;
   type?: 'submit' | 'button';
 }
 
-function ModalButton({ disabled, onClick, text, type }: ModalButtonProps) {
+function ModalButton({ className, disabled, onClick, text, type }: ModalButtonProps) {
+  if (!className) {
+    className = 'bg-button';
+  }
+
   return (
     <button
-      className={classNames('inline-flex justify-center px-4 py-2 text-sm font-medium border border-transparent rounded-md bg-button')}
+      className={classNames('inline-flex justify-center px-4 py-2 text-sm font-medium border border-transparent rounded-md', className)}
       disabled={disabled}
       onClick={onClick}
       type={type || 'button'}
@@ -31,6 +36,8 @@ interface ModalProps {
   isOpen: boolean;
   onConfirm?: () => void;
   onSubmit?: () => void;
+  submitBtnClass?: string;
+  submitLabel?: string;
   title: React.ReactNode;
 }
 
@@ -41,6 +48,8 @@ export default function Modal({
   isOpen,
   onConfirm,
   onSubmit,
+  submitBtnClass,
+  submitLabel,
   title,
 }: ModalProps) {
   const { game } = useContext(AppContext);
@@ -109,7 +118,7 @@ export default function Modal({
                     </>
                     : onSubmit ?
                       <>
-                        <ModalButton disabled={disabled} onClick={() => {}} text='Submit' type='submit' />
+                        <ModalButton className={submitBtnClass} disabled={disabled} onClick={() => {}} text={submitLabel || 'Submit'} type='submit' />
                         <ModalButton disabled={disabled} onClick={(e) => {
                           e?.preventDefault();
                           closeModal();

diff --git a/components/modal/postGameModal.tsx b/components/modal/postGameModal.tsx
@@ -4,6 +4,7 @@ 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 { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import Card from '../cards/card';
 import ChapterSelectCard from '../cards/chapterSelectCard';
@@ -56,12 +57,13 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
   useEffect(() => {
     setQueryParams(new URLSearchParams(window.location.search));
   }, []);
+  const nextLevelUrl = nextLevel ? `/level/${nextLevel.slug}${queryParams?.toString().length ?? 0 !== 0 ? `?${queryParams}` : ''}` : '';
 
   function nextActionCard() {
     if (nextLevel) {
       return (
         <LevelCardWithTitle
-          href={`/level/${nextLevel.slug}${queryParams?.toString().length ?? 0 !== 0 ? `?${queryParams}` : ''}`}
+          href={nextLevelUrl}
           id='next-level'
           level={nextLevel}
           onClick={closeModal}
@@ -88,8 +90,19 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
     );
   }
 
+  const router = useRouter();
+  const onNextLevelClick = () => {
+    router.push(nextLevelUrl);
+
+    closeModal();
+  };
+
   return (
     <Modal
+
+      onSubmit={nextLevel && onNextLevelClick}
+      submitLabel='Next Level'
+      submitBtnClass={'bg-blue-500'}
       closeModal={closeModal}
       isOpen={isOpen}
       title={
@@ -132,7 +145,7 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
                 <summary onClick={(e: React.MouseEvent) => {
                   // make this element invisible
                   (e.target as HTMLElement).style.display = 'none';
-                }} className='text-xs cursor-pointer italic py-1'>Share your thoughts on {level.name}</summary>
+                }} className='text-xs cursor-pointer italic py-1 hover:text-blue-300'>Share your thoughts on {level.name}</summary>
                 <FormattedLevelReviews hideReviews={true} inModal={true} />
               </details>
             }