frontend/src/components/modals/PasteModal.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import React from 'react';
import Modal from 'react-modal';
import {LeftPad, ModalHeader, modalStyles, RightPad} from './shared'
import { useHistory } from 'react-router-dom';
import { Text } from '../Inputs'
import { useClipboard } from 'use-clipboard-copy';
import {Button} from "../Form/Button";

const PasteModal = (props) => {
    const history = useHistory();
    const fullURL = `${window.location.origin}/${props.hash}`;
    const clipboard = useClipboard({ copiedTimeout: 3000 });
    Modal.setAppElement('body');

    const redir = (e) => {
        e.preventDefault();
        const redirUrl = `/${props.hash}`
        history.push(redirUrl);
    }

    return (
        <Modal
            isOpen={props.hash !== ''}
            style={modalStyles}
            contentLabel="paste created"
        >
            <form onSubmit={redir}>
                <LeftPad>
                    <ModalHeader><span role="img" aria-label="success">📎&nbsp;</span>paste created</ModalHeader>
                </LeftPad>
                    <RightPad>
                        <Text
                            type="text"
                            value={fullURL} 
                            readOnly
                            ref={clipboard.target} />
                    </RightPad>
                <LeftPad>
                    <Button
                        type="submit">
                            view
                    </Button>
                    <Button
                        secondary
                        type="button" 
                        onClick={clipboard.copy}>
                            {clipboard.copied ? 'copied' : 'copy url'}
                    </Button>
                </LeftPad>
            </form>
        </Modal>
    );
}

export default PasteModal