import * as React from "react" ; import slugify from "slugify" ; import ClickOutside from "../ClickOutside/ClickOutside" ; import { state , dispatch , db } from "../../model" ; import { withRouter } from "react-router-dom" ; type Props = { history : any ; } ; const addBoard = async ( title , historyPush ) => { const user = await db . users . get ( state . userId ) ; const boardId = await db . boardsById . insert ( { title , lists : [ ] , users : [ state . userId ] , color : "blue" , } ) ; user . boards . push ( boardId ) ; await db . users . update ( state . userId , { boards : user . boards } ) ; state . currentBoardId = boardId ; dispatch ( redirectToBoard ) ( boardId , title , historyPush ) ; } ; const redirectToBoard = ( boardId , title , historyPush ) => { const urlSlug = slugify ( title , { lower : true } ) ; historyPush ( `/b/${ boardId }/${ urlSlug }` ) ; } ; function BoardAdder ( { history } ) { const [ localState , setLocalState ] = React . useState ( { isOpen : false , title : "" , } ) ; const { isOpen , title } = localState ; const toggleOpen = ( ) => { setLocalState ( { ... localState , isOpen : ! isOpen } ) ; } ; const handleChange = ( event ) => { setLocalState ( { ... localState , title : event . target . value } ) ; } ; const handleSubmit = ( event ) => { event . preventDefault ( ) ; if ( title === "" ) { return ; } dispatch ( addBoard ) ( title , history . push ) ; setLocalState ( { isOpen : false , title : "" } ) ; } ; const handleKeyDown = ( event ) => { if ( event . keyCode === 27 ) { setLocalState ( { ... localState , isOpen : false } ) ; } } ; return isOpen ? ( < ClickOutside handleClickOutside = { toggleOpen } > < form onSubmit = { handleSubmit } className = "board-adder" > < input autoFocus className = "submit-board-input" type = "text" value = { title } onKeyDown = { handleKeyDown } onChange = { handleChange } spellCheck = { false } / > < input type = "submit" value = "Create" className = "submit-board-button" disabled = { title === "" } /> < /form> < /ClickOutside>) : (<button onClick={toggleOpen} className="add-board-button"> Add a new board ... < /button>); } export default withRouter ( BoardAdder ) ;