Merge pull request #81 from gardaholm/logbook-stats

Add Logbook Stats in Queue Drawer

app/components/board-provider/board-provider-context.tsx

@@ -333,7 +333,6 @@ export function BoardProvider({ boardName, children }: { boardName: BoardName; c
       loginInfo: null,
     });
   };
-
   const value = {
     isAuthenticated: !!authState.token,
     token: authState.token,

app/components/logbook/logbook-drawer.tsx

@@ -3,36 +3,70 @@ import Drawer from 'antd/es/drawer';
 import React, { useState } from 'react';
 import { LogAscentForm } from './logascent-form';
 import { LogbookView } from './logbook-view';
+import { LogBookStats } from './logbook-stats';
 import { BoardDetails, Climb } from '@/app/lib/types';
 
 interface LogbookDrawerProps {
   drawerVisible: boolean;
   closeDrawer: () => void;
   currentClimb: Climb | null;
   boardDetails: BoardDetails;
+  boardName: string;
+  userId: string;
 }
 
 export const LogbookDrawer: React.FC<LogbookDrawerProps> = ({
   drawerVisible,
   closeDrawer,
   currentClimb,
   boardDetails,
+  boardName,
+  userId,
 }) => {
+  // State to manage the drawer expansion and active view
   const [expanded, setExpanded] = useState(false);
   const [showLogbookView, setShowLogbookView] = useState(false);
   const [showLogAscentForm, setShowLogAscentForm] = useState(false);
+  const [showLogBookStats, setShowLogBookStats] = useState(false);
 
   const handleClose = () => {
     setExpanded(false);
     setShowLogbookView(false);
     setShowLogAscentForm(false);
+    setShowLogBookStats(false);
     closeDrawer();
   };
 
+  const handleButtonClick = (view: 'logbook' | 'logAscent' | 'stats') => {
+    setExpanded(true);
+
+    if (view === 'logbook') {
+      setShowLogbookView(true);
+      setShowLogAscentForm(false);
+      setShowLogBookStats(false);
+    } else if (view === 'logAscent') {
+      setShowLogAscentForm(true);
+      setShowLogbookView(false);
+      setShowLogBookStats(false);
+    } else if (view === 'stats') {
+      setShowLogBookStats(true);
+      setShowLogbookView(false);
+      setShowLogAscentForm(false);
+    }
+  };
+
   return (
     <Drawer
       title={
-        expanded ? (showLogbookView ? 'Logbook' : showLogAscentForm ? 'Log Ascent' : 'Log Options') : 'Log Options'
+        expanded
+          ? showLogbookView
+            ? 'Logbook'
+            : showLogBookStats
+              ? 'Logbook Stats'
+              : showLogAscentForm
+                ? 'Log Ascent'
+                : 'Log Options'
+          : 'Log Options'
       }
       placement="bottom"
       onClose={handleClose}
@@ -52,41 +86,34 @@ export const LogbookDrawer: React.FC<LogbookDrawerProps> = ({
             type="primary"
             block
             style={{ maxWidth: '400px', width: '100%' }}
-            onClick={() => {
-              setShowLogbookView(true);
-              setExpanded(true);
-            }}
+            onClick={() => handleButtonClick('logbook')}
           >
             Logbook
           </Button>
-          {/* <Button
+          <Button
             type="primary"
             block
             style={{ maxWidth: '400px', width: '100%' }}
-            onClick={() => console.log('Log Attempt clicked')}
+            onClick={() => handleButtonClick('logAscent')}
           >
-            Log Attempt
-          </Button> */}
+            Log Ascent
+          </Button>
           <Button
             type="primary"
             block
             style={{ maxWidth: '400px', width: '100%' }}
-            onClick={() => {
-              setShowLogAscentForm(true);
-              setExpanded(true);
-            }}
+            onClick={() => handleButtonClick('stats')}
           >
-            Log Ascent
+            Logbook Stats
           </Button>
         </div>
       ) : (
         <>
-          {/* TODO: Make sure these buttons never become visible 
-          when there is no climb selected */}
           {showLogbookView && currentClimb && <LogbookView currentClimb={currentClimb} />}
           {showLogAscentForm && currentClimb && (
             <LogAscentForm currentClimb={currentClimb} boardDetails={boardDetails} onClose={handleClose} />
           )}
+          {showLogBookStats && <LogBookStats boardName={boardName} userId={userId} />}
         </>
       )}
     </Drawer>