remove autofocus on main input

bthaile · Mar 26, 2020 · beca5a3 · beca5a3
1 parent 89fd5b7
commit beca5a3
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ npm i -S 3box-comments-react
 ```
 
 ### 2. Choose your authentication pattern
-Depending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:
+Depending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component.  Regardless of the context, the component must be passed either an ethereum provider or the user's box object before it mounts. Three acceptable authentication patterns and their respective props are discussed below in A-C:
 
 **A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**
 

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,5 +1,10 @@
 # Release Notes
 
+## v2.0.0 - 2020-03-26
+* chore: update 3box lib to 1.17.1
+* feat: output CSS instead of SCSS
+* feat: remove autofocus on main input
+
 ## v1.0.2 - 2020-02-14
 * chore: update 3box lib to 1.17.0
 

diff --git a/examples/Example.js b/examples/Example.js
@@ -16,7 +16,7 @@ class Example extends React.Component {
   }
 
   componentDidMount() {
-    // this.handleLogin();
+    this.handleLogin();
   }
 
   handleLogin = async () => {
@@ -34,6 +34,7 @@ class Example extends React.Component {
     const {
       box,
       myAddress,
+      isReady,
     } = this.state;
 
     return (
@@ -46,12 +47,12 @@ class Example extends React.Component {
             <div className="page_content">
               <p>
                 Your super cool dApp
-            </p>
+              </p>
             </div>
           </div>
 
           <div className="userscontainer">
-            {box && (
+            {isReady && (
               <Comments
                 spaceName='3boxtestcomments'
                 threadName='explicitNestLevel6'

diff --git a/examples/dist/bundle.js b/examples/dist/bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "3box-comments-react",
-  "version": "1.0.3-beta.2",
+  "version": "2.0.0",
   "description": "Comments component for decentralized applications by 3Box",
   "main": "./lib/index.js",
   "author": "3box.io",
@@ -67,7 +67,7 @@
     "babel-core": "7.0.0-bridge.0"
   },
   "dependencies": {
-    "3box": "^1.17.0",
+    "3box": "^1.17.1",
     "3id-resolver": "0.0.6",
     "@babel/runtime": "^7.6.0",
     "babel-core": "^7.0.0-bridge.0",

diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, memo } from 'react';
 import ProfileHover from 'profile-hover';
 import PropTypes from 'prop-types';
 import Linkify from 'react-linkify';
@@ -32,15 +32,12 @@ import '../css/Vote.css';
 class Comment extends Component {
   constructor(props) {
     super(props);
-    const { ethereum, loginFunction } = this.props;
-    const noWeb3 = (!ethereum || !Object.entries(ethereum).length) && !loginFunction;
 
     this.state = {
       loadingDelete: false,
       showControlsOnMobile: false,
       emojiPickerIsOpen: false,
       emojiFilter: '',
-      noWeb3,
     };
     this.upvote = () => { this.vote(1); }
     this.downvote = () => { this.vote(-1); }
@@ -56,8 +53,9 @@ class Comment extends Component {
       login,
       comment,
       thread,
+      noWeb3
     } = this.props;
-    const { disableVote, noWeb3 } = this.state;
+    const { disableVote } = this.state;
 
     if (noWeb3 || disableVote) return;
 
@@ -167,8 +165,8 @@ class Comment extends Component {
       login,
       updateComments,
       comment,
+      noWeb3
     } = this.props;
-    const { noWeb3 } = this.state;
 
     if (noWeb3) return;
 
@@ -251,6 +249,7 @@ class Comment extends Component {
       isNestedComment,
       showReply,
       toggleReplyInput,
+      noWeb3,
     } = this.props;
 
     const profilePicture = profile.ethAddr &&
@@ -415,11 +414,12 @@ class Comment extends Component {
                 hasAuthed={hasAuthed}
                 updateComments={updateComments}
                 showReply={showReply}
+                noWeb3={noWeb3}
                 toggleReplyInput={toggleReplyInput}
                 currentNestLevel={comment.message.nestLevel + 1}
                 grandParentId={comment.message.parentId}
                 parentId={comment.postId}
-                onSubmit={() => { this.setState({ showReply: false }) }}
+                onSubmit={() => { this.setState({ showReply: '' }) }}
                 isNestedInput
               />
             )}
@@ -494,6 +494,7 @@ Comment.propTypes = {
   ethereum: PropTypes.object,
   isLoading3Box: PropTypes.bool,
   isNestedComment: PropTypes.bool,
+  noWeb3: PropTypes.bool.isRequired,
   updateComments: PropTypes.func.isRequired,
   toggleReplyInput: PropTypes.func.isRequired,
   login: PropTypes.func.isRequired,

diff --git a/src/components/Dialogue.jsx b/src/components/Dialogue.jsx
@@ -34,7 +34,6 @@ class Dialogue extends Component {
       adminEthAddr,
       box,
       loginFunction,
-      openBox,
       currentUser3BoxProfile,
       ethereum,
       isLoading3Box,
@@ -44,6 +43,7 @@ class Dialogue extends Component {
       isNestedComment,
       toggleReplyInput,
       showReply,
+      noWeb3
     } = this.props;
 
     const { showCommentCount } = this.state;
@@ -77,7 +77,6 @@ class Dialogue extends Component {
                   useHovers={useHovers}
                   box={box}
                   loginFunction={loginFunction}
-                  openBox={openBox}
                   login={login}
                   currentUserAddr={currentUserAddr}
                   currentUser3BoxProfile={currentUser3BoxProfile}
@@ -91,6 +90,7 @@ class Dialogue extends Component {
                   isNestedComment={isNestedComment}
                   showReply={showReply}
                   toggleReplyInput={toggleReplyInput}
+                  noWeb3={noWeb3}
                 />
 
                 {(!!children_comments.length) && (
@@ -109,10 +109,10 @@ class Dialogue extends Component {
                     useHovers={useHovers}
                     login={login}
                     updateComments={updateComments}
-                    openBox={openBox}
                     hasAuthed={hasAuthed}
                     showReply={showReply}
                     toggleReplyInput={toggleReplyInput}
+                    noWeb3={noWeb3}
                     isNestedComment
                   />
                 )}
@@ -149,7 +149,6 @@ Dialogue.propTypes = {
   hasAuthed: PropTypes.bool,
   loginFunction: PropTypes.func,
 
-  openBox: PropTypes.func.isRequired,
 
   showCommentCount: PropTypes.number.isRequired,
   adminEthAddr: PropTypes.string.isRequired,
@@ -158,6 +157,7 @@ Dialogue.propTypes = {
   ethereum: PropTypes.object,
   isLoading3Box: PropTypes.bool,
   isNestedComment: PropTypes.bool,
+  noWeb3: PropTypes.bool.isRequired,
   updateComments: PropTypes.func.isRequired,
   login: PropTypes.func.isRequired,
   toggleReplyInput: PropTypes.func.isRequired,

diff --git a/src/components/Input.jsx b/src/components/Input.jsx
@@ -45,7 +45,7 @@ class Input extends Component {
 
   autoExpand = (field) => {
     var height = field.scrollHeight;
-    field.style.height = height + 'px';
+    field.style.height = (height - 2) + 'px';
   };
 
   componentWillUnmount() {
@@ -54,8 +54,7 @@ class Input extends Component {
   }
 
   handleCommentText = (event) => {
-    const { ethereum, loginFunction } = this.props
-    const noWeb3 = (!ethereum || !Object.entries(ethereum).length) && !loginFunction;
+    const { noWeb3 } = this.props;
     if (!noWeb3) this.setState({ comment: event.target.value });
   }
 
@@ -121,8 +120,7 @@ class Input extends Component {
     const {
       thread,
       updateComments,
-      loginFunction,
-      ethereum,
+      noWeb3,
       parentId,
       grandParentId,
       onSubmit,
@@ -133,16 +131,26 @@ class Input extends Component {
 
     const { comment, disableComment, isMobile } = this.state;
     const updatedComment = comment.replace(/(\r\n|\n|\r)/gm, "");
-    const noWeb3 = (!ethereum || !Object.entries(ethereum).length) && !loginFunction;
-
-    if (noWeb3) return;
-    if (disableComment || !updatedComment) return;
 
     this.inputRef.current.blur();
-    this.inputRef.current.style.height = isNestedInput ? '46px' : isMobile ? '64px' : '74px';
+    this.inputRef.current.style.height = isNestedInput ? '46px' : isMobile ? '64px' : '70px';
 
-    this.setState({ postLoading: true, comment: '' });
+    if (!thread || !Object.keys(thread).length){
+      console.log('Thread is empty')
+      return;
+    }
+
+    if (noWeb3) {
+      console.log('No web3')
+      return;
+    }
+
+    if (disableComment || !updatedComment) {
+      console.log('comment is empty or disabled')
+      return;
+    }
 
+    this.setState({ postLoading: true, comment: '' });
     await login();
 
     try {
@@ -171,17 +179,15 @@ class Input extends Component {
     const {
       currentUser3BoxProfile,
       currentUserAddr,
-      ethereum,
-      loginFunction,
       login,
       isLoading3Box,
       hasAuthed,
       box,
       showReply,
       toggleReplyInput,
+      noWeb3
     } = this.props;
 
-    const noWeb3 = (!ethereum || !Object.entries(ethereum).length) && !loginFunction;
     const updatedProfilePicture = currentUser3BoxProfile.image ? `https://ipfs.infura.io/ipfs/${currentUser3BoxProfile.image[0].contentUrl['/']}`
       : currentUserAddr && makeBlockie(currentUserAddr);
     const isBoxEmpty = !box || !Object.keys(box).length;
@@ -234,7 +240,7 @@ class Input extends Component {
           onFocus={this.handleLoggedInAs}
           onBlur={this.handleLoggedInAs}
           ref={this.inputRef}
-          autoFocus
+          // autoFocus
         />
 
         <button className={`input_send ${isMobile ? 'input_send-visible' : ''}`} onClick={isBoxEmpty ? () => {} : this.saveComment}>
@@ -295,9 +301,9 @@ Input.propTypes = {
   currentUserAddr: PropTypes.string,
   loginFunction: PropTypes.func,
   isLoading3Box: PropTypes.bool,
-  noWeb3: PropTypes.bool,
+  noWeb3: PropTypes.bool.isRequired,
   isNestedInput: PropTypes.bool,
-  showReply: PropTypes.bool,
+  showReply: PropTypes.string,
   hasAuthed: PropTypes.bool.isRequired,
   currentNestLevel: PropTypes.number,
   grandParentId: PropTypes.string,
@@ -315,6 +321,5 @@ Input.defaultProps = {
   currentUser3BoxProfile: {},
   currentUserAddr: null,
   ethereum: null,
-  noWeb3: false,
   isNestedInput: false,
 };