Live notification feature in ReactJS

In today’s article, we will learn how to make notification AAP in reactjs with the help of Laravel.Live notification feature in ReactJS

In this app, I didn’t use any package for notification I just used customer code in reactjs to create notifications in reactjs. Install react from https://reactjs.org/.

Code for react js

import React, { useState, useEffect } from "react";
import axios from "axios";
import Box from '@mui/material/Box';
import Grid from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import TextField from '@mui/material/TextField';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
// or

import MenuIcon from '@mui/icons-material/Menu';
import NotificationsIcon from '@mui/icons-material/Notifications';
import Paper from '@mui/material/Paper';
import MenuItem from '@mui/material/MenuItem';
import Modal from '@mui/material/Modal';
import Badge from '@mui/material/Badge';
// import MailIcon from '@mui/icons-material/Mail'

  

function NavBar() {
  const [getRows, setRows] = useState([]);
  const [loadData, setData] = useState([]);
  const [name, setName] = useState("");
  const [desc, setDesc] = useState("");
       

  const [open, setOpen] = React.useState(false);

  const handleClose = () => setOpen(false);
  const handleOpen = () => 
   {
      setOpen(true);
      loadList();
   }
   
  const updateNotification = () =>
  {
      //Update Notification table 
    axios.post('http://localhost:8000/api/updateNotification')
    .then((result)=>{
      setOpen(false)
      getLatestRowDetails();
    })
    .catch(()=>{
      alert('Error in the Code');
    });
  }
 
  const loadList = async () => {
    const result = await axios.get("http://localhost:8000/api/list");
    setData(result.data);

  };
 // To get total count from backend
  const getLatestRowDetails = async () => {
    const results = await axios.get("http://localhost:8000/api/getLatestRow");
    setRows(results.data);
  };

 // Calling useEffect
  useEffect(() => {
    loadList();
    getLatestRowDetails();
  }, []);
 
      
 // Submit Form Data
 const handleSubmission = async (e) => {
    const formData = new FormData();
    formData.append("name", name);
    formData.append("desc", desc);
    await fetch("http://localhost:8000/api/upload", {
        method: "POST",
        body: formData,
    })
    .then((result)=>{
        alert('Uploaded Successfully');
        getLatestRowDetails();
    })
    .catch(()=>{
        alert('Error in the Code');
    });
    };

        
  return (
    <div>
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
            <Toolbar>
                <IconButton
                    size="large"
                    edge="start"
                    color="inherit"
                    aria-label="menu"
                    sx={{ mr: 2 }}
                >
                    <MenuIcon />
                </IconButton>
                <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                    News
                </Typography>
                <Button color="inherit">Login</Button>
                
                {/* <Button onClick={handleOpen}><Badge badgeContent={getRows == '0' ? "0" : getRows }  color="warning"> <NotificationsIcon /> </Badge> </Button> */}
                <MenuItem onClick={handleOpen}>
                    <IconButton
                    size="large"
                    aria-label="show 17 new notifications"
                    color="inherit"
                    >
                    <Badge badgeContent={getRows == '0' ? "0" : getRows } color="error">
                        <NotificationsIcon />
                    </Badge>
                    </IconButton>
            
                 </MenuItem>
                </Toolbar>
            </AppBar>
            </Box>

        {/* Model Box to Show data  */}
       
            <Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
             <Box sx={style}>
              <Grid container spacing={2}>
                  
                    <Grid xs={12}>
                       <TableContainer component={Paper}>
                        <Table sx={{ minWidth: 250 }} size="small" aria-label="a dense table">
                            <TableHead>
                                <TableRow>
                                    <TableCell component="th" ><b>Student Name</b></TableCell>
                                    <TableCell component="th"><b>Description</b></TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                            {loadData.map((row) => (
                               <TableRow style={{ backgroundColor: row.status == "0" ? "#ccffcc" : "white"}}>
                                    <TableCell> {row.name} </TableCell>
                                    <TableCell>{row.description}</TableCell>
                               </TableRow>
                            ))}
                            </TableBody>
                        </Table>
                        </TableContainer>
                   </Grid>
              </Grid>
               <br/><br/>
               <Box textAlign='center'> <Button
                    variant="contained"
                    color="primary"
                    type="submit"
                    onClick={updateNotification}
                  >
                    Ok
              </Button></Box>

             </Box>
            </Modal>

       {/* Submit form       */}

       <h3 class="">Notification ReactJS</h3>
       <Paper style={{ padding: 16 }}>
              <Grid container alignItems="flex-start" spacing={8}>
                <Grid item xs={12}>
                 <TextField
                    error
                    id="outlined-error-helper-text"
                    label="Name"
                  
                    name="name"
                    onChange={(e) => setDesc(e.target.value)}
                />  <br/><br/>
                 <TextField
                    error
                    id="outlined-error-helper-text"
                    label="Description"
                    name="desc"
                   
                    onChange={(e) => setName(e.target.value)} 
                />  
                 
                </Grid>
             
                <Grid item style={{ marginTop: 16 }}>
                  <Button
                    variant="contained"
                    color="primary"
                    type="submit"
                    onClick={handleSubmission}
                  >
                    Submit
                  </Button>
                </Grid>
              </Grid>
            </Paper>
      </div>
   
    
  );
}
export default NavBar;
const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
  };

I have not used any router and made all code in one component.

Backend Code ( Laravel )

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Redirect,Response,File;
use Illuminate\Support\Str;

use Illuminate\Support\Facades\Storage;

class ImageGallary extends Controller
{
 
    function saveImage(Request $request){
       $fielnames = $request->input('name');
       $desc = $request->input('desc');
      
      $submitData= DB::table('image_gallary')->insert([
            'name' =>  $fielnames ,
            'status' => 0,
            'description'=> $desc
          ]);

      if($submitData){
        return Response::json(['status'=>true]);
      } 
      else{
        return Response::json(['status'=>false]);
     } 

    }
    function dataList(){

      $res =  DB::table('image_gallary')->get();
      return Response::json($res);
      
    }
    function getLatestRow(Request $request){
      $res =  DB::table('image_gallary')->where('status',0)->count();
      return Response::json($res);
    }

    function updateNotification(Request $request){

     $updateNotification = DB::table('image_gallary')->where('status',0)->update([
            'status' => 1,
          ]);

      if($updateNotification){
        return Response::json(['status'=>true]);
      } 
      else{
        return Response::json(['status'=>false]);
      } 

    }
}

Router for Laravel APIs

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageGallary;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});



Route::post('upload',[ImageGallary::class,'saveImage']);

Route::get('list',[ImageGallary::class,'dataList']);

Route::get('delete/{id}',[ImageGallary::class,'deleteImg']);


Route::get('getLatestRow',[ImageGallary::class,'getLatestRow']);

Route::post('updateNotification',[ImageGallary::class,'updateNotification']);

Database design

See our more articles here

Leave a Reply

Your email address will not be published. Required fields are marked *