From 371354fd5a88910edb7e5771bd3894410805a5e5 Mon Sep 17 00:00:00 2001
From: Dinys <dinysmon2013>
Date: Fri, 6 Nov 2020 20:08:40 +1100
Subject: [PATCH 1/2] Add help coins balance for a user, add help coins when
 task completed

---
 react-app/src/App.js                           |  2 +-
 react-app/src/components/CardAvatar.js         |  4 ++--
 react-app/src/components/task-grid/TaskGrid.js | 16 +++++++++++++++-
 react-app/src/domain/User.js                   |  5 +++--
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/react-app/src/App.js b/react-app/src/App.js
index 892836b..49c8c9d 100644
--- a/react-app/src/App.js
+++ b/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 ? (
diff --git a/react-app/src/components/CardAvatar.js b/react-app/src/components/CardAvatar.js
index e98856a..297b869 100644
--- a/react-app/src/components/CardAvatar.js
+++ b/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}>
diff --git a/react-app/src/components/task-grid/TaskGrid.js b/react-app/src/components/task-grid/TaskGrid.js
index 3eab192..21838f5 100644
--- a/react-app/src/components/task-grid/TaskGrid.js
+++ b/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) {
diff --git a/react-app/src/domain/User.js b/react-app/src/domain/User.js
index f6ab27b..1d04218 100644
--- a/react-app/src/domain/User.js
+++ b/react-app/src/domain/User.js
@@ -5,13 +5,14 @@ import JackImg from '../assets/users/Jack@x2.png'
 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
     }
 }
 

From 0de306921a9d2b635833d799a81379440960a7b2 Mon Sep 17 00:00:00 2001
From: Dinys <dinysmon2013@gmail.com>
Date: Fri, 6 Nov 2020 21:09:45 +1100
Subject: [PATCH 2/2] Add hand pointer to flippable card

---
 react-app/src/components/task-card/FlipTaskCard.js | 2 +-
 react-app/src/components/task-card/TaskCard.js     | 5 +++--
 react-app/src/index.css                            | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/react-app/src/components/task-card/FlipTaskCard.js b/react-app/src/components/task-card/FlipTaskCard.js
index 78fd7f1..edd22e0 100644
--- a/react-app/src/components/task-card/FlipTaskCard.js
+++ b/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}/>
                 ) : (
diff --git a/react-app/src/components/task-card/TaskCard.js b/react-app/src/components/task-card/TaskCard.js
index fead14c..e30ada1 100644
--- a/react-app/src/components/task-card/TaskCard.js
+++ b/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>
diff --git a/react-app/src/index.css b/react-app/src/index.css
index 2fc9c40..b17fcbc 100644
--- a/react-app/src/index.css
+++ b/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 {