initial commit

src/components/EditorControls.js

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { languageIds } from '../highlighting';
+import { gzip } from 'pako';
+import history from 'history/browser';
+import copy from 'copy-to-clipboard';
+
+export default function EditorControls({ code, language, setLanguage }) {
+  const [langMenuOpen, setLangMenuOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [recentlySaved, setRecentlySaved] = useState(false);
+
+  useEffect(() => {
+    setRecentlySaved(false);
+  }, [code, language])
+
+  function save() {
+    if (!code || recentlySaved) {
+      return;
+    }
+    setSaving(true);
+    saveToBytebin(code, language).then((pasteId) => {
+      setSaving(false);
+      setRecentlySaved(true);
+      history.replace({
+        pathname: pasteId,
+        hash: ''
+      });
+      copy(window.location.href);
+      document.title = 'paste | ' + pasteId;
+    });
+  }
+
+  function toggleLangMenu() {
+    setLangMenuOpen(!langMenuOpen);
+  }
+
+  function selectLanguage(e, language) {
+    e.stopPropagation();
+    setLangMenuOpen(false);
+    setLanguage(language);
+  }
+
+  return (
+    <header>
+      <div className="section">
+        <div className="button" onClick={save}>
+          {recentlySaved
+            ? '[link copied!]'
+            : saving ? '[saving...]' : '[save]'
+          }
+        </div>
+        <div className="button" onClick={toggleLangMenu}>
+          [language: {language}]
+          {langMenuOpen && (
+            <ul>  
+              {languageIds.map(id => <li key={id} onClick={e => selectLanguage(e, id)}>{id}</li>)}
+            </ul>
+          )}
+        </div>
+      </div>
+      <div className="section">
+        <a className="button" href="https://bytebin.lucko.me/" target="_blank" rel="noreferrer">[not pasting code?]</a>
+        <a className="button" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about paste]</a>
+      </div>
+    </header>
+  )
+}
+
+async function saveToBytebin(code, language) {
+  try {
+    const compressed = gzip(code);
+    const contentType = 'text/' + language;
+
+    const resp = await fetch('https://bytebin.lucko.me/post', {
+      method: 'POST',
+      headers: {
+        'Content-Type': contentType,
+        'Content-Encoding': 'gzip',
+        'Accept': 'application/json'
+      },
+      body: compressed
+    });
+
+    if (resp.ok) {
+      const json = await resp.json();
+      return json.key;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  return null;
+}