Skip to content

Commit 8971509

Browse files
CalistaBesselingCalistaBesseling
authored
221 progress page badge widget (#295)
* Finished the completed badges page, now I need to add the in progress page and the ability to switch between * It's basically done yay, the only thing is that for some reason the background colour is only the height of the screen so it stops when I scroll. Need to fix that. But done pretty much
1 parent 50aeca1 commit 8971509

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎frontend/src/participant/pages/progress/Main.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useContext, useState } from "react";
2+
import { Box, Flex, Text, HStack } from "@chakra-ui/react";
23
import { useQuery } from "@apollo/client";
34
import { ParticipantContext } from "../../common/ParticipantContext";
45
import { EditGoal } from "./components/EditGoal";
@@ -9,10 +10,12 @@ import {
910
} from "../../../gql/queries";
1011
import WeeklyEarningsChart from "./components/EarningsWidget";
1112
import BucksGoalCard from "./elements/BucksGoalCard";
13+
import BadgeWidget from "./components/BadgeWidget";
1214

1315
export default function ParticipantsProgressPage() {
1416
const [editGoal, setEditGoal] = useState(false);
1517
const [setGoal, setSetGoal] = useState(false);
18+
const [activeTab, setActiveTab] = useState("badges");
1619
const participantContext = useContext(ParticipantContext);
1720

1821
// Fetch participant data
@@ -91,6 +94,91 @@ export default function ParticipantsProgressPage() {
9194
<div style={{ padding: "10px 20px" }}>
9295
<WeeklyEarningsChart weeklyEarnings={weeklyEarnings} />
9396
</div>
97+
98+
<Flex
99+
justifyContent="center"
100+
alignItems="center"
101+
>
102+
<Box
103+
bg="white"
104+
borderRadius="12px"
105+
p="20px"
106+
position="relative"
107+
border="2px solid"
108+
borderColor="#f0f0f0"
109+
width="92%"
110+
>
111+
<HStack spacing={6} mb={4}>
112+
{["badges", "achieved"].map((tab) => (
113+
<Text
114+
key={tab}
115+
fontWeight={activeTab === tab ? "bold" : "medium"}
116+
color={activeTab === tab ? "black" : "grey"}
117+
textDecoration={activeTab === tab ? "underline" : "none"}
118+
cursor="pointer"
119+
_hover={{ color: "gray.700" }}
120+
onClick={() => setActiveTab(tab)}
121+
transition="all 0.2s ease"
122+
>
123+
{tab.charAt(0).toUpperCase() + tab.slice(1)}
124+
</Text>
125+
))}
126+
</HStack>
127+
128+
{activeTab === "badges" ? (
129+
<BadgeWidget allBadges={[
130+
{
131+
title: "Beginner Log In Badge",
132+
subtitle: "Completed 7 days in a row",
133+
bucks: 5,
134+
badge: { icon: "five_star", rarity: "gold", percentComplete: 100 },
135+
},
136+
{
137+
title: "Super Awesome Badge",
138+
subtitle: "Completed 7 days in a row",
139+
bucks: 5,
140+
badge: { icon: "five_star", rarity: "gold", percentComplete: 20 },
141+
},
142+
{
143+
title: "Beginner Perfect Score Badge",
144+
subtitle: "Completed 7 days in a row",
145+
bucks: 5,
146+
badge: { icon: "diamond", rarity: "diamond", percentComplete: 50 },
147+
},
148+
{
149+
title: "Hello world",
150+
subtitle: "Completed 7 days in a row",
151+
bucks: 5,
152+
badge: { icon: "tool", rarity: "green", percentComplete: 100 },
153+
},
154+
155+
]} achieved={false} />
156+
) : (
157+
<BadgeWidget allBadges={
158+
[
159+
{
160+
title: "Beginner Log In Badge",
161+
subtitle: "Completed 7 days in a row",
162+
bucks: 5,
163+
badge: { icon: "five_star", rarity: "gold", percentComplete: 100 },
164+
},
165+
{
166+
title: "Beginner Perfect Score Badge",
167+
subtitle: "Completed 7 days in a row",
168+
bucks: 5,
169+
badge: { icon: "diamond", rarity: "diamond", percentComplete: 50 },
170+
},
171+
{
172+
title: "Hello world",
173+
subtitle: "Completed 7 days in a row",
174+
bucks: 5,
175+
badge: { icon: "tool", rarity: "green", percentComplete: 100 },
176+
},
177+
]
178+
} achieved />
179+
)}
180+
</Box>
181+
</Flex>
94182
</>
95183
);
96184
}

‎frontend/src/participant/pages/progress/components/BadgeRow.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from "react";
2+
import { Box, Flex, Text, Divider, Button, Image } from "@chakra-ui/react";
3+
import Badge, { BadgeRarity } from "../../../common/Badge";
4+
5+
interface BadgeRowProps {
6+
title: string;
7+
subtitle: string;
8+
bucks: number;
9+
badge: {
10+
icon: string;
11+
rarity: BadgeRarity;
12+
percentComplete?: number;
13+
};
14+
isLast?: boolean;
15+
isFirst?: boolean;
16+
showButton?: boolean;
17+
achieved?: boolean;
18+
onProgressClick?: () => void;
19+
}
20+
21+
const BadgeRow: React.FC<BadgeRowProps> = ({
22+
title,
23+
subtitle,
24+
bucks,
25+
badge,
26+
isLast = false,
27+
isFirst= false,
28+
showButton = false,
29+
achieved = false,
30+
onProgressClick,
31+
}) => {
32+
return (
33+
<Box>
34+
{/* Badge and content row */}
35+
<Flex align="center" gap="14px"
36+
borderTop={isFirst ? "0" : "1px solid"}
37+
borderColor="neutral.300"
38+
pt={isFirst ? "0" : "16px"}
39+
mb={isLast ? "0" : "16px"}>
40+
<Flex direction='column' gap={1} alignItems="center" >
41+
<Badge
42+
icon={badge.icon}
43+
rarity={achieved ? badge.rarity: "silver"}
44+
size={achieved ? "medium" : "small"}
45+
percentComplete={badge.percentComplete ?? 100}
46+
/>
47+
{
48+
!achieved && (
49+
<Text
50+
textStyle="mobile.b1"
51+
color="text.light.secondary"
52+
lineHeight="1.3"
53+
>
54+
{badge.percentComplete}%
55+
</Text>
56+
)
57+
}
58+
</Flex>
59+
<Box flex="1">
60+
<Text
61+
textStyle="mobile.h3"
62+
color="text.light.primary"
63+
fontWeight="600"
64+
mb="2px"
65+
>
66+
{title}
67+
</Text>
68+
<Text
69+
textStyle="mobile.b1"
70+
color="text.light.secondary"
71+
lineHeight="1.3"
72+
>
73+
{subtitle}
74+
</Text>
75+
</Box>
76+
{
77+
!achieved && (
78+
<Flex
79+
justifyContent="center"
80+
alignItems="center"
81+
gap="5px"
82+
>
83+
{bucks}
84+
<Image src="/assets/marillac_bucks.png" alt="coin" />
85+
</Flex>
86+
)
87+
}
88+
</Flex>
89+
</Box>
90+
);
91+
};
92+
93+
export default BadgeRow;

‎frontend/src/participant/pages/progress/components/BadgeWidget.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from "react";
2+
import { Box } from "@chakra-ui/react";
3+
import { useNavigate } from "react-router-dom";
4+
import { BadgeRarity } from "../../../common/Badge";
5+
import BadgeRow from "./BadgeRow";
6+
7+
export type BadgeRowType = "congratulations" | "lostStreak" | "progress";
8+
9+
export interface BadgeToDisplay {
10+
title: string;
11+
subtitle: string;
12+
bucks: number;
13+
badge: {
14+
icon: string;
15+
rarity: BadgeRarity;
16+
percentComplete?: number;
17+
};
18+
}
19+
20+
interface BadgeWidgetProps {
21+
allBadges: BadgeToDisplay[];
22+
achieved: boolean;
23+
}
24+
25+
const BadgeWidget: React.FC<BadgeWidgetProps> = ({
26+
allBadges,
27+
achieved,
28+
}) => {
29+
30+
const filteredBadges = (badgesToDisplayInWidget: BadgeToDisplay[], complete: boolean) => {
31+
return badgesToDisplayInWidget.filter(badge => {
32+
if (complete) {
33+
return badge.badge.percentComplete === 100;
34+
}
35+
return badge.badge.percentComplete !== 100;
36+
});
37+
};
38+
const badgesToDisplayInWidget = filteredBadges(allBadges, achieved);
39+
40+
// fallback if no badges are provided
41+
if (!badgesToDisplayInWidget || badgesToDisplayInWidget.length === 0) {
42+
return (
43+
<Box
44+
bg="white"
45+
p="20px"
46+
mb="16px"
47+
>
48+
<BadgeRow
49+
title="Add some badges!"
50+
subtitle="Pass badgesToDisplayInWidget prop with badge data."
51+
bucks={0}
52+
badge={{
53+
icon: "five_star",
54+
rarity: "silver",
55+
percentComplete: 0,
56+
}}
57+
isLast
58+
/>
59+
</Box>
60+
);
61+
}
62+
63+
return (
64+
<Box>
65+
{badgesToDisplayInWidget.map((badgeData, index) => {
66+
const key = `badge-${index}`;
67+
const isLast = index === badgesToDisplayInWidget.length - 1;
68+
const isFirst = index === 0;
69+
70+
const {
71+
title,
72+
subtitle = "",
73+
bucks = 0,
74+
badge = {
75+
icon: "diamond",
76+
rarity: "bronze",
77+
percentComplete: 0,
78+
},
79+
} = badgeData;
80+
81+
return (
82+
<BadgeRow
83+
key={key}
84+
title={title}
85+
subtitle={subtitle}
86+
badge={badge}
87+
bucks={bucks}
88+
isLast={isLast}
89+
isFirst={isFirst}
90+
showButton={isFirst}
91+
achieved={achieved}
92+
/>
93+
);
94+
})}
95+
</Box>
96+
);
97+
};
98+
99+
export default BadgeWidget;

0 commit comments

Comments
 (0)