Disabled the generate button on the Create New Trivia page for users …

…not logged in
emmanueposu · May 31, 2024 · 28472e4 · 28472e4
1 parent f3ebeae
commit 28472e4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/trivia-forge/frontend/src/Components/GenBtnTooltip.jsx b/trivia-forge/frontend/src/Components/GenBtnTooltip.jsx
@@ -0,0 +1,17 @@
+import Button from 'react-bootstrap/Button';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+function GenBtnTooltip() {
+  return (
+    <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Log in to generate a game.</Tooltip>}>
+      <span className="d-inline-block">
+        <Button disabled style={{ pointerEvents: 'none' }}>
+          Generate
+        </Button>
+      </span>
+    </OverlayTrigger>
+  );
+};
+
+export default GenBtnTooltip;
diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -9,6 +9,7 @@ import { Card } from "react-bootstrap";
 import useStore from '../Components/useStore'; // global state management
 import Spinner from 'react-bootstrap/Spinner';
 import Button from 'react-bootstrap/Button';
+import GenBtnTooltip from "../Components/GenBtnTooltip";
 
 
 
@@ -228,18 +229,23 @@ function TriviaGenPage() {
                         </div>
 
                         <div className="d-flex justify-content-center mb-4">
-                            <Button type="submit" variant="primary">
-                                <Spinner
-                                    as="span"
-                                    animation="border"
-                                    size="sm"
-                                    role="status"
-                                    aria-hidden="true"
-                                    style={{display: spinnerVisibility}}
-                                    className="me-2"
-                                />
-                                {submitBtnLabel}
-                            </Button>
+                            {user ? (
+                                <Button type="submit" variant="primary">
+                                    <Spinner
+                                        as="span"
+                                        animation="border"
+                                        size="sm"
+                                        role="status"
+                                        aria-hidden="true"
+                                        style={{display: spinnerVisibility}}
+                                        className="me-2"
+                                    />
+                                    {submitBtnLabel}
+                                </Button>
+                            ) : (
+                                <GenBtnTooltip />
+                                // <p>ok</p>
+                            )}
                         </div>
                     </form >
                 </Card >