feat: adds reader mode

Public-Annotation-Network · Jul 24, 2020 · 8ae61c9 · 8ae61c9
1 parent 2908e55
commit 8ae61c9
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 23 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
 import './assets/styles/App.scss';
 
-import Modal from './Components/Modal';
+import Router from './Components/Router';
 import ModalProvider from './Contexts/ModalProvider';
 import React from 'react';
 
@@ -10,7 +10,7 @@ import React from 'react';
 function App() {
   return (
     <ModalProvider>
-      <Modal />
+      <Router />
     </ModalProvider>
   );
 }

diff --git a/src/Components/Modal.js → src/Components/PanWrapper.js b/src/Components/Modal.js → src/Components/PanWrapper.js
@@ -4,32 +4,16 @@ import { connectMetamask, signV4 } from '../services/ethereum'
 import Logo from '../images/logo'
 import { ModalContext } from '../Contexts/ModalProvider';
 
-const Modal = () => {
+const Reader = () => {
   const [web3Enabled, setWeb3Enabled] = useState(false)
   const [title, setTitle] = useState("nothing...")
 
-  // useEffect(() => {
-  //   window.addEventListener("message", (event) => {
-  //     setTitle(event.data)
-  //   }, false);
-  // }, [])
-
-
-  // useEffect(() => {
-  //   window.chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  //     console.log("GOT Message from the content script: " +
-  //       request.greeting);
-  //     // sendResponse({response: "Response from background script"});
-  //   });
-  // })
-
   return (
     <ModalContext.Consumer>
       {(props) => (
         <div id="modal" className="modal-window">
           <div className="modal-body">
             <div className="modal-content">
-              {/* <img src={logo} className="modal-content__logo"/> */}
               <div className="modal-content__logo">
                 <Logo />
                 <h3>{`What people are saying...`}</h3>
@@ -99,7 +83,7 @@ const Modal = () => {
   );
 };
 
-export default Modal;
+export default Reader;
 
 
 const Comment = ({ user, date, commentText }) => {

diff --git a/src/Components/Reader.js b/src/Components/Reader.js
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { connectMetamask, signV4 } from '../services/ethereum'
+
+import Logo from '../images/logo'
+import { ModalContext } from '../Contexts/ModalProvider';
+
+const Reader = ({setPage}) => {
+  const [web3Enabled, setWeb3Enabled] = useState(false)
+  const [title, setTitle] = useState("nothing...")
+
+  return (
+    <ModalContext.Consumer>
+      {(props) => (
+        <div id="modal" className="modal-window">
+          <div className="modal-body">
+            <div className="modal-content">
+              <div className="modal-content__logo">
+                <Logo />
+                <h3>{`Reading comments`}</h3>
+              </div>
+              <div className="modal-content__comments">
+                <Comment
+                  user="Joe cool"
+                  date="July 12"
+                  commentText="Do you know what this is? It's the world's smallest violin playing just for the waitresses."
+                />
+
+                <Comment
+                  user="Everyone, ever"
+                  date="July 13"
+                  commentText="May the Force be with you."
+                />
+                <Comment
+                  user="Punk"
+                  date="July 13"
+                  commentText="Go ahead, make my day."
+                />
+                <Comment
+                  user="Car Salesperson"
+                  date="July 13"
+                  commentText="I'm going to make him an offer he can't refuse."
+                />
+                <Comment
+                  user="Jane Doe"
+                  date="July 13"
+                  commentText="There's no place like home."
+                />
+                <Comment
+                  user="John Doe"
+                  date="July 13"
+                  commentText="You talking to me?"
+                />
+                <Comment
+                  user="Journalist"
+                  date="July 13"
+                  commentText="What we've got here is failure to communicate."
+                />
+                <Comment
+                  user="Billy boy"
+                  date="July 13"
+                  commentText="D-J-A-N-G-O. The D is silent."
+                />
+              </div>
+              <div className="modal-content__confirm">
+                <TerciaryButton
+                  label="Load more"
+                  onClick={()=> {}}
+                />
+                <PrimaryButton
+                  label="Create a comment"
+                  onClick={()=>setPage('writer')}
+                />
+              </div>
+
+            </div>
+          </div>
+        </div>
+      )}
+    </ModalContext.Consumer>
+  );
+};
+
+export default Reader;
+
+
+const Comment = ({ user, date, commentText }) => {
+  return (
+    <div className="text-comment">
+      <div className="header">
+        <p className="header__author small-text">{user}</p>
+        <p className="header__date small-text">{date}</p>
+      </div>
+      <div className="comment-body">
+        <p className="comment-body__text">{commentText}</p>
+      </div>
+    </div>
+  )
+}
+
+const PrimaryButton = ({ label = 'ok', onClick, disabled = false }) => {
+  return (
+    <button className="primary-button" disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  )
+}
+
+const TerciaryButton = ({ label = 'ok', onClick, disabled = false }) => {
+  return (
+    <button className="terciary-button" disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  )
+}
diff --git a/src/Components/Router.js b/src/Components/Router.js
@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react';
+import Reader from './Reader'
+import Writer from './Writer'
+
+const pages = {
+    reader: "reader",
+    writer: "writer"
+}
+
+const Router = () => {
+    const [page, setPage] = useState(pages.reader)
+
+    switch (page) {
+        case pages.reader: { return <Reader setPage={setPage} /> }
+        case pages.writer: { return <Writer setPage={setPage} /> }
+    }
+
+}
+
+export default Router
diff --git a/src/Components/Writer.js b/src/Components/Writer.js
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { connectMetamask, signV4 } from '../services/ethereum'
+
+import Logo from '../images/logo'
+import { ModalContext } from '../Contexts/ModalProvider';
+
+const Reader = ({ setPage }) => {
+  const [web3Enabled, setWeb3Enabled] = useState(false)
+  const [title, setTitle] = useState("nothing...")
+
+  return (
+    <ModalContext.Consumer>
+      {(props) => (
+        <div id="modal" className="modal-window">
+          <div className="modal-body">
+            <div className="modal-content">
+              <div className="modal-content__logo">
+                <Logo />
+                <h3>{`Comment Editor`}</h3>
+              </div>
+              <div className="modal-content__comment-editor">
+              <TerciaryButton
+                  label="< Back to reading"
+                  onClick={() => setPage('reader')}
+                />
+                <CommentEditor />
+              </div>
+              <div className="modal-content__confirm">
+                <PrimaryButton
+                  label="Comment"
+                  onClick={() => setPage('reader')}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </ModalContext.Consumer>
+  );
+};
+
+export default Reader;
+
+
+const CommentEditor = ({ }) => {
+  const [commentContent, setCommentContent] = useState('')
+  const updateCommentContent = (e) => {
+    setCommentContent(e.target.value)
+  }
+  return (
+    <div className="comment-editor">
+      <textarea className="comment-editor__input" value={commentContent} onChange={updateCommentContent} />
+    </div>
+  )
+}
+
+const PrimaryButton = ({ label = 'ok', onClick, disabled = false }) => {
+  return (
+    <button className="primary-button" disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  )
+}
+
+const TerciaryButton = ({ label = 'ok', onClick, disabled = false }) => {
+  return (
+    <button className="terciary-button" disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  )
+}
diff --git a/src/assets/styles/App.scss b/src/assets/styles/App.scss
@@ -16,13 +16,12 @@
     background: $primary-200;
     opacity: 0.9;
     width: 358px;
-    border-radius: 3px;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
     z-index: 9999;
     border: 1px solid #333748;
     padding: 20px;
     border: solid 3px $primary-300;
-    border-radius: 20px;
+    border-radius: $border-radius-large;
   }
 
   .modal-close-button {
@@ -44,6 +43,9 @@
       flex-direction: column;
       place-content: center;
     }
+    &__comment-editor {
+      margin-bottom: 20px;
+    }
   }
 
   .text-comment {
@@ -66,7 +68,7 @@
     background-color: $primary-300;
     color: $primary-200;
     padding: 8px 12px;
-    border-radius: 10px;
+    border-radius: $border-radius-standard;
     border: none;
     &:hover {
       padding: 5px 9px;
@@ -107,5 +109,19 @@
       margin-top: 0px;
     }
   }
+  .comment-editor{
+    height: 500px;
+    &__input {
+      width: 100%;
+      min-height: 150px;
+      padding: 10px;
+      background-color: $primary-250;
+      border-radius: $border-radius-standard;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
 }
 
diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
@@ -49,4 +49,10 @@
     p.copyright-text {
         font-size: 0.75em;
     }
+
+    textarea {
+        font-size: 1em;
+        font-family: "Roboto Mono", monospace;
+        color: $light-100;
+    }
 }
diff --git a/src/assets/styles/constants.scss b/src/assets/styles/constants.scss
@@ -1,5 +1,6 @@
 $primary-100: #BDD9BF;
 $primary-200: #2E4052;
+$primary-250: #3d5975;
 $primary-300: #FFC857;
 $primary-400: #FFFFFF;
 $primary-500: #412234;
@@ -10,5 +11,8 @@ $light-300: #ADAEAE;
 $light-200: #E3E5E7;
 $light-100: #FFFFFF;
 
+$border-radius-standard: 10px;
+$border-radius-large: 20px;
+