now everything works with React ToolKit

client/src/components/dashboard/Dashboard.js

@@ -1,23 +1,21 @@
-import React, { useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import DashboardActions from './DashboardActions';
-import Experience from './Experience';
-import Education from './Education';
-import { getCurrentProfile, deleteAccount } from '../../actions/profile';
+import React, { useEffect } from "react";
+import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import DashboardActions from "./DashboardActions";
+import Experience from "./Experience";
+import Education from "./Education";
+import { getCurrentProfile, deleteAccount } from "../../actions/profile";
 
-
-const Dashboard = ({
-  getCurrentProfile,
-  deleteAccount,
-  auth: { user },
-  profile: { profile }
-}) => {
+const Dashboard = () => {
+  const dispatch = useDispatch();
   useEffect(() => {
-    getCurrentProfile();
-  }, [getCurrentProfile]);
-
+    function fetchData() {
+      dispatch(getCurrentProfile());
+    }
+    fetchData();
+  }, [dispatch]);
+  const user = useSelector((state) => state.auth.user);
+  const profile = useSelector((state) => state.profile.profile);
   return (
     <section className="container">
       <h1 className="large text-primary">Dashboard</h1>
@@ -31,7 +29,10 @@ const Dashboard = ({
           <Education education={profile.education} />
 
           <div className="my-2">
-            <button className="btn btn-danger" onClick={() => deleteAccount()}>
+            <button
+              className="btn btn-danger"
+              onClick={async () => await dispatch(deleteAccount())}
+            >
               <i className="fas fa-user" /> Delete My Account
             </button>
           </div>
@@ -48,18 +49,4 @@ const Dashboard = ({
   );
 };
 
-Dashboard.propTypes = {
-  getCurrentProfile: PropTypes.func.isRequired,
-  deleteAccount: PropTypes.func.isRequired,
-  auth: PropTypes.object.isRequired,
-  profile: PropTypes.object.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  auth: state.auth,
-  profile: state.profile,
-});
-
-export default connect(mapStateToProps, { getCurrentProfile, deleteAccount })(
-  Dashboard
-);
+export default Dashboard;

client/src/components/dashboard/Education.js

@@ -1,20 +1,20 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { deleteEducation } from '../../actions/profile';
-import formatDate from '../../utils/formatDate';
+import React, { Fragment } from "react";
+import {useDispatch } from "react-redux";
+import { deleteEducation } from "../../actions/profile";
+import formatDate from "../../utils/formatDate";
 
-const Education = ({ education, deleteEducation }) => {
+const Education = ({education}) => {
+  const dispatch = useDispatch();
   const educations = education.map((edu) => (
     <tr key={edu._id}>
       <td>{edu.school}</td>
       <td className="hide-sm">{edu.degree}</td>
       <td>
-        {formatDate(edu.from)} - {edu.to ? formatDate(edu.to) : 'Now'}
+        {formatDate(edu.from)} - {edu.to ? formatDate(edu.to) : "Now"}
       </td>
       <td>
         <button
-          onClick={() => deleteEducation(edu._id)}
+          onClick={async () => await dispatch(deleteEducation(edu._id))}
           className="btn btn-danger"
         >
           Delete
@@ -41,9 +41,4 @@ const Education = ({ education, deleteEducation }) => {
   );
 };
 
-Education.propTypes = {
-  education: PropTypes.array.isRequired,
-  deleteEducation: PropTypes.func.isRequired
-};
-
-export default connect(null, { deleteEducation })(Education);
+export default Education;

client/src/components/dashboard/Experience.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import {useDispatch } from 'react-redux';
 import { deleteExperience } from '../../actions/profile';
 import formatDate from '../../utils/formatDate';
 
-const Experience = ({ experience, deleteExperience }) => {
+const Experience = ({experience}) => {
+  const dispatch = useDispatch();
   const experiences = experience.map((exp) => (
     <tr key={exp._id}>
       <td>{exp.company}</td>
@@ -14,7 +14,7 @@ const Experience = ({ experience, deleteExperience }) => {
       </td>
       <td>
         <button
-          onClick={() => deleteExperience(exp._id)}
+          onClick={async () => dispatch(deleteExperience(exp._id))}
           className="btn btn-danger"
         >
           Delete
@@ -41,9 +41,6 @@ const Experience = ({ experience, deleteExperience }) => {
   );
 };
 
-Experience.propTypes = {
-  experience: PropTypes.array.isRequired,
-  deleteExperience: PropTypes.func.isRequired
-};
 
-export default connect(null, { deleteExperience })(Experience);
+
+export default Experience;