total workout mobile

Author: Derek Roode

react-app/src/components/Atoms/Rank/Rank.js

@@ -1,13 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { allWorkoutsComplete } from "../../../store/ranking";
 import styles from './Rank.module.css'
 
 function Rank() {
+  const dispatch = useDispatch();
   const sessionUser = useSelector((state) => state.session.user);
   const allWorkoutsCompleted = useSelector((state) =>
   Object.values(state.ranking)
   );
 
+  useEffect(() => {
+    dispatch(allWorkoutsComplete())
+  }, [dispatch, sessionUser]);
+
     //get overall rank
     const overallRank = () => {
       let place = 0;

react-app/src/components/Atoms/TotalWorkouts/TotalWorkouts.js

@@ -1,11 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { userWorkouts } from "../../../store/userWorkouts";
+
+
+
 import styles from './TotalWorkouts.module.css'
 
 function TotalWorkouts() {
+  const dispatch = useDispatch();
   const userWorkout = useSelector((state) => Object.values(state.userWorkouts));
 
 
+  useEffect(()=>{
+    dispatch(userWorkouts())
+  },[dispatch])
     //get workouts completed
     const workoutData = () => {
       let num = 0;

react-app/src/components/Atoms/UserProfilePhotoBlock/UserProfilePhotoBlock.js

@@ -17,8 +17,7 @@ function UserProfilePhotoBlock({profilePhoto, userName}) {
 
         <li><UserStats/></li>
         <li><TotalWorkouts/></li>
-        <li><TotalWorkouts/></li>
-        <li><TotalWorkouts/></li>
+ 
 
 </ul>
       </div>

react-app/src/components/Atoms/UserProfilePhotoBlock/UserProfilePhotoBlock.module.css

@@ -50,7 +50,6 @@
   .UserProfilePhotoBlock_container__mobile_block {
     display: flex;
     flex-direction: column;
-    background-color: green;
     padding-top: 1.2em;
   }
   .UserProfilePhotoBlock_container__mobile_block ul {
@@ -61,7 +60,6 @@
     padding: 0;
     margin: 0;
     color: #fff;
-    background-color: red;
   }
 
   .UserProfilePhotoBlock_container__mobile_block ul li {

react-app/src/components/Organisms/UserDataBlock/UserDataBlock.js

@@ -12,7 +12,7 @@ function UserDataBlock() {
 
 
       <UserProfilePhotoBlock profilePhoto={sessionUser.profile_photo} userName={sessionUser.user_name}/>
-      {/* <UserStats/> */}
+      
 
 
     </div>

react-app/src/components/Organisms/UserDataBlock/UserDataBlock.module.css

@@ -6,7 +6,6 @@
   width: 100%;
   height: 100%;
   padding: 0px;
-  background-color: red;
 
 
 }