FIX THE REDUX STATES AND UPDATE SIDER

frontend/src/components/todolist/sidebar.component.jsx

@@ -1,43 +1,41 @@
-import { useContext,useState } from 'react'
-import {TodoContext} from "../../context/"
 import { Grid, Paper, Box } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import { useSelector } from 'react-redux'
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
-  fontSize:"1rem",
-  fontWeight:800,
+  fontSize: "1rem",
+  fontWeight: 800,
   textAlign: 'center',
   color: theme.palette.text.secondary,
-  elevation:24,
+  elevation: 24,
+  background: theme.palette.primary.main,
+  padding: theme.spacing(4),
+  color: "white",
 }))
 
-
 const Sidebar = () => {
-  const todo = useContext(TodoContext);
-  const [selectedTodo,setSelectedTodo] = useState(null)
-
-
-  const setTodo = (currentTodo)=>{
-    setSelectedTodo(currentTodo)
-  }
-
-  return(
+  const selectedTodo = useSelector((state) => state.todo.currentTodo);
+  const { title, desc, published } = selectedTodo;
+  return (
     <>
       <Box>
-        <Grid container rowSpacing={1}>
-          {todo.map((e) => (
-            <Grid key={e.id} item xs={12}>
-              <Item elevation={4} sx={selectedTodo==e.id?{bgcolor:"primary.main",color:"white"}:""} onClick={()=>setTodo(e.id)}>{e.title}</Item>
-            </Grid>
-          ))}
+        <Grid container rowSpacing={2}>
+          <Grid item xs={12}>
+            <Item elevation={4}>{title}</Item>
+          </Grid>
+          <Grid item xs={12}>
+            <Item elevation={4}>{desc}</Item>
+          </Grid>
+          <Grid item xs={12}>
+            <Item elevation={4} sx={published ? { bgcolor: "red" } : { bgcolor: "green" }}>{published ? " 🔴 Not Active" : "🟢Active "}</Item>
+          </Grid>
         </Grid>
       </Box>
-
-      </>
-  ) 
+    </>
+  )
 }
 
 export default Sidebar

frontend/src/components/todolist/todolist.component.jsx

@@ -1,34 +1,47 @@
-import React, {useState,useContext} from 'react'
+import React, { useState, useCallback, useEffect } from "react";
 import { Grid, Paper, Box } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import {TodoContext} from "../../context/"
+import { setCurrentTodo, retrieveTodo } from '../../slices/todo.js'
+import { useDispatch, useSelector } from 'react-redux'
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
-  fontSize:"1rem",
-  fontWeight:800,
+  fontSize: "1rem",
+  fontWeight: 800,
   textAlign: 'center',
   color: theme.palette.text.secondary,
-  elevation:24,
+  elevation: 24,
 }))
 
 const Todolist = () => {
-  const [selectedTodo,setSelectedTodo] = useState(null)
-  const todo = useContext(TodoContext);
+  const [selectedTodo, setSelectedTodo] = useState([])
+  const dispatch = useDispatch()
+  const todo = useSelector((state) => state.todo)
+
+  // fetching data
+  const initData = useCallback(() => {
+    dispatch(retrieveTodo())
+  }, [dispatch])
+
+  useEffect(() => {
+    initData()
+  }, [initData])
 
   // setting current selected todo 
-  const setTodo = (currentTodo)=>{
+  const setTodo = (currentTodo) => {
     setSelectedTodo(currentTodo)
+    dispatch(setCurrentTodo(currentTodo))
   }
+
   return (
     <>
       <Box>
         <Grid container rowSpacing={1}>
-          {todo.map((e) => (
+          {todo.todos && todo.todos.map((e) => (
             <Grid key={e.id} item xs={12}>
-              <Item elevation={4} sx={selectedTodo==e.id?{bgcolor:"primary.main",color:"white"}:""} onClick={()=>setTodo(e.id)}>{e.title}</Item>
+              <Item elevation={4} sx={selectedTodo && selectedTodo.id == e.id ? { bgcolor: "primary.main", color: "white" } : ""} onClick={() => setTodo(e)}>{e.title}</Item>
             </Grid>
           ))}
         </Grid>

frontend/src/pages/todo.jsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import { Todolist, SearchBar, Sidebar } from '../components/'
 import { Box, Container, Grid } from '@mui/material'
-import {TodoData} from "../context/"
 
 const Todo = () => {
   return (
     <>
-      <TodoData>
         <Box sx={{ marginTop: '3rem' }}>
           <Container>
             <Grid container alignItems="stretch" spacing={2}>
@@ -22,7 +20,6 @@ const Todo = () => {
             </Grid>
           </Container>
         </Box>
-      </TodoData>
       </>
   )
 }

frontend/src/slices/todo.js

@@ -1,10 +1,11 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import TodoDataService from '../services/todo.service.js'
 
-const initialState = []
+const initialState = { todos: [], currentTodo: {} }
 
 export const createTodo = createAsyncThunk('createData', async ({ title, desc }) => {
   const res = await TodoDataService.create({ title, desc })
+  return res.data;
 })
 
 export const retrieveTodo = createAsyncThunk('getData', async () => {
@@ -15,17 +16,22 @@ export const retrieveTodo = createAsyncThunk('getData', async () => {
 export const todoSlices = createSlice({
   name: 'todo',
   initialState,
+  reducers: {
+    setCurrentTodo: (state, action) => {
+      state.currentTodo = { ...action.payload }
+    }
+  },
   extraReducers: (builder) => {
     builder.addCase('create', (state, action) => {
       state.push(action.payload)
     }),
       builder.addMatcher(
         (action) => action.type === retrieveTodo.fulfilled.type,
-        (state, action) => {return action.payload}
+        (state, action) => { return { ...state, todos: action.payload } }
       )
   },
 })
 
-const { reducer } = todoSlices
+export const { setCurrentTodo } = todoSlices.actions;
+export const todoReducer = todoSlices.reducer;
 
-export default reducer

frontend/src/store.js

@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit'
-import todoReducer from './slices/todo'
+import { todoReducer } from './slices/todo'
 
 const reducer = {
   todo: todoReducer,
 }
 export const store = configureStore({
-  reducer:reducer,
-  devTools:true,
+  reducer: reducer,
+  devTools: true,
 })