feat: comment delete Snackbar

client/.npmcheckrc.json

@@ -0,0 +1,7 @@
+{
+    "depcheck": {
+        "ignoreMatches": [
+            "prettier"
+        ]
+    }
+}

client/package.json

@@ -32,34 +32,34 @@
 		"digital-diary"
 	],
 	"dependencies": {
-		"@clerk/clerk-react": "^5.16.0",
-		"@emotion/react": "^11.13.3",
-		"@emotion/styled": "^11.13.0",
-		"@mui/icons-material": "^6.1.8",
+		"@clerk/clerk-react": "^5.17.1",
+		"@emotion/react": "^11.13.5",
+		"@emotion/styled": "^11.13.5",
+		"@mui/icons-material": "^6.1.9",
 		"@mui/lab": "^6.0.0-beta.12",
-		"@mui/material": "^6.1.7",
-		"@tanstack/react-query": "^5.60.6",
-		"@tanstack/react-query-devtools": "^5.60.6",
-		"axios": "^1.7.7",
+		"@mui/material": "^6.1.9",
+		"@tanstack/react-query": "^5.62.0",
+		"@tanstack/react-query-devtools": "^5.62.0",
+		"axios": "^1.7.8",
 		"moment": "^2.30.1",
-		"react": "^19.0.0-rc-fb9a90fa48-20240614",
-		"react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
+		"react": "^19.0.0-rc-7670501b-20241124",
+		"react-dom": "^19.0.0-rc-7670501b-20241124",
 		"react-intersection-observer": "^9.13.1",
-		"react-router-dom": "^7.0.1",
+		"react-router": "^7.0.1",
 		"zustand": "^5.0.1"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.15.0",
 		"@types/eslint__js": "^8.42.3",
 		"@types/eslint-config-prettier": "^6.11.3",
-		"@vitejs/plugin-react-swc": "^3.7.1",
+		"@vitejs/plugin-react-swc": "^3.7.2",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-react": "^7.37.2",
 		"eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
 		"eslint-plugin-react-refresh": "^0.4.14",
 		"globals": "^15.12.0",
-		"prettier": "^3.3.3",
-		"vite": "^6.0.0-beta.5"
+		"prettier": "^3.4.1",
+		"vite": "^6.0.1"
 	}
 }

client/src/App.jsx

@@ -1,6 +1,6 @@
 import { AppRouter, Navbar, ScrollToTop, Snackbar } from '@/components'
 import { ClerkProvider } from '@clerk/clerk-react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 import { ThemeProvider } from '@/providers'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

client/src/components/AccountMenu.jsx

@@ -16,7 +16,7 @@ import {
 	Logout
 } from '@mui/icons-material'
 import { useAuth, useUser } from '@clerk/clerk-react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useTheme } from '@/hooks'
 import { useState } from 'react'
 import { UserAvatar } from '.'

client/src/components/AppRouter.jsx

@@ -1,4 +1,4 @@
-import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
+import { Routes, Route, useLocation, Navigate } from 'react-router'
 import { lazy, Suspense } from 'react'
 import { AuthenticateWithRedirectCallback, useAuth } from '@clerk/clerk-react'
 const { Posts, LogIn, NotFound, SignUp, VerifyEmail, Profile, Post, Search } = {

client/src/components/Comment.jsx

@@ -13,7 +13,7 @@ import { Cancel, Delete, MoreVert, Edit, Save } from '@mui/icons-material'
 import moment from 'moment'
 import { useUser } from '@clerk/clerk-react'
 import { LikeButton, UserAvatar } from '@/components'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router'
 import { useDeleteComment, useUpdateComment } from '@/hooks'
 import { DeleteCommentDialogue } from './dialogues'
 

client/src/components/Navbar.jsx

@@ -18,7 +18,7 @@ import {
 	Divider,
 	Avatar
 } from '@mui/material'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router'
 import { useAuth } from '@clerk/clerk-react'
 import { Menu, Search, LoginOutlined, GitHub } from '@mui/icons-material'
 import { AccountMenu, ThemeSwitch, Sidebar } from '@/components'
@@ -145,7 +145,6 @@ const SearchDialog = ({ open, onClose: closeBox }) => {
 			handleClose()
 			navigate(`/search?q=${value}`)
 		}
-
 	}
 
 	return (

client/src/components/PostCard.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
 	Card,
 	CardHeader,

client/src/components/Searchbar.jsx

@@ -1,7 +1,7 @@
 import { Search as SearchIcon } from '@mui/icons-material'
 import { alpha, Box, InputBase, styled } from '@mui/material'
 import { useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 import { useStore } from '@/store'
 
 const Search = styled(Box)(({ theme }) => ({

client/src/components/Sidebar.jsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material'
 import { Close, Dashboard, GitHub, Logout, Settings } from '@mui/icons-material'
 import { ThemeSwitch } from '.'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useAuth, useUser } from '@clerk/clerk-react'
 
 const SideBar = ({ open, setOpen }) => {

client/src/components/forms/CreateComment.jsx

@@ -3,7 +3,7 @@ import { Box, Button, ButtonGroup, Fade, Stack, TextField } from '@mui/material'
 import { Send, Cancel } from '@mui/icons-material'
 import { useUser } from '@clerk/clerk-react'
 import { UserAvatar } from '@/components'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useCreateComment } from '@/hooks'
 
 const CreateComment = ({ postId }) => {

client/src/components/forms/CreatePost.jsx

@@ -25,7 +25,7 @@ import {
 } from '@mui/icons-material'
 import { useState } from 'react'
 import { useAuth } from '@clerk/clerk-react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useCreatePost } from '@/hooks'
 import { convertToBase64 } from '@/lib/utils'
 

client/src/components/forms/Search.jsx

@@ -8,7 +8,7 @@ import {
 	Stack,
 	TextField
 } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 const Search = () => {
 	const navigate = useNavigate()

client/src/pages/LogIn.jsx

@@ -1,5 +1,16 @@
-import { Container, Button, Paper, TextField, Typography, Avatar, Stack, Divider, FormControl, FormHelperText } from '@mui/material'
-import { Link, useNavigate } from 'react-router-dom'
+import {
+	Container,
+	Button,
+	Paper,
+	TextField,
+	Typography,
+	Avatar,
+	Stack,
+	Divider,
+	FormControl,
+	FormHelperText
+} from '@mui/material'
+import { Link, useNavigate } from 'react-router'
 import { LockOutlined } from '@mui/icons-material'
 import { useSignIn } from '@clerk/clerk-react'
 import { OAuthButtons } from '@/components'
@@ -12,7 +23,8 @@ const Form = () => {
 	const [error, setError] = useState('')
 	const navigate = useNavigate()
 
-	const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value })
+	const handleChange = (e) =>
+		setFormData({ ...formData, [e.target.name]: e.target.value })
 
 	const handleSubmit = async (event) => {
 		event.preventDefault()
@@ -34,21 +46,46 @@ const Form = () => {
 				setError('Sign-in failed. Please try again.')
 			}
 		} catch (err) {
-			setError(err.errors[0].longMessage || 'An error occurred during sign-in')
+			setError(
+				err.errors[0].longMessage || 'An error occurred during sign-in'
+			)
 		}
 	}
 
 	return (
-		<Stack component="form" onSubmit={handleSubmit} alignItems="center" spacing={1}>
+		<Stack
+			component="form"
+			onSubmit={handleSubmit}
+			alignItems="center"
+			spacing={1}
+		>
 			<Avatar sx={{ bgcolor: { xs: 'secondary.main' } }}>
 				<LockOutlined />
 			</Avatar>
 			<Typography variant="h5">WELCOME BACK</Typography>
 			<FormControl fullWidth>
-				<TextField label="Email" variant="outlined" name="email" type="email" autoComplete="email" required value={formData.email} onChange={handleChange} />
+				<TextField
+					label="Email"
+					variant="outlined"
+					name="email"
+					type="email"
+					autoComplete="email"
+					required
+					value={formData.email}
+					onChange={handleChange}
+				/>
 			</FormControl>
 			<FormControl fullWidth>
-				<TextField label="Password" variant="outlined" name="password" type="password" autoComplete="current-password" required value={formData.password} onChange={handleChange} />
+				<TextField
+					label="Password"
+					variant="outlined"
+					name="password"
+					type="password"
+					autoComplete="current-password"
+					required
+					value={formData.password}
+					onChange={handleChange}
+				/>
 			</FormControl>
 			<FormHelperText error sx={{ m: 0 }}>
 				{error}
@@ -61,7 +98,9 @@ const Form = () => {
 			</Divider>
 			<OAuthButtons />
 			<Button fullWidth to="/signup" LinkComponent={Link}>
-				<Typography variant="subtitle2">Don&apos;t have an account? Sign Up</Typography>
+				<Typography variant="subtitle2">
+					Don&apos;t have an account? Sign Up
+				</Typography>
 			</Button>
 		</Stack>
 	)
@@ -70,8 +109,19 @@ const Form = () => {
 const LogIn = () => {
 	return (
 		<Container maxWidth="xl">
-			<Stack alignItems="center" minHeight="calc(100vh - 100px)" justifyContent="center">
-				<Paper sx={{ p: 2, width: 'calc(100vw - 20px)', maxWidth: 400, m: { sm: 'auto' } }}>
+			<Stack
+				alignItems="center"
+				minHeight="calc(100vh - 100px)"
+				justifyContent="center"
+			>
+				<Paper
+					sx={{
+						p: 2,
+						width: 'calc(100vw - 20px)',
+						maxWidth: 400,
+						m: { sm: 'auto' }
+					}}
+				>
 					<Form />
 				</Paper>
 			</Stack>

client/src/pages/NotFound.jsx

@@ -1,17 +1,27 @@
 import { ArrowBackIosNewTwoTone } from '@mui/icons-material'
-import { Container, Paper, Typography, Grid2 as Grid, Divider, Button, Stack } from '@mui/material'
-import { Link } from 'react-router-dom'
+import {
+	Container,
+	Paper,
+	Typography,
+	Grid2 as Grid,
+	Divider,
+	Button,
+	Stack
+} from '@mui/material'
+import { Link } from 'react-router'
 
 const NotFoundTypography = () => {
 	return (
 		<Typography
 			fontSize={{ md: 200 }}
 			variant="h1"
 			sx={{
-				textShadow: '0 0 10px #fff, 0 0 13px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa',
+				textShadow:
+					'0 0 10px #fff, 0 0 13px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa',
 				'@keyframes flicker': {
 					'0%, 18%, 22%, 25%, 53%, 57%, 100%': {
-						textShadow: '0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa'
+						textShadow:
+							'0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa'
 					},
 					'20%, 24%, 55%': {
 						textShadow: 'none'
@@ -32,8 +42,16 @@ const NotFoundMessage = () => {
 			<Typography variant="h3" gutterBottom>
 				SORRY !
 			</Typography>
-			<Typography variant="h5">The page you are looking for is not found.</Typography>
-			<Button startIcon={<ArrowBackIosNewTwoTone />} size="large" LinkComponent={Link} to="/" color="success">
+			<Typography variant="h5">
+				The page you are looking for is not found.
+			</Typography>
+			<Button
+				startIcon={<ArrowBackIosNewTwoTone />}
+				size="large"
+				LinkComponent={Link}
+				to="/"
+				color="success"
+			>
 				GO BACK
 			</Button>
 		</Stack>
@@ -68,8 +86,15 @@ const NotFound = () => {
 					<Grid size={{ xs: 12, md: 5.5 }}>
 						<NotFoundTypography />
 					</Grid>
-					<Grid size={{ xs: 0, md: 1 }} justifyContent="center" container>
-						<Divider orientation="vertical" sx={{ display: { xs: 'none', md: 'block' } }} />
+					<Grid
+						size={{ xs: 0, md: 1 }}
+						justifyContent="center"
+						container
+					>
+						<Divider
+							orientation="vertical"
+							sx={{ display: { xs: 'none', md: 'block' } }}
+						/>
 					</Grid>
 					<Grid size={{ xs: 12, md: 5.5 }}>
 						<NotFoundMessage />

client/src/pages/Post.jsx

@@ -31,7 +31,7 @@ import {
 	X,
 	WhatsApp
 } from '@mui/icons-material'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router'
 import {
 	AvatarGroupSkeleton,
 	PostSkeleton,

client/src/pages/Profile.jsx

@@ -16,7 +16,7 @@ import {
 	Skeleton
 } from '@mui/material'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
-import { Link, useParams, Navigate, useNavigate } from 'react-router-dom'
+import { Link, useParams, Navigate, useNavigate } from 'react-router'
 import { UpdateProfile as UpdateProfileForm } from '@/components'
 import { useState } from 'react'
 import { useUser } from '@clerk/clerk-react'

client/src/pages/Search.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useSearchParams, useNavigate } from 'react-router-dom'
+import { useSearchParams, useNavigate } from 'react-router'
 import {
 	AppBar,
 	Toolbar,