From b46ea89b63112b42274dfcf98db4bcc0bfdc5943 Mon Sep 17 00:00:00 2001
From: Christopher Burk <c.burk.tech@gmail.com>
Date: Wed, 29 Dec 2021 23:29:08 -0800
Subject: [PATCH] implements MUI progress bar that works with break reminder
 and counter state, decreasing along with timer to 0, conditionally renders if
 counter is greater than 0

---
 src/components/break-reminder/BreakReminder.js   | 15 ++++++++++++++-
 src/components/break-reminder/breakReminder.scss | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/break-reminder/BreakReminder.js b/src/components/break-reminder/BreakReminder.js
index f7dab52..753492e 100644
--- a/src/components/break-reminder/BreakReminder.js
+++ b/src/components/break-reminder/BreakReminder.js
@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Box } from '@mui/system';
-import { FormControl, InputLabel, OutlinedInput } from '@mui/material';
+import {
+  FormControl,
+  InputLabel,
+  OutlinedInput,
+  LinearProgress
+} from '@mui/material';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import BreakReminderModal from '../break-modal/Modal';
 import { ThemeContext } from '../../context/theme';
 import './breakReminder.scss';
+import { When } from 'react-if';
 
 function BreakReminder() {
   const theme = useContext(ThemeContext);
@@ -84,6 +90,13 @@ function BreakReminder() {
               <span>:</span>
               <span className="second">{second}</span>
             </div>
+            <When condition={counter > 0}>
+              <div id="progressBarDiv">
+                <Box sx={{ width: '100%' }}>
+                  <LinearProgress variant="determinate" value={counter} />
+                </Box>
+              </div>
+            </When>
             <Stack spacing={2} direction="row">
               <Button variant="contained" data-testid="start/pauseButton" id="startTimer" onClick={() => setIsActive(!isActive)}>{isActive ? "Pause" : "Start"}</Button>
               <Button
diff --git a/src/components/break-reminder/breakReminder.scss b/src/components/break-reminder/breakReminder.scss
index e59090f..59f5017 100644
--- a/src/components/break-reminder/breakReminder.scss
+++ b/src/components/break-reminder/breakReminder.scss
@@ -131,3 +131,18 @@
     }
   }
 }
+
+#progressBarDiv {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // background-color: pink;
+  z-index: 11;
+  width: 100%;
+  height: 25px;
+
+  .progressBar {
+    width: 100%;
+    background-color:burlywood;
+  }
+}
\ No newline at end of file