Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix/ tooltip + go to insights modal #105

Merged
merged 3 commits into from
Dec 18, 2024
+55 −11
Merged

Bugfix/ tooltip + go to insights modal #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7d91d4
fix: hide mood tooltips when priority matrix is set
maxitect Dec 17, 2024
d9d7b36
fix: conditional modal to save before going to insights in MoodsDispl…
maxitect Dec 17, 2024
4d5e9b9
chore: merge from main #103, #104
maxitect Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions src/app/moods/components/Cube.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import quadrants from "./data/quadrants.json";
import labelsMood from "./data/labels_mood.json";
import labelsPriority from "./data/labels_priority.json";
import moodTooltips from "./data/mood_tooltips.json";
import clsx from "clsx";

// Cube quadrants and labels order (in quadrants.json/labels.json):
// Bottom-front-left
Expand Down Expand Up @@ -90,36 +91,76 @@ export default function Cube({ neuroState }: CubeProps) {
/>

<button
className="absolute left-1/2 top-[122px] transform -translate-x-28 z-20 w-20 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[122px] transform -translate-x-28 z-20 w-20 h-6"
)}
onClick={() => handleTooltip("fight/flight")}
></button>
<button
className="absolute left-1/2 top-[122px] transform translate-x-14 z-20 w-14 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[122px] transform translate-x-14 z-20 w-14 h-6"
)}
onClick={() => handleTooltip("interest")}
></button>
<button
className="absolute left-1/2 top-[327px] transform -translate-x-28 z-20 w-16 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[327px] transform -translate-x-28 z-20 w-16 h-6"
)}
onClick={() => handleTooltip("distress")}
></button>
<button
className="absolute left-1/2 top-[327px] transform translate-x-16 z-20 w-12 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[327px] transform translate-x-16 z-20 w-12 h-6"
)}
onClick={() => handleTooltip("relief")}
></button>

<button
className="absolute left-1/2 top-[180px] transform -translate-x-20 z-20 w-16 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[180px] transform -translate-x-20 z-20 w-16 h-6"
)}
onClick={() => handleTooltip("freeze")}
></button>
<button
className="absolute left-1/2 top-[180px] transform translate-x-6 z-20 w-10 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[180px] transform translate-x-6 z-20 w-10 h-6"
)}
onClick={() => handleTooltip("joy")}
></button>
<button
className="absolute left-1/2 top-[267px] transform -translate-x-16 z-20 w-10 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[267px] transform -translate-x-16 z-20 w-10 h-6"
)}
onClick={() => handleTooltip("guilt")}
></button>
<button
className="absolute left-1/2 top-[267px] transform translate-x-3 z-20 w-16 h-6"
className={clsx(
"",
isPriorityMatrix
? "hidden"
: "absolute left-1/2 top-[267px] transform translate-x-3 z-20 w-16 h-6"
)}
onClick={() => handleTooltip("content")}
></button>

Expand Down
9 changes: 6 additions & 3 deletions src/app/moods/components/MoodsDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import Cube from "./Cube";
import SliderBox from "./SliderBox";
// import MoodButtons from "./MoodButtons";
import { useDatabase } from "@/context/DatabaseContext";
import { useState } from "react";
import { Datum } from "plotly.js";
Expand All @@ -26,13 +25,14 @@ export default function MoodsDisplay() {
serotonin: 1,
adrenaline: 1,
});
const [hasSaved, setHasSaved] = useState(false);

const handleChange = (value: number | number[], chem: string) => {
setNeuroState((prev) => ({
...prev,
[chem]: value,
}));
console.log(neuroState);
setHasSaved(false);
};

const submitMood = () => {
Expand Down Expand Up @@ -85,6 +85,7 @@ export default function MoodsDisplay() {

database.addToDb("mood_records", submitObj);
setModalOpen(true);
setHasSaved(true);
};

const forwardButton = {
Expand Down Expand Up @@ -121,7 +122,9 @@ export default function MoodsDisplay() {
<Button
label="Go to Insights"
className="mt-2 px-3 py-1 bg-gray-700 text-white rounded"
onClick={() => setInsightsModalOpen(true)}
onClick={() =>
hasSaved ? router.push("/insights") : setInsightsModalOpen(true)
}
/>
</div>

Expand Down
Loading