import { Todo, UserWithTodos } from '@homeman/models.ts' import { JSX } from 'preact' import { Button } from '@homeman/components/Button.tsx' import { Avatar } from '@homeman/components/Avatar.tsx' import { CheckBadgeSolid, CheckCircleMiniSolid, CheckCircleSolid, CheckMiniSolid, ChevronDownMiniSolid, TrashSolid, } from 'preact-heroicons' export interface Props { user: UserWithTodos onNewButtonClicked: JSX.MouseEventHandler } export function TodoList( { onNewButtonClicked, user: { avatarUrl, name, color, ...user } }: Props, ) { const doneTodos = user.assignedTodos.filter((t) => t.doneAt != null) const inProgressTodos = user.assignedTodos.filter((t) => t.doneAt == null) const todoItem = ( { id, doneAt, className, description, virtual }: & Pick & { className?: string virtual?: boolean }, ) => (
  • {description}
    {(virtual || doneAt != null) ? '' : ( )} {(!virtual && doneAt != null) ? ( ) : ''} {virtual ? '' : ( )}
  • ) return (
    {name}
      {inProgressTodos.length < 1 ? todoItem({ id: '', doneAt: null, description: 'All clear! 🎉', className: 'text-center', virtual: true, }) : inProgressTodos.map(todoItem)}
    {doneTodos.length > 0 ? (
    +{doneTodos.length} completed todos
      {doneTodos.map(todoItem)}
    ) : ''}
    ) }