import React from 'react' ; import { useFirestore } from 'react-redux-firebase' ; import { Todo } from './todosSlice' ; import { Box , BoxProps , Checkbox , Editable , EditableInput , EditablePreview , IconButton , ListItem , PseudoBox , Stack , Tooltip , useClipboard , useToast , } from '@chakra-ui/core/dist' ; type Props = Todo & BoxProps ; export const TodoItem = ( { description , id , isCompleted , ... rest } ) => { const firestore = useFirestore ( ) ; const toast = useToast ( ) ; const { onCopy , hasCopied } = useClipboard ( description ) ; type { string } const copyDescriptionLabel = hasCopied ? 'Copied to clipboard' : 'Copy description' ; param { string } id returns { firebase . firestore . DocumentReference < firebase . firestore . DocumentData > } const getDocRef = ( id ) => firestore . collection ( 'todos' ) . doc ( id ) ; param { string } id returns { Promise < void > } const handleDeleteTodo = async ( id ) => { try { await getDocRef ( id ) . delete ( ) ; } catch ( { code , message } ) { toast ( { status : 'error' , title : code , description : message , } ) ; } } ; param { string } id returns { Promise < void > } const handleToggleTodo = async ( id ) => { try { await getDocRef ( id ) . update ( { isCompleted : ! isCompleted } ) ; } catch ( { code , message } ) { toast ( { status : 'error' , title : code , description : message , } ) ; } } ; param { string } id param { string } description returns { Promise < void > } const handleEditTodo = async ( id , description ) => { try { await getDocRef ( id ) . update ( { description } ) ; } catch ( { code , message } ) { toast ( { status : 'error' , title : code , description : message , } ) ; } } ; return ( < > < ListItem role = { 'group' } width = { 'full' } alignItems = { 'center' } display = { 'flex' } fontSize = { 'lg' } fontWeight = { 'medium' } { ... rest } > < Stack isInline width = { 'full' } spacing = { 4 } align = { 'center' } > < Checkbox isChecked = { isCompleted } onChange = { ( ) => handleToggleTodo ( id ) } variantColor = { 'purple' } size = { 'lg' } / > < Editable defaultValue = { description } flex = { 1 } onSubmit = { ( value ) => handleEditTodo ( id , value ) } > < EditablePreview width = { 'full' } color = { isCompleted ? 'gray.500' : undefined } opacity = { isCompleted ? 0.4 : undefined } textDecor = { isCompleted ? 'line-through' : undefined } / > < EditableInput /> < /Editable> < PseudoBox ml = { 'auto' } opacity = { 0 } _groupHover = { { opacity : 1 } } _focusWithin = { { opacity : 1 } } transition = { 'all 250ms ease' } > < Stack isInline spacing = { 2 } > < Box > < Tooltip aria - label = { copyDescriptionLabel } label = { copyDescriptionLabel } placement = "bottom" fontSize = "xs" > < IconButton onClick = { onCopy } aria - label = { copyDescriptionLabel } icon = "copy" size = { 'sm' } / > < /Tooltip> < /Box> < Box > < Tooltip aria - label = { 'Delete todo' } label = { 'Delete todo' } placement = "bottom" fontSize = "xs" > < IconButton onClick = { ( ) => handleDeleteTodo ( id ) } aria - label = "Delete todo" icon = "close" size = { 'sm' } / > < /Tooltip> < /Box> < /Stack> < /PseudoBox> < /Stack> < /ListItem> < />); } ;