Feature/help coins balance

react-app/src/App.js

@@ -18,7 +18,7 @@ function App() {
 
 	return (
 		<Router>
-			<UserLoginContext.Provider value={{userLoggedIn, signUserOut }}>
+			<UserLoginContext.Provider value={{userLoggedIn, setUserLoggedIn, signUserOut }}>
 				<Switch>
 					<Route exact path="/">
 						{userLoggedIn ? (

react-app/src/components/CardAvatar.js

@@ -2,14 +2,14 @@ import React from 'react'
 import SignOutIcon from '../assets/sign-out.svg'
 
 function CardAvatar({ user, onSignOut }) {
-    const {name, image} = user
+    const {name, image, coins} = user
     return (
         <div className='card-avatar-wrapper'>
             <div className='card-avatar'>
                 <img src={image} alt={`${name} avatar`} />
                 <div className='card-avatar-info-container'>
                     <div className='card-avatar-title'>Hello, {name}!</div>
-                    <button className='help-point-btn'>{425} HC</button>
+                    <button className='help-point-btn'>{coins} HC</button>
                 </div>
             </div>
             <button className='leave-btn' onClick={onSignOut}>

react-app/src/components/task-card/FlipTaskCard.js

@@ -36,7 +36,7 @@ function FlipTaskCard({ task, completeTask, flippable = true }) {
     return (
         <CSSTransition in={task.isComplete} timeout={REMOVE_TASK_DELAY} classNames="remove-fade">
             <ReactCardFlip isFlipped={isFlip} flipDirection='horizontal' infinite={true}>
-                <TaskCard key='front' task={task} onClick={handleCardClick}/>
+                <TaskCard key='front' task={task} isFlippable={flippable} onClick={handleCardClick}/>
                 {(task.isComplete) ? (
                     <CompletionCard key='back' points={task.rewardPoints} onClick={handleCardClick}/>
                 ) : (

react-app/src/components/task-card/TaskCard.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import Card from './Card'
 
-function TaskCard({ task, ...rest }) {
+function TaskCard({ task, isFlippable, ...rest }) {
     const { title, rewardPoints, colour } = task
+
     return (
-        <Card colour={colour} {...rest}>
+        <Card colour={colour} className={(isFlippable) ? 'pointer': ''} {...rest}>
             <div className='reward'><span className='reward-points'>{rewardPoints}</span></div>
             <div className='task-title'>{title}</div>
         </Card>

react-app/src/components/task-grid/TaskGrid.js

@@ -7,7 +7,7 @@ import firebase from '../../firebase'
 export const REMOVE_TASK_DELAY = 2000
 
 function TaskGrid({ tasks = [], flippableTask = true, className = '' }) {
-    const { userLoggedIn } = useUserLogged()
+    const { userLoggedIn, setUserLoggedIn } = useUserLogged()
     const [taskGridtasks, setTaskGridTasks] = useState([])
     const [completedTask, setCompletedTask] = useState(null)
 
@@ -32,11 +32,25 @@ function TaskGrid({ tasks = [], flippableTask = true, className = '' }) {
                     completedBy: task.completedBy,
                     completedDate: firebase.firestore.FieldValue.serverTimestamp()
                 })
+            const totalHelpCoins = userLoggedIn.coins + task.rewardPoints
+            updateHelpCoins(totalHelpCoins)
+
         } catch (err) {
             console.log(err)
         }
     }
 
+    function updateHelpCoins(amount) {
+        firebase
+            .firestore()
+            .collection('users')
+            .doc(userLoggedIn.id)
+            .update({
+                coins: amount
+            })
+        setUserLoggedIn({ ...userLoggedIn, coins: amount})
+    }
+
     function completeTask(task) {
         setCompletedTask(task)
         const newTasks = taskGridtasks.map(function completeSingleTask(t) {

react-app/src/domain/User.js

@@ -5,13 +5,14 @@ import JackImg from '../assets/users/[email protected]'
 export const ADMIN_USER = 'admin'
 export const REGULAR_USER = 'regular'
 
-export function createUser({id, name, age, role}) {
+export function createUser({id, name, age, role, coins}) {
     return {
         id,
         name,
         age,
         role,
-        image: getUserImage(name)
+        image: getUserImage(name),
+        coins
     }
 }
 

react-app/src/index.css

@@ -59,6 +59,10 @@ body {
   padding: 0 0.5rem;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .task-option-btn {
   display: flex;
   flex-direction: column;
@@ -70,6 +74,8 @@ body {
   background: none;
   border: none;
   padding: 0;
+
+  cursor: pointer;
 }
 
 .task-option-btn.cross-option {