Fix issues

src/components/Editor.tsx

@@ -1,6 +1,6 @@
 import { RetireVersion } from "@/constants";
 import { useSaveData } from "@/utilities/hooks";
-import { getTime, getTimeNumber } from "@/utilities/time";
+import { timeUtilities, toMinutes } from "@/utilities/time";
 import {
  Button,
  Collapse,
@@ -17,12 +17,12 @@ import TimeInput from "./TimeInput";
 const Editor: FunctionComponent = () => {
  const [saveData, setSaveData] = useSaveData();
 
- const [workStart, setWorkStart] = useState(saveData.work.start);
- const [workEnd, setWorkEnd] = useState(saveData.work.end);
+ const [workStart, setWorkStart] = useState(saveData.workTime.start);
+ const [workEnd, setWorkEnd] = useState(saveData.workTime.end);
 
  const [enableBreak, setEnableBreak] = useState(saveData.enabled_break);
- const [breakStart, setBreakStart] = useState(saveData.break.start);
- const [breakEnd, setBreakEnd] = useState(saveData.break.end);
+ const [breakStart, setBreakStart] = useState(saveData.breakTime.start);
+ const [breakEnd, setBreakEnd] = useState(saveData.breakTime.end);
 
  const [salary, setSalary] = useState(saveData.salary);
  const [workDays, setWorkDays] = useState(saveData.working_days);
@@ -31,12 +31,12 @@ const Editor: FunctionComponent = () => {
  setSaveData({
  version: RetireVersion,
  edited: true,
- work: {
+ workTime: {
  start: workStart,
  end: workEnd,
  },
  enabled_break: enableBreak,
- break: {
+ breakTime: {
  start: breakStart,
  end: breakEnd,
  },
@@ -61,12 +61,12 @@ const Editor: FunctionComponent = () => {
  <Space h="lg"></Space>
  <Group>
  <TimeInput
- value={getTime(workStart)}
- onChange={(value) => setWorkStart(getTimeNumber(value))}
+ value={timeUtilities.deserialize(workStart)}
+ onChange={(value) => setWorkStart(toMinutes(value))}
  ></TimeInput>
  <TimeInput
- value={getTime(workEnd)}
- onChange={(value) => setWorkEnd(getTimeNumber(value))}
+ value={timeUtilities.deserialize(workEnd)}
+ onChange={(value) => setWorkEnd(toMinutes(value))}
  ></TimeInput>
  </Group>
  </div>
@@ -81,12 +81,12 @@ const Editor: FunctionComponent = () => {
  <Collapse in={enableBreak}>
  <Group>
  <TimeInput
- value={getTime(breakStart)}
- onChange={(value) => setBreakStart(getTimeNumber(value))}
+ value={timeUtilities.deserialize(breakStart)}
+ onChange={(value) => setBreakStart(toMinutes(value))}
  ></TimeInput>
  <TimeInput
- value={getTime(breakEnd)}
- onChange={(value) => setBreakEnd(getTimeNumber(value))}
+ value={timeUtilities.deserialize(breakEnd)}
+ onChange={(value) => setBreakEnd(toMinutes(value))}
  ></TimeInput>
  </Group>
  </Collapse>

src/components/TimeInput.tsx

@@ -1,4 +1,4 @@
-import { getTime, getTimeNum, getTimeNumber } from "@/utilities/time";
+import { timeUtilities, toMinutes } from "@/utilities/time";
 import { NumberInput } from "@mantine/core";
 import { FunctionComponent } from "react";
 
@@ -13,24 +13,32 @@ const TimeInput: FunctionComponent<Props> = ({
 }) => {
  return (
  <NumberInput
- value={getTimeNumber(value)}
+ value={toMinutes(value)}
  parser={(value) => {
  if (value) {
  const [hour, minute] = value.split(":");
- return getTimeNum(parseInt(hour), parseInt(minute)).toString();
+ return timeUtilities
+ .serialize({
+ hour: parseInt(hour),
+ minute: parseInt(minute),
+ second: 0,
+ })
+ .toString();
  }
  return value;
  }}
  formatter={(value) => {
  if (value && !isNaN(parseInt(value))) {
- const time = getTime(parseInt(value));
+ const time = timeUtilities.deserialize(parseInt(value));
  const hourStr = time.hour.toString().padStart(2, "0");
  const minuteStr = time.minute.toString().padStart(2, "0");
  return `${hourStr}:${minuteStr}`;
  }
  return "00:00";
  }}
- onChange={(value) => onChanged && onChanged(getTime(value ?? 0))}
+ onChange={(value) =>
+ onChanged && onChanged(timeUtilities.deserialize(value ?? 0))
+ }
  ></NumberInput>
  );
 };

src/types/index.d.ts

@@ -1,17 +1,18 @@
 interface Time {
  hour: number;
  minute: number;
+ second: number;
 }
 
 interface SaveData {
  version: string;
  edited: boolean;
- work: {
+ workTime: {
  start: number;
  end: number;
  };
  enabled_break: boolean;
- break: {
+ breakTime: {
  start: number;
  end: number;
  };

src/utilities/hooks.ts

@@ -1,24 +1,79 @@
 import { RetireVersion } from "@/constants";
-import { useLocalStorage } from "@mantine/hooks";
-import { getTimeNum } from "./time";
+import { useInterval, useLocalStorage } from "@mantine/hooks";
+import { useMemo, useState } from "react";
+import { getTotalHours, timeUtilities } from "./time";
 
 export function useSaveData() {
  return useLocalStorage<SaveData>({
  key: "retire-save-data",
  defaultValue: {
  version: RetireVersion,
  edited: false,
- work: {
- start: getTimeNum(9, 0),
- end: getTimeNum(18, 0),
+ workTime: {
+ start: timeUtilities.serialize({ hour: 9, minute: 0, second: 0 }),
+ end: timeUtilities.serialize({ hour: 18, minute: 0, second: 0 }),
  },
  enabled_break: false,
- break: {
- start: getTimeNum(12, 0),
- end: getTimeNum(13, 0),
+ breakTime: {
+ start: timeUtilities.serialize({ hour: 12, minute: 0, second: 0 }),
+ end: timeUtilities.serialize({ hour: 13, minute: 0, second: 0 }),
  },
  salary: 0,
  working_days: 20,
  },
  });
 }
+
+export function useLiveTime() {
+ const [time, setTime] = useState<Time>(() => {
+ const date = new Date();
+ return {
+ hour: date.getHours(),
+ minute: date.getMinutes(),
+ second: date.getSeconds(),
+ };
+ });
+
+ useInterval(() => {
+ // TODO: optimize this
+ const date = new Date();
+ setTime({
+ hour: date.getHours(),
+ minute: date.getMinutes(),
+ second: date.getSeconds(),
+ });
+ }, 1 * 1000);
+
+ return time;
+}
+
+export function useStatistics() {
+ const [saveData] = useSaveData();
+
+ return useMemo(() => {
+ const { workTime, breakTime, enabled_break, salary, working_days } =
+ saveData;
+
+ const salaryPerDay = salary / working_days;
+
+ const workingHours = getTotalHours(
+ timeUtilities.deserialize(workTime.start),
+ timeUtilities.deserialize(workTime.end)
+ );
+
+ const breakHours = getTotalHours(
+ timeUtilities.deserialize(breakTime.start),
+ timeUtilities.deserialize(breakTime.end)
+ );
+
+ const effectiveWorkingHours =
+ workingHours - (enabled_break ? breakHours : 0.0);
+
+ return {
+ salaryPerDay,
+ workingHours,
+ effectiveWorkingHours,
+ breakHours,
+ };
+ }, [saveData]);
+}

src/utilities/time.ts

@@ -1,14 +1,41 @@
-export function getTime(num: number): Time {
- const hour = num % 60;
- const minute = Math.floor(num / 60);
+export const timeUtilities = {
+ serialize: (time: Time): number => {
+ return toMinutes(time);
+ },
+ deserialize: (inValue: number): Time => {
+ const hour = inValue % 60;
+ const minute = Math.floor(inValue / 60);
 
- return { hour, minute };
+ return { hour, minute, second: 0 };
+ },
+};
+
+export function toSeconds(time: Time): number {
+ const hourToSec = time.hour * 60 * 60;
+ const minuteToSec = time.minute * 60;
+ return hourToSec + minuteToSec + time.second;
+}
+
+export function toMinutes(time: Time): number {
+ const hourToMin = time.hour * 60;
+ const secondToMin = time.second / 60;
+ return hourToMin + time.minute + secondToMin;
+}
+
+export function toHours(time: Time): number {
+ const minuteToHour = time.minute / 60;
+ const secondToHour = time.second / 60 / 60;
+ return time.hour + minuteToHour + secondToHour;
+}
+
+export function getTotalSeconds(from: Time, to: Time): number {
+ return toSeconds(from) - toSeconds(to);
 }
 
-export function getTimeNumber(time: Time): number {
- return time.hour * 60 + time.minute;
+export function getTotalMinutes(from: Time, to: Time): number {
+ return toMinutes(to) - toMinutes(from);
 }
 
-export function getTimeNum(hour: number, minute: number): number {
- return getTimeNumber({ hour, minute });
+export function getTotalHours(from: Time, to: Time): number {
+ return toHours(from) - toHours(to);
 }