Merge pull request #32 from oznekenzo/master

fix auth context b, add animation for all interactions

README.md

@@ -101,7 +101,7 @@ const MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxPro
         spaceName="mySpaceName"
         threadName="myThreadName"
         adminEthAddr={adminEthAddr}
-
+        ethereum={ethereum}
 
         // Required props for context A) & B)
         box={box}
@@ -110,9 +110,6 @@ const MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxPro
         // Required prop for context B)
         loginFunction={handleLogin}
 
-        // Required prop for context C)
-        ethereum={ethereum}
-
         // optional
         members={false}
         showCommentCount={10}
@@ -135,7 +132,7 @@ const MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxPro
 | `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|
 | `currentUserAddr`    | String (Ethereum Address)          |    | A & B, optional for C | The current user's Ethereum address. Passing this will help determine whether a user has delete access on each comment.  This prop will also let the component fetch that user's 3Box profile on component mount and render that data (profile picture) in the Comment input UI. |
 | `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to save a comment but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |
-| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|
+| `ethereum`    | Object        |  window.ethereum  | Always    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|
 | `members`    | Boolean       |  False   | Optional    | A boolean - `true` - to make the thread a members-only thread. Passing `false` will allow all users to post to the thread.  **Changing this setting after creating it will result in an entirely different thread** (see [Docs.3box.io](https://Docs.3box.io) for more info). |
 | `showCommentCount`    | Integer       |  30   | Optional    | The number of comments rendered in the UI by default on component mount and the number of additional comments revealed after clicking `Load more` in component. |
 | `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|

RELEASE-NOTES.md

@@ -1,5 +1,17 @@
 # Release Notes
 
+## v3.0.1 - 2020-05-01
+* fix: make ethereum prop required - for initial openThread
+* fix: allow empty box when commenting - necessary for passing loginFunction
+* fix: authenticate for actions
+* feat: add loading animation for all interactions that require login step
+
+## v2.0.3 - 2020-04-24
+* fix: openSpace and joinThread before posting to thread
+
+## v2.0.2 - 2020-04-14
+* fix: typescript typings by community members
+
 ## v2.0.1 - 2020-04-14
 * fix: must open space and get thread from joinThread from newly opened space
 

examples/Example.js

@@ -54,10 +54,13 @@ class Example extends React.Component {
           <div className="userscontainer">
             {isReady && (
               <Comments
+                // required props
                 spaceName='3boxtestcomments'
                 threadName='explicitNestLevel6'
                 adminEthAddr="0x2a0D29C819609Df18D8eAefb429AEC067269BBb6"
+                ethereum={window.ethereum}
 
+                loginFunction={this.handleLogin}
                 box={box}
                 currentUserAddr={myAddress}
               />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "3box-comments-react",
-  "version": "2.0.1",
+  "version": "3.0.1",
   "description": "Comments component for decentralized applications by 3Box",
   "main": "./lib/index.js",
   "author": "3box.io",

sass/Footer.scss

@@ -6,6 +6,7 @@
   align-items: center;
   margin-bottom: 80px;
   width: 100%;
+  margin-top: 38px;
 }
 
 .footer_text {

src/components/Comment.jsx

@@ -1,4 +1,4 @@
-import React, { Component, memo } from 'react';
+import React, { Component } from 'react';
 import ProfileHover from 'profile-hover';
 import PropTypes from 'prop-types';
 import Linkify from 'react-linkify';
@@ -34,7 +34,7 @@ class Comment extends Component {
     super(props);
 
     this.state = {
-      loadingDelete: false,
+      loadingPost: false,
       showControlsOnMobile: false,
       emojiPickerIsOpen: false,
       emojiFilter: '',
@@ -47,39 +47,42 @@ class Comment extends Component {
     this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button');
   }
 
+  handleLoadingState = () => this.setState({ loadingPost: !this.state.loadingPost });
+
   vote = async (direction) => {
     const {
       updateComments,
       login,
       comment,
-      thread,
+      hasAuthed,
       noWeb3
     } = this.props;
     const { disableVote } = this.state;
 
     if (noWeb3 || disableVote) return;
 
-    await login();
+    this.setState({ loadingPost: true });
+    if (!hasAuthed) await login();
 
     try {
       const myVote = this.getMyVote();
       if (myVote) {
         if (myVote.message.data === direction) {
           // undo vote
-          await thread.deletePost(myVote.postId);
+          await this.props.thread.deletePost(myVote.postId);
         } else {
           // re-vote
-          await thread.deletePost(myVote.postId);
+          await this.props.thread.deletePost(myVote.postId);
           const message = encodeMessage("vote", direction, comment.postId);
-          await thread.post(message);
+          await this.props.thread.post(message);
         }
       } else {
         const message = encodeMessage("vote", direction, comment.postId);
-        await thread.post(message);
+        await this.props.thread.post(message);
       }
 
       await updateComments();
-      this.setState({ postLoading: false });
+      this.setState({ loadingPost: false });
     } catch (error) {
       console.error('There was an error saving your vote', error);
     }
@@ -90,17 +93,16 @@ class Comment extends Component {
     const {
       login,
       hasAuthed,
-      thread,
     } = this.props;
 
     if (!hasAuthed) {
-      this.setState({ loadingDelete: true });
+      this.setState({ loadingPost: true });
       await login();
     }
 
     try {
-      this.setState({ loadingDelete: false });
-      await thread.deletePost(commentId);
+      this.setState({ loadingPost: false });
+      await this.props.thread.deletePost(commentId);
     } catch (error) {
       console.error('There was an error deleting your comment', error);
     }
@@ -166,12 +168,15 @@ class Comment extends Component {
       updateComments,
       comment,
       noWeb3,
-      thread
+      hasAuthed,
     } = this.props;
 
+    this.setState({ loadingPost: true });
+
     if (noWeb3) return;
 
-    await login();
+    if (!hasAuthed) await login();
+
     try {
       console.log("react with emoji", emoji);
       const myReactions = this.getMyReactions();
@@ -182,16 +187,16 @@ class Comment extends Component {
           console.log("ignore because you already reacted with this emoji", emoji);
         } else {
           const message = encodeMessage("reaction", emoji, comment.postId);
-          await thread.post(message);
+          await this.props.thread.post(message);
           this.setState({})
         }
       } else {
         const message = encodeMessage("reaction", emoji, comment.postId);
-        await thread.post(message);
+        await this.props.thread.post(message);
       }
 
       await updateComments();
-      this.setState({ postLoading: false });
+      this.setState({ loadingPost: false });
     } catch (error) {
       console.error('There was an error saving your reaction', error);
     }
@@ -220,7 +225,7 @@ class Comment extends Component {
 
   render() {
     const {
-      loadingDelete,
+      loadingPost,
       emojiPickerIsOpen,
       showControlsOnMobile,
     } = this.state;
@@ -322,10 +327,10 @@ class Comment extends Component {
                         )}
                       </div>
 
-                      {loadingDelete && <SVG className="comment_loading" src={Loading} alt="Loading" />}
+                      {loadingPost && <SVG className="comment_loading" src={Loading} alt="Loading" />}
 
                       {/* hasThread */}
-                      {(!loadingDelete && profile.ethAddr) && (
+                      {(!loadingPost && profile.ethAddr) && (
                         <div className="comment_content_context_main_user_delete">
                           <button
                             onClick={(e) => this.deleteComment(comment.postId, e)}
@@ -389,18 +394,20 @@ class Comment extends Component {
                         parentId={comment.postId}
                         reactions={reactions}
                         profiles={profiles}
+                        hasAuthed={hasAuthed}
                         toggleEmojiPicker={this.toggleEmojiPicker}
                         renderEmojiPopup={this.renderEmojiPopup}
                         addReaction={this.addReaction}
                         getMyReactions={this.getMyReactions}
+                        handleLoadingState={this.handleLoadingState}
                       />
                     )}
                   </div>
                 )}
               </div>
             </div>
 
-            {(!loadingDelete && comment.message.nestLevel < REPLIABLE_COMMENT_LEVEL_MAX && showReply === comment.postId) && (
+            {(!loadingPost && comment.message.nestLevel < REPLIABLE_COMMENT_LEVEL_MAX && showReply === comment.postId) && (
               <Input
                 currentUserAddr={currentUserAddr}
                 currentUser3BoxProfile={currentUser3BoxProfile}

src/components/Dialogue.jsx

@@ -43,7 +43,7 @@ class Dialogue extends Component {
       isNestedComment,
       toggleReplyInput,
       showReply,
-      noWeb3
+      noWeb3,
     } = this.props;
 
     const { showCommentCount } = this.state;

src/components/Input.jsx

@@ -60,13 +60,12 @@ class Input extends Component {
 
   searchEnter = (event) => {
     const { comment, isMobile } = this.state;
-    const { box } = this.props;
+    const { isLoading } = this.props;
     const updatedComment = comment.replace(/(\r\n|\n|\r)/gm, "");
-    const isBoxEmpty = !box || !Object.keys(box).length;
 
-    if (event.keyCode === 13 && !event.shiftKey && updatedComment && !isMobile && !isBoxEmpty) {
+    if (event.keyCode === 13 && !event.shiftKey && updatedComment && !isMobile && !isLoading) {
       this.saveComment();
-    } else if (event.keyCode === 13 && !event.shiftKey && !isMobile && (isBoxEmpty || !updatedComment)) {
+    } else if (event.keyCode === 13 && !event.shiftKey && !isMobile && !updatedComment) {
       event.preventDefault();
     }
   }
@@ -126,6 +125,7 @@ class Input extends Component {
       login,
       isNestedInput,
       currentNestLevel,
+      hasAuthed
     } = this.props;
 
     const { comment, disableComment, isMobile } = this.state;
@@ -137,7 +137,7 @@ class Input extends Component {
     if (disableComment || !updatedComment) return console.log('comment is empty or disabled')
 
     this.setState({ postLoading: true, comment: '' });
-    await login();
+    if (!hasAuthed) await login();
 
     try {
       const grandParentIdToUse = currentNestLevel === 2 && grandParentId;
@@ -293,6 +293,7 @@ Input.propTypes = {
   isNestedInput: PropTypes.bool,
   showReply: PropTypes.string,
   hasAuthed: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
   currentNestLevel: PropTypes.number,
   grandParentId: PropTypes.string,
 

src/components/Reactions.jsx

@@ -8,7 +8,6 @@ import {
   orderReactionsChronologically,
 } from '../utils';
 
-import EmojiIcon from './Emoji/EmojiIcon';
 import '../css/PopupWindow.css';
 import '../css/Reactions.css';
 
@@ -27,11 +26,14 @@ class Reactions extends Component {
   }
 
   deleteReaction = async (reaction) => {
-    const { login, thread } = this.props;
+    const { login, hasAuthed, handleLoadingState } = this.props;
+
+    handleLoadingState();
 
     try {
-      await login();
-      await thread.deletePost(reaction.postId);
+      if (!hasAuthed) await login();
+      await this.props.thread.deletePost(reaction.postId);
+      handleLoadingState();
     } catch (error) {
       console.error('There was an error deleting one reaction', error);
     }
@@ -131,6 +133,8 @@ Reactions.propTypes = {
   renderEmojiPopup: PropTypes.func.isRequired,
   addReaction: PropTypes.func.isRequired,
   getMyReactions: PropTypes.func.isRequired,
+  handleLoadingState: PropTypes.func.isRequired,
+  hasAuthed: PropTypes.bool.isRequired,
   reactions: PropTypes.array,
   profiles: PropTypes.object,
 };