Shifting the solution to another branch

package.json

@@ -12,12 +12,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
+    "@mui/icons-material": "^5.16.14",
     "@mui/material": "^5.16.7",
-    "@reduxjs/toolkit": "^2.2.7",
+    "@reduxjs/toolkit": "^2.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.26.1"
   },
   "devDependencies": {

src/app/components/CreateTask.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useContext } from 'react';
+import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Box } from '@mui/material';
+import { Task } from '../types';
+import TaskContext from './TaskContext';
+
+
+
+const CreateTask = () => {
+
+  const { addTask, tasks } = useContext(TaskContext);
+  const [open, setOpen] = useState(false);
+  const [newTask, setNewTask] = useState('');
+  const [newTaskPrioirty, setNewTaskPriority] = useState<'High'|'Medium'|'Low'>('Low');
+  const [error, setError ] = useState(false);
+
+  const handleToggleModal = () => {
+    if(open){
+      setNewTask('');
+      setNewTaskPriority('Low');
+      setError(false);
+    }
+    setOpen(!open);
+  }
+  const handleSave = () => {
+    if (newTask.trim()) {
+      const task = {
+        id: Date.now(),
+        name: newTask,
+        priority: newTaskPrioirty,
+        state: 'To Do',
+      };
+      console.log("Adding task to context:", task);
+      addTask(task);
+      console.log("Current tasks in context after addition:", tasks);
+      setNewTask('');
+      setNewTaskPriority('Low');
+      setOpen(false);
+    } else {
+      setError(true);
+    }
+  };
+
+  const handleChange = ( e: React.ChangeEvent<HTMLInputElement>) => {
+    if(error) setError(false);
+    setNewTask(e.target.value);
+  }
+
+  return(
+    <Box>
+      <Button variant="outlined" onClick={handleToggleModal}>Create New Task </Button>
+      <Dialog open={open} onClose={handleToggleModal}>
+          <DialogTitle> Add a new task</DialogTitle>
+          <DialogContent>
+            <TextField 
+              label="Task Name"
+              autoFocus
+              type="text"
+              fullWidth
+              margin='normal'
+              value={newTask}
+              onChange={handleChange}
+              error={error}
+              helperText={error? " Please enter task name before savinf ": " "}
+            />
+            <TextField  
+              label='Priority'
+              select
+              fullWidth
+              value={newTaskPrioirty}
+              onChange={(e) => setNewTaskPriority(e.target.value)}
+              SelectProps={{
+                native: true,
+              }}
+            >
+                <option value='High'>High</option>
+                <option value='Medium'>Medium</option>
+                <option value='Low'>Low</option>
+            </TextField>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleToggleModal}>Cancel</Button>
+            <Button onClick={handleSave}>Save</Button>
+          </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default CreateTask;

src/app/components/DeleteTask.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
+import TaskContext from './TaskContext';
+
+interface DeleteTaskProps {
+  taskId: number;
+  taskName: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+const DeleteTask: React.FC<DeleteTaskProps> = ({ taskId, taskName, open, onClose }) => {
+  const { removeTask } = useContext(TaskContext);
+
+  const handleConfirm = () => {
+    removeTask(taskId);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Delete Task</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to delete the task <strong>{taskName}</strong>?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleConfirm} color="secondary">
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteTask;

src/app/components/EditTask.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { Dialog, DialogActions, DialogContent, DialogTitle, Button, TextField } from '@mui/material';
+import TaskContext from './TaskContext';
+
+interface EditTaskProps {
+  taskId: number;
+  taskName: string;
+  taskPriority: 'High' | 'Medium' | 'Low';
+  open: boolean;
+  onClose: () => void;
+}
+
+const EditTask: React.FC<EditTaskProps> = ({
+  taskId,
+  taskName,
+  taskPriority,
+  open,
+  onClose,
+}) => {
+  const { updateTask } = useContext(TaskContext);
+  const [name, setName] = useState(taskName);
+  const [priority, setPriority] = useState(taskPriority);
+
+  useEffect(() => {
+    setName(taskName);
+    setPriority(taskPriority);
+  }, [taskName, taskPriority]);
+
+  const handleSave = () => {
+    updateTask({
+      id: taskId,
+      name,
+      priority,
+      state: 'To Do',
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Edit Task</DialogTitle>
+      <DialogContent>
+        <TextField
+          label="Task Name"
+          fullWidth
+          margin="normal"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <TextField
+          label="Priority"
+          select
+          fullWidth
+          margin="normal"
+          value={priority}
+          onChange={(e) => setPriority(e.target.value as 'High' | 'Medium' | 'Low')}
+          SelectProps={{
+            native: true,
+          }}
+        >
+          <option value="High">High</option>
+          <option value="Medium">Medium</option>
+          <option value="Low">Low</option>
+        </TextField>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleSave} color="secondary">
+          Edit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default EditTask;

src/app/components/TaskActions.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Task } from '../../types';
+import { Box, Button } from '@mui/material';
+
+interface TaskActionsProps {
+  task: Task;
+  onStateChange: (task: Task) => void;
+  onEdit: (task: Task) => void;
+  onDelete: (taskId: number, taskName: string) => void;
+  getNextState: (currentState: Task['state']) => Task['state'];
+}
+
+const TaskActions: React.FC<TaskActionsProps> = ({
+  task,
+  onStateChange,
+  onEdit,
+  onDelete,
+  getNextState,
+}) => {
+  return (
+    <Box sx={{ display: 'flex', gap: '8px' }}>
+      <Button
+        variant="contained"
+        color="info"
+        onClick={() => onStateChange(task)}
+      >
+        Move to {getNextState(task.state)}
+      </Button>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => onEdit(task)}
+      >
+        Edit
+      </Button>
+      <Button
+        variant="contained"
+        color="error"
+        onClick={() => onDelete(task.id, task.name)}
+      >
+        Delete
+      </Button>
+    </Box>
+  );
+};
+
+export default TaskActions;