error fixes and redux toolkit added

package.json

@@ -22,6 +22,7 @@
     "@fullcalendar/timegrid": "^6.1.8",
     "@mui/lab": "^5.0.0-alpha.65",
     "@mui/material": "^5.13.6",
+    "@reduxjs/toolkit": "^1.9.5",
     "@zegocloud/zego-uikit-prebuilt": "^1.8.9",
     "apexcharts": "^3.23.1",
     "api": "^6.1.0",
@@ -41,6 +42,7 @@
     "react-apexcharts": "^1.3.7",
     "react-dom": "18.2.0",
     "react-icons": "^4.9.0",
+    "react-redux": "^8.1.2",
     "react-responsive-carousel": "^3.2.23",
     "react-toastify": "^9.1.3",
     "react-top-loading-bar": "^2.3.1",

src/pages/_app.js

@@ -1,11 +1,12 @@
 import '../styles/globals.css'
 import Navabar from './components/Navabar'
-import { AllstateProvider } from '../context/Allstate'
 import LoadingBar from 'react-top-loading-bar'
 import Footer from './components/Footer'
 import { useEffect } from 'react'
 import { useState } from 'react'
 import Router, { useRouter } from 'next/router'
+import { Provider } from 'react-redux'
+import { store } from './store/store'
 export default function App({ Component, pageProps }) {
   const router=useRouter();
   const [progress, setProgress] = useState(0)
@@ -17,10 +18,10 @@ export default function App({ Component, pageProps }) {
       setProgress(100)
     })
   },[])
-  return <> <AllstateProvider><LoadingBar
+  return <> <Provider store={store}><LoadingBar
   color='blue'
   waitingTime={400}
   progress={progress}
   onLoaderFinished={() => setProgress(0)}
-/><Navabar/><Component {...pageProps} /><Footer/></AllstateProvider></>
+/><Navabar/><Component {...pageProps} /> <Footer/> </Provider></>
 }

src/pages/admin/Todo.js

@@ -13,6 +13,8 @@ import Modal from "@mui/material/Modal";
 import Fade from "@mui/material/Fade";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
+import { fetchUser } from "../store/userdata";
+import { useDispatch,useSelector } from 'react-redux';
 const style = {
   position: "absolute",
   top: "50%",
@@ -26,7 +28,8 @@ const style = {
   p: 4,
 };
 const Todo = () => {
-  const [id,setId]=useState('');
+  const dispatch= useDispatch();
+  const UserDataSelector= useSelector((state)=>state.userdata);
   const[tododata,settodo]=useState('');
   const[alltodos,setalltodos]=useState([]);
   const[User,setUser]=useState([]);
@@ -41,28 +44,18 @@ const Todo = () => {
   const handleCloseconfirm = () => setOpenconfirm(false);
   // useeffect for getting user data from localstorage;
   useEffect(()=>{
+
     const myprappuser = JSON.parse(localStorage.getItem('myprappuser'))
-    if(myprappuser&&myprappuser.token){
-      getuser(myprappuser.token);
-    }
-    console.log(id)
-      getallTodo();
+        // dispatch(fetchUser(myprappuser.token));
+
+      if(UserDataSelector.id.length!=0){
+        getallTodo(UserDataSelector.id);
+
+      }
+      else{
+        dispatch(fetchUser(myprappuser.token));
+      }
   },[])
-  console.log(complete)
-  //get user function
-  const getuser=async(token)=>{
-    const data ={token:token};
-    const pr = await fetch(`${process.env.NEXT_PUBLIC_HOST}/api/getuser`, {
-      method: "POST", // or 'PUT'
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    });
-    const res = await pr.json();
-   setUser(res);
-   setId(res._id);
-  }
 
   //handlechange function starts here
   const handlechange=(e)=>{
@@ -75,7 +68,7 @@ const Todo = () => {
   }
   //Todo all crud functions starts here
   //get all todo
-  const getallTodo=async()=>{
+  const getallTodo=async(id)=>{
     const data ={user:id,message:"getall"};
     const todo = await fetch(`${process.env.NEXT_PUBLIC_HOST}/api/Todocrud`, {
       method: "POST", // or 'PUT'
@@ -234,7 +227,7 @@ theme="light"
          <div className='mx-6 h-1 w-52 bg-green-600 rounded-xl '></div>
          <div className='flex flex-wrap overflow-hidden'>
           {/* todo starts here */}
-          {alltodos.slice(0).reverse().map((item)=>{return <div className=' w-96 overflow-hidden' key={item._id}>
+          {alltodos.length!=0?alltodos.slice(0).reverse().map((item)=>{return <div className=' w-96 overflow-hidden' key={item._id}>
          <div
   className="relative block overflow-hidden rounded-lg border border-gray-100 p-4 sm:p-6 lg:p-8 mx-2 my-4"
 >
@@ -244,7 +237,7 @@ theme="light"
       <h3 className={`text-lg font-bold text-gray-900 sm:text-xl ${item.completed==true?"line-through":""}`}>
         {item.title}
       </h3>
-      <p className="mt-1 text-xs font-medium text-gray-600">By {User.name}</p>
+      <p className="mt-1 text-xs font-medium text-gray-600">By {UserDataSelector.name}</p>
     </div>
   </div>
   <dl className="mt-6 flex gap-4 sm:gap-6 flex-wrap">
@@ -303,7 +296,7 @@ theme="light"
   </dl>
 </div>
 
-         </div>})}
+         </div>}):<div className='h-96 flex justify-center items-center w-[100vw]'><div className='text-center text-xl font-bold text-gray-500 mx-4 p-2'>No Todos Found</div> <button className='mx-4 p-2 text-white bg-green-600 rounded font-semibold' onClick={()=>{getallTodo(UserDataSelector.id)}}> Refresh Now</button></div>}
          </div>
        </div>
         {/* For edit modal */}

src/pages/admin/editprofile.js

@@ -101,7 +101,6 @@ setEmail(user.email);
         theme: "light",
         });
     setUrl(data.url)
-    console.log(url)
     })
     .catch(err => {
     toast.error("Sorry some error occured please try again after some time", {

src/pages/admin/index.js

@@ -10,19 +10,18 @@ import FullLayout from "../../../trc/layouts/FullLayout";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import Card from "../admin/Card";
-// import { useMyContext } from "../../context/Allstate";
+import { fetchUser } from "../store/userdata";
+import { useDispatch,useSelector } from 'react-redux';
 import Head from "next/head";
 export default function Index() {
-// const {id,setId}=useMyContext();
+const dispatch = useDispatch();
   const router= useRouter();
   useEffect(()=>{
-
     const myprappuser = JSON.parse(localStorage.getItem('myprappuser'))
-    if(myprappuser&&myprappuser.token){
-      // getuser(myprappuser.token);
-    }
-
+  dispatch(fetchUser(myprappuser.token));   
 },[])
+const selector = useSelector((state) => state.userdata);
+console.log("ss",selector);
 const getuser=async(token)=>{
     const data ={token:token};
     const pr = await fetch(`${process.env.NEXT_PUBLIC_HOST}/api/getuser`, {