Fix frontend

web/src/components/TimeUntilReduce/TimeUntilReduce.js

@@ -4,7 +4,7 @@ import DefinitionList from "../DefinitionList/DefinitionList";
 
 const TimeUntilReduce = () => {
   const { nextHalvePeriod } = useSelector((state) => state.distributor);
-  const [timer] = useCountdown(nextHalvePeriod || 0);
+  const timer = useCountdown(nextHalvePeriod || 0);
 
   return (
     <DefinitionList

web/src/hooks/useCountdown.js

@@ -1,33 +1,33 @@
 import { intervalToDuration, isPast } from "date-fns";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
-export const useCountdown = (date) => {
-  const format = ({ months, days, hours, minutes, seconds }) =>
-    `${months}M ${days}d ${hours}h ${minutes}m ${seconds}s`;
+const format = ({ months = 0, days = 0, hours = 0, minutes = 0, seconds = 0 }) =>
+  `${months}M ${days}d ${hours}h ${minutes}m ${seconds}s`;
 
-  const [ended, setEnded] = useState(isPast(date));
+export const useCountdown = (date) => {
   const [duration, setDuration] = useState(
-    intervalToDuration({
-      start: date,
-      end: Date.now(),
+    isPast(date) ? {} : intervalToDuration({
+      start: Date.now(),
+      end: date,
     }),
   );
-  const [formatted, setFormatted] = useState(format(duration));
 
   useEffect(() => {
     const timer = setInterval(() => {
+      if (isPast(date)) {
+        clearInterval(timer);
+        return;
+      }
+
       const intToDur = intervalToDuration({
-        start: date,
-        end: Date.now(),
+        start: Date.now(),
+        end: date,
       });
       setDuration(intToDur);
-      setFormatted(format(intToDur));
-      setEnded(isPast(date));
     }, 1000);
 
-    ended && clearInterval(timer);
     return () => clearInterval(timer);
-  }, []);
+  }, [date]);
 
-  return [formatted, duration];
+  return useMemo(() => format(duration), [duration]);
 };

web/src/pages/begin-page/begin-page.module.css

@@ -17,13 +17,13 @@
 }
 
 .flex-container {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  column-gap: 5%;
 }
 
 .flex-container__part-left {
   max-width: 715px;
-  width: 65%;
 }
 
 .dashboard {
@@ -164,11 +164,11 @@
 
 @media screen and (max-width: 803px) {
   .flex-container {
-    flex-direction: column-reverse;
-    justify-content: flex-start;
+    grid-template-columns: 1fr;
   }
 
   .flex-container__part-left {
+    order: 2;
     max-width: 715px;
     width: 100%;
   }