solved issues

client/src/components/AppBar.jsx

@@ -3,10 +3,10 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { setMessage } from '../reducers/messageReducer';
-
+import { removeUser } from '../reducers/authReducer';
 const linkStyle = {
   textDecoration: 'none',
   color: 'white',
@@ -16,15 +16,17 @@ const linkStyle = {
 export default function ButtonAppBar() {
   const user = useSelector(state => state.auth.user)
   const dispatch = useDispatch()
-
+  const nav=useNavigate()
   const logout = () => {
     localStorage.removeItem('expenseTrackerToken')
+    dispatch(removeUser())
+    Navigate('/login')
     dispatch(setMessage(['User logged out', true]))
     setTimeout(() => dispatch(setMessage(null)), 5000)
   }
 
   return (
-    <Box sx={{ flexGrow: 1, width: '30%' }}>
+    <Box sx={{ flexGrow: 1, width: '100%' }}>
       <AppBar position="static">
         <Toolbar>
 

client/src/components/CategoryForm.jsx

@@ -22,7 +22,7 @@ const Content = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault()
-    const res = CategoryService.create({category: name})
+    const res = await CategoryService.create({category: name})
     dispatch(setUser(res.data))
     dispatch(setMessage([`Category '${name}' added successfully`,true]))
     setTimeout(()=>dispatch(setMessage(null)),5000)

client/src/components/TransactionChart.jsx

@@ -23,7 +23,7 @@ const TransactionChart = ({chartData}) => {
   }
 
     return (
-      <Paper style={{ marginTop: 20, width: '20%' }}>
+      <Paper style={{ marginTop: 20, width: '100%' }}>
         <Chart
           data={chartData}
         >

client/src/components/TransactionForm.jsx

@@ -11,7 +11,7 @@ import dayjs from 'dayjs';
 import { useDispatch, useSelector } from 'react-redux';
 import { setEditTransaction } from '../reducers/editTransactionReducer'
 import { setMessage } from '../reducers/messageReducer'
-
+import { addTransaction,setTransactions } from '../reducers/transactionReducer';
 const Content = () => {
 
   const categories = useSelector(state => state.auth.user.categories)
@@ -43,15 +43,17 @@ const Content = () => {
     e.preventDefault()
 
     if (!editTransaction) {
-      await TransactionService.create(form)
+      const abc=await TransactionService.create(form)
+      dispatch(addTransaction(abc))
       setForm(initialForm)
       dispatch(setMessage(['Expense added successfully', true]))
 
     } else {
       const res = await TransactionService.update(form)
       dispatch(setEditTransaction(null))
       setForm(initialForm)
-      transactions.map(trans => trans.id === res.id ? res : trans)
+      const abc=transactions.map(trans => trans.id === res.id ? res : trans)
+      dispatch(setTransactions(abc))
       dispatch(setMessage(['Expense updated successfully', true]))
     }
 

client/src/components/TransactionList.jsx

@@ -80,7 +80,7 @@ export default function BasicTable() {
                   <IconButton
                     color='primary'
                     sx={{ marginLeft: 1, cursor: 'pointer' }}
-                    onClick={()=>handleEdit()}
+                    onClick={()=>handleEdit(row)}
                     > 
                     <EditIcon/>
                   </IconButton>

server/routes/category.js

@@ -3,8 +3,8 @@ const router = Router()
 import User from '../models/User.js'
 
 router.delete('/:name',async (req,res)=>{
-  req.user.categories.filter(n=>n!==req.params.name)
-  const user = await User.findByIdAndUpdate(req.user.id,{categories:req.user.categories},{new:true})
+  const aks=req.user.categories.filter(n=>n!==req.params.name)
+  const user = await User.findByIdAndUpdate(req.user.id,{categories:aks},{new:true})
   res.status(200).json(user)
 })
 

server/routes/transactions.js

@@ -11,14 +11,16 @@ router.get('/', async (req, res) => {
 
 router.post('/', async (req, res) => {
   const newTrans = Transaction({ ...req.body, user: req.user.id })
-  const newT = newTrans.save()
+  const newT = await newTrans.save()
   return res.json(newT)
 })
 
 router.put('/:id', async (req, res) => {
   const id = req.params.id  
   const trans = await Transaction.findById(id)
-  const updatedTrans = await Transaction.findByIdAndUpdate(id, req.body)
+  const updatedTrans = await Transaction.findByIdAndUpdate(id, req.body,{
+    new:true
+  })
   res.json(updatedTrans)
 })
 
@@ -31,7 +33,7 @@ router.delete('/:id', async (req, res) => {
   }
 
   if (String(trans.user) === req.user.id) {
-    await Transaction.findByIdAndDelete(id)
+    const abc=await Transaction.findByIdAndDelete(id)
     res.sendStatus(204).end()
   } else {
     res.sendStatus(401).json("not authorized to update someone else's transaction")