steffo/todocolors
steffo/todocolors
1
Fork 0
mirror of https://github.com/Steffo99/todocolors.git synced 2024-11-21 15:54:18 +00:00
Code Activity

autorefresh every 30 sec

Browse source
This commit is contained in:
Steffo 2024-09-13 18:52:46 +02:00
parent 6af857346a
commit 08614b0d69
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
2 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
todoblue/src/app/[lang]/board/[board]/(page)/(task)/TaskContainer.tsx
View file

@ -1,5 +1,6 @@
import {TaskImportance} from "@/app/[lang]/board/[board]/(api)/(task)"
import {TaskSimplifiedStatus} from "@/app/[lang]/board/[board]/(page)/(task)/TaskSimplifiedStatus"
import {useTimeDelta} from "@/app/[lang]/board/[board]/(page)/(task)/useTimeDelta"
import cn from "classnames"
import {ComponentPropsWithoutRef} from "react"
import style from "./TaskContainer.module.css"
@ -15,9 +16,7 @@ export type TaskContainerProps = {
export function TaskContainer({role, className, importance, deadline, status, ...props}: TaskContainerProps) {
const now = + new Date();
const delta = deadline === null ? null : deadline - now
const deltaAbs = delta === null ? null : Math.abs(delta)
const {delta, deltaAbs} = useTimeDelta(deadline ?? undefined, 30 * 1000)
const fullProps = {
className: cn({
@ -30,12 +29,12 @@ export function TaskContainer({role, className, importance, deadline, status, ..
[style.taskImportanceLow]: importance === TaskImportance.Low,
[style.taskImportanceLowest]: importance === TaskImportance.Lowest,
[style.taskDeadlineNone]: deadline === null,
[style.taskDeadlineHour]: deltaAbs !== null && deltaAbs < 60 * 60 * 1000,
[style.taskDeadlineDay]: deltaAbs !== null && 60 * 60 * 1000 <= deltaAbs && deltaAbs < 24 * 60 * 60 * 1000,
[style.taskDeadlineWeek]: deltaAbs !== null && 24 * 60 * 60 * 1000 <= deltaAbs && deltaAbs < 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineMonth]: deltaAbs !== null && deltaAbs >= 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineFuture]: delta !== null && delta >= 0,
[style.taskDeadlinePast]: delta !== null && delta < 0,
[style.taskDeadlineHour]: deltaAbs !== undefined && deltaAbs < 60 * 60 * 1000,
[style.taskDeadlineDay]: deltaAbs !== undefined && 60 * 60 * 1000 <= deltaAbs && deltaAbs < 24 * 60 * 60 * 1000,
[style.taskDeadlineWeek]: deltaAbs !== undefined && 24 * 60 * 60 * 1000 <= deltaAbs && deltaAbs < 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineMonth]: deltaAbs !== undefined && deltaAbs >= 7 * 24 * 60 * 60 * 1000,
[style.taskDeadlineFuture]: delta !== undefined && delta >= 0,
[style.taskDeadlinePast]: delta !== undefined && delta < 0,
[style.taskStatusNonExistent]: status === TaskSimplifiedStatus.NonExistent,
[style.taskStatusUnfinished]: status === TaskSimplifiedStatus.Unfinished,
[style.taskStatusInProgress]: status === TaskSimplifiedStatus.InProgress,

32
todoblue/src/app/[lang]/board/[board]/(page)/(task)/useTimeDelta.ts Normal file
View file

@ -0,0 +1,32 @@
import {useCallback, useEffect, useState} from "react"
export type UseTimeDelta = {
now?: number
delta?: number,
deltaAbs?: number,
refresh: () => void,
}
export function useTimeDelta(target?: number, refreshAfterMs?: number): UseTimeDelta {
const [now, setNow] = useState<number>(() => + new Date())
const refresh = useCallback(() => {
setNow(+new Date())
}, [])
const delta = target === undefined ? undefined : target - now
const deltaAbs = delta === undefined ? undefined : Math.abs(delta)
useEffect(() => {
if(refreshAfterMs) {
const timeout = setTimeout(refresh, refreshAfterMs)
return () => {
clearTimeout(timeout)
}
}
}, [refresh])
return {now, delta, deltaAbs, refresh}
}