Limit all dates asking to 3 months range

web/src/fileManager/Calendar.tsx

@@ -1,24 +1,31 @@
 import moment from "moment";
-import { Accessor, Component, createSignal, Setter } from "solid-js";
+import { Accessor, Component, Setter } from "solid-js";
 
 import "../css/calendar.css";
 
 export const Calendar: Component<{
     getSelectedDate: Accessor<Date>,
     setSelectedDate: Setter<Date>,
-    datesWithData: Date[],
-}> = ({getSelectedDate, setSelectedDate, datesWithData}) => {
-    const dateStrArr = () => datesWithData.map(d => d.toDateString());
+    setCurrentMonth: Setter<Date>,
+    datesWithData: () => Date[],
+}> = ({getSelectedDate, setSelectedDate, setCurrentMonth, datesWithData}) => {
+    const dateStrArr = () => datesWithData().map(d => d.toDateString());
+
+    function changeMonths(delta: number): void {
+        const newDate = moment(getSelectedDate()).add(delta, "months").toDate();
+        setCurrentMonth(newDate);
+        setSelectedDate(newDate);
+    }
 
     return (
         <div>
             <h3>Calendar</h3>
             <div class="calendar-top">
-                <button onClick={() => setSelectedDate(moment(getSelectedDate()).subtract(1, "months").toDate()) }>&lt;&lt;</button>
+                <button onClick={() => changeMonths(-1) }>&lt;&lt;</button>
                 <div class="calendar-year-month">
                     {moment(getSelectedDate()).format("YYYY, MMM")}
                 </div>
-                <button onclick={() => setSelectedDate(moment(getSelectedDate()).add(1, "months").toDate())}>&gt;&gt;</button>
+                <button onclick={() => changeMonths(1)}>&gt;&gt;</button>
             </div>
             <div class="calendar">
                 { getPaddedMonth(getSelectedDate()).map(d => {

web/src/fileManager/DateList.tsx

@@ -1,18 +1,26 @@
-import { Accessor, Component, createResource, Setter } from "solid-js";
+import moment from "moment";
+import { Accessor, Component, createResource, createSignal, Setter } from "solid-js";
+
 import { apiHost } from "../consts";
 
 import "../css/spinner.css";
 import { Calendar } from "./Calendar";
 
 export const DateList: Component<{getDate: Accessor<Date>, setDate: Setter<Date>;}> = (props) => {
+    const [getCurrentMonth, setCurrentMonth] = createSignal(new Date());
     const fetchDates = async () => {
+        const months = [
+            moment(getCurrentMonth()).format("yyyyMM"),
+            moment(getCurrentMonth()).subtract(1, "months").format("yyyyMM"),
+            moment(getCurrentMonth()).add(1, "months").format("yyyyMM"),
+        ];
         await new Promise(resolve => setTimeout(resolve, 500))
-        const response = await fetch(`${apiHost}/api/show/all_dates`);
+        const response = await fetch(`${apiHost}/api/show/months/${months.join(",")}`);
         const json = await response.json();
         return json;
     }
 
-    const [datesResource] = createResource(fetchDates);
+    const [datesResource] = createResource(getCurrentMonth, fetchDates);
 
     return (
         <div>
@@ -25,10 +33,11 @@ export const DateList: Component<{getDate: Accessor<Date>, setDate: Setter<Date>
             { datesResource.error && (
                 <div>Error while loading dates: ${datesResource.error}</div>
             )}
-            { datesResource() && <Calendar
+            { !datesResource.loading && datesResource() && <Calendar
                 getSelectedDate={props.getDate}
                 setSelectedDate={props.setDate}
-                datesWithData={datesResource().map((str: string) => new Date(str))}
+                setCurrentMonth={setCurrentMonth}
+                datesWithData={() => datesResource().map((str: string) => new Date(str))}
             /> }
             
             {/* Backup date view */}