v2: Added success message instead of toasts for the child. Solves issue

#59.

src/pages/ChildDashboard/ChildDashboard.jsx

@@ -4,11 +4,13 @@ import { firestore } from '../../config/firebaseConfig';
 import { ChildContext } from '../../providers/ChildProvider';
 import Spinner from '../../components/Spinner';
 import './ChildDashboard.scss';
+import generateFinishMessage from '../../util/finishMessages';
 
 const ChildDashboard = () => {
 	const { child, childTasks, areChildTasksLoading, completeTask } =
 		useContext(ChildContext);
 	const [disableButton, setDisableButton] = useState(false);
+	const [successMessage, setSuccessMessage] = useState('');
 
 	const [activeTask, setActiveTask] = useState(() => {
 		if (childTasks && childTasks[0]) {
@@ -22,9 +24,11 @@ const ChildDashboard = () => {
 			if (id) {
 				setDisableButton(true);
 				completeTask(id);
+				setSuccessMessage(generateFinishMessage());
 				confetti();
 				setTimeout(() => {
 					setDisableButton(false);
+					setSuccessMessage('');
 				}, 15000);
 			} else {
 				console.log(
@@ -74,15 +78,24 @@ const ChildDashboard = () => {
 						<h3 className="child_name_badge text-white">
 							{child.name}
 						</h3>
-						<h2 className="task-item">{activeTask.name}</h2>
-						{!disableButton && (
-							<button
-								type="button"
-								className="task-button"
-								onClick={() => completeChildTask(activeTask.id)}
-							>
-								Done
-							</button>
+
+						{!disableButton ? (
+							<>
+								<h2 className="task-item">{activeTask.name}</h2>
+								<button
+									type="button"
+									className="task-button"
+									onClick={() =>
+										completeChildTask(activeTask.id)
+									}
+								>
+									Done
+								</button>
+							</>
+						) : (
+							successMessage && (
+								<h2 className="text-white">{successMessage}</h2>
+							)
 						)}
 					</>
 				) : (

src/providers/ChildProvider.js

@@ -1,15 +1,13 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useCollectionData } from 'react-firebase-hooks/firestore';
 import { useHistory } from 'react-router-dom';
 import { firestore } from '../config/firebaseConfig';
 import { clearItem, getWithExpiry, setWithExpiry } from '../util/helper';
-import { ToastContext } from './ToastProvider';
 
 export const ChildContext = React.createContext();
 
 export const ChildProvider = ({ children }) => {
 	const history = useHistory();
-	const { setToast } = useContext(ToastContext);
 	const [child, setChild] = useState(() => {
 		const localChild = getWithExpiry('ito_child');
 		return (
@@ -24,7 +22,7 @@ export const ChildProvider = ({ children }) => {
 	});
 
 	useEffect(() => {
-		setWithExpiry('ito_child', child);
+		setWithExpiry('ito_child', child, 86400000);
 	}, [child]);
 
 	const [childTasks, areChildTasksLoading, childTasksErrors] =
@@ -45,14 +43,13 @@ export const ChildProvider = ({ children }) => {
 			completed: true,
 			datecompleted: new Date(),
 			isActive: false,
-		}).then(() => {
-			setToast(
-				`Great job ${child.name}`,
-				'You did a great job with that one!',
-				'mint'
-			);
-			// TODO: Make playful animation?
-		});
+		})
+			.then(() => {
+				// We're all good nothing to do here.
+			})
+			.catch((err) => {
+				console.log(err.message);
+			});
 	};
 
 	const signChildOut = () => {

src/util/finishMessages.js

@@ -0,0 +1,19 @@
+const finishMessages = [
+	'That was great work, keep it up!',
+	'You are on a roll, you should be proud!',
+	'Wow! How did you do that so fast?',
+	'Great job!',
+	'Outstanding work!',
+	'You are such a team player.',
+	'Amazing!',
+	'Thank you for your hard work!',
+	'We knew you could do it. Awesome work!',
+	'Well done. Thanks for helping out!',
+	'You are the best!',
+	'Keep it going!',
+];
+const generateFinishMessage = () => {
+	const randomNumber = Math.floor(Math.random() * finishMessages.length - 1);
+	return finishMessages[randomNumber];
+};
+export default generateFinishMessage;