+ )}
);
}
\ No newline at end of file
From 7f6ed827010680c63cf4166c44cb9da11138d378 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 23 Nov 2025 14:12:45 -0500
Subject: [PATCH 03/13] fix(dashboard): reduce grid and title margins for 2xl
tailwind breakpoint
---
src/pages/Dashboard.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 57a516a..b28f1f8 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -25,7 +25,7 @@ export default function Dashboard() {
return (
{/* title and button */}
-
+
{/* conditional render for new user vs returning */}
{hasTasks ? 'Welcome Back!' : 'Welcome New User!'}
@@ -43,7 +43,7 @@ export default function Dashboard() {
{/* conditional render for empty state */}
{hasTasks ? (
/* card grid */
-
+
{/* row 1 */}
Date: Sat, 6 Dec 2025 22:21:15 -0500
Subject: [PATCH 04/13] feat(dashboard): save user challenges selection to
firestore from task modal
---
src/components/Dashboard/TaskModal.jsx | 58 +++++++++++++++++---------
src/pages/Dashboard.jsx | 2 +-
2 files changed, 39 insertions(+), 21 deletions(-)
diff --git a/src/components/Dashboard/TaskModal.jsx b/src/components/Dashboard/TaskModal.jsx
index f7beaf6..de4fd2a 100644
--- a/src/components/Dashboard/TaskModal.jsx
+++ b/src/components/Dashboard/TaskModal.jsx
@@ -2,39 +2,57 @@ import { useEffect, useState } from 'react';
import Button from "../Button";
import { IoClose } from "react-icons/io5";
import { useNavigate } from 'react-router-dom';
+import { auth, db } from '../../firebase';
+import { doc, updateDoc } from 'firebase/firestore';
export default function TaskModal({ isOpen, onClose}) {
+ console.log('task modal is open', isOpen);
const navigate = useNavigate();
-
const [selectedTask, setSelectedTask] = useState([]);
+ // define the current user logged in
+ const user = auth.currentUser;
- // log the selectedTask after the array changes to update automatically
- useEffect(() => {
+ // log the selectedTask after the array changes to update automatically
+ useEffect(() => {
console.log('Updated Tasks:', selectedTask);
}, [selectedTask]);
function toggleTask(challenge) {
// if the clicked challenge is not selectedTask, setSelectedTask
- if (!selectedTask.includes(challenge)) {
- // log the selection
- console.log(`${challenge} button selected!`);
- setSelectedTask([...selectedTask, challenge]);
- // if the clicked challenge is already in selectedTask, filter it out of selectedTask
- } else {
- // log the deselection
- console.log(`${challenge} button deselected!`);
- setSelectedTask(selectedTask.filter(item => item !== challenge));
- }
+ if (!selectedTask.includes(challenge)) {
+ // log the selection
+ console.log(`${challenge} button selected!`);
+ setSelectedTask([...selectedTask, challenge]);
+ // if the clicked challenge is already in selectedTask, filter it out of selectedTask
+ } else {
+ // log the deselection
+ console.log(`${challenge} button deselected!`);
+ setSelectedTask(selectedTask.filter(item => item !== challenge));
+ }
}
- // function to save selected tasks in local storage for dashboard states
- function saveTasks(){
- // save to local storage
- localStorage.setItem("userTasks", JSON.stringify(selectedTask));
- console.log("User saved these tasks:", selectedTask);
+ // function to save selected tasks to firestore and local storage
+ async function saveTasks(){
+ if (!auth){
+ console.log('User not authenticated yet')
+ return;
+ }
+ const userDocRef = doc(db, "users", user.uid);
+ try {
+ await updateDoc(userDocRef, {
+ challengesSelected: selectedTask
+ });
+
+ // save to local storage
+ localStorage.setItem("userTasks", JSON.stringify(selectedTask));
+ console.log("User saved these tasks:", selectedTask);
- // then route to the challenges page
- navigate("/challenges");
+ // then route to the challenges page
+ navigate("/challenges");
+ } catch (error) {
+ console.error("Error while saving user tasks to firestore", error);
+ console.log("Error sending tasks to database");
+ }
}
if (!isOpen) return null;
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index b28f1f8..590690a 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -39,7 +39,7 @@ export default function Dashboard() {
/>
- setTaskModalOpen(false)} />
+ setTaskModalOpen(false)}/>
{/* conditional render for empty state */}
{hasTasks ? (
/* card grid */
From 54086d4feb0f45801ebaad772114b073c21df1ee Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 7 Dec 2025 00:35:09 -0500
Subject: [PATCH 05/13] feat(dashboard): fetch selected challenges from
firestore instead of local storage, add persistent auth for quick dashboard
state load, pass user prop to modal
---
src/components/Dashboard/TaskModal.jsx | 10 ++-----
src/firebase.js | 3 +-
src/pages/Dashboard.jsx | 39 ++++++++++++++++++++------
3 files changed, 36 insertions(+), 16 deletions(-)
diff --git a/src/components/Dashboard/TaskModal.jsx b/src/components/Dashboard/TaskModal.jsx
index de4fd2a..495e558 100644
--- a/src/components/Dashboard/TaskModal.jsx
+++ b/src/components/Dashboard/TaskModal.jsx
@@ -2,15 +2,13 @@ import { useEffect, useState } from 'react';
import Button from "../Button";
import { IoClose } from "react-icons/io5";
import { useNavigate } from 'react-router-dom';
-import { auth, db } from '../../firebase';
+import { db } from '../../firebase';
import { doc, updateDoc } from 'firebase/firestore';
-export default function TaskModal({ isOpen, onClose}) {
+export default function TaskModal({ isOpen, onClose, user}) {
console.log('task modal is open', isOpen);
const navigate = useNavigate();
const [selectedTask, setSelectedTask] = useState([]);
- // define the current user logged in
- const user = auth.currentUser;
// log the selectedTask after the array changes to update automatically
useEffect(() => {
@@ -33,7 +31,7 @@ export default function TaskModal({ isOpen, onClose}) {
// function to save selected tasks to firestore and local storage
async function saveTasks(){
- if (!auth){
+ if (!user){
console.log('User not authenticated yet')
return;
}
@@ -43,8 +41,6 @@ export default function TaskModal({ isOpen, onClose}) {
challengesSelected: selectedTask
});
- // save to local storage
- localStorage.setItem("userTasks", JSON.stringify(selectedTask));
console.log("User saved these tasks:", selectedTask);
// then route to the challenges page
diff --git a/src/firebase.js b/src/firebase.js
index 088faf2..a33ba6f 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,7 +1,7 @@
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
-import { getAuth } from 'firebase/auth';
+import { browserLocalPersistence, getAuth, setPersistence } from 'firebase/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
@@ -19,6 +19,7 @@ const firebaseConfig = {
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
+setPersistence(auth, browserLocalPersistence);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);
export { db, auth };
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 590690a..3b4889a 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
import Button from "../components/Button";
import DashboardTile from "../components/Dashboard/DashboardTile";
import TaskModal from "../components/Dashboard/TaskModal";
+import { auth, db } from "../firebase";
+import { doc, onSnapshot } from "firebase/firestore";
let daysCompleted = 0;
let daysLeft = 30 - daysCompleted;
@@ -11,16 +13,37 @@ export default function Dashboard() {
const [taskModalOpen, setTaskModalOpen] = useState(false);
// state for whether tasks have been selected or not from dashboard modal
const [hasTasks, setHasTasks] = useState(false);
+ // define variable for the authenticated user
+ const user = auth.currentUser;
useEffect(() => {
- // load userTasks from modal from local storage
- let userTasks = JSON.parse(localStorage.getItem("userTasks") || '[]');
- console.log("Loaded tasks from local storage:", userTasks);
- // if it's not empty, setHasTasks state to true
- if (userTasks.length !== 0){
- setHasTasks(true);
+ // dont run anything if the user isn't loaded
+ if (!user) {
+ console.log('user wasnt loaded yet or not found');
+ return;
+ } else {
+ console.log('user found');
}
- }, []);
+
+ // define variables
+ const userDocRef = doc(db, "users", user.uid);
+
+ // listen in real-time for changes to the document
+ const unsub = onSnapshot(userDocRef, (userDocSnap) => {
+ // check if the document's challengesSelected field is > 0 to display the full dashboard and update state
+ if (userDocSnap.exists() && userDocSnap.data().challengesSelected.length > 0){
+ setHasTasks(true);
+ } else {
+ setHasTasks(false);
+ console.log('user hasnt selected any tasks or deselected')
+ }
+ });
+
+ // call this function once u exit so it stops looking for the changes in the database
+ return () => {
+ unsub();
+ }
+ }, [user]);
return (
@@ -39,7 +62,7 @@ export default function Dashboard() {
/>
- setTaskModalOpen(false)}/>
+ setTaskModalOpen(false)}/>
{/* conditional render for empty state */}
{hasTasks ? (
/* card grid */
From 14b7de81f75c62fe26bee63d254253f4f773d109 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 7 Dec 2025 02:43:57 -0500
Subject: [PATCH 06/13] updated journal with latest version from main via
rebase
---
src/pages/Dashboard.jsx | 21 ++++++++++++++++-----
1 file changed, 16 insertions(+), 5 deletions(-)
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 3b4889a..bf8ed8f 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -5,14 +5,17 @@ import TaskModal from "../components/Dashboard/TaskModal";
import { auth, db } from "../firebase";
import { doc, onSnapshot } from "firebase/firestore";
-let daysCompleted = 0;
-let daysLeft = 30 - daysCompleted;
let loginStreak = 1;
export default function Dashboard() {
const [taskModalOpen, setTaskModalOpen] = useState(false);
// state for whether tasks have been selected or not from dashboard modal
const [hasTasks, setHasTasks] = useState(false);
+ // state for challenge task completed days
+ const [completedDays, setCompletedDays] = useState(0);
+ let daysCompleted = completedDays;
+ let daysLeft = 30 - daysCompleted;
+
// define variable for the authenticated user
const user = auth.currentUser;
@@ -36,7 +39,15 @@ export default function Dashboard() {
} else {
setHasTasks(false);
console.log('user hasnt selected any tasks or deselected')
- }
+ }
+
+ // check the document's completedDays for the challenges to update state - add optional chaining in case thee user hasn't started any challenges yet
+ if (userDocSnap.data().journalProgress?.completedDays > 0){
+ setCompletedDays(userDocSnap.data().journalProgress.completedDays);
+ } else {
+ console.log('No days completed yet')
+ setCompletedDays(0);
+ };
});
// call this function once u exit so it stops looking for the changes in the database
@@ -75,7 +86,7 @@ export default function Dashboard() {
title="Detox Summary"
dataSentence={`${daysCompleted} Day${daysCompleted == 1 ? '' : 's'}`}
subtitle={`${daysLeft} day${daysLeft == 1 ? '' : 's'} to go!`}
- />
+ />
+ />
Date: Sun, 7 Dec 2025 03:39:19 -0500
Subject: [PATCH 07/13] fix(dashboard): fix issue with slow load of user's auth
id, causing issues with conditional render of empty and regular state
dashboard
---
src/pages/Dashboard.jsx | 19 ++++++++++++++++++-
1 file changed, 18 insertions(+), 1 deletion(-)
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index bf8ed8f..91f8e95 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -4,10 +4,12 @@ import DashboardTile from "../components/Dashboard/DashboardTile";
import TaskModal from "../components/Dashboard/TaskModal";
import { auth, db } from "../firebase";
import { doc, onSnapshot } from "firebase/firestore";
+import { onAuthStateChanged } from "firebase/auth";
let loginStreak = 1;
export default function Dashboard() {
+ const [user, setUser] = useState(null);
const [taskModalOpen, setTaskModalOpen] = useState(false);
// state for whether tasks have been selected or not from dashboard modal
const [hasTasks, setHasTasks] = useState(false);
@@ -17,9 +19,23 @@ export default function Dashboard() {
let daysLeft = 30 - daysCompleted;
// define variable for the authenticated user
- const user = auth.currentUser;
+ // const user = auth.currentUser;
+ // useEffect to ensure the authenticated user loads before dashboard data and state is determined
useEffect(() => {
+ console.log("User is loading...")
+ const unsub = onAuthStateChanged(auth, (currentUser) => {
+ setUser(currentUser);
+ console.log('The user has been found')
+ });
+
+ return () => {
+ unsub();
+ }
+ }, []);
+
+ useEffect(() => {
+ console.log("About to load the data from the user...")
// dont run anything if the user isn't loaded
if (!user) {
console.log('user wasnt loaded yet or not found');
@@ -33,6 +49,7 @@ export default function Dashboard() {
// listen in real-time for changes to the document
const unsub = onSnapshot(userDocRef, (userDocSnap) => {
+ console.log('User has already selected these tasks: ', userDocSnap.data().challengesSelected);
// check if the document's challengesSelected field is > 0 to display the full dashboard and update state
if (userDocSnap.exists() && userDocSnap.data().challengesSelected.length > 0){
setHasTasks(true);
From 1edec44273341241eabfe1ffd17508d1ed6770f6 Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sun, 7 Dec 2025 13:01:47 -0500
Subject: [PATCH 08/13] fix(button): remove trailing class for active button
hover override to work, update button component, ignore from prettier
---
.prettierignore | 3 ++-
src/App.css | 6 +++---
src/components/Button.jsx | 33 ++++++++++-----------------------
3 files changed, 15 insertions(+), 27 deletions(-)
diff --git a/.prettierignore b/.prettierignore
index db4c6d9..8aef758 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
dist
-node_modules
\ No newline at end of file
+node_modules
+Button.jsx
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 7f31b0a..c03681c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,13 @@
-button:not(.toggle-btn):not(.delete-btn):focus-visible {
+button:not(.toggle-btn):focus-visible {
outline: solid 4px var(--color-persianblue);
outline-offset: 8px;
}
-button:not(.toggle-btn):not(.delete-btn):hover {
+button:not(.toggle-btn):hover {
background-color: var(--color-zinc);
color: white;
cursor: pointer;
}
-button:not(.toggle-btn):not(.delete-btn):active {
+button:not(.toggle-btn):active {
background-color: var(--color-persianblue);
color: white;
}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index c077c74..c5697d2 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,3 +1,4 @@
+// prettier-ignore-file
import { useNavigate } from 'react-router-dom';
import { tv } from 'tailwind-variants/lite';
@@ -10,18 +11,18 @@ const buttonVariants = tv({
sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
- circ: 'h-11 w-11 text-2xl rounded-full',
+ circ: 'h-11 w-11 text-2xl rounded-full'
},
color: {
primary: 'bg-eerie text-white border-1 border-eerie',
secondary: 'bg-white text-eerie border-1 border-eerie',
- gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white',
+ gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white'
},
},
// default button styles if no specified props
defaultVariants: {
size: 'sm',
- color: 'primary',
+ color: 'primary'
},
// conditional style cases for specific prop combinations
compoundVariants: [
@@ -29,20 +30,12 @@ const buttonVariants = tv({
{
color: 'secondary',
size: 'md',
- className: 'drop-shadow-none !font-normal',
+ className: 'drop-shadow-none !font-normal'
},
],
});
-export default function Button({
- size,
- color,
- label,
- onClick,
- isActive,
- to,
- ...props
-}) {
+export default function Button({ size, color, label, onClick, isActive, to, ...props }) {
let navigate = useNavigate();
function handleClick() {
@@ -54,16 +47,10 @@ export default function Button({
}
return (
-
+