Fixing dynamic account

WildCodeSchool · Jan 18, 2022 · 45fa2b2 · 45fa2b2
1 parent b73fc02
commit 45fa2b2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 21 deletions.
diff --git a/src/pages/Profile/GiftModal/index.jsx b/src/pages/Profile/GiftModal/index.jsx
@@ -1,22 +1,30 @@
 import propTypes from 'prop-types';
-import { api } from 'conf';
-import { useSelector } from 'react-redux';
+import { api, cookies } from 'conf';
+import { useSelector, useDispatch } from 'react-redux';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import SGiftModal from './style';
 
 export default function GiftModal({ toggleGiftModal }) {
   const user = useSelector((state) => state.user);
   const userAmount = Number(user.amount);
-
+  const dispatch = useDispatch();
   const giftTen = () => {
     if (userAmount >= 10) {
       const amount = { ...user, amount: userAmount - 10 };
-      api.put(`http://localhost:5000/user/${user.id}`, amount).catch((e) => {
-        console.log(e);
-      });
+      api
+        .put(`http://localhost:5000/user/${user.id}`, amount)
+        .then(({ data }) => {
+          const { token, user: userData } = data;
+          cookies.set('token', token);
+          api.defaults.headers.authorization = `Bearer ${token}`;
+          dispatch({ type: 'UPDATE', userData });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
       toast.success(
-        `Vous avez donner  10€, votre solde est de ${userAmount}€ `
+        `Vous avez donner  10€, votre solde est de ${user.amount - 10}€ `
       );
     } else {
       toast.error(`Don impossible crédit insufisant `);
@@ -25,11 +33,19 @@ export default function GiftModal({ toggleGiftModal }) {
   const giftFifty = () => {
     if (userAmount >= 50) {
       const amount = { ...user, amount: userAmount - 50 };
-      api.put(`http://localhost:5000/user/${user.id}`, amount).catch((e) => {
-        console.log(e);
-      });
+      api
+        .put(`http://localhost:5000/user/${user.id}`, amount)
+        .then(({ data }) => {
+          const { token, user: userData } = data;
+          cookies.set('token', token);
+          api.defaults.headers.authorization = `Bearer ${token}`;
+          dispatch({ type: 'UPDATE', userData });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
       toast.success(
-        `Vous avez donner  50€, votre solde est de ${userAmount}€ `
+        `Vous avez donner  50€, votre solde est de ${userAmount - 50}€ `
       );
     } else {
       toast.error(`Don impossible crédit insufisant `);

diff --git a/src/pages/Profile/RefillModal/index.jsx b/src/pages/Profile/RefillModal/index.jsx
@@ -1,26 +1,43 @@
 import propTypes from 'prop-types';
-import { api } from 'conf';
-import { useSelector } from 'react-redux';
+import { api, cookies } from 'conf';
+import { useSelector, useDispatch } from 'react-redux';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import SRefillModal from './style';
 
 export default function RefillModal({ toggleModal }) {
   const user = useSelector((state) => state.user);
   const userAmount = Number(user.amount);
+  const dispatch = useDispatch();
   const refillTen = () => {
     const amount = { ...user, amount: userAmount + 10 };
-    api.put(`http://localhost:5000/user/${user.id}`, amount).catch((e) => {
-      console.log(e);
-    });
-    toast.success(`Votre compte est crédité de  ${userAmount}€ `);
+    api
+      .put(`http://localhost:5000/user/${user.id}`, amount)
+      .then(({ data }) => {
+        const { token, user: userData } = data;
+        cookies.set('token', token);
+        api.defaults.headers.authorization = `Bearer ${token}`;
+        dispatch({ type: 'UPDATE', userData });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+    toast.success(`Votre compte est crédité de  ${user.amount + 10}€ `);
   };
   const refillFifty = () => {
     const amount = { ...user, amount: userAmount + 50 };
-    api.put(`http://localhost:5000/user/${user.id}`, amount).catch((e) => {
-      console.log(e);
-    });
-    toast.success(`Votre compte est crédité de  ${userAmount}€ `);
+    api
+      .put(`http://localhost:5000/user/${user.id}`, amount)
+      .then(({ data }) => {
+        const { token, user: userData } = data;
+        cookies.set('token', token);
+        api.defaults.headers.authorization = `Bearer ${token}`;
+        dispatch({ type: 'UPDATE', userData });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+    toast.success(`Votre compte est crédité de  ${user.amount + 50}€ `);
   };
   return (
     <SRefillModal>

diff --git a/src/reducers/user.js b/src/reducers/user.js
@@ -30,6 +30,8 @@ const user = (state = initialState, action) => {
   switch (action.type) {
     case 'LOGIN':
       return { ...state, ...action.user };
+    case 'UPDATE':
+      return { ...state, ...action.userData };
     case 'LOGOUT':
       return initialState;
     default: