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