Skip to content

Commit

Permalink
Merge pull request #1537 from tijlleenders/feature/goal-pps
Browse files Browse the repository at this point in the history
Feature: Show Goal Participants
  • Loading branch information
tijlleenders authored Oct 6, 2023
2 parents 150f8c2 + c30972c commit 89682f9
Show file tree
Hide file tree
Showing 30 changed files with 455 additions and 237 deletions.
7 changes: 7 additions & 0 deletions src/Interfaces/ICommon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,10 @@ export interface ISubHeaderProps {
showLeftNav: boolean;
showRightNav: boolean;
}

export interface IconProps {
title: string;
active?: boolean;
c1?: string;
c2?: string;
}
5 changes: 3 additions & 2 deletions src/Interfaces/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ISubGoalHistory } from "@src/store/GoalsState";
import { GoalItem } from "@src/models/GoalItem";
import { GoalItem, IParticipant } from "@src/models/GoalItem";
import { ILanguage, ILanguageListProps } from "./ILanguage";
import { confirmActionState } from "./IPopupModals";

Expand All @@ -20,6 +20,7 @@ export interface ILocationState {
changeTheme?: boolean; // theme changer mode
expandedGoalId?: string; // id of goal to be expanded
displayGoalActions?: GoalItem; // id of goal whose actions have to be opened
displayPartner?: boolean; // whether or not to display the partner goals
displayPartnerMode?: boolean; // whether or not to display the partner goals
displayAddContact?: boolean; // whether or not to display the add contact form
displayParticipants?: IParticipant[]; // whether or not to display the participants
}
2 changes: 1 addition & 1 deletion src/api/GoalsAPI/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export const updateSharedStatusOfGoal = async (id: string, relId: string, name:
.where("id")
.equals(id)
.modify((obj: GoalItem) => {
obj.participants.push({ relId, name, type: "sharer" });
obj.participants.push({ relId, name, type: "sharer", following: false });
});
}).catch((e) => {
console.log(e.stack || e);
Expand Down
5 changes: 2 additions & 3 deletions src/api/PartnerAPI/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ export const getPartnerByRelId = async (relId: string) => {
return partner.length > 0 ? partner[0] : null;
};

export const getMyPartner = async () => {
const partner: PartnerItem[] = await db.partnersCollection.toArray();
return partner.length > 0 ? partner[0] : null;
export const getPartnersCount = async () => {
return db.partnersCollection.count();
};

export const createPartner = async (relId: string, name: string) => {
Expand Down
73 changes: 0 additions & 73 deletions src/assets/images/peopleIllustration.svg

This file was deleted.

104 changes: 101 additions & 3 deletions src/common/Icon.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { IconProps } from "@src/Interfaces/ICommon";
import React from "react";

const Icon = ({ title, active }: { title: string; active: boolean }) => {
const Icon: React.FC<IconProps> = ({ title, active, c1, c2 }) => {
const color1 = active ? "var(--icon-grad-1)" : "#B1B1B1";
// console.log("🚀 ~ file: Icon.tsx:6 ~ color1:", color1)
const color2 = active ? "var(--icon-grad-2)" : "#B1B1B1";
console.log("🚀 ~ file: Icon.tsx:5 ~ Icon ~ color1:", color1);
console.log("🚀 ~ file: Icon.tsx:7 ~ Icon ~ color2:", color2);
// console.log("🚀 ~ file: Icon.tsx:8 ~ color2:", color2)
switch (title) {
case "GoalsIcon":
return (
Expand Down Expand Up @@ -248,6 +249,103 @@ const Icon = ({ title, active }: { title: string; active: boolean }) => {
</defs>
</svg>
);
case "ThreeAvatars":
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15" fill="none">
<path
d="M6.05844 2.89646C6.05844 4.4964 5.09757 5.79326 3.91242 5.79326C2.72727 5.79326 1.7666 4.4964 1.7666 2.89646C1.7666 1.29664 2.72727 0 3.91242 0C5.09757 0 6.05844 1.29675 6.05844 2.89646Z"
fill="url(#paint0_linear_882_5130)"
/>
<path
d="M6.35834 8.00471C6.51323 7.89671 6.68483 7.82643 6.86242 7.79283C6.50184 7.21137 6.24634 6.58762 6.09875 5.84114C6.05835 5.56835 5.73157 5.53635 5.48858 5.76263C5.03409 6.18615 4.50372 6.46957 3.91224 6.46957C3.30926 6.46957 2.75458 6.19541 2.3098 5.73657C2.16791 5.58995 1.95881 5.56789 1.79562 5.68183C0.951252 6.27118 0.312179 7.2068 0.0333903 8.31761C-0.0414067 8.61554 0.0110923 8.93713 0.174486 9.18501C0.338179 9.43254 0.59367 9.57848 0.865059 9.57848H4.73181C5.19449 8.96833 5.74077 8.43566 6.35834 8.00471Z"
fill="url(#paint1_linear_882_5130)"
/>
<path
d="M13.9414 2.89646C13.9414 4.4964 14.9024 5.79326 16.0875 5.79326C17.2727 5.79326 18.2334 4.4964 18.2334 2.89646C18.2334 1.29664 17.2727 0 16.0875 0C14.9024 0 13.9414 1.29675 13.9414 2.89646Z"
fill="url(#paint2_linear_882_5130)"
/>
<path
d="M13.6417 8.00471C13.4868 7.89671 13.3153 7.82643 13.1377 7.79283C13.4982 7.21137 13.7537 6.58762 13.9014 5.84114C13.9418 5.56835 14.2687 5.53635 14.5116 5.76263C14.9661 6.18615 15.4965 6.46957 16.088 6.46957C16.6909 6.46957 17.2455 6.19541 17.6903 5.73657C17.8323 5.58995 18.0413 5.56789 18.2046 5.68183C19.0489 6.27118 19.6879 7.2068 19.9668 8.31761C20.0416 8.61565 19.989 8.93713 19.8256 9.18501C19.6621 9.43254 19.4064 9.57848 19.1351 9.57848H15.2684C14.8055 8.96833 14.2593 8.43566 13.6417 8.00471Z"
fill="url(#paint3_linear_882_5130)"
/>
<path
d="M15.8456 12.7827C15.4258 11.1081 14.4736 9.69211 13.213 8.78392C12.9643 8.60484 12.6415 8.63387 12.4209 8.85603C11.7444 9.53692 10.9074 9.94239 9.9984 9.94239C9.07164 9.94239 8.21938 9.52115 7.5359 8.81604C7.31781 8.5909 6.99662 8.55696 6.74583 8.73215C5.44819 9.63783 4.46592 11.0755 4.03774 12.7828C3.92264 13.2409 4.00334 13.7347 4.25433 14.1157C4.50592 14.4961 4.8986 14.7203 5.31579 14.7203H14.5675C14.9848 14.7203 15.3778 14.4969 15.6293 14.1157C15.8804 13.7346 15.9607 13.2412 15.8456 12.7827Z"
fill="url(#paint4_linear_882_5130)"
/>
<path
d="M13.2968 4.45137C13.2968 6.90979 11.8202 8.90319 9.99894 8.90319C8.17771 8.90319 6.70117 6.9099 6.70117 4.45137C6.70117 1.99261 8.17761 0 9.99894 0C11.8203 0 13.2968 1.99261 13.2968 4.45137Z"
fill="url(#paint5_linear_882_5130)"
/>
<defs>
<linearGradient
id="paint0_linear_882_5130"
x1="3.91252"
y1="0"
x2="3.91252"
y2="5.79326"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
<linearGradient
id="paint1_linear_882_5130"
x1="3.43121"
y1="5.60938"
x2="3.43121"
y2="9.57848"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
<linearGradient
id="paint2_linear_882_5130"
x1="16.0874"
y1="0"
x2="16.0874"
y2="5.79326"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
<linearGradient
id="paint3_linear_882_5130"
x1="16.5689"
y1="5.60938"
x2="16.5689"
y2="9.57848"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
<linearGradient
id="paint4_linear_882_5130"
x1="9.9417"
y1="8.62073"
x2="9.9417"
y2="14.7203"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
<linearGradient
id="paint5_linear_882_5130"
x1="9.99899"
y1="0"
x2="9.99899"
y2="8.90319"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={color1} />
<stop offset="1" stopColor={color2} />
</linearGradient>
</defs>
</svg>
);
case "Correct":
return (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
Expand Down
12 changes: 0 additions & 12 deletions src/components/BottomNavbar/BottomNavbar.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
.bottom-navbar,
.bottom-navbar-dark {
position: fixed;
bottom: 0;
display: flex;
background: var(--bottom-nav-color);
width: 100%;
max-width: 600px;
height: 56px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.bottom-nav-item {
width: 100%;
max-width: 200px;
Expand Down
5 changes: 3 additions & 2 deletions src/components/BottomNavbar/BottomNavbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useLocation, useNavigate } from "react-router-dom";

import { darkModeState } from "@src/store";
import { themeSelectionMode, themeState } from "@src/store/ThemeState";
import BottomNavLayout from "@src/layouts/BottomNavLayout";

import Backdrop from "@src/common/Backdrop";
import GlobalAddBtn from "@components/GlobalAddBtn";
Expand Down Expand Up @@ -70,7 +71,7 @@ const BottomNavbar = ({ title }: { title: string }) => {
}}
/>
)}
<div className={`bottom-navbar${darkModeStatus ? "-dark" : ""}`}>
<BottomNavLayout>
<button
type="button"
onClick={() => {
Expand Down Expand Up @@ -120,7 +121,7 @@ const BottomNavbar = ({ title }: { title: string }) => {
{themeSelection ? <p>Next</p> : <p>{t("Journal")}</p>}
{title !== "myTime" && title !== "Inbox" && title !== "Focus" && <GlobalAddBtn add={title} />}
</button>
</div>
</BottomNavLayout>
</>
);
};
Expand Down
4 changes: 1 addition & 3 deletions src/components/GlobalAddBtn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useRecoilValue } from "recoil";
import GlobalAddIcon from "@assets/images/globalAdd.svg";
import correct from "@assets/images/correct.svg";

import { darkModeState } from "@src/store";
import { themeSelectionMode } from "@src/store/ThemeState";

import useGoalStore from "@src/hooks/useGoalStore";
Expand All @@ -16,14 +15,13 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
const { handleAddGoal } = useGoalStore();
const { handleAddFeeling } = useFeelingStore();

const darkModeStatus = useRecoilValue(darkModeState);
const themeSelection = useRecoilValue(themeSelectionMode);

const handleClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
if (themeSelection) {
window.history.back();
} else if (add === "myGoals" || state.displayPartner) {
} else if (add === "myGoals" || state.displayPartnerMode) {
await handleAddGoal();
} else if (add === "myJournal") {
handleAddFeeling();
Expand Down
62 changes: 62 additions & 0 deletions src/components/GoalsComponents/GoalAvatar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import Icon from "@src/common/Icon";
import { GoalItem } from "@src/models/GoalItem";
import { openInbox } from "@src/store";
import { getSvgForGoalPps } from "@src/utils";
import { Tooltip } from "antd";
import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useRecoilValue } from "recoil";

const Avatar = ({ goal }: { goal: GoalItem }) => {
const location = useLocation();
const navigate = useNavigate();
const { participants, goalColor } = goal;
const participantsSvg = getSvgForGoalPps(participants.length);

return (
<div className="contact-button" style={goal.archived ? { right: "78px" } : {}}>
<button
type="button"
className="contact-icon pps-icon"
style={{
cursor: "pointer",
background: `radial-gradient(50% 50% at 50% 50%, ${goalColor}33 20% 79.17%, ${goalColor} 100%)`,
}}
onClick={() => {
navigate("/MyGoals", {
state: {
...location.state,
displayParticipants: goal.participants,
},
});
}}
>
<Icon active title={participantsSvg} c1={goalColor} c2={goalColor} />
</button>
</div>
);
};

const GoalAvatar = ({ goal }: { goal: GoalItem }) => {
const isInboxOpen = useRecoilValue(openInbox);

return isInboxOpen ? (
<Tooltip placement="top" title={goal.participants[0].name}>
<div className="contact-button" style={goal.archived ? { right: "78px" } : {}}>
<button
type="button"
className="contact-icon"
style={{
background: `radial-gradient(50% 50% at 50% 50%, ${goal.goalColor}33 20% 79.17%, ${goal.goalColor} 100%)`,
}}
>
{goal.participants[0].name.charAt(0)}
</button>
</div>
</Tooltip>
) : (
<Avatar goal={goal} />
);
};

export default GoalAvatar;
55 changes: 27 additions & 28 deletions src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import moment from "moment";
import { useTranslation } from "react-i18next";
import React, { useEffect, useState } from "react";
import { Checkbox, Modal } from "antd";
import { darkModeState, displayToast, openDevMode, partnerDetails } from "@src/store";
import { darkModeState, displayToast, openDevMode } from "@src/store";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { useLocation } from "react-router-dom";

Expand Down Expand Up @@ -49,7 +49,6 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
const theme = useRecoilValue(themeState);
const today = moment(new Date()).format("YYYY-MM-DD");

const partner = useRecoilValue(partnerDetails);
const darkModeStatus = useRecoilValue(darkModeState);
const subGoalsHistory = useRecoilValue(goalsHistory);
const ancestors = subGoalsHistory.map((ele) => ele.goalID);
Expand Down Expand Up @@ -117,7 +116,7 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
return;
}
const goalColor = colorPalleteList[colorIndex];
if (state.displayPartner) {
if (state.displayPartnerMode) {
// suggestChanges(getFinalTags(), title, goalColor, subGoalsHistory.length);
} else {
await modifyGoal(goal.id, getFinalTags(), title, goalColor, ancestors);
Expand All @@ -128,32 +127,32 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
if (!showAddGoal) {
return;
}
if (state.displayPartner && partner && state.goalsHistory) {
// const parentId = state.goalsHistory.slice(-1)[0].goalID;
// const rootGoalId = state.goalsHistory[0].goalID;
// const rootGoal = partner.goals.find((ele) => ele.id === rootGoalId);
// const parentGoal = parentId === rootGoalId ? rootGoal : await getSharedWMGoal(parentId);
// if (!parentGoal || !rootGoal) {
// return;
// }
// suggestNewGoal(rootGoal, parentGoal, getFinalTags(), title, colorPalleteList[colorIndex], subGoalsHistory.length);
} else {
const { parentGoal } = await createGoal(
showAddGoal.goalId,
getFinalTags(),
title,
colorPalleteList[colorIndex],
ancestors,
);
if (!parentGoal && title === "magic") {
setDevMode(true);
setShowToast({
open: true,
message: "Congratulations, you activated DEV mode",
extra: "Explore what's hidden",
});
}
// if (state.displayPartnerMode && partner && state.goalsHistory) {
// // const parentId = state.goalsHistory.slice(-1)[0].goalID;
// // const rootGoalId = state.goalsHistory[0].goalID;
// // const rootGoal = partner.goals.find((ele) => ele.id === rootGoalId);
// // const parentGoal = parentId === rootGoalId ? rootGoal : await getSharedWMGoal(parentId);
// // if (!parentGoal || !rootGoal) {
// // return;
// // }
// // suggestNewGoal(rootGoal, parentGoal, getFinalTags(), title, colorPalleteList[colorIndex], subGoalsHistory.length);
// } else {
const { parentGoal } = await createGoal(
showAddGoal.goalId,
getFinalTags(),
title,
colorPalleteList[colorIndex],
ancestors,
);
if (!parentGoal && title === "magic") {
setDevMode(true);
setShowToast({
open: true,
message: "Congratulations, you activated DEV mode",
extra: "Explore what's hidden",
});
}
// }
await mySound.play();
};

Expand Down
Loading

1 comment on commit 89682f9

@vercel
Copy link

@vercel vercel bot commented on 89682f9 Oct 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

zinzen – ./

zinzen-git-main-tijlleenders.vercel.app
zinzen.vercel.app
zinzen-tijlleenders.vercel.app

Please sign in to comment.