fix: Fixed time entires

Author: CrawlerCode

src/components/time/TimeEntryList.tsx

@@ -1,4 +1,4 @@
-import { addDays, format, isFuture, isWeekend, parseISO, previousMonday, startOfDay, subWeeks } from "date-fns";
+import { addDays, format, isFuture, isMonday, isWeekend, parseISO, previousMonday, startOfDay, subWeeks } from "date-fns";
 import { TTimeEntry } from "../../types/redmine";
 import TimeEntry from "./TimeEntry";
 
@@ -39,10 +39,13 @@ const TimeEntryList = ({ entries }: PropTypes) => {
 
   const maxHours = Math.max(...groupedEntries.map(({ hours }) => hours));
 
+  const today = startOfDay(new Date());
+  const monday = isMonday(today) ? today : previousMonday(today);
+
   return (
     <>
       {Array(2)
-        .fill(previousMonday(startOfDay(new Date())))
+        .fill(monday)
         .map((d, i) => subWeeks(d, i))
         .map((monday) => {
           const days = Array(7)

src/components/time/TimeEntryListSkeleton.tsx

@@ -0,0 +1,38 @@
+const TimeEntryListSkeleton = () => {
+  return (
+    <>
+      {[...Array(2).keys()].map(() => {
+        return (
+          <div className="animate-pulse flex flex-col gap-y-1 mb-5">
+            <div className="flex items-center gap-x-3">
+              <h1 className="h-4 w-40 bg-gray-200 dark:bg-gray-700"></h1>
+              <span className="rounded h-5 w-12 bg-gray-200 dark:bg-gray-700"></span>
+            </div>
+            {[...Array(5).keys()].map((d) => {
+              return (
+                <div className="grid grid-cols-10 items-center gap-x-1">
+                  <h4 className="col-span-1 h-3 w-8 bg-gray-200 dark:bg-gray-700"></h4>
+                  <h3 className="col-span-2 justify-self-end h-3 w-6 bg-gray-200 dark:bg-gray-700"></h3>
+                  <div className="col-span-7">
+                    <div className="flex gap-x-0.5 items-center">
+                      {[...Array(Math.floor(Math.random() * 4 + 1)).keys()].map(() => (
+                        <div
+                          className="h-4 rounded bg-gray-200 dark:bg-gray-700"
+                          style={{
+                            width: `${(Math.floor(Math.random() * 2 + 1) / 8) * 100}%`,
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default TimeEntryListSkeleton;

src/pages/TimePage.tsx

@@ -1,19 +1,19 @@
-import { previousMonday, startOfDay, subWeeks } from "date-fns";
+import { isMonday, previousMonday, startOfDay, subWeeks } from "date-fns";
 import Toast from "../components/general/Toast";
-import IssuesListSkeleton from "../components/issues/IssuesListSkeleton";
 import TimeEntryList from "../components/time/TimeEntryList";
+import TimeEntryListSkeleton from "../components/time/TimeEntryListSkeleton";
 import useMyTimeEntries from "../hooks/useMyTimeEntries";
 
 const TimePage = () => {
   const today = startOfDay(new Date());
-  const startOfLastWeek = subWeeks(previousMonday(today), 1);
+  const startOfLastWeek = subWeeks(isMonday(today) ? today : previousMonday(today), 1);
 
   const myTimeEntriesQuery = useMyTimeEntries(startOfLastWeek, today);
 
   return (
     <>
       <div className="flex flex-col gap-y-2">
-        {myTimeEntriesQuery.isLoading && <IssuesListSkeleton />}
+        {myTimeEntriesQuery.isLoading && <TimeEntryListSkeleton />}
 
         {!myTimeEntriesQuery.isLoading && <TimeEntryList entries={myTimeEntriesQuery.data} />}