Merge pull request #1922 from tijlleenders/vin/-/scheduler-error

show error message in a modal when scheduler breaks

pkg/scheduler.d.ts

@@ -1,11 +1,14 @@
 /* tslint:disable */
 /* eslint-disable */
+
+import { ISchedulerInput, ISchedulerOutput } from "@src/Interfaces/IScheduler";
+
 /**
  * The main wasm function to call
- * @param {any} input
- * @returns {any}
+ * @param {ISchedulerInput} input
+ * @returns {ISchedulerOutput}
  */
-export function schedule(input: any): any;
+export function schedule(input: ISchedulerInput): ISchedulerOutput;
 
 interface Input {
   startDate: string;

src/Interfaces/IScheduler.ts

@@ -1,4 +1,4 @@
-import { blockedSlotOfTask } from "@src/models/TaskItem";
+import { TCompletedTaskTiming, blockedSlotOfTask } from "@src/models/TaskItem";
 
 export interface ISchedulerOutputSlot {
   goalid: string;
@@ -67,4 +67,11 @@ export interface ISchedulerOutputGoal {
   taskid: string;
 }
 
+export interface ISchedulerInput {
+  startDate: string;
+  endDate: string;
+  goals: ISchedulerInputGoal[];
+  tasksCompletedToday: TCompletedTaskTiming[];
+}
+
 export type TBufferValue = { nextBuffer: number; availableBuffer: number };

src/components/MyTimeComponents/SchedulerErrorModal.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "../index.scss";
+import ZModal from "@src/common/ZModal";
+import { useRecoilState } from "recoil";
+import { schedulerErrorModalShown, schedulerErrorState } from "@src/store/SchedulerErrorState";
+
+const SchedulerErrorModal = () => {
+  const [schedulerErrorMessage, setSchedulerErrorMessage] = useRecoilState(schedulerErrorState);
+  const [showErrorModal, setShowErrorModal] = useRecoilState(schedulerErrorModalShown);
+
+  const handleModalClose = () => {
+    setSchedulerErrorMessage(null);
+    setShowErrorModal(true);
+  };
+
+  if (showErrorModal) return null;
+
+  return (
+    <ZModal open={!!schedulerErrorMessage} type="scheduleErrorModal" onCancel={handleModalClose}>
+      <h1 className="popupModal-title">{schedulerErrorMessage}</h1>
+    </ZModal>
+  );
+};
+
+export default SchedulerErrorModal;

src/components/index.scss

@@ -68,3 +68,12 @@
     width: 70% !important;
   }
 }
+
+.scheduleErrorModal {
+  .popupModal-title {
+    text-align: center;
+  }
+  p {
+    text-align: center;
+  }
+}

src/helpers/MyTimeHelper.ts

@@ -1,6 +1,7 @@
 import {
   IImpossibleTaskOfTheDay,
   IScheduleOfTheDay,
+  ISchedulerInput,
   ISchedulerInputGoal,
   ISchedulerOutput,
   ISchedulerOutputGoal,
@@ -156,12 +157,7 @@ export const organizeDataForInptPrep = async (inputGoals: GoalItem[]) => {
     docs.filter((doc) => doc.completedToday > 0).map((doc) => tasksCompletedToday.push(...doc.completedTodayTimings)),
   );
 
-  const schedulerInput: {
-    startDate: string;
-    endDate: string;
-    goals: ISchedulerInputGoal[];
-    tasksCompletedToday: TCompletedTaskTiming[];
-  } = {
+  const schedulerInput: ISchedulerInput = {
     startDate,
     endDate,
     goals: [],
@@ -180,10 +176,14 @@ export const organizeDataForInptPrep = async (inputGoals: GoalItem[]) => {
 
 export const getCachedSchedule = async (generatedInputId: string) => {
   const schedulerCachedRes = await getFromOutbox("scheduler");
+
   if (!schedulerCachedRes) {
-    return { code: "not-exist" };
+    return {
+      code: "not-exist",
+    };
   }
   const { uniqueId, output } = JSON.parse(schedulerCachedRes.value);
+
   return uniqueId === generatedInputId
     ? {
         code: "found",

src/hooks/useScheduler.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-relative-packages */
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { useEffect, useState } from "react";
 
 import rescheduleTune from "@assets/reschedule.mp3";
@@ -19,6 +19,7 @@ import {
   putSchedulerRes,
 } from "@src/helpers/MyTimeHelper";
 
+import { schedulerErrorState } from "@src/store/SchedulerErrorState";
 import init, { schedule } from "../../pkg/scheduler";
 
 function useScheduler() {
@@ -28,6 +29,7 @@ function useScheduler() {
   const devMode = useRecoilValue(openDevMode);
   const [tasks, setTasks] = useState<{ [day: string]: ITaskOfDay }>({});
   const [action, setLastAction] = useRecoilState(lastAction);
+  const setSchedulerError = useSetRecoilState(schedulerErrorState);
 
   const getInputForScheduler = async () => {
     const activeGoals: GoalItem[] = await getAllGoals();
@@ -38,7 +40,7 @@ function useScheduler() {
 
   const generateSchedule = async () => {
     const schedulerInput = await getInputForScheduler();
-    const generatedInputId = generateUniqueIdForSchInput(JSON.stringify(schedulerInput));
+    const generatedInputId: string | undefined = generateUniqueIdForSchInput(JSON.stringify(schedulerInput));
     const cachedRes = await getCachedSchedule(generatedInputId);
     return { generatedInputId, schedulerInput, cachedRes };
   };
@@ -66,8 +68,14 @@ function useScheduler() {
       // await resetProgressOfToday();
       const { generatedInputId, schedulerInput: schedulerInputV2 } = await generateSchedule();
       newGeneratedInputId = generatedInputId;
-      await init();
-      res = schedule(schedulerInputV2);
+
+      try {
+        await init();
+        res = schedule(schedulerInputV2);
+      } catch (error) {
+        res = cachedRes.output;
+        setSchedulerError(error.toString());
+      }
     }
     putSchedulerRes(cachedRes.code, newGeneratedInputId, JSON.stringify(res))
       .then(() => console.log("schedule saved"))

src/pages/MyTimePage/MyTimePage.tsx

@@ -14,6 +14,7 @@ import "./MyTimePage.scss";
 import "@translations/i18n";
 import { useLocation } from "react-router-dom";
 import { Row } from "antd";
+import SchedulerErrorModal from "@components/MyTimeComponents/SchedulerErrorModal";
 
 export const MyTimePage = () => {
   const today = new Date();
@@ -100,6 +101,8 @@ export const MyTimePage = () => {
   return (
     <AppLayout title="myTime">
       <>
+        <SchedulerErrorModal />
+
         <Row />
         {getDayComponent("Today")}
         {getDayComponent("Tomorrow")}

src/store/SchedulerErrorState.ts

@@ -0,0 +1,11 @@
+import { atom } from "recoil";
+
+export const schedulerErrorState = atom({
+  key: "schedulerErrorState",
+  default: null as string | null,
+});
+
+export const schedulerErrorModalShown = atom({
+  key: "schedulerErrorModalShown",
+  default: false,
+});