Improve data pipeline

src/components/Visualizer.tsx

@@ -1,16 +1,90 @@
+import { RetireRefreshRate, RetireTotalMoneyKey } from "@/constants";
 import { clamp } from "@/utilities";
-import {
- useLiveTime,
- useSaveData,
- useStatistics,
- useTotalMoney,
-} from "@/utilities/hooks";
+import { useSaveData } from "@/utilities/hooks";
 import { getTotalHours } from "@/utilities/time";
 import { Group, Progress, Space, Text, Title } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent } from "react";
+import { useDocumentTitle, useInterval, useLocalStorage } from "@mantine/hooks";
+import { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
+export function useTotalMoney(salary: number, currentPercent: number) {
+ const [percent, setPercent] = useState(currentPercent);
+
+ const [total, setTotal] = useLocalStorage<number>({
+ key: RetireTotalMoneyKey,
+ defaultValue: 0,
+ });
+
+ useEffect(() => {
+ if (currentPercent !== percent) {
+ const delta = clamp(
+ currentPercent - percent,
+ 0,
+ Number.POSITIVE_INFINITY
+ );
+ setPercent(currentPercent);
+ setTotal((v) => v + delta * salary);
+ }
+ }, [currentPercent, percent, salary, setTotal]);
+
+ return total;
+}
+
+export function useLiveTime() {
+ const [time, setTime] = useState<Time>(() => {
+ const date = new Date();
+ return {
+ hour: date.getHours(),
+ minute: date.getMinutes(),
+ second: date.getSeconds(),
+ };
+ });
+
+ const interval = useInterval(() => {
+ // TODO: optimize this
+ const date = new Date();
+ setTime({
+ hour: date.getHours(),
+ minute: date.getMinutes(),
+ second: date.getSeconds(),
+ });
+ }, RetireRefreshRate);
+
+ useEffect(() => {
+ interval.start();
+ return interval.stop;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return time;
+}
+
+export function useStatistics() {
+ const saveData = useSaveData();
+
+ return useMemo(() => {
+ const { workTime, breaks, salary, working_days } = saveData;
+
+ const salaryPerDay = salary / working_days;
+
+ const workingHours = getTotalHours(workTime.start, workTime.end);
+
+ const totalBreakHours = breaks.reduce(
+ (total, b) => total + getTotalHours(b.start, b.end),
+ 0
+ );
+
+ const effectiveWorkingHours = workingHours - totalBreakHours;
+
+ return {
+ salaryPerDay,
+ workingHours,
+ effectiveWorkingHours,
+ totalBreakHours,
+ };
+ }, [saveData]);
+}
+
 const Visualizer: FunctionComponent = () => {
  const saveData = useSaveData();
  const { salaryPerDay, workingHours } = useStatistics();
@@ -19,17 +93,19 @@ const Visualizer: FunctionComponent = () => {
  const time = useLiveTime();
 
  const estimatedHours = getTotalHours(workTime.start, time);
- const estimatedPercentage = clamp(estimatedHours / workingHours, 0, 1);
- const percentStr = `${(estimatedPercentage * 100).toFixed(4)}%`;
+ const percentage = clamp(estimatedHours / workingHours, 0, 1);
+ const percentStr = `${(percentage * 100).toFixed(4)}%`;
 
  const { t } = useTranslation("visualizer");
 
- const isBeforeWorkTime = estimatedPercentage <= 0.0;
- const isAfterWorkTime = estimatedPercentage >= 1.0;
+ const isBeforeWorkTime = percentage <= 0.0;
+ const isAfterWorkTime = percentage >= 1.0;
  const isWorkTime = !isBeforeWorkTime && !isAfterWorkTime;
 
- const collectedMoney = estimatedPercentage * salaryPerDay;
- const totalCollectedMoney = useTotalMoney(collectedMoney);
+ const collectedMoney = percentage * salaryPerDay;
+
+ // TODO: Convert to Context if we want to access this from other components
+ const totalCollectedMoney = useTotalMoney(salaryPerDay, percentage);
 
  useDocumentTitle(
  t(isAfterWorkTime ? "after-work-doc-title" : "doc-title", {
@@ -38,12 +114,6 @@ const Visualizer: FunctionComponent = () => {
  })
  );
 
- // useDocumentTitle(
- // `💰 ${collectedMoney.toFixed(2)} ${
- // isAfterWorkTime ? t("after-work-title-suffix") : currency
- // }`
- // );
-
  const descriptionKey = isAfterWorkTime
  ? "after-work-salary-desc"
  : "salary-desc";
@@ -59,7 +129,7 @@ const Visualizer: FunctionComponent = () => {
  size="lg"
  striped={isWorkTime}
  animate={isWorkTime}
- value={estimatedPercentage * 100.0}
+ value={percentage * 100.0}
  ></Progress>
  <Space h="xl"></Space>
  <Text>

src/constants.ts

@@ -3,6 +3,7 @@ export const RetireVersion = "0.0.1-beta";
 export const RetireRefreshRate = 1000;
 
 export const RetireSaveDataKey = "retire-save-data";
+export const RetireTotalMoneyKey = "retire-total-money";
 
 export const RetireCurrencyList: string[] = ["CNY", "USD", "CAN", "EUR", "BTC"];
 export const RetireFallbackCurrency = RetireCurrencyList[0];

src/utilities/hooks.ts

@@ -1,9 +1,5 @@
-import { RetireRefreshRate } from "@/constants";
-import { useInterval, useLocalStorage } from "@mantine/hooks";
-import { useContext, useEffect, useMemo, useState } from "react";
-import { clamp } from ".";
+import { useContext } from "react";
 import { SaveDataContext, SaveDataMutationContext } from "./context";
-import { getTotalHours } from "./time";
 
 export function useSaveData() {
  return useContext(SaveDataContext);
@@ -12,75 +8,3 @@ export function useSaveData() {
 export function useSaveDataMutation() {
  return useContext(SaveDataMutationContext);
 }
-
-export function useTotalMoney(collected: number) {
- const [current, setCurrent] = useState(collected);
- const [total, setTotal] = useLocalStorage<number>({
- key: "retire-total-money",
- defaultValue: 0,
- });
- useEffect(() => {
- if (current !== collected) {
- const delta = clamp(collected - current, 0, Number.POSITIVE_INFINITY);
- setCurrent(collected);
- setTotal((v) => v + delta);
- }
- }, [collected, current, setTotal]);
-
- return total;
-}
-
-export function useLiveTime() {
- const [time, setTime] = useState<Time>(() => {
- const date = new Date();
- return {
- hour: date.getHours(),
- minute: date.getMinutes(),
- second: date.getSeconds(),
- };
- });
-
- const interval = useInterval(() => {
- // TODO: optimize this
- const date = new Date();
- setTime({
- hour: date.getHours(),
- minute: date.getMinutes(),
- second: date.getSeconds(),
- });
- }, RetireRefreshRate);
-
- useEffect(() => {
- interval.start();
- return interval.stop;
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- return time;
-}
-
-export function useStatistics() {
- const saveData = useSaveData();
-
- return useMemo(() => {
- const { workTime, breaks, salary, working_days } = saveData;
-
- const salaryPerDay = salary / working_days;
-
- const workingHours = getTotalHours(workTime.start, workTime.end);
-
- const totalBreakHours = breaks.reduce(
- (total, b) => total + getTotalHours(b.start, b.end),
- 0
- );
-
- const effectiveWorkingHours = workingHours - totalBreakHours;
-
- return {
- salaryPerDay,
- workingHours,
- effectiveWorkingHours,
- totalBreakHours,
- };
- }, [saveData]);
-}