Merge pull request #6 from verbiricha/note-creator

Note creator improvement

src/Text.js

@@ -29,7 +29,7 @@ export function extractLinks(fragments) {
                                 }
                             }
                         } else {
-                            return <a href={url}>{url.toString()}</a>
+                            return <a key={url} href={url}>{url.toString()}</a>
                         }
                     } catch (e) {
                         console.warn(`Not a valid url: ${a}`);

src/element/NoteCreator.css

@@ -1,8 +1,12 @@
 .note-creator {
     margin-bottom: 10px;
+    background-color: #333;
+    border-radius: 10px;
 }
 
 .note-creator textarea {
+    resize: none;
+    outline: none;
     min-height: 40px;
     max-height: 300px;
     border-radius: 10px 10px 0 0;
@@ -11,8 +15,24 @@
 }
 
 .note-creator .actions {
+    width: 100%;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+}
+
+.note-creator .attachment {
     cursor: pointer;
     padding: 5px 10px;
-    border-radius: 0 0 10px 10px;
+    border-radius: 10px;
-    background-color: #222;
+}
+
+.note-creator .attachment .error {
+    font-weight: normal;
+    margin-right: 5px;
+    font-size: 14px;
+}
+
+.note-creator .btn {
+    border-radius: 20px;
+    font-weight: bold;
 }

src/element/NoteCreator.js

@@ -28,28 +28,34 @@ export function NoteCreator(props) {
     }
 
     async function attachFile() {
-        let file = await openFile();
+        try {
-        let rsp = await VoidUpload(file);
+          let file = await openFile();
-        let ext = file.name.match(FileExtensionRegex)[1];
+          let rsp = await VoidUpload(file);
+          let ext = file.name.match(FileExtensionRegex)[1];
 
-        // extension tricks note parser to embed the content
+          // extension tricks note parser to embed the content
-        let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
+          let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
 
-        setNote(n => `${n}\n${url}`);
+          setNote(n => `${n}\n${url}`);
+        } catch (error) {
+          setError(error?.message)
+        }
     }
 
     return (
         <>
             {replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
             <div className="flex note-creator">
-                <div className="flex f-col mr10 f-grow">
+                <div className="textarea flex f-col mr10 f-grow">
-                    <textarea placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
+                    <textarea className="textarea" placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
-                    <div className="actions">
+                    <div className="actions flex f-row">
-                        <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
+                        <div className="attachment flex f-row">
-                        {error.length > 0 ? <b className="error">{error}</b> : null}
+                            {error.length > 0 ? <b className="error">{error}</b> : null}
+                            <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
+                        </div>
+                        <div className="btn" onClick={() => sendNote()}>Send</div>
                     </div>
                 </div>
-                <div className="btn" onClick={() => sendNote()}>Send</div>
             </div>
         </>
     );