|
1 | 1 | import { useEffect, useState } from 'react'; |
2 | 2 | import Button from "../Button"; |
3 | 3 | import { IoClose } from "react-icons/io5"; |
| 4 | +import { useNavigate } from 'react-router-dom'; |
| 5 | +import { db } from '../../firebase'; |
| 6 | +import { doc, updateDoc } from 'firebase/firestore'; |
4 | 7 |
|
5 | | -export default function TaskModal({ isOpen, onClose}) { |
| 8 | +export default function TaskModal({ isOpen, onClose, user}) { |
| 9 | + console.log('task modal is open', isOpen); |
| 10 | + const navigate = useNavigate(); |
6 | 11 | const [selectedTask, setSelectedTask] = useState([]); |
7 | 12 |
|
8 | | - // log the selectedTask after the array changes to update automatically |
9 | | - useEffect(() => { |
| 13 | + // log the selectedTask after the array changes to update automatically |
| 14 | + useEffect(() => { |
10 | 15 | console.log('Updated Tasks:', selectedTask); |
11 | 16 | }, [selectedTask]); |
12 | 17 |
|
13 | 18 | function toggleTask(challenge) { |
14 | 19 | // if the clicked challenge is not selectedTask, setSelectedTask |
15 | | - if (!selectedTask.includes(challenge)) { |
16 | | - // log the selection |
17 | | - console.log(`${challenge} button selected!`); |
18 | | - setSelectedTask([...selectedTask, challenge]); |
19 | | - // if the clicked challenge is already in selectedTask, filter it out of selectedTask |
20 | | - } else { |
21 | | - // log the deselection |
22 | | - console.log(`${challenge} button deselected!`); |
23 | | - setSelectedTask(selectedTask.filter(item => item !== challenge)); |
| 20 | + if (!selectedTask.includes(challenge)) { |
| 21 | + // log the selection |
| 22 | + console.log(`${challenge} button selected!`); |
| 23 | + setSelectedTask([...selectedTask, challenge]); |
| 24 | + // if the clicked challenge is already in selectedTask, filter it out of selectedTask |
| 25 | + } else { |
| 26 | + // log the deselection |
| 27 | + console.log(`${challenge} button deselected!`); |
| 28 | + setSelectedTask(selectedTask.filter(item => item !== challenge)); |
| 29 | + } |
| 30 | + } |
| 31 | + |
| 32 | + // function to save selected tasks to firestore and local storage |
| 33 | + async function saveTasks(){ |
| 34 | + if (!user){ |
| 35 | + console.log('User not authenticated yet') |
| 36 | + return; |
| 37 | + } |
| 38 | + const userDocRef = doc(db, "users", user.uid); |
| 39 | + try { |
| 40 | + await updateDoc(userDocRef, { |
| 41 | + challengesSelected: selectedTask |
| 42 | + }); |
| 43 | + |
| 44 | + console.log("User saved these tasks:", selectedTask); |
| 45 | + |
| 46 | + // then route to the challenges page |
| 47 | + navigate("/challenges"); |
| 48 | + } catch (error) { |
| 49 | + console.error("Error while saving user tasks to firestore", error); |
| 50 | + console.log("Error sending tasks to database"); |
| 51 | + } |
24 | 52 | } |
25 | | - } |
26 | 53 |
|
27 | 54 | if (!isOpen) return null; |
28 | 55 |
|
29 | 56 | return ( |
30 | | - <div className="fixed inset-0 flex justify-center items-center bg-gray-400/30 z-20"> |
31 | | - <div className="flex flex-col justify-center items-center gap-10 p-8 h-fit rounded-[20px] bg-gradient-to-b from-nyanza to-celeste opacity-100"> |
| 57 | + <div className="fixed inset-0 flex justify-center items-center bg-gray-400/30 z-20 h-[100vh]" aria-modal="true" role='dialog' aria-labelledby='modal-title'> |
| 58 | + <div className="flex flex-col justify-start items-center gap-3 md:gap-6 p-4 lg:p-10 lg:pb-6 max-h-full sm:max-h-[90vh] md:max-h-[95vh] lg:max-h-[100vh] xl:h-fit w-[90vw] md:w-[70vw] lg:w-[55vw] rounded-[20px] bg-gradient-to-b from-nyanza to-celeste opacity-100 overflow-y-auto"> |
32 | 59 | <button onClick={onClose} className='toggle-btn place-self-start active:outline-4 active:outline-persianblue focus-visible:outline-4 focus-visible:outline-persianblue'><IoClose className='text-2xl'/></button> |
33 | | - <h2 className="font-poppins text-2xl font-bold">Detox Challenge Options</h2> |
| 60 | + <h2 className="font-poppins text-base lg:text-2xl font-bold" id='modal-title'>Detox Challenge Options</h2> |
34 | 61 | {/* buttons */} |
35 | | - <div className="flex flex-col gap-4 text-left"> |
| 62 | + <div className="flex flex-col gap-4 md:gap-3 text-left w-full items-center"> |
36 | 63 | <Button |
37 | | - size="lg" |
| 64 | + size="xl" |
38 | 65 | color="secondary" |
39 | | - label="Practice Saying No: This task helps you set boundaries in & outside the office." |
| 66 | + title="Practice Saying No:" |
| 67 | + subtitle="This task helps you set boundaries in & outside the office." |
40 | 68 | onClick={() => toggleTask('Practice Saying No: This task helps you set boundaries in & outside the office.')} |
41 | 69 | isActive={selectedTask.includes('Practice Saying No: This task helps you set boundaries in & outside the office.')} |
42 | 70 | /> |
43 | 71 | <Button |
44 | | - size="lg" |
| 72 | + size="xl" |
45 | 73 | color="secondary" |
46 | | - label="Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you." |
| 74 | + title="Read Positive Affirmations:" |
| 75 | + subtitle="Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you." |
47 | 76 | onClick={() => toggleTask('Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.')} |
48 | 77 | isActive={selectedTask.includes('Read Positive Affirmations: Are you struggling with impostor syndrome, anxiety, & self-doubt? Then this task is for you.')} |
49 | 78 | /> |
50 | 79 | <Button |
51 | | - size="lg" |
| 80 | + size="xl" |
52 | 81 | color="secondary" |
53 | | - label="Read a Book: When is the last time you sat down and read a good book?" |
| 82 | + title="Read a Book:" |
| 83 | + subtitle="When is the last time you sat down and read a good book?" |
54 | 84 | onClick={() => toggleTask('Read a Book: When is the last time you sat down and read a good book?')} |
55 | 85 | isActive={selectedTask.includes('Read a Book: When is the last time you sat down and read a good book?')} |
56 | 86 | /> |
57 | 87 | <Button |
58 | | - size="lg" |
| 88 | + size="xl" |
59 | 89 | color="secondary" |
60 | | - label="Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information." |
| 90 | + title="Sleep 7 to 9 Hours:" |
| 91 | + subtitle="Your quality of sleep greatly affects your emotions and ability to process information." |
61 | 92 | onClick={() => toggleTask('Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.')} |
62 | 93 | isActive={selectedTask.includes('Sleep 7 to 9 Hours: Your quality of sleep greatly affects your emotions and ability to process information.')} |
63 | 94 | /> |
64 | 95 | <Button |
65 | | - size="lg" |
| 96 | + size="xl" |
66 | 97 | color="secondary" |
67 | | - label="Journal Entry: Respond to journal prompts or share your thoughts and feelings each day." |
| 98 | + title="Journal Entry:" |
| 99 | + subtitle="Respond to journal prompts or share your thoughts and feelings each day." |
68 | 100 | onClick={() => toggleTask('Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.')} |
69 | 101 | isActive={selectedTask.includes('Journal Entry: Respond to journal prompts or share your thoughts and feelings each day.')} |
70 | 102 | /> |
71 | 103 | </div> |
72 | | - <Button size="sm" to="/journal" label="Save" /> |
| 104 | + <div className='shrink-0'><Button size="sm" onClick={saveTasks} label="Save"/></div> |
73 | 105 | </div> |
74 | 106 | </div> |
75 | 107 | ); |
|
0 commit comments