From 9f0e1ffeca6c0b05f092dc3849d517004662f8ce Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sat, 13 Apr 2024 13:39:11 +0530 Subject: [PATCH 01/16] uncomment reschudle relate code --- .../MyTimeComponents/MyTimeline/MyTimeline.tsx | 12 +++++++----- .../MyTimeComponents/Reschedule/Reschedule.tsx | 2 +- src/store/TaskState.ts | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx index 6906a302c..cb2bc5593 100644 --- a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx +++ b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx @@ -22,6 +22,7 @@ import { addTask, completeTask, forgetTask, getTaskByGoalId } from "@src/api/Tas import "./index.scss"; import { GoalTiming } from "./GoalTiming"; import { TaskOptions } from "./TaskOptions"; +import { displayReschedule } from "@src/store/TaskState"; interface MyTimelineProps { day: string; @@ -51,6 +52,7 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail const setShowToast = useSetRecoilState(displayToast); const setLastAction = useSetRecoilState(lastAction); const setTaskTitle = useSetRecoilState(focusTaskTitle); + const setOpenReschedule = useSetRecoilState(displayReschedule); const [showScheduled, setShowScheduled] = useState(true); @@ -118,11 +120,11 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail lastForget: actionName === "Skip" ? new Date().toLocaleDateString() : "", lastCompleted: actionName === "Done" ? new Date().toLocaleDateString() : "", hoursSpent: 0, - blockedSlots: [], // actionName === "Reschedule" ? [{ start: task.start, end: task.deadline }] : [], + blockedSlots: actionName === "Reschedule" ? [{ start: task.start, end: task.deadline }] : [], }); - // if (actionName === "Reschedule") { - // setOpenReschedule({ ...task }); - // } + if (actionName === "Reschedule") { + setOpenReschedule({ ...task }); + } } else if (actionName === "Done") { const markDone = !!taskDetails[task.goalid]?.completedTodayIds.includes(task.taskid); if (markDone) return null; @@ -130,7 +132,7 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail } else if (actionName === "Skip") { await forgetTask(taskItem.id, `${getHrFromDateString(task.start)}-${getHrFromDateString(task.deadline)}`); } else if (actionName === "Reschedule") { - // setOpenReschedule({ ...task }); + setOpenReschedule({ ...task }); } if (actionName === "Done") { await doneSound.play(); diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index c050efbfc..f401beebf 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -89,7 +89,7 @@ const Reschedule = () => { // console.log(schedulerOutput, selectedDate.toLocaleDateString(), schedulerOutput[selectedDate.toLocaleDateString()]); return task ? ( - setOpen(null)}> + setOpen({})}>

{task.title}

diff --git a/src/store/TaskState.ts b/src/store/TaskState.ts index 6afb794d1..8ec0f2bd3 100644 --- a/src/store/TaskState.ts +++ b/src/store/TaskState.ts @@ -3,5 +3,5 @@ import { atom } from "recoil"; export const displayReschedule = atom({ key: "displayReschedule", - default: null as ITask | null, + default: {} as ITask, }); From 2501ed42c8108e0377ba190e44b4c1d54a0eb3ba Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Thu, 18 Apr 2024 17:06:50 +0530 Subject: [PATCH 02/16] initial reschedule ui --- src/api/TasksAPI/index.ts | 6 + .../MyTimeline/MyTimeline.tsx | 11 +- .../Reschedule/Reschedule.tsx | 186 +++++------------- src/helpers/MyTimeHelper.ts | 1 + src/hooks/useScheduler.tsx | 2 +- 5 files changed, 64 insertions(+), 142 deletions(-) diff --git a/src/api/TasksAPI/index.ts b/src/api/TasksAPI/index.ts index 452b7991f..d281584a0 100644 --- a/src/api/TasksAPI/index.ts +++ b/src/api/TasksAPI/index.ts @@ -145,6 +145,12 @@ export const getAllBlockedTasks = async () => { return tasks.reduce((acc, curr) => ({ ...acc, [curr.goalId]: curr.blockedSlots }), {}); }; +/** + * Adds a blocked slot to the task associated with the provided goal ID. + * + * @param {string} goalId - The ID of the goal from the goals collection. + * @param {object} slot - The start and end timestamps of the blocked slot. + */ export const addBlockedSlot = async (goalId: string, slot: { start: string; end: string }) => { db.transaction("rw", db.taskCollection, async () => { await db.taskCollection diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx index 90aa0252e..f23ecfe34 100644 --- a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx +++ b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx @@ -120,9 +120,9 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail hoursSpent: 0, blockedSlots: actionName === "Reschedule" ? [{ start: task.start, end: task.deadline }] : [], }); - if (actionName === "Reschedule") { - setOpenReschedule({ ...task }); - } + // if (actionName === "Reschedule") { + // setOpenReschedule({ ...task }); + // } } else if (actionName === "Done") { const markDone = !!taskDetails[task.goalid]?.completedTodayIds.includes(task.taskid); if (markDone) return null; @@ -130,7 +130,7 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail } else if (actionName === "Skip") { await forgetTask(taskItem.id, `${getHrFromDateString(task.start)}-${getHrFromDateString(task.deadline)}`); } else if (actionName === "Reschedule") { - setOpenReschedule({ ...task }); + setOpenReschedule(task); } if (actionName === "Done") { await doneSound.play(); @@ -144,6 +144,9 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail } else if (actionName === "Skip") { await forgetSound.play(); setLastAction("TaskSkipped"); + } else if (actionName === "Reschedule") { + setOpenReschedule({ ...task }); + setLastAction("TaskRescheduled"); } } else { setShowToast({ open: true, message: "Let's focus on Today :)", extra: "" }); diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index f401beebf..e9c0eb1f5 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -1,168 +1,80 @@ -import { Tooltip } from "antd"; +import { Radio, Tooltip } from "antd"; import { useRecoilState, useRecoilValue } from "recoil"; -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { v4 as uuidv4 } from "uuid"; import { darkModeState } from "@src/store"; -import { getMonthByIndex } from "@src/utils"; -import SubHeader from "@src/common/SubHeader"; -import { convertDateToDay } from "@src/utils/SchedulerUtils"; - import "./Reschedule.scss"; -import { displayReschedule } from "@src/store/TaskState"; -import { ITask } from "@src/Interfaces/Task"; -import { getFromOutbox } from "@src/api/DumpboxAPI"; -import { IFinalOutputSlot } from "@src/Interfaces/IScheduler"; import ZModal from "@src/common/ZModal"; -import ScheduledSlots from "./ScheduledSlots"; +import { updateGoal } from "@src/api/GoalsAPI"; +import { TaskItem } from "@src/models/TaskItem"; +import { addBlockedSlot } from "@src/api/TasksAPI"; +import { displayReschedule } from "@src/store/TaskState"; const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); + const [selectedOption, setSelectedOption] = useState(null); + console.log(task); if (!task) { return null; } - let today = new Date(); - if (today.getHours() + task.duration > 23) { - today = new Date(today.setDate(today.getDate() + 1)); - } - const currHr = today.getHours(); - const currDate = today.getDate(); - const currMonth = today.getMonth(); - const lastDate = new Date(2023, today.getMonth() + 1, 0).getDate(); - const [selectedHr, setSelectedHr] = useState(currHr === new Date().getHours() ? 8 : currHr); - const [monthIndex, setMonthIndex] = useState(currMonth); - const [selectedDay, setSelectedDay] = useState(currDate); - const [selectedDate, setSelctedDate] = useState(today); - const [endDate, setEndDate] = useState(today); - const [overridenTasks, setOverridenTasks] = useState([]); - const [schedulerOutput, setSchedulerOutput] = useState<{ [key: string]: IFinalOutputSlot[] }>({}); + const rescheduleOptions = [ + { label: "1 hour", value: 1 }, + { label: "3 hours", value: 3 }, + { label: "1 day", value: 24 }, + { label: "3 days", value: 72 }, + { label: "7 days", value: 168 }, + { label: "30 days", value: 720 }, + ]; - const darkModeStatus = useRecoilValue(darkModeState); + // Function to update `notOn` field based on selected reschedule option + const handleReschedule = (value) => { + setSelectedOption(value); + const now = new Date(); // Get the current date and time + // Convert current time to UTC by subtracting the timezone offset + const utcNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000); - const getSlots = (start: number, end: number) => - [...Array(end).keys()].slice(start).map((hr) => ( - - )); + // Zero out UTC minutes, seconds, and milliseconds to align with the start of the hour + utcNow.setUTCHours(utcNow.getUTCHours(), 0, 0, 0); - useEffect(() => { - getFromOutbox("scheduler").then((res) => { - if (res) { - const { scheduled } = JSON.parse(JSON.parse(res.value).output); - setEndDate(new Date(scheduled.slice(-1)[0].day)); - const temp: { [key: string]: IFinalOutputSlot[] } = {}; - scheduled.forEach((sod: { day: string; tasks: IFinalOutputSlot[] }) => { - temp[new Date(sod.day).toLocaleDateString()] = sod.tasks; - }); - setSchedulerOutput({ ...temp }); - } - }); - }, []); + const futureDate = new Date(utcNow.getTime() + value * 3600000); // Compute the future date in UTC - // useEffect(() => { - // if (task) document.getElementsByClassName("slot-card")[currHr].scrollIntoView({ inline: "center" }); - // }, [task]); + // Calculate `notOnStart` and `notOnEnd` to match exact hours in UTC + const notOnStart = new Date(utcNow.getTime()); + const notOnEnd = new Date(futureDate.getTime()); - useEffect(() => { - const tmp = new Date(today.getFullYear(), monthIndex, selectedDay); - if (tmp > endDate) { - setOverridenTasks([]); - } - if (tmp > today) { - console.log("sdd"); - setSelectedHr(8); - } - setSelctedDate(tmp); - }, [selectedDay, monthIndex]); + // Call to add blocked slot in the scheduling system with UTC dates + addBlockedSlot(task.goalid, { + start: notOnStart.toISOString(), // This will naturally be in UTC + end: notOnEnd.toISOString(), // This will naturally be in UTC + }); + + console.log(`Task to avoid scheduling from ${notOnStart.toISOString()} to ${notOnEnd.toISOString()}`); + setOpen(null); // Close the modal after setting the notOn field + }; - // console.log(schedulerOutput, selectedDate.toLocaleDateString(), schedulerOutput[selectedDate.toLocaleDateString()]); - return task ? ( - setOpen({})}> + return ( + setOpen(null)}>

{task.title}

- today.getMonth()} - showRightNav={monthIndex < 11} - title={getMonthByIndex(monthIndex)} - leftNav={() => setMonthIndex(monthIndex - 1)} - rightNav={() => setMonthIndex(monthIndex + 1)} - /> -
-
- {[...Array(lastDate + 1).keys()].slice(currDate).map((onDate) => ( - - ))} -
-
-

- Pick {task.duration} hour{task.duration > 1 ? "s" : ""} -

-
- {schedulerOutput[selectedDate.toLocaleDateString()] ? ( - - ) : ( - getSlots(0, 25) - )} -
-
- {overridenTasks.map((psTask: ITask) => ( - - ))} +
+ setSelectedOption(e.target.value)}> + {rescheduleOptions.map((option) => ( + + {option.label} + + ))} +
-
- ) : null; + ); }; export default Reschedule; diff --git a/src/helpers/MyTimeHelper.ts b/src/helpers/MyTimeHelper.ts index b833f9716..29c6df344 100644 --- a/src/helpers/MyTimeHelper.ts +++ b/src/helpers/MyTimeHelper.ts @@ -167,6 +167,7 @@ export const organizeDataForInptPrep = async (inputGoals: GoalItem[]) => { {}, ); const blockedSlots: { [goalid: string]: blockedSlotOfTask[] } = await getAllBlockedTasks(); + console.log("blockedSlots", blockedSlots); const inputGoalsArr: ISchedulerInputGoal[] = transformIntoSchInputGoals(dbTasks, activeGoals, blockedSlots); schedulerInput.goals = inputGoalsArr; diff --git a/src/hooks/useScheduler.tsx b/src/hooks/useScheduler.tsx index f99c3b73a..c6b16df17 100644 --- a/src/hooks/useScheduler.tsx +++ b/src/hooks/useScheduler.tsx @@ -63,7 +63,7 @@ function useScheduler() { res = cachedRes.output; logIO(JSON.stringify(schedulerInputV1), res); } else { - await resetProgressOfToday(); + //await resetProgressOfToday(); const { generatedInputId, schedulerInput: schedulerInputV2 } = await generateSchedule(); newGeneratedInputId = generatedInputId; await init(); From 110eb1a89ee76a39c76828c041bc717d9b0aca93 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Thu, 2 May 2024 16:33:25 +0530 Subject: [PATCH 03/16] fix task items marked done when reschedule button clicked --- src/api/TasksAPI/index.ts | 7 +--- .../MyTimeline/MyTimeline.tsx | 23 ++++++++----- .../Reschedule/Reschedule.tsx | 33 ++++++++++--------- 3 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/api/TasksAPI/index.ts b/src/api/TasksAPI/index.ts index c9d3cde04..73323fefa 100644 --- a/src/api/TasksAPI/index.ts +++ b/src/api/TasksAPI/index.ts @@ -156,18 +156,13 @@ export const getAllBlockedTasks = async () => { return tasks.reduce((acc, curr) => ({ ...acc, [curr.goalId]: curr.blockedSlots }), {}); }; -/** - * Adds a blocked slot to the task associated with the provided goal ID. - * - * @param {string} goalId - The ID of the goal from the goals collection. - * @param {object} slot - The start and end timestamps of the blocked slot. - */ export const addBlockedSlot = async (goalId: string, slot: { start: string; end: string }) => { db.transaction("rw", db.taskCollection, async () => { await db.taskCollection .where("goalId") .equals(goalId) .modify((obj: TaskItem) => { + obj.blockedSlots = []; obj.blockedSlots.push(slot); }); }).catch((e) => { diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx index ff88436b4..acd9b58ea 100644 --- a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx +++ b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx @@ -107,25 +107,30 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail if (day === "Today") { const taskItem = await getTaskByGoalId(task.goalid); if (!taskItem) { + console.log("task not found"); + await addTask({ id: uuidv4(), goalId: task.goalid, title: task.title, - completedTodayIds: [task.taskid], + completedTodayIds: [], forgotToday: actionName === "Skip" ? [`${getHrFromDateString(task.start)}-${getHrFromDateString(task.deadline)}`] : [], completedToday: actionName === "Done" ? Number(task.duration) : 0, lastForget: actionName === "Skip" ? new Date().toLocaleDateString() : "", lastCompleted: actionName === "Done" ? new Date().toLocaleDateString() : "", hoursSpent: 0, - completedTodayTimings: [ - { - goalid: task.goalid, - start: task.start, - deadline: task.deadline, - }, - ], - blockedSlots: actionName === "Reschedule" ? [{ start: task.start, end: task.deadline }] : [], + completedTodayTimings: + actionName === "Done" + ? [ + { + goalid: task.goalid, + start: task.start, + deadline: task.deadline, + }, + ] + : [], + blockedSlots: [], }); // if (actionName === "Reschedule") { // setOpenReschedule({ ...task }); diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index e9c0eb1f5..49240e9f2 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -1,4 +1,4 @@ -import { Radio, Tooltip } from "antd"; +import { Radio } from "antd"; import { useRecoilState, useRecoilValue } from "recoil"; import React, { useState } from "react"; import { v4 as uuidv4 } from "uuid"; @@ -6,15 +6,13 @@ import { v4 as uuidv4 } from "uuid"; import { darkModeState } from "@src/store"; import "./Reschedule.scss"; import ZModal from "@src/common/ZModal"; -import { updateGoal } from "@src/api/GoalsAPI"; -import { TaskItem } from "@src/models/TaskItem"; import { addBlockedSlot } from "@src/api/TasksAPI"; import { displayReschedule } from "@src/store/TaskState"; const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); - const [selectedOption, setSelectedOption] = useState(null); - console.log(task); + const [selectedOption, setSelectedOption] = useState(0); + const darkModeStatus = useRecoilValue(darkModeState); if (!task) { return null; } @@ -28,30 +26,27 @@ const Reschedule = () => { { label: "30 days", value: 720 }, ]; - // Function to update `notOn` field based on selected reschedule option const handleReschedule = (value) => { + console.log("called"); + setSelectedOption(value); - const now = new Date(); // Get the current date and time - // Convert current time to UTC by subtracting the timezone offset + const now = new Date(); const utcNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000); - // Zero out UTC minutes, seconds, and milliseconds to align with the start of the hour utcNow.setUTCHours(utcNow.getUTCHours(), 0, 0, 0); - const futureDate = new Date(utcNow.getTime() + value * 3600000); // Compute the future date in UTC + const futureDate = new Date(utcNow.getTime() + value * 3600000); - // Calculate `notOnStart` and `notOnEnd` to match exact hours in UTC const notOnStart = new Date(utcNow.getTime()); const notOnEnd = new Date(futureDate.getTime()); - // Call to add blocked slot in the scheduling system with UTC dates addBlockedSlot(task.goalid, { - start: notOnStart.toISOString(), // This will naturally be in UTC - end: notOnEnd.toISOString(), // This will naturally be in UTC + start: notOnStart.toISOString(), + end: notOnEnd.toISOString(), }); console.log(`Task to avoid scheduling from ${notOnStart.toISOString()} to ${notOnEnd.toISOString()}`); - setOpen(null); // Close the modal after setting the notOn field + setOpen(null); }; return ( @@ -62,7 +57,13 @@ const Reschedule = () => {
setSelectedOption(e.target.value)}> {rescheduleOptions.map((option) => ( - + {option.label} ))} From 32efb502b5aa7e9215c67552431e44c9d647bf02 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Thu, 2 May 2024 17:21:09 +0530 Subject: [PATCH 04/16] fix scheduler input object structure --- src/Interfaces/IScheduler.ts | 2 +- .../MyTimeComponents/Reschedule/Reschedule.tsx | 12 +++++++++--- src/helpers/MyTimeHelper.ts | 6 +++--- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Interfaces/IScheduler.ts b/src/Interfaces/IScheduler.ts index 6ad79d3da..b1f39ff98 100644 --- a/src/Interfaces/IScheduler.ts +++ b/src/Interfaces/IScheduler.ts @@ -43,8 +43,8 @@ export interface ISchedulerInputGoal { afterTime?: number; beforeTime?: number; onDays?: string[]; - notOn?: blockedSlotOfTask[]; }; + notOn?: blockedSlotOfTask[]; repeat?: string; budget?: { minPerDay?: number; diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 49240e9f2..dacc24ebf 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -13,6 +13,7 @@ const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); const [selectedOption, setSelectedOption] = useState(0); const darkModeStatus = useRecoilValue(darkModeState); + if (!task) { return null; } @@ -41,11 +42,16 @@ const Reschedule = () => { const notOnEnd = new Date(futureDate.getTime()); addBlockedSlot(task.goalid, { - start: notOnStart.toISOString(), - end: notOnEnd.toISOString(), + start: notOnStart.toISOString().slice(0, 19), + end: notOnEnd.toISOString().slice(0, 19), }); - console.log(`Task to avoid scheduling from ${notOnStart.toISOString()} to ${notOnEnd.toISOString()}`); + console.log( + `Task to avoid scheduling from ${notOnStart.toISOString().slice(0, 19)} to ${notOnEnd + .toISOString() + .slice(0, 19)}`, + ); + setOpen(null); }; diff --git a/src/helpers/MyTimeHelper.ts b/src/helpers/MyTimeHelper.ts index c0913742a..a58898a23 100644 --- a/src/helpers/MyTimeHelper.ts +++ b/src/helpers/MyTimeHelper.ts @@ -38,9 +38,9 @@ export const transformIntoSchInputGoals = ( if (ele.on) { obj.filters.onDays = ele.on.map((day) => day.toLowerCase()); } - if (slotsNotallowed && slotsNotallowed.length > 0) { - obj.filters.notOn = [...slotsNotallowed]; - } + } + if (slotsNotallowed && slotsNotallowed.length > 0) { + obj.notOn = [...slotsNotallowed]; } if (ele.habit) obj.repeat = "weekly"; if (ele.timeBudget) { From 9f126f5864312eb7a68448916e7879446266997b Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sun, 5 May 2024 11:16:51 +0530 Subject: [PATCH 05/16] use moment for date manipulation --- package-lock.json | 7 +++-- package.json | 2 +- .../MyTimeline/MyTimeline.tsx | 4 +-- .../Reschedule/Reschedule.tsx | 29 +++++-------------- src/store/TaskState.ts | 2 +- 5 files changed, 15 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0de4bd689..1d4af7ae4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "dexie-export-import": "^4.0.7", "i18next": "^21.6.11", "i18next-browser-languagedetector": "^6.1.3", - "moment": "^2.29.2", + "moment": "^2.30.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-i18next": "^11.15.4", @@ -13565,8 +13565,9 @@ } }, "node_modules/moment": { - "version": "2.29.4", - "license": "MIT", + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", "engines": { "node": "*" } diff --git a/package.json b/package.json index 7db77592a..8ac61861d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "dexie-export-import": "^4.0.7", "i18next": "^21.6.11", "i18next-browser-languagedetector": "^6.1.3", - "moment": "^2.29.2", + "moment": "^2.30.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-i18next": "^11.15.4", diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx index acd9b58ea..c83482ba3 100644 --- a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx +++ b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx @@ -20,12 +20,12 @@ import { displayToast, lastAction, focusTaskTitle } from "@src/store"; import { addTask, completeTask, forgetTask, getTaskByGoalId } from "@src/api/TasksAPI"; import "./index.scss"; +import { displayReschedule } from "@src/store/TaskState"; import { GoalTiming } from "./GoalTiming"; import { TaskOptions } from "./TaskOptions"; import { updateImpossibleGoals } from "./updateImpossibleGoals"; type ImpossibleTaskId = string; -import { displayReschedule } from "@src/store/TaskState"; interface MyTimelineProps { day: string; @@ -56,8 +56,6 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail const setTaskTitle = useSetRecoilState(focusTaskTitle); const setOpenReschedule = useSetRecoilState(displayReschedule); - const [showScheduled, setShowScheduled] = useState(true); - const [displayOptionsIndex, setDisplayOptionsIndex] = useState("root"); const handleOpenGoal = async (goalId: string) => { diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index dacc24ebf..a6ed56305 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -8,6 +8,7 @@ import "./Reschedule.scss"; import ZModal from "@src/common/ZModal"; import { addBlockedSlot } from "@src/api/TasksAPI"; import { displayReschedule } from "@src/store/TaskState"; +import moment from "moment"; const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); @@ -27,36 +28,22 @@ const Reschedule = () => { { label: "30 days", value: 720 }, ]; - const handleReschedule = (value) => { - console.log("called"); - + const handleReschedule = (value: number) => { setSelectedOption(value); - const now = new Date(); - const utcNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000); - - utcNow.setUTCHours(utcNow.getUTCHours(), 0, 0, 0); - - const futureDate = new Date(utcNow.getTime() + value * 3600000); - - const notOnStart = new Date(utcNow.getTime()); - const notOnEnd = new Date(futureDate.getTime()); + const now = moment(); + const futureMoment = now.clone().add(value, "hours"); addBlockedSlot(task.goalid, { - start: notOnStart.toISOString().slice(0, 19), - end: notOnEnd.toISOString().slice(0, 19), + start: now.format().slice(0, 19), + end: futureMoment.format().slice(0, 19), }); - console.log( - `Task to avoid scheduling from ${notOnStart.toISOString().slice(0, 19)} to ${notOnEnd - .toISOString() - .slice(0, 19)}`, - ); - + console.log(`Task to avoid scheduling from ${now.format().slice(0, 19)} to ${futureMoment.format().slice(0, 19)}`); setOpen(null); }; return ( - setOpen(null)}> + setOpen(null)}>

{task.title}

diff --git a/src/store/TaskState.ts b/src/store/TaskState.ts index 8ec0f2bd3..f98fb4bd9 100644 --- a/src/store/TaskState.ts +++ b/src/store/TaskState.ts @@ -3,5 +3,5 @@ import { atom } from "recoil"; export const displayReschedule = atom({ key: "displayReschedule", - default: {} as ITask, + default: {} as ITask | null, }); From 639f42477d646a00919100f51ee024814aabcb24 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sun, 5 May 2024 19:45:41 +0530 Subject: [PATCH 06/16] add styles to reschedule option --- .../Reschedule/Reschedule.scss | 33 +++++++------------ .../Reschedule/Reschedule.tsx | 23 ++++++++----- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index cb2f2c388..f3364e9e6 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -20,27 +20,23 @@ } } - .list { + .reschedule-options { + align-self: center; margin: 0 16px; - padding: 8px 8px 16px 8px; - border-left: 0; - border-right: 0; + padding: 12px 8px 16px 8px; + margin-top: 20px; flex-wrap: nowrap; overflow-x: scroll; display: flex; - gap: 20px; - .res-card { - border-radius: 8px; - background: transparent; - border: 1px solid #d9d9d9; - padding: 10px 15px; - display: flex; - flex-direction: column; - gap: 10px; - text-align: center; - min-width: 75px; - align-items: center; + .ant-radio-button-wrapper { + margin: 2px; + border-inline-start-width: 1px; + border-radius: 10px; + } + + .ant-radio-button-wrapper:not(:first-child)::before { + display: none; } p { @@ -93,11 +89,6 @@ font-weight: 600; } - .action-btn { - margin-top: 16px; - background: var(--primary-background); - } - div:has(.action-btn) { text-align: center; } diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index a6ed56305..706541b5d 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -25,7 +25,6 @@ const Reschedule = () => { { label: "1 day", value: 24 }, { label: "3 days", value: 72 }, { label: "7 days", value: 168 }, - { label: "30 days", value: 720 }, ]; const handleReschedule = (value: number) => { @@ -33,26 +32,34 @@ const Reschedule = () => { const now = moment(); const futureMoment = now.clone().add(value, "hours"); + const start = now.format().slice(0, 19); + const end = futureMoment.format().slice(0, 19); + addBlockedSlot(task.goalid, { - start: now.format().slice(0, 19), - end: futureMoment.format().slice(0, 19), + start, + end, }); - console.log(`Task to avoid scheduling from ${now.format().slice(0, 19)} to ${futureMoment.format().slice(0, 19)}`); + console.log(`Task to avoid scheduling from ${start} to ${end}`); setOpen(null); }; return ( - setOpen(null)}> + setOpen(null)}>

{task.title}

-
- setSelectedOption(e.target.value)}> +
+ setSelectedOption(e.target.value)} + > {rescheduleOptions.map((option) => ( Date: Mon, 6 May 2024 08:41:37 +0530 Subject: [PATCH 07/16] add more styling to buttons --- .../Reschedule/Reschedule.scss | 29 +++++++++++++++---- .../Reschedule/Reschedule.tsx | 5 +++- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index f3364e9e6..316705475 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -1,10 +1,4 @@ .rescheduleModal { - hr { - margin: 0; - color: #d9d9d9; - opacity: 1; - } - .ant-modal-content { padding: 0 0 24px 0 !important; border: none !important; @@ -39,6 +33,13 @@ display: none; } + .ant-radio-group-solid + :where(.css-dev-only-do-not-override-w8mnev).ant-radio-button-wrapper-checked:not( + .ant-radio-button-wrapper-disabled + ) { + border-color: var(--icon-grad-2); + } + p { margin: 0; font-size: 1.286em; @@ -96,4 +97,20 @@ .task-card { width: 150px; } + + .action-btn { + color: white; + } +} + +.reschedule-options.light { + .action-btn { + color: black; + } + .ant-radio-group-solid + :where(.css-dev-only-do-not-override-w8mnev).ant-radio-button-wrapper-checked:not( + .ant-radio-button-wrapper-disabled + ) { + color: black; + } } diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 706541b5d..8b93dcf3f 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -49,7 +49,10 @@ const Reschedule = () => {

{task.title}

-
+
Date: Mon, 6 May 2024 08:44:25 +0530 Subject: [PATCH 08/16] remove unused reschedule styles --- .../Reschedule/Reschedule.scss | 62 ------------------- 1 file changed, 62 deletions(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index 316705475..5e1a90a8e 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -3,15 +3,6 @@ padding: 0 0 24px 0 !important; border: none !important; border-radius: 28px !important; - - .selected { - border: none; - background: var(--bottom-nav-color); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - } - .booked { - background: var(--bottom-nav-color); - } } .reschedule-options { @@ -39,65 +30,12 @@ ) { border-color: var(--icon-grad-2); } - - p { - margin: 0; - font-size: 1.286em; - font-weight: 500; - white-space: nowrap; - } - - .res-card > p:last-child { - font-weight: 500; - } - - .res-card.selected > p:last-child { - font-weight: 700; - color: var(--bottom-nav-text-color); - } - } - - .slot-batch { - display: flex; - flex-direction: column; - gap: 10px; - - div { - display: flex; - gap: 10px; - } - } - - .slot-card { - border-radius: 8px; - background: transparent; - border: 1px solid #d9d9d9; - padding: 10px 0; - display: flex; - flex-direction: column; - gap: 10px; - text-align: center; - min-width: 50px; - align-items: center; - - sup { - top: -1em; - font-size: 0.5em; - } - } - - .slot-card.selected { - font-weight: 600; } div:has(.action-btn) { text-align: center; } - .task-card { - width: 150px; - } - .action-btn { color: white; } From 58526d86745fabe3b15e6e22c3d859b664548b3a Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 6 May 2024 09:02:32 +0530 Subject: [PATCH 09/16] refactoring and move reschedule options to constant folder --- .../Reschedule/Reschedule.scss | 18 ++++++++----- .../Reschedule/Reschedule.tsx | 26 +++++++------------ src/constants/rescheduleOptions.ts | 7 +++++ 3 files changed, 29 insertions(+), 22 deletions(-) create mode 100644 src/constants/rescheduleOptions.ts diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index 5e1a90a8e..dfd71667f 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -1,4 +1,4 @@ -.rescheduleModal { +.reschedule-modal { .ant-modal-content { padding: 0 0 24px 0 !important; border: none !important; @@ -24,10 +24,7 @@ display: none; } - .ant-radio-group-solid - :where(.css-dev-only-do-not-override-w8mnev).ant-radio-button-wrapper-checked:not( - .ant-radio-button-wrapper-disabled - ) { + .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { border-color: var(--icon-grad-2); } } @@ -39,16 +36,25 @@ .action-btn { color: white; } + + .radio-button { + background-color: rgba(255, 255, 255, 0.08); + } } -.reschedule-options.light { +.reschedule-modal.light { .action-btn { color: black; } + .ant-radio-group-solid :where(.css-dev-only-do-not-override-w8mnev).ant-radio-button-wrapper-checked:not( .ant-radio-button-wrapper-disabled ) { color: black; } + + .radio-button { + background-color: var(--secondary-background); + } } diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 8b93dcf3f..c9c810b43 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -1,7 +1,6 @@ import { Radio } from "antd"; import { useRecoilState, useRecoilValue } from "recoil"; import React, { useState } from "react"; -import { v4 as uuidv4 } from "uuid"; import { darkModeState } from "@src/store"; import "./Reschedule.scss"; @@ -9,6 +8,7 @@ import ZModal from "@src/common/ZModal"; import { addBlockedSlot } from "@src/api/TasksAPI"; import { displayReschedule } from "@src/store/TaskState"; import moment from "moment"; +import { RESCHEDULE_OPTIONS } from "@src/constants/rescheduleOptions"; const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); @@ -19,14 +19,6 @@ const Reschedule = () => { return null; } - const rescheduleOptions = [ - { label: "1 hour", value: 1 }, - { label: "3 hours", value: 3 }, - { label: "1 day", value: 24 }, - { label: "3 days", value: 72 }, - { label: "7 days", value: 168 }, - ]; - const handleReschedule = (value: number) => { setSelectedOption(value); const now = moment(); @@ -45,26 +37,28 @@ const Reschedule = () => { }; return ( - setOpen(null)}> + setOpen(null)} + >

{task.title}

-
+
setSelectedOption(e.target.value)} > - {rescheduleOptions.map((option) => ( + {RESCHEDULE_OPTIONS.map((option) => ( {option.label} diff --git a/src/constants/rescheduleOptions.ts b/src/constants/rescheduleOptions.ts new file mode 100644 index 000000000..ee3d14d69 --- /dev/null +++ b/src/constants/rescheduleOptions.ts @@ -0,0 +1,7 @@ +export const RESCHEDULE_OPTIONS: { label: string; value: number }[] = [ + { label: "1 hour", value: 1 }, + { label: "3 hours", value: 3 }, + { label: "1 day", value: 24 }, + { label: "3 days", value: 72 }, + { label: "7 days", value: 168 }, +]; From e1384a4c3cb73ee3f2562a4d9d0db824318282db Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 6 May 2024 09:59:16 +0530 Subject: [PATCH 10/16] run scheduler immediately after task is rescheduled --- src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx | 1 - src/components/MyTimeComponents/Reschedule/Reschedule.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx index c83482ba3..5f45dc7ca 100644 --- a/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx +++ b/src/components/MyTimeComponents/MyTimeline/MyTimeline.tsx @@ -156,7 +156,6 @@ export const MyTimeline: React.FC = ({ day, myTasks, taskDetail setLastAction("TaskSkipped"); } else if (actionName === "Reschedule") { setOpenReschedule({ ...task }); - setLastAction("TaskRescheduled"); } } else { setShowToast({ open: true, message: "Let's focus on Today :)", extra: "" }); diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index c9c810b43..a16c3a0ba 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -1,8 +1,8 @@ import { Radio } from "antd"; -import { useRecoilState, useRecoilValue } from "recoil"; +import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import React, { useState } from "react"; -import { darkModeState } from "@src/store"; +import { darkModeState, lastAction } from "@src/store"; import "./Reschedule.scss"; import ZModal from "@src/common/ZModal"; import { addBlockedSlot } from "@src/api/TasksAPI"; @@ -14,6 +14,7 @@ const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); const [selectedOption, setSelectedOption] = useState(0); const darkModeStatus = useRecoilValue(darkModeState); + const setLastAction = useSetRecoilState(lastAction); if (!task) { return null; @@ -34,6 +35,7 @@ const Reschedule = () => { console.log(`Task to avoid scheduling from ${start} to ${end}`); setOpen(null); + setLastAction("TaskRescheduled"); }; return ( From 8228936587369822a3c7071f8a3a5e4cded1c91e Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Tue, 7 May 2024 11:46:27 +0530 Subject: [PATCH 11/16] set start to task's start time --- .../MyTimeComponents/Reschedule/Reschedule.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index a16c3a0ba..5b3d42105 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -7,8 +7,8 @@ import "./Reschedule.scss"; import ZModal from "@src/common/ZModal"; import { addBlockedSlot } from "@src/api/TasksAPI"; import { displayReschedule } from "@src/store/TaskState"; -import moment from "moment"; import { RESCHEDULE_OPTIONS } from "@src/constants/rescheduleOptions"; +import { convertDateToString } from "@src/utils"; const Reschedule = () => { const [task, setOpen] = useRecoilState(displayReschedule); @@ -22,18 +22,18 @@ const Reschedule = () => { const handleReschedule = (value: number) => { setSelectedOption(value); - const now = moment(); - const futureMoment = now.clone().add(value, "hours"); - const start = now.format().slice(0, 19); - const end = futureMoment.format().slice(0, 19); + const startTime = new Date(task.start); + const endTime = new Date(startTime.getTime() + value * 3600000); + const start = convertDateToString(startTime, false); + const end = convertDateToString(endTime, false); addBlockedSlot(task.goalid, { start, end, }); - console.log(`Task to avoid scheduling from ${start} to ${end}`); + console.log(`Task rescheduled from ${start} to ${end}`); setOpen(null); setLastAction("TaskRescheduled"); }; From 2315d73c4470709e294ad5924531b5b771520197 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sat, 11 May 2024 12:19:52 +0530 Subject: [PATCH 12/16] change header title font and prefix reschedule goal title with 'Postpone: ' text --- src/components/MyTimeComponents/Reschedule/Reschedule.tsx | 2 +- src/global.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 5b3d42105..64b64eea7 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -45,7 +45,7 @@ const Reschedule = () => { onCancel={() => setOpen(null)} >
-

{task.title}

+

{`Postpone: ${task.title}`}

Date: Sun, 12 May 2024 11:07:00 +0530 Subject: [PATCH 13/16] change reschedule options ui and did some refactoring --- src/common/Icon.tsx | 8 +++ .../MyGoalActions/MyGoalActions.scss | 4 +- .../Reschedule/Reschedule.scss | 62 ++---------------- .../Reschedule/Reschedule.tsx | 65 ++++++------------- src/constants/rescheduleOptions.ts | 2 + 5 files changed, 39 insertions(+), 102 deletions(-) diff --git a/src/common/Icon.tsx b/src/common/Icon.tsx index 82433e877..3a7fbd33d 100644 --- a/src/common/Icon.tsx +++ b/src/common/Icon.tsx @@ -648,6 +648,14 @@ const Icon: React.FC = ({ title, active }) => { ); + case "Clock": + return ( + + + + + ); + default: return null; } diff --git a/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss b/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss index cdcc41036..01d1f580e 100644 --- a/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss +++ b/src/components/GoalsComponents/MyGoalActions/MyGoalActions.scss @@ -7,7 +7,7 @@ .goal-action { width: unset !important; border: none; - border-radius: 0 !important; + border-radius: 0; cursor: pointer; background: var(--bottom-nav-color) !important; } @@ -37,7 +37,7 @@ border-radius: 0 0 0 28px !important; } .goal-action:last-child { - border-radius: 0 0 28px 0 !important; + border-radius: 0 0 28px 0; } .goal-action-archive { diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index dfd71667f..7f1e669c6 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -1,60 +1,12 @@ -.reschedule-modal { - .ant-modal-content { - padding: 0 0 24px 0 !important; - border: none !important; - border-radius: 28px !important; - } - +.interactables-modal { .reschedule-options { - align-self: center; - margin: 0 16px; - padding: 12px 8px 16px 8px; - margin-top: 20px; - flex-wrap: nowrap; - overflow-x: scroll; - display: flex; - - .ant-radio-button-wrapper { - margin: 2px; - border-inline-start-width: 1px; - border-radius: 10px; - } - - .ant-radio-button-wrapper:not(:first-child)::before { - display: none; - } + display: grid; + grid-template-columns: 2fr 2fr; - .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { - border-color: var(--icon-grad-2); + .goal-action:last-child { + border-top: 2px solid var(--default-border-color); + grid-column: 1 / -1; + border-radius: 0 0 28px 28px; } } - - div:has(.action-btn) { - text-align: center; - } - - .action-btn { - color: white; - } - - .radio-button { - background-color: rgba(255, 255, 255, 0.08); - } -} - -.reschedule-modal.light { - .action-btn { - color: black; - } - - .ant-radio-group-solid - :where(.css-dev-only-do-not-override-w8mnev).ant-radio-button-wrapper-checked:not( - .ant-radio-button-wrapper-disabled - ) { - color: black; - } - - .radio-button { - background-color: var(--secondary-background); - } } diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 64b64eea7..2a1c668a8 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -1,30 +1,24 @@ -import { Radio } from "antd"; -import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import React, { useState } from "react"; +import { useRecoilState, useSetRecoilState } from "recoil"; +import React from "react"; -import { darkModeState, lastAction } from "@src/store"; +import { lastAction } from "@src/store"; import "./Reschedule.scss"; import ZModal from "@src/common/ZModal"; import { addBlockedSlot } from "@src/api/TasksAPI"; import { displayReschedule } from "@src/store/TaskState"; -import { RESCHEDULE_OPTIONS } from "@src/constants/rescheduleOptions"; +import { MILLISECONDS_IN_HOUR, RESCHEDULE_OPTIONS } from "@src/constants/rescheduleOptions"; import { convertDateToString } from "@src/utils"; +import ActionDiv from "@components/GoalsComponents/MyGoalActions/ActionDiv"; const Reschedule = () => { - const [task, setOpen] = useRecoilState(displayReschedule); - const [selectedOption, setSelectedOption] = useState(0); - const darkModeStatus = useRecoilValue(darkModeState); + const [task, setDisplayReschedule] = useRecoilState(displayReschedule); const setLastAction = useSetRecoilState(lastAction); - if (!task) { - return null; - } - - const handleReschedule = (value: number) => { - setSelectedOption(value); + if (!task) return null; + const handleReschedule = (hours: number) => { const startTime = new Date(task.start); - const endTime = new Date(startTime.getTime() + value * 3600000); + const endTime = new Date(startTime.getTime() + hours * MILLISECONDS_IN_HOUR); const start = convertDateToString(startTime, false); const end = convertDateToString(endTime, false); @@ -34,44 +28,25 @@ const Reschedule = () => { }); console.log(`Task rescheduled from ${start} to ${end}`); - setOpen(null); + setDisplayReschedule(null); setLastAction("TaskRescheduled"); }; return ( - setOpen(null)} - > + setDisplayReschedule(null)}>

{`Postpone: ${task.title}`}

- setSelectedOption(e.target.value)} - > - {RESCHEDULE_OPTIONS.map((option) => ( - - {option.label} - - ))} - -
-
- + {RESCHEDULE_OPTIONS.map((option) => ( +
handleReschedule(option.value)} + > + +
+ ))}
); diff --git a/src/constants/rescheduleOptions.ts b/src/constants/rescheduleOptions.ts index ee3d14d69..600e96532 100644 --- a/src/constants/rescheduleOptions.ts +++ b/src/constants/rescheduleOptions.ts @@ -5,3 +5,5 @@ export const RESCHEDULE_OPTIONS: { label: string; value: number }[] = [ { label: "3 days", value: 72 }, { label: "7 days", value: 168 }, ]; + +export const MILLISECONDS_IN_HOUR = 3600000; From 71039c43f551fbb791f63b6413cbe4c212fb1b6b Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sun, 12 May 2024 11:14:50 +0530 Subject: [PATCH 14/16] center the reschedule modal header text --- src/components/MyTimeComponents/Reschedule/Reschedule.scss | 5 ++++- src/components/MyTimeComponents/Reschedule/Reschedule.tsx | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.scss b/src/components/MyTimeComponents/Reschedule/Reschedule.scss index 7f1e669c6..b992b0319 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.scss +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.scss @@ -1,4 +1,7 @@ -.interactables-modal { +.interactables-modal.reschedule-modal { + .header-title { + text-align: left; + } .reschedule-options { display: grid; grid-template-columns: 2fr 2fr; diff --git a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx index 2a1c668a8..3204b622d 100644 --- a/src/components/MyTimeComponents/Reschedule/Reschedule.tsx +++ b/src/components/MyTimeComponents/Reschedule/Reschedule.tsx @@ -33,9 +33,9 @@ const Reschedule = () => { }; return ( - setDisplayReschedule(null)}> + setDisplayReschedule(null)}>
-

{`Postpone: ${task.title}`}

+

{`Postpone: ${task.title}`}

{RESCHEDULE_OPTIONS.map((option) => ( From 009f3228caba281acf2a800c71d565bcc2c1f40c Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sun, 12 May 2024 11:55:42 +0530 Subject: [PATCH 15/16] fix blockedSlot array forcing only one element to be presesnt at a time --- src/api/TasksAPI/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/api/TasksAPI/index.ts b/src/api/TasksAPI/index.ts index 73323fefa..145e31895 100644 --- a/src/api/TasksAPI/index.ts +++ b/src/api/TasksAPI/index.ts @@ -162,7 +162,6 @@ export const addBlockedSlot = async (goalId: string, slot: { start: string; end: .where("goalId") .equals(goalId) .modify((obj: TaskItem) => { - obj.blockedSlots = []; obj.blockedSlots.push(slot); }); }).catch((e) => { From 4a022191faf37566e4221c1a6f042c6645cfccbe Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Sun, 26 May 2024 10:34:43 +0530 Subject: [PATCH 16/16] change default of displayReschedule state to be null --- src/store/TaskState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/TaskState.ts b/src/store/TaskState.ts index f98fb4bd9..6afb794d1 100644 --- a/src/store/TaskState.ts +++ b/src/store/TaskState.ts @@ -3,5 +3,5 @@ import { atom } from "recoil"; export const displayReschedule = atom({ key: "displayReschedule", - default: {} as ITask | null, + default: null as ITask | null, });