ADded Snackbar to show Feedback Received

ChrisPatten · Dec 20, 2024 · a2154d7 · a2154d7
1 parent a2d4f9e
commit a2154d7
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/app/containers/ConversationBubble/ConversationBubble.js b/app/containers/ConversationBubble/ConversationBubble.js
@@ -1,24 +1,34 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
-import Box from '@/app/components/Box/Box';
-import Typography from '@/app/components/Typography/Typography';
 import { useTheme } from '@mui/material';
-import IconButton from '@/app/components/IconButton/IconButton';
-import Tooltip from '@/app/components/Tooltip/Tooltip';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ErrorIcon from '@mui/icons-material/Error';
+import Box from '@/app/components/Box/Box';
+import Typography from '@/app/components/Typography/Typography';
+import IconButton from '@/app/components/IconButton/IconButton';
+import Tooltip from '@/app/components/Tooltip/Tooltip';
 import postFeedback from '@/app/services/postFeedback';
+import { SnackbarContext } from '@/app/contexts/SnackbarContext/SnackbarContext';
 
 const ConversationBubble = ({ entry }) => {
   const theme = useTheme();
+  const { setSnackbar } = useContext(SnackbarContext);
 
   const handleFeedback = async (type) => {
     const success = await postFeedback(entry.requestId, type);
     if (success) {
-      console.log('Feedback posted successfully');
+      // console.log('Feedback posted successfully');
+      setSnackbar({
+        message: 'Feedback Received',
+        severity: 'success',
+      })
     } else {
-      console.log('Failed to post feedback');
+      // console.log('Failed to post feedback');
+      setSnackbar({
+        message: 'There was an Error Receiving Your Feedback',
+        severity: 'error',
+      })
     }
   };
 

diff --git a/app/contexts/SnackbarContext/SnackbarContext.js b/app/contexts/SnackbarContext/SnackbarContext.js
@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export const DefaultSnackbar = {
+  message: '',
+  duration: 7000,
+  action: undefined,
+  severity: 'success'
+}
+
+export const SnackbarContext = React.createContext({
+  DefaultSnackbar
+});
diff --git a/app/layout.js b/app/layout.js
@@ -1,16 +1,55 @@
-import * as React from 'react';
+'use client';
+import React, { useState } from 'react';
+import { DefaultSnackbar, SnackbarContext } from './contexts/SnackbarContext/SnackbarContext'
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { Snackbar, Alert } from '@mui/material';
 import theme from '@/app/theme';
 
 export default function RootLayout(props) {
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarDetails, setSnackbarDetails] = useState(DefaultSnackbar);
+
+  // Pieces for the Snackbar Context
+  const setSnackbar = (props) => {
+    const { message, action, severity = 'success', duration = 7000 } = props;
+    setSnackbarDetails({
+      message: message,
+      duration: duration,
+      action: action,
+      severity: severity,
+    });
+    setShowSnackbar(true);
+  };
+
+  const onDismissSnackBar = () => {
+    setShowSnackbar(false);
+    setSnackbarDetails(DefaultSnackbar);
+  };
+
   return (
     <html lang="en">
       <body>
         <ThemeProvider theme={theme}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-          <CssBaseline />
-          {props.children}
+        <SnackbarContext.Provider
+          value={{ snackbar: snackbarDetails, setSnackbar }}
+        >
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            {props.children}
+            <Snackbar
+              open={showSnackbar}
+              onClose={onDismissSnackBar}
+              message={snackbarDetails.message}
+              action={snackbarDetails.action}
+              autoHideDuration={snackbarDetails.duration}
+              anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
+            >
+              <Alert onClose={onDismissSnackBar} severity={snackbarDetails.severity} sx={{ width: '100%' }}>
+                {snackbarDetails.message}
+              </Alert>
+            </Snackbar>
+          </SnackbarContext.Provider>
         </ThemeProvider>
       </body>
     </html>