feat: (client) show alert using Context (foyzulkarim#35)

client/src/App.js

@@ -1,10 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 
-import {
-  Stack,
-  Alert,
-  Snackbar,
-} from "@mui/material";
 
 // routes
 import Router from "./routes";
@@ -13,19 +8,25 @@ import ThemeProvider from "./theme";
 // components
 import ScrollToTop from "./components/scroll-to-top";
 import { StyledChart } from "./components/chart";
+import  ShowAlert  from "./components/alert";
+
 
 import { useSocket } from "./contexts/SocketContext";
+import { SetAlertContext } from "./contexts/AlertContext";
+
+
 
 export default function App() {
   const socket = useSocket();
-  const [wsResponse, setWsResponse] = useState(null);
+  const setAlertContext = useContext(SetAlertContext);
 
   useEffect(() => {
     socket.on("hello", (msg) => {
       console.log("hello", msg);
-      setWsResponse(
-        `Video ${msg.title} HLS conversion completed as ${msg.originalname}`
-      );
+      setAlertContext({
+        type:'success',
+        message: `Video ${msg.title} HLS conversion completed as ${msg.originalname}`
+      });
     });
   }, [socket]);
 
@@ -34,25 +35,7 @@ export default function App() {
       <ScrollToTop />
       <StyledChart />
       <Router />
-      <Stack>
-        <Snackbar
-          open={wsResponse}
-          autoHideDuration={5000}
-          onClose={() => {
-            setWsResponse(null);
-          }}
-          anchorOrigin={{ vertical: "top", horizontal: "center" }}
-        >
-          <Alert
-            onClose={() => {
-              setWsResponse(null);
-            }}
-            severity={"success"}
-          >
-            {wsResponse}
-          </Alert>
-        </Snackbar>
-      </Stack>
+      <ShowAlert />
     </ThemeProvider>
   );
 }

client/src/components/alert/Alert.js

@@ -1,51 +1,51 @@
+// react
+import  {  useContext } from "react";
+
+// @mui
 import {
     Stack,
     Alert,
     Snackbar,
   } from "@mui/material";
-  
-  
-  // theme
-  import ThemeProvider from "../../theme";
-  
-  // components
-  import ScrollToTop from "../scroll-to-top";
-  import { StyledChart } from "../chart";
-  
-  
-  // ----------------------------------------------------------------------
-
-  
-
-  export default function ShowAlert(data={}) {
-
-    const {alertType, alertMessage, setAlertMessage}=data.data
-
-    return (
-      <ThemeProvider>
-        <ScrollToTop />
-        <StyledChart />
-        {/* <Router /> */}
-        <Stack>
-          <Snackbar
-            open={alertMessage}
-            autoHideDuration={5000}
+
+// Context
+import { AlertContext, SetAlertContext } from "../../contexts/AlertContext";
+
+
+// ----------------------------------------------------------------------
+
+    
+export default function ShowAlert() {
+
+  const alertContext = useContext(AlertContext);
+  const setAlertContext = useContext(SetAlertContext);
+
+  return (
+      <Stack>
+        <Snackbar
+          open={alertContext.message}
+          autoHideDuration={4000}
+          onClose={() => {
+            setAlertContext({
+              type: '',
+              message: null
+            });
+          }}
+          anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        >
+          <Alert
             onClose={() => {
-              setAlertMessage(null);
+              setAlertContext({
+                type: '',
+                message: null
+              });
             }}
-            anchorOrigin={{ vertical: "top", horizontal: "center" }}
+            severity={alertContext.type}
           >
-            <Alert
-              onClose={() => {
-                setAlertMessage(null);
-              }}
-              severity={alertType}
-            >
-              {alertMessage}
-            </Alert>
-          </Snackbar>
-        </Stack>
-      </ThemeProvider>
-    );
-  }
+            {alertContext.message}
+          </Alert>
+        </Snackbar>
+      </Stack>
+  );
+}
 

client/src/contexts/AlertContext.js

@@ -0,0 +1,20 @@
+// react
+import React, { createContext, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+
+export const AlertContext = createContext(null);
+export const SetAlertContext = createContext(null);
+
+export const AlertProvider = ({ children }) => {
+  const [alert, setAlert] = useState({type: null, message: null});
+
+  return (
+    <AlertContext.Provider value={alert}>
+      <SetAlertContext.Provider value={setAlert}>
+        {children}
+      </SetAlertContext.Provider>
+    </AlertContext.Provider>
+  );
+};

client/src/index.js

@@ -3,6 +3,7 @@ import { BrowserRouter } from "react-router-dom";
 import { HelmetProvider } from "react-helmet-async";
 
 import { SocketProvider } from "./contexts/SocketContext";
+import { AlertProvider } from "./contexts/AlertContext";
 
 //
 import App from "./App";
@@ -17,7 +18,9 @@ root.render(
   <HelmetProvider>
     <BrowserRouter>
       <SocketProvider>
-        <App />
+        <AlertProvider>
+          <App />
+        </AlertProvider>
       </SocketProvider>
     </BrowserRouter>
   </HelmetProvider>

client/src/pages/VideoEditPage.js

@@ -18,12 +18,12 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 // react
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 
-// components
-import  ShowAlert  from '../components/alert';
+// Context
+import { SetAlertContext } from "../contexts/AlertContext";
 
 // others
 import { useFormik } from 'formik';
@@ -69,8 +69,7 @@ const validationSchema = yup.object({
 export default function VideoEditPage() {
   const navigate = useNavigate();
   const { id } = useParams();
-  const [alertMessage, setAlertMessage] = useState(null);
-  const [alertType, setAlertType] = useState('success');
+  const setAlertContext = useContext(SetAlertContext);
   const [initialValues, setInitialValues] = useState({
     title: '',
     description: '',
@@ -95,8 +94,7 @@ export default function VideoEditPage() {
         setInitialValues(response.data)
       })
       .catch(function (error){
-        setAlertType('error');
-        setAlertMessage(error.response.data.message);
+        setAlertContext({type:'error', message: error.response.data.message});
         if(error.response.status===401){
           setTimeout(() => navigate('/login'), 3000);
         }
@@ -106,8 +104,7 @@ export default function VideoEditPage() {
     if(id){
       fetchData();
     }else{
-        setAlertType('error');
-        setAlertMessage("Undefined Id");
+      setAlertContext({type:'error', message: 'Undefined Id'});
     }
 
   }, [id]);
@@ -136,13 +133,11 @@ export default function VideoEditPage() {
       }
     )
     .then(function (response){
-      setAlertType('success');
-      setAlertMessage('Video edit successfull');
+      setAlertContext({type:'success', message: 'Video edit successfull'});
       setTimeout(() => navigate('/videos'), 3000);
     })
     .catch(function (error){
-      setAlertType('error');
-      setAlertMessage(error.response.data.message);
+      setAlertContext({type:'error', message: error.response.data.message});
       if(error.response.status===401){
         setTimeout(() => navigate('/login', { replace: true }), 3000);
       }
@@ -173,7 +168,6 @@ export default function VideoEditPage() {
       <Helmet>
         <title>Update Video</title>
       </Helmet>
-      <ShowAlert data={{alertType, alertMessage, setAlertMessage}} />
 
       <>
         <Container>

client/src/pages/VideoListPage.js

@@ -16,14 +16,16 @@ import {
 import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
 
 // react
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useContext } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useNavigate } from 'react-router-dom';
 
 // components
 import Iconify from '../components/iconify';
 import Scrollbar from '../components/scrollbar';
-import  ShowAlert  from '../components/alert';
+
+// Context
+import { SetAlertContext } from "../contexts/AlertContext";
 
 // other
 import moment from 'moment';
@@ -38,8 +40,7 @@ export default function UserPage() {
   const [open, setOpen] = useState(null);
 
   const [rows, setRows] = useState([]);
-  const [alertMessage, setAlertMessage] = useState(null);
-  const [alertType, setAlertType] = useState('success');
+  const setAlertContext = useContext(SetAlertContext);
 
   const deleteVideo = useCallback(
     (id) => () => {
@@ -115,8 +116,7 @@ export default function UserPage() {
         setRows(videos);
       })
       .catch(function (error){
-        setAlertType('error');
-        setAlertMessage(error.response.data.message);
+        setAlertContext({type:'error', message: error.response.data.message});
         if(error.response.status===401){
           setTimeout(() => navigate('/login'), 3000);
         }
@@ -148,8 +148,6 @@ export default function UserPage() {
         setRowCountState(response.data.count);
       })
       .catch(function (error){
-        setAlertType('error');
-        setAlertMessage(error.response.data.message);
         if(error.response.status===401){
           setTimeout(() => navigate('/login'), 3000);
         }
@@ -212,7 +210,6 @@ export default function UserPage() {
       <Helmet>
         <title> Video List </title>
       </Helmet>
-      <ShowAlert data={{alertType, alertMessage, setAlertMessage}} />
 
       <Container>
         <Stack

client/src/pages/VideoPlayerPage.js

@@ -1,6 +1,6 @@
 // react
 import ReactPlayer from 'react-player';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 
@@ -15,8 +15,8 @@ import {
   Button,
 } from '@mui/material';
 
-// components
-import  ShowAlert  from '../components/alert';
+// Context
+import { SetAlertContext } from "../contexts/AlertContext";
 
 //constants
 import { API_SERVER, VIDEO_SERVER } from '../constants';
@@ -42,8 +42,7 @@ const StyledContent = styled('div')(({ theme }) => ({
 
 export default function VideoPlayerPage() {
   const [url, setUrl] = useState('');
-  const [alertMessage, setAlertMessage] = useState(null);
-  const [alertType, setAlertType] = useState('success');
+  const setAlertContext = useContext(SetAlertContext);
   const [data, setData] = useState({
     title: '',
     description: '',
@@ -109,8 +108,7 @@ export default function VideoPlayerPage() {
         setUrl(u);
       })
       .catch(function (error){
-        setAlertType('error');
-        setAlertMessage(error.response.data.message);
+        setAlertContext({type:'error', message: error.response.data.message});
         if(error.response.status===401){
           setTimeout(() => navigate('/login'), 3000);
         }
@@ -125,7 +123,6 @@ export default function VideoPlayerPage() {
       <Helmet>
         <title> Video</title>
       </Helmet>
-      <ShowAlert data={{alertType, alertMessage, setAlertMessage}} />
       <Box
         sx={{
           bgcolor: '#eceff1',