on new paste modal

1 files changed, 69 insertions, 0 deletions

diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
new file mode 100644
index 0000000..75c28a8
--- /dev/null
+++ b/frontend/src/components/modals/PasteModal.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Modal from 'react-modal';
+import { LeftPad, ModalHeader, RightPad } from './shared'
+import { useHistory } from 'react-router-dom';
+import { PasteURLInput } from '../Inputs'
+import { useClipboard } from 'use-clipboard-copy';
+
+const modalStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '500px',
+        height: '250px',
+        border: '1px solid #11111188'
+    }
+};
+
+const PasteModal = (props) => {
+    const history = useHistory();
+    const fullURL = `${window.location.href}${props.hash}`;
+    const clipboard = useClipboard({ copiedTimeout: 3000 });
+    Modal.setAppElement('body');
+
+    const redir = () => {
+        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>
+                        <PasteURLInput 
+                            id="paste_modal"
+                            fullURL={fullURL} />
+                        <input 
+                            hidden
+                            type="text"
+                            value={fullURL} 
+                            readOnly
+                            ref={clipboard.target} />
+                    </RightPad>
+                <LeftPad>
+                    <button 
+                        className="lt-button lt-shadow lt-hover"
+                        type="submit">
+                            view
+                    </button>
+                    <button 
+                        className="lt-button lt-shadow lt-hover"
+                        type="button" 
+                        onClick={clipboard.copy}>
+                            {clipboard.copied ? 'copied' : 'copy url'}
+                    </button>
+                </LeftPad>
+            </form>
+        </Modal>
+    );
+}
+
+export default PasteModal
\ No newline at end of file