Merge pull request #100 from MargoMarm/features/statisticOnHomePage

added dynamic changes to VideoCountExercises and BurnedCalories stati…

src/components/ParamsBlockСard/ParamsBlockCard.jsx

@@ -25,7 +25,7 @@ const ParamsBlockCard = ({ data, measure, type, step, page }) => {
           </GreySvg>
         </GreySvgWrapper>
         <GreyTextWrapper>
-          <GreyDynamicText>{data}+</GreyDynamicText>
+          <GreyDynamicText>{data}</GreyDynamicText>
           <GreyStaticText>Video tutorial</GreyStaticText>
         </GreyTextWrapper>
       </GreyCard>
@@ -51,7 +51,7 @@ const ParamsBlockCard = ({ data, measure, type, step, page }) => {
 };
 
 ParamsBlockCard.propTypes = {
-  data: PropTypes.number,
+  data: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   type: PropTypes.string,
   measure: PropTypes.string,
   step: PropTypes.string,

src/components/headersComp/Logo/Logo.jsx

@@ -1,21 +1,22 @@
-import { Button, WrapLogo, Svg } from './Logo.styled';
+import { WrapLogo, Svg } from './Logo.styled';
 import sprite from '../../../assets/sprite.svg';
 
 import { UseAuth } from '../../../hooks/useAuth';
+import { NavLink } from 'react-router-dom';
 
 export const Logo = () => {
   const { isLoggedIn } = UseAuth();
 
   return (
     <>
       <WrapLogo>
-        <a
-          href={isLoggedIn ? '/september-project/diary' : '/september-project/'}
+        <NavLink
+          to={isLoggedIn ? '/september-project/diary' : '/september-project/'}
         >
           <Svg>
             <use href={sprite + `#logo-big`}></use>
           </Svg>{' '}
-        </a>
+        </NavLink>
       </WrapLogo>
     </>
   );

src/pages/Home/Home.jsx

@@ -1,8 +1,26 @@
+import { useEffect } from 'react';
 import CustomNavLink from '../../components/CustomNavLink/CustomNavLink';
 import MainTitle from '../../components/MainTitle/MainTitle';
+import ParamsBlockCard from '../../components/ParamsBlockСard/ParamsBlockCard';
 import { LinkList, Wrapper, WrapperDesktop } from './Home.styled';
+import { useDispatch, useSelector } from 'react-redux';
+import { getVideoCountAndBurnedCaloriesStatistics } from '../../redux/statistic/operations';
+import {
+  getAllExercises,
+  getUsersBurnedCalories,
+} from '../../redux/statistic/selectors';
+import formatNumber from '../../utils/formatNumberStatistics';
 
 const Home = () => {
+  const dispatch = useDispatch();
+
+  const videoExercisesCount = useSelector(getAllExercises);
+  const allBurnedCalories = useSelector(getUsersBurnedCalories);
+
+  useEffect(() => {
+    dispatch(getVideoCountAndBurnedCaloriesStatistics());
+  }, [dispatch]);
+
   return (
     <>
       <WrapperDesktop></WrapperDesktop>
@@ -16,6 +34,19 @@ const Home = () => {
             <CustomNavLink text={'Sign in'} to={'/signin'} />
           </li>
         </LinkList>
+
+        <ParamsBlockCard
+          type={'grey'}
+          page={'auth'}
+          data={videoExercisesCount}
+        />
+
+        <ParamsBlockCard
+          type={'orange'}
+          page={'auth'}
+          data={allBurnedCalories}
+          measure={'cal'}
+        />
       </Wrapper>
     </>
   );

src/pages/SignIn/SignIn.jsx

@@ -1,4 +1,4 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import Title from '../../components/Title/Title';
 import SubTitle from '../../components/SubTitle/SubTitle';
 import AuthForm from '../../components/AuthForm/AuthForm';
@@ -7,10 +7,23 @@ import { Wrapper, WrapperDesktop } from '../Home/Home.styled';
 import ParamsBlockCard from '../../components/ParamsBlockСard';
 import { logInUser } from '../../redux/auth/operation';
 import { mg } from '../../utils';
+import {
+  getAllExercises,
+  getUsersBurnedCalories,
+} from '../../redux/statistic/selectors';
+import { useEffect } from 'react';
+import { getVideoCountAndBurnedCaloriesStatistics } from '../../redux/statistic/operations';
 
 const SignIn = () => {
   const dispatch = useDispatch();
 
+  const videoExercisesCount = useSelector(getAllExercises);
+  const allBurnedCalories = useSelector(getUsersBurnedCalories);
+
+  useEffect(() => {
+    dispatch(getVideoCountAndBurnedCaloriesStatistics());
+  }, [dispatch]);
+
   const logIn = (user, { resetForm }) => {
     dispatch(logInUser(user));
     resetForm();
@@ -33,12 +46,16 @@ const SignIn = () => {
           linkText={'Sign Up'}
         />
 
-        <ParamsBlockCard type={'grey'} page={'auth'} data={350} />
+        <ParamsBlockCard
+          type={'grey'}
+          page={'auth'}
+          data={videoExercisesCount}
+        />
 
         <ParamsBlockCard
           type={'orange'}
           page={'auth'}
-          data={500}
+          data={allBurnedCalories}
           measure={'cal'}
         />
       </Wrapper>

src/pages/SignUp/SignUp.jsx

@@ -1,15 +1,29 @@
 import Title from '../../components/Title/Title';
 import SubTitle from '../../components/SubTitle/SubTitle';
 import AuthForm from '../../components/AuthForm';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { authUser } from '../../redux/auth/operation';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper, WrapperDesktop } from '../Home/Home.styled';
 import ParamsBlockCard from '../../components/ParamsBlockСard/ParamsBlockCard';
 import { mg } from '../../utils';
+import {
+  getAllExercises,
+  getUsersBurnedCalories,
+} from '../../redux/statistic/selectors';
+import { useEffect } from 'react';
+import { getVideoCountAndBurnedCaloriesStatistics } from '../../redux/statistic/operations';
 
 const SignUp = () => {
   const dispatch = useDispatch();
+
+  const videoExercisesCount = useSelector(getAllExercises);
+  const allBurnedCalories = useSelector(getUsersBurnedCalories);
+
+  useEffect(() => {
+    dispatch(getVideoCountAndBurnedCaloriesStatistics());
+  }, [dispatch]);
+
   const handleSubmit = (user, { resetForm }) => {
     dispatch(authUser(user));
     resetForm();
@@ -37,12 +51,16 @@ const SignUp = () => {
           linkText={'Sign In'}
         />
 
-        <ParamsBlockCard type={'grey'} page={'auth'} data={350} />
+        <ParamsBlockCard
+          type={'grey'}
+          page={'auth'}
+          data={videoExercisesCount}
+        />
 
         <ParamsBlockCard
           type={'orange'}
           page={'auth'}
-          data={500}
+          data={allBurnedCalories}
           measure={'cal'}
         />
       </Wrapper>

src/redux/statistic/operations.js

@@ -0,0 +1,26 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { toast } from 'react-toastify';
+
+axios.defaults.baseURL = 'https://power-pulse-rest-api.onrender.com';
+
+export const getVideoCountAndBurnedCaloriesStatistics = createAsyncThunk(
+  'getVideoCountAndBurnedCaloriesStatistics',
+  async (_, { rejectWithValue }) => {
+    try {
+      const { data } = await axios.get('/api/statistics');
+      return data;
+    } catch (error) {
+      toast.error('Oops... Something went wrong! Try again!');
+      return rejectWithValue('Oops... Something went wrong!');
+    }
+  },
+  {
+    condition: (_, { getState }) => {
+      const state = getState();
+      if (state.statistics.allExercises > 1) {
+        return false;
+      }
+    },
+  },
+);

src/redux/statistic/selectors.js

@@ -0,0 +1,13 @@
+export const getAllExercises = state => state.statistics.allExercises;
+
+export const getAllUsers = state => state.statistics.allUsers;
+
+export const getUsersBurnedCalories = state => state.statistics.usersBurnedCalories;
+
+export const getUsersTimeTraining = state => state.statistics.usersTimeTraining;
+
+export const getUsersTraining = state => state.statistics.usersTraining;
+
+export const isLoadingStatictics = state => state.statistics.isLoading;
+
+export const getErrorStatistics = state => state.statistics.error;

src/redux/statistic/slice.js

@@ -0,0 +1,56 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { getVideoCountAndBurnedCaloriesStatistics } from './operations';
+import formatNumber from '../../utils/formatNumberStatistics';
+
+const contactsInitialValue = {
+  isLoading: false,
+  error: null,
+  allExercises: 0,
+  allUsers: 0,
+  usersBurnedCalories: 0,
+  usersTimeTraining: 0,
+  usersTraining: 0,
+};
+
+const handlePending = state => {
+  state.isLoading = true;
+  state.error = null;
+};
+
+const handleFullfield = state => {
+  state.isLoading = false;
+  state.error = null;
+};
+
+const handleRejected = (state, payload) => {
+  state.isLoading = false;
+  state.error = payload.error;
+};
+
+const getStatistics = createSlice({
+  name: 'statistics',
+  initialState: contactsInitialValue,
+  extraReducers: builder => {
+    builder.addCase(
+      getVideoCountAndBurnedCaloriesStatistics.pending,
+      handlePending,
+    );
+    builder.addCase(
+      getVideoCountAndBurnedCaloriesStatistics.fulfilled,
+      (state, { payload }) => {
+        handleFullfield(state, payload);
+        state.allExercises = payload.AllExercises;
+        state.allUsers = payload.AllUsers;
+        state.usersBurnedCalories = formatNumber(payload.usersBurnedCalories);
+        state.usersTimeTraining = payload.usersTimeTraining;
+        state.usersTraining = payload.usersTraining;
+      },
+    );
+    builder.addCase(
+      getVideoCountAndBurnedCaloriesStatistics.rejected,
+      handleRejected,
+    );
+  },
+});
+
+export const statisticsReducer = getStatistics.reducer;

src/redux/store.js

@@ -15,7 +15,8 @@ import { authSlice } from './auth/slice';
 import filterSlice from './exerciseFilters/slice';
 import exercisesSlice from './exercises/slice';
 import { diaryReducer } from './diary/slice';
-import productsSlice  from './productsFilter/slice';
+import productsSlice from './productsFilter/slice';
+import { statisticsReducer } from './statistic/slice';
 
 const persistConfig = {
   key: 'token',
@@ -29,6 +30,7 @@ const rootReducer = combineReducers({
   exercises: exercisesSlice,
   diary: diaryReducer,
   products: productsSlice,
+  statistics: statisticsReducer,
 });
 
 export const store = configureStore({

src/utils/formatNumberStatistics.js

@@ -0,0 +1,11 @@
+function formatNumber(number) {
+  if (number >= 1e6) {
+    return (number / 1e6).toFixed(1) + 'M';
+  } else if (number >= 1e3) {
+    return (number / 1e3).toFixed(1) + 'K';
+  } else {
+    return number.toString();
+  }
+}
+
+export default formatNumber;