fix max progress value, limit to 100

sdevalapurkar · Oct 20, 2021 · 04be25d · 04be25d
1 parent 027a351
commit 04be25d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/app/src/components/GoalDetails.js b/app/src/components/GoalDetails.js
@@ -93,6 +93,18 @@ function GoalDetails() {
  );
  }
 
+ const getProgressValue = () => {
+ if (!goalDetails.goal_practice_times) {
+ return 0;
+ }
+
+ if (goalDetails.goal_practice_times >= goalDetails.goal_times) {
+ return 100;
+ }
+
+ return (goalDetails.goal_practice_times * 100) / goalDetails.goal_times;
+ };
+
  return (
  <>
  <Header logoutUser={logoutUser} />
@@ -119,7 +131,7 @@ function GoalDetails() {
  <Typography variant="body1"><b>Progress:</b></Typography>
  </Box>
  <CircularProgressWithLabel
- value={goalDetails.goal_practice_times ? (goalDetails.goal_practice_times * 100) / goalDetails.goal_times : 0}
+ value={getProgressValue()}
  />
  <Box pt={2}>
  {goalDetails.goal_practice_times < goalDetails.goal_times && (
@@ -134,7 +146,7 @@ function GoalDetails() {
  </Button>
  )}
  {goalDetails.goal_practice_times >= goalDetails.goal_times && (
- <Typography variant="h6">Congrats! You've completed this goal already.</Typography>
+ <Typography variant="body1">Congrats! You've completed this goal :)</Typography>
  )}
  </Box>
  </Box>

diff --git a/app/src/components/Homepage.js b/app/src/components/Homepage.js
@@ -101,6 +101,18 @@ function Homepage() {
  setIsAuthed(isAuthenticated());
  };
 
+ const getProgressValue = (goalDetails) => {
+ if (!goalDetails.goal_practice_times) {
+ return 0;
+ }
+
+ if (goalDetails.goal_practice_times >= goalDetails.goal_times) {
+ return 100;
+ }
+
+ return (goalDetails.goal_practice_times * 100) / goalDetails.goal_times;
+ };
+
  const getExistingGoalsTable = () => {
  if (!existingGoals.length) {
  return (
@@ -152,7 +164,7 @@ function Homepage() {
  <TableCell>{moment(row.goal_end_date).format('MMM D, YYYY')}</TableCell>
  <TableCell>
  <CircularProgressWithLabel
- value={row.goal_practice_times ? (row.goal_practice_times * 100) / row.goal_times : 0}
+ value={getProgressValue()}
  />
  </TableCell>
  <TableCell align="right">