feat: simplified the between dates get request, fixed bug with fetching all the posts

Author: nevo-david

apps/frontend/src/components/launches/calendar.context.tsx

@@ -22,11 +22,10 @@ import { extend } from 'dayjs';
 import useCookie from 'react-use-cookie';
 extend(isoWeek);
 extend(weekOfYear);
+
 export const CalendarContext = createContext({
-  currentDay: dayjs().day() as 0 | 1 | 2 | 3 | 4 | 5 | 6,
-  currentWeek: dayjs().week(),
-  currentYear: dayjs().year(),
-  currentMonth: dayjs().month(),
+  startDate: dayjs().startOf('isoWeek').format('YYYY-MM-DD'),
+  endDate: dayjs().endOf('isoWeek').format('YYYY-MM-DD'),
   customer: null as string | null,
   sets: [] as { name: string; id: string; content: string[] }[],
   signature: undefined as any,
@@ -51,10 +50,8 @@ export const CalendarContext = createContext({
   },
   display: 'week',
   setFilters: (filters: {
-    currentWeek: number;
-    currentYear: number;
-    currentDay: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    currentMonth: number;
+    startDate: string;
+    endDate: string;
     display: 'week' | 'month' | 'day';
     customer: string | null;
   }) => {
@@ -64,6 +61,7 @@ export const CalendarContext = createContext({
     /** empty **/
   },
 });
+
 export interface Integrations {
   name: string;
   id: string;
@@ -85,23 +83,35 @@ export interface Integrations {
     id?: string;
   };
 }
-function getWeekNumber(date: Date) {
-  // Copy date so don't modify original
-  const targetDate = new Date(
-    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
-  );
-  // Set to nearest Thursday: current date + 4 - current day number
-  // Make Sunday's day number 7
-  targetDate.setUTCDate(
-    targetDate.getUTCDate() + 4 - (targetDate.getUTCDay() || 7)
-  );
-  // Get first day of year
-  const yearStart = new Date(Date.UTC(targetDate.getUTCFullYear(), 0, 1));
-  // Calculate full weeks to nearest Thursday
-  return Math.ceil(
-    ((targetDate.getTime() - yearStart.getTime()) / 86400000 + 1) / 7
-  );
+
+// Helper function to get start and end dates based on display type
+function getDateRange(display: string, referenceDate?: string) {
+  const date = referenceDate ? dayjs(referenceDate) : dayjs();
+
+  switch (display) {
+    case 'day':
+      return {
+        startDate: date.format('YYYY-MM-DD'),
+        endDate: date.format('YYYY-MM-DD'),
+      };
+    case 'week':
+      return {
+        startDate: date.startOf('isoWeek').format('YYYY-MM-DD'),
+        endDate: date.endOf('isoWeek').format('YYYY-MM-DD'),
+      };
+    case 'month':
+      return {
+        startDate: date.startOf('month').format('YYYY-MM-DD'),
+        endDate: date.endOf('month').format('YYYY-MM-DD'),
+      };
+    default:
+      return {
+        startDate: date.startOf('isoWeek').format('YYYY-MM-DD'),
+        endDate: date.endOf('isoWeek').format('YYYY-MM-DD'),
+      };
+  }
 }
+
 export const CalendarWeekProvider: FC<{
   children: ReactNode;
   integrations: Integrations[];
@@ -112,35 +122,45 @@ export const CalendarWeekProvider: FC<{
   const searchParams = useSearchParams();
   const [displaySaved, setDisplaySaved] = useCookie('calendar-display', 'week');
   const display = searchParams.get('display') || displaySaved;
+
+  // Initialize with current date range based on URL params or defaults
+  const initStartDate = searchParams.get('startDate');
+  const initEndDate = searchParams.get('endDate');
+  const initCustomer = searchParams.get('customer');
+
+  const initialRange =
+    initStartDate && initEndDate
+      ? { startDate: initStartDate, endDate: initEndDate }
+      : getDateRange(display);
+
   const [filters, setFilters] = useState({
-    currentDay: +(searchParams.get('day') || dayjs().day()) as
-      | 0
-      | 1
-      | 2
-      | 3
-      | 4
-      | 5
-      | 6,
-    currentWeek: +(searchParams.get('week') || getWeekNumber(new Date())),
-    currentMonth: +(searchParams.get('month') || dayjs().month()),
-    currentYear: +(searchParams.get('year') || dayjs().year()),
-    customer: (searchParams.get('customer') as string) || null,
+    startDate: initialRange.startDate,
+    endDate: initialRange.endDate,
+    customer: initCustomer || null,
     display,
   });
+
   const params = useMemo(() => {
     return new URLSearchParams({
       display: filters.display,
-      day: filters.currentDay.toString(),
-      week: filters.currentWeek.toString(),
-      month: (filters.currentMonth + 1).toString(),
-      year: filters.currentYear.toString(),
+      startDate: filters.startDate,
+      endDate: filters.endDate,
       customer: filters?.customer?.toString() || '',
     }).toString();
-  }, [filters, display]);
+  }, [filters]);
+
   const loadData = useCallback(async () => {
-    const data = (await fetch(`/posts?${params}`)).json();
+    const modifiedParams = new URLSearchParams({
+      display: filters.display,
+      customer: filters?.customer?.toString() || '',
+      startDate: dayjs(filters.startDate).startOf('day').utc().format(),
+      endDate: dayjs(filters.endDate).endOf('day').utc().format(),
+    }).toString();
+
+    const data = (await fetch(`/posts?${modifiedParams}`)).json();
     return data;
   }, [filters, params]);
+
   const swr = useSWR(`/posts-${params}`, loadData, {
     refreshInterval: 3600000,
     refreshWhenOffline: false,
@@ -157,37 +177,35 @@ export const CalendarWeekProvider: FC<{
   }, []);
 
   const { data: sets, mutate } = useSWR('sets', setList);
-  const { data: sign} = useSWR('default-sign', defaultSign);
+  const { data: sign } = useSWR('default-sign', defaultSign);
 
   const setFiltersWrapper = useCallback(
     (filters: {
-      currentDay: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-      currentWeek: number;
-      currentYear: number;
-      currentMonth: number;
+      startDate: string;
+      endDate: string;
       display: 'week' | 'month' | 'day';
       customer: string | null;
     }) => {
       setDisplaySaved(filters.display);
       setFilters(filters);
       setInternalData([]);
       const path = [
-        `day=${filters.currentDay}`,
-        `week=${filters.currentWeek}`,
-        `month=${filters.currentMonth}`,
-        `year=${filters.currentYear}`,
+        `startDate=${filters.startDate}`,
+        `endDate=${filters.endDate}`,
         `display=${filters.display}`,
         filters.customer ? `customer=${filters.customer}` : ``,
       ].filter((f) => f);
       window.history.replaceState(null, '', `/launches?${path.join('&')}`);
     },
     [filters, swr.mutate]
   );
+
   const { isLoading } = swr;
   const { posts, comments } = swr?.data || {
     posts: [],
     comments: [],
   };
+
   const changeDate = useCallback(
     (id: string, date: dayjs.Dayjs) => {
       setInternalData((d) =>
@@ -204,11 +222,13 @@ export const CalendarWeekProvider: FC<{
     },
     [posts, internalData]
   );
+
   useEffect(() => {
     if (posts) {
       setInternalData(posts);
     }
   }, [posts]);
+
   return (
     <CalendarContext.Provider
       value={{
@@ -228,4 +248,5 @@ export const CalendarWeekProvider: FC<{
     </CalendarContext.Provider>
   );
 };
+
 export const useCalendar = () => useContext(CalendarContext);

apps/frontend/src/components/launches/calendar.tsx

@@ -102,13 +102,14 @@ export const hours = Array.from(
 );
 export const DayView = () => {
   const calendar = useCalendar();
-  const { integrations, posts, currentYear, currentDay, currentWeek } =
-    calendar;
+  const { integrations, posts, startDate } = calendar;
 
   // Set dayjs locale based on current language
   const currentLanguage = i18next.resolvedLanguage || 'en';
   dayjs.locale(currentLanguage);
 
+  const currentDay = dayjs(startDate);
+
   const options = useMemo(() => {
     const createdPosts = posts.map((post) => ({
       integration: [integrations.find((i) => i.id === post.integration.id)!],
@@ -142,6 +143,7 @@ export const DayView = () => {
       (p) => p[0].time
     );
   }, [integrations, posts]);
+
   return (
     <div className="flex flex-col gap-[10px] flex-1">
       {options.map((option) => (
@@ -165,11 +167,7 @@ export const DayView = () => {
               }}
             >
               <CalendarColumn
-                getDate={dayjs()
-                  .utc()
-                  .year(currentYear)
-                  .week(currentWeek)
-                  .day(currentDay)
+                getDate={currentDay
                   .startOf('day')
                   .add(option[0].time, 'minute')
                   .local()}
@@ -182,7 +180,7 @@ export const DayView = () => {
   );
 };
 export const WeekView = () => {
-  const { currentYear, currentWeek } = useCalendar();
+  const { startDate, endDate } = useCalendar();
   const t = useT();
 
   // Use dayjs to get localized day names
@@ -191,16 +189,17 @@ export const WeekView = () => {
     dayjs.locale(currentLanguage);
 
     const days = [];
-    const yearWeek = dayjs()
-      .year(currentYear)
-      .week(currentWeek)
-      .startOf('week');
-    for (let i = 1; i <= 7; i++) {
-      const yearWeekFormat = yearWeek.add(i, 'day').format('L');
-      days.push({ name: dayjs().day(i).format('dddd'), day: yearWeekFormat });
+    const weekStart = dayjs(startDate);
+    for (let i = 0; i < 7; i++) {
+      const day = weekStart.add(i, 'day');
+      days.push({
+        name: day.format('dddd'),
+        day: day.format('L'),
+        date: day,
+      });
     }
     return days;
-  }, [i18next.resolvedLanguage, currentYear, currentWeek]);
+  }, [i18next.resolvedLanguage, startDate]);
 
   return (
     <div className="flex flex-col text-textColor flex-1">
@@ -233,16 +232,13 @@ export const WeekView = () => {
               <div className="p-2 pe-4 text-center items-center justify-center flex text-[14px] text-newTableText">
                 {convertTimeFormatBasedOnLocality(hour)}
               </div>
-              {days.map((day, indexDay) => (
-                <Fragment key={`${currentYear}-${currentWeek}-${day}-${hour}`}>
+              {localizedDays.map((day, indexDay) => (
+                <Fragment
+                  key={`${startDate}-${day.date.format('YYYY-MM-DD')}-${hour}`}
+                >
                   <div className="relative">
                     <CalendarColumn
-                      getDate={dayjs()
-                        .year(currentYear)
-                        .week(currentWeek)
-                        .day(indexDay + 1)
-                        .hour(hour)
-                        .startOf('hour')}
+                      getDate={day.date.hour(hour).startOf('hour')}
                     />
                   </div>
                 </Fragment>
@@ -255,7 +251,7 @@ export const WeekView = () => {
   );
 };
 export const MonthView = () => {
-  const { currentYear, currentMonth } = useCalendar();
+  const { startDate } = useCalendar();
   const t = useT();
 
   // Use dayjs to get localized day names
@@ -272,18 +268,22 @@ export const MonthView = () => {
   }, [i18next.resolvedLanguage]);
 
   const calendarDays = useMemo(() => {
+    const monthStart = dayjs(startDate);
+    const currentMonth = monthStart.month();
+    const currentYear = monthStart.year();
+
     const startOfMonth = dayjs(new Date(currentYear, currentMonth, 1));
 
     // Calculate the day offset for Monday (isoWeekday() returns 1 for Monday)
     const startDayOfWeek = startOfMonth.isoWeekday(); // 1 for Monday, 7 for Sunday
     const daysBeforeMonth = startDayOfWeek - 1; // Days to show from the previous month
 
     // Get the start date (Monday of the first week that includes this month)
-    const startDate = startOfMonth.subtract(daysBeforeMonth, 'day');
+    const calendarStartDate = startOfMonth.subtract(daysBeforeMonth, 'day');
 
     // Create an array to hold the calendar days (6 weeks * 7 days = 42 days max)
     const calendarDays = [];
-    let currentDay = startDate;
+    let currentDay = calendarStartDate;
     for (let i = 0; i < 42; i++) {
       let label = 'current-month';
       if (currentDay.month() < currentMonth) label = 'previous-month';
@@ -297,7 +297,7 @@ export const MonthView = () => {
       currentDay = currentDay.add(1, 'day');
     }
     return calendarDays;
-  }, [currentYear, currentMonth]);
+  }, [startDate]);
 
   return (
     <div className="flex flex-col text-textColor flex-1">