feat: display callendar with data range

mgierada · Jun 16, 2024 · 18a5c39 · 18a5c39
1 parent 11b0a60
commit 18a5c39
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/ui/src/app/page.js b/ui/src/app/page.js
@@ -36,12 +36,14 @@ const fetchCounter = async () => {
       throw new Error("Failed to fetch data");
     }
 
+    /** @type {CounterApiResponse} */
     const data = await response.json();
 
     if (!data) {
       throw new Error("Invalid response data");
     }
 
+    /** @type {Counter} */
     const result = {
       currentValue: data.CurrentValue,
       updatedAt: data.UpdatedAt,
@@ -52,7 +54,7 @@ const fetchCounter = async () => {
     };
     return result;
   } catch (error) {
-    console.error("Error fetching the current value:", error.message);
+    /** @type {Counter} */
     return {
       currentValue: null,
       updatedAt: null,
@@ -69,6 +71,7 @@ const fetchCounter = async () => {
  * @returns {JSX.Element} The Home component.
  */
 const Home = async () => {
+  /** @type {Counter} */
   const data = await fetchCounter();
 
   return (
@@ -78,7 +81,11 @@ const Home = async () => {
         <CounterDisplay currentValue={data.currentValue} error={data.error} />
       </div>
       <div className="flex flex-col items-center justify-center">
-        <Callendar className="mt-5" />
+        <Callendar
+          className="mt-5"
+          lastTimeReseted={data.resetedAt}
+          currentCouterValue={data.currentValue}
+        />
       </div>
     </main>
   );

diff --git a/ui/src/components/Callendar/index.jsx b/ui/src/components/Callendar/index.jsx
@@ -13,12 +13,11 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 
-const Callendar = ({ className }) => {
+const Callendar = ({ className, lastTimeReseted, currentCouterValue }) => {
   const [date, setDate] = React.useState({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
+    from: lastTimeReseted || new Date(2024, 4, 13),
+    to: addDays(new Date(2024, 4, 13), currentCouterValue),
   });
-
   return (
     <div className={cn("grid gap-2", className)}>
       <Popover>
@@ -53,7 +52,7 @@ const Callendar = ({ className }) => {
             defaultMonth={date?.from}
             selected={date}
             onSelect={() => {}}
-            numberOfMonths={2}
+            numberOfMonths={1}
             disabled={() => true}
           />
         </PopoverContent>