import React, { useEffect, useRef, useState } from 'react' import { Edit3, Save } from 'react-feather' import { Button, Card, CardBody, CardText, Form, FormGroup, Input, Popover, PopoverBody, PopoverHeader, Spinner, } from 'reactstrap' import { mutate } from 'swr' import { useUser } from '../../../utils/auth/useUser' import { fetcher } from '../../../utils/useFetch' import ToolTippedButton from '../ToolTippedButton' export default function Rename({ rootNode, nameChangedCallBack, disabled = false, }) { const { user } = useUser() const [popoverOpen, setPopoverOpen] = useState(false) const [spinnerDisplay, setSpinnerDisplay] = useState('d-none') const [name, setName] = useState() const [rev, setRev] = useState() const inputRef = useRef(null) const handleSubmit = async (event) => { event.preventDefault() setSpinnerDisplay('d-block') const { data: result, ok, status } = await fetcher( `/api/mindmaps`, user.token, 'PATCH', JSON.stringify({ name: name, _id: rootNode._id, _rev: rev, }) ) const options = { place: 'tr', autoDismiss: 7, } if (ok) { setRev(result._rev) mutate( [`/api/timeline/events?key=${rootNode._key}`, user.token], null, true ) options.message = 'Renamed mindmap!' options.type = 'success' setPopoverOpen(false) if (nameChangedCallBack) { nameChangedCallBack(name) } } else { options.message = `Failed to rename mindmap! - ${JSON.stringify( result || status )}` options.type = 'danger' } setSpinnerDisplay('d-none') if (window.notify) { window.notify(options) } } useEffect(() => { setName(rootNode.name) setRev(rootNode._rev) }, [rootNode]) useEffect(() => { if (popoverOpen && inputRef.current) { inputRef.current.focus() } }, [popoverOpen]) return ( <> <ToolTippedButton tooltip="Rename" className="ml-1" outline color={disabled ? 'secondary' : 'primary'} id="rename" disabled={disabled} > <Edit3 size={16} /> </ToolTippedButton> <Popover target="rename" isOpen={popoverOpen} toggle={() => setPopoverOpen(!popoverOpen)} boundariesElement={'rename'} placement={'bottom-end'} > <PopoverHeader> Rename <small>{rootNode.name}</small> </PopoverHeader> <PopoverBody> <Card> <CardBody> <CardText tag="div"> <Form onSubmit={handleSubmit} inline> <FormGroup className="mb-2 mr-sm-2 mb-sm-0"> <Input type="text" name="name" id="name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" required innerRef={inputRef} /> <Button className="ml-1" onSubmit={handleSubmit} color="primary" id="save" > <Save /> Save </Button> </FormGroup> <FormGroup className={spinnerDisplay}> <Spinner /> </FormGroup> </Form> </CardText> </CardBody> </Card> </PopoverBody> </Popover> </> ) }