Merge pull request #5 from VikrantParmar/vp-route-guard

Implement user-specific article management functionality

Author: VikrantParmar

src/components/@extended/AnimateButton.jsx

@@ -1,19 +1,25 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
 // third-party
-import { motion, useCycle } from 'framer-motion';
+import { motion, useCycle } from "framer-motion";
 
-export default function AnimateButton({ children, type = 'scale', direction = 'right', offset = 10, scale = { hover: 1.05, tap: 0.954 } }) {
+export default function AnimateButton({
+  children,
+  type = "scale",
+  direction = "right",
+  offset = 10,
+  scale = { hover: 1.05, tap: 0.954 },
+}) {
   let offset1;
   let offset2;
   switch (direction) {
-    case 'up':
-    case 'left':
+    case "up":
+    case "left":
       offset1 = offset;
       offset2 = 0;
       break;
-    case 'right':
-    case 'down':
+    case "right":
+    case "down":
     default:
       offset1 = 0;
       offset2 = offset;
@@ -24,44 +30,55 @@ export default function AnimateButton({ children, type = 'scale', direction = 'r
   const [y, cycleY] = useCycle(offset1, offset2);
 
   switch (type) {
-    case 'rotate':
+    case "rotate":
       return (
         <motion.div
           animate={{ rotate: 360 }}
           transition={{
             repeat: Infinity,
-            repeatType: 'loop',
+            repeatType: "loop",
             duration: 2,
-            repeatDelay: 0
+            repeatDelay: 0,
           }}
         >
           {children}
         </motion.div>
       );
-    case 'slide':
-      if (direction === 'up' || direction === 'down') {
+    case "slide":
+      if (direction === "up" || direction === "down") {
         return (
-          <motion.div animate={{ y: y !== undefined ? y : '' }} onHoverEnd={() => cycleY()} onHoverStart={() => cycleY()}>
+          <motion.div
+            animate={{ y: y !== undefined ? y : "" }}
+            onHoverEnd={() => cycleY()}
+            onHoverStart={() => cycleY()}
+          >
             {children}
           </motion.div>
         );
       }
       return (
-        <motion.div animate={{ x: x !== undefined ? x : '' }} onHoverEnd={() => cycleX()} onHoverStart={() => cycleX()}>
+        <motion.div
+          animate={{ x: x !== undefined ? x : "" }}
+          onHoverEnd={() => cycleX()}
+          onHoverStart={() => cycleX()}
+        >
           {children}
         </motion.div>
       );
 
-    case 'scale':
+    case "scale":
     default:
-      if (typeof scale === 'number') {
+      if (typeof scale === "number") {
         scale = {
           hover: scale,
-          tap: scale
+          tap: scale,
         };
       }
       return (
-        <motion.div whileHover={{ scale: scale?.hover }} whileTap={{ scale: scale?.tap }}>
+        <motion.div
+          whileHover={{ scale: scale?.hover }}
+          whileTap={{ scale: scale?.tap }}
+        >
           {children}
         </motion.div>
       );
@@ -70,8 +87,8 @@ export default function AnimateButton({ children, type = 'scale', direction = 'r
 
 AnimateButton.propTypes = {
   children: PropTypes.node,
-  type: PropTypes.oneOf(['slide', 'scale', 'rotate']),
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  type: PropTypes.oneOf(["slide", "scale", "rotate"]),
+  direction: PropTypes.oneOf(["up", "down", "left", "right"]),
   offset: PropTypes.number,
-  scale: PropTypes.object
+  scale: PropTypes.object,
 };

src/components/Blog/AlertRecordDelete.jsx

@@ -0,0 +1,130 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Stack,
+  Avatar,
+  Typography,
+} from "@mui/material";
+import { DeleteOutlined } from "@mui/icons-material";
+import { useSelector, useDispatch } from "react-redux";
+import { _loader } from "@/utils/loaderHelper";
+import { PopupTransition } from "@/components/@extended/Transitions";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import { useShowNotification } from "@/hooks/useShowNotification";
+import { deleteBlog } from "@/store/blogs/blogSlice";
+
+export default function BlogDeleteAlert({
+  id,
+  onClose,
+  recordData,
+  open,
+  onSuccess,
+}) {
+  const { showNotification } = useShowNotification();
+  const dispatch = useDispatch();
+  const { isLoadingDelete: isLoading } = useSelector((state) => state.blogs);
+  const deleteHandler = async () => {
+    try {
+      const response = await dispatch(deleteBlog(id)).unwrap();
+      showNotification(
+        response?.message || "Blog deleted successfully.",
+        "success"
+      );
+      if (onSuccess) {
+        onSuccess(response);
+      }
+      onClose();
+    } catch (error) {
+      showNotification(error?.message || "Blog could not be deleted.", "error");
+    } finally {
+      onClose();
+    }
+  };
+
+  const blogTitle = recordData ? recordData.title : "";
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      keepMounted
+      TransitionComponent={PopupTransition}
+      maxWidth="xs"
+      aria-labelledby="blog-delete-title"
+      aria-describedby="blog-delete-description"
+    >
+      <DialogContent sx={{ mt: 2, my: 1 }}>
+        <Stack alignItems="center" spacing={3.5}>
+          <Avatar
+            sx={{
+              width: 72,
+              height: 72,
+              fontSize: "1.75rem",
+              bgcolor: (theme) => theme.palette.error.main,
+            }}
+          >
+            <DeleteOutlined />
+          </Avatar>
+          <Stack spacing={2}>
+            <Typography variant="h4" align="center">
+              Are you sure you want to delete this blog?
+            </Typography>
+            <Typography align="center">
+              <Typography variant="subtitle1" component="span">
+                &quot; {blogTitle} &quot;{" "}
+              </Typography>
+            </Typography>
+          </Stack>
+
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              width: 1,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <AnimateButton>
+              <Button
+                fullWidth
+                onClick={onClose}
+                color="dark"
+                variant="outlined"
+              >
+                Cancel
+              </Button>
+            </AnimateButton>
+            <AnimateButton>
+              <Button
+                fullWidth
+                color="error"
+                variant="contained"
+                onClick={deleteHandler}
+                autoFocus
+                sx={{ minWidth: "5vw" }}
+                disabled={isLoading}
+              >
+                {_loader({
+                  type: "btn",
+                  isSubmitting: isLoading,
+                  btnTitle: "Delete",
+                })}
+              </Button>
+            </AnimateButton>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+BlogDeleteAlert.propTypes = {
+  id: PropTypes.number,
+  recordData: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  onSuccess: PropTypes.func,
+};