feat: increase maximum focus time to 2 hours (#383)

* increase maximum focus minutes in config * refactor: return hours from useTime hook since we need to display hours in our timer * enhance: display hours on timer screen --------- Co-authored-by: = <=>
zidoro · May 21, 2023 · 3fc1493 · 3fc1493
1 parent 939cf8f
commit 3fc1493
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 9 deletions.
diff --git a/app/renderer/src/hooks/useTime.ts b/app/renderer/src/hooks/useTime.ts
@@ -1,10 +1,12 @@
 import { padNum } from "utils";
 
 export const useTime = (n: number) => {
-  const minutes = Math.floor(n / 60);
+  const hours = Math.floor(n / 3600);
+  const minutes = Math.floor((n % 3600) / 60);
   const seconds = n % 60;
 
   return {
+    hours: padNum(hours),
     minutes: padNum(minutes),
     seconds: padNum(seconds),
   };

diff --git a/app/renderer/src/routes/Config/SliderSection.tsx b/app/renderer/src/routes/Config/SliderSection.tsx
@@ -26,7 +26,7 @@ const SliderSection: React.FC = () => {
       label: "Stay focus",
       valueType: "mins",
       minValue: 1,
-      maxValue: 60,
+      maxValue: 120,
       value: stayFocus,
       onMouseUp: useCallback(
         (e) => dispatch(setStayFocus(parseInt(e.target.value))),

diff --git a/app/renderer/src/routes/Timer/Counter/Counter.tsx b/app/renderer/src/routes/Timer/Counter/Counter.tsx
@@ -22,7 +22,7 @@ const Counter: React.FC = () => {
 
   const dashOffset = (duration - count) * (674 / duration);
 
-  const { minutes, seconds } = useTime(count);
+  const { hours, minutes, seconds } = useTime(count);
 
   if (settings.compactMode) {
     return (
@@ -45,6 +45,7 @@ const Counter: React.FC = () => {
                 compact
                 fullscreen={shouldFullscreen}
                 timerType={timerType}
+                hours={hours}
                 minutes={minutes}
                 seconds={seconds}
               />
@@ -55,6 +56,7 @@ const Counter: React.FC = () => {
           <CounterTimer
             compact
             timerType={timerType}
+            hours={hours}
             minutes={minutes}
             seconds={seconds}
           />
@@ -75,6 +77,7 @@ const Counter: React.FC = () => {
         <CounterType timerType={timerType} />
 
         <CounterTimer
+          hours={hours}
           timerType={timerType}
           minutes={minutes}
           seconds={seconds}

diff --git a/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx b/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx
@@ -4,6 +4,7 @@ import { StyledCounterTimer } from "styles";
 
 type Props = {
   timerType?: TimerTypes["timerType"];
+  hours: string;
   minutes: string;
   seconds: string;
   compact?: boolean;
@@ -12,17 +13,25 @@ type Props = {
 
 const CounterTimer: React.FC<Props> = ({
   timerType,
+  hours,
   minutes,
   seconds,
   compact,
   fullscreen,
 }) => {
   return (
     <StyledCounterTimer
+      hours={hours}
       type={timerType}
       className={compact ? "compact" : ""}
       fullscreen={fullscreen}
     >
+      {Number(hours) > 0 && (
+        <>
+          <span>{hours}</span>
+          <span>:</span>
+        </>
+      )}
       <span>{minutes}</span>
       <span>:</span>
       <span>{seconds}</span>

diff --git a/app/renderer/src/styles/routes/timer/counter.ts b/app/renderer/src/styles/routes/timer/counter.ts
@@ -114,7 +114,10 @@ export const StyledCounterType = styled.div`
   }
 `;
 
-type TimerProps = { type?: string } & CounterContainerProps;
+type TimerProps = {
+  type?: string;
+  hours: string;
+} & CounterContainerProps;
 
 export const StyledCounterTimer = styled.h3<TimerProps>`
   font-size: 4rem;
@@ -129,11 +132,20 @@ export const StyledCounterTimer = styled.h3<TimerProps>`
 
   width: 20rem;
 
-  display: grid;
-  align-items: center;
-  justify-items: start;
-  grid-template-columns: 1fr max-content 1fr;
-  column-gap: 0.8rem;
+  ${(p) =>
+    Number(p.hours) > 0
+      ? `
+        display: flex;
+        justify-content: center;
+      `
+      : `
+        display: grid;
+        align-items: center;
+        justify-items: start;
+        grid-template-columns: 1fr max-content 1fr;
+        column-gap: 0.8rem;
+      `}
+  }}
 
   & > span:first-of-type {
     justify-self: end;