homeman-deno/islands/Routine.tsx

import { DailyPhase, DailyPhaseModel, Task, toPhase } from '@homeman/models.ts'
import { useSignal } from '@preact/signals'
import { excitement } from '@homeman/common.ts'

export interface Props {
	tasks: Task[]
}

interface TaskWithIndex extends Task {
	index: number
}

const phaseEmoji: Record<DailyPhase, string> = {
	Morning: '🌄',
	Midday: '🌞',
	Evening: '🌆',
	Bedtime: '🛌',
	Night: '🌙',
}

type TaskGroups = Record<DailyPhase, TaskWithIndex[]>

export function Routine(
	props: Props,
) {
	const tasks = useSignal(props.tasks)
	const currentPhase = useSignal(toPhase())
	const taskGroups: TaskGroups = {
		Morning: [],
		Midday: [],
		Evening: [],
		Bedtime: [],
		Night: [],
	}
	tasks.value.forEach((t, i) => taskGroups[t.phase].push({ ...t, index: i }))
	return (
		<>
			<nav class='flex overflow-x-scroll'>
				{DailyPhaseModel.options.map((phase) => (
					<button
						onClick={() => {
							currentPhase.value = phase
							console.log(currentPhase, phase)
						}}
						class={`p-4 shrink-0 grow border-b-2 text-lg ${
							currentPhase.value == phase
								? 'border-purple-500'
								: 'border-gray-500/20 hover:border-gray-500'
						}`}
					>
						{phaseEmoji[phase]} {phase}
					</button>
				))}
			</nav>
			<main class='flex flex-col overflow-x-scroll'>
				<ul>
					{taskGroups[currentPhase.value].map((
						task: TaskWithIndex,
					) => {
						const { emoji, description, doneAt, index } = task
						return (
							<li
								role='button'
								class={`text-lg cursor-pointer p-4 hover:bg-gray-500/20 ${
									doneAt ? 'line-through opacity-30 hover:bg-gray-500' : ''
								}`}
								onClick={async () => {
									tasks.value[index].doneAt = tasks.value[index].doneAt
										? null
										: new Date()
									tasks.value = [...tasks.value]
									if (tasks.value[index].doneAt) {
										excitement()
									}
									await (await fetch('/api/tasks', {
										method: 'PUT',
										body: JSON.stringify({
											...task,
											done: !!tasks.value[index].doneAt,
										}),
									})).json()
								}}
							>
								{emoji ? `${emoji.trim()} ` : ''}
								{description.trim()}
							</li>
						)
					})}
				</ul>
			</main>
		</>
	)
}