more grooviness!

Author: dkent600

src/actions/profilesActions.ts

@@ -24,7 +24,9 @@ let unauthorizedBox: typeof Box;
 let didResolver: any;
 
 export async function initialize3Box(): Promise<void> {
+  console.log("create");
   unauthorizedBox = await Box.create();
+  console.log("getIPFS");
   const ipfs = await Box.getIPFS();
   const threeboxDidResolver = getResolver(ipfs);
   didResolver = new Resolver(threeboxDidResolver);
@@ -62,7 +64,7 @@ async function get3Box(accountAddress: Address, dispatch: any, state: any, withS
     }
 
     await assert3Box();
-
+    console.log("auth");
     await unauthorizedBox.auth([], { address: accountAddress, provider: web3Provider });
     await unauthorizedBox.syncDone;
     /**

src/components/Account/Account.scss

@@ -40,19 +40,11 @@ a.detailView {
 
   .avatar {
     z-index: 1;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     background-color: rgba(255, 255, 255, 0);
     transition: all 0.25s ease;
 
     img {
       transition: all 0.25s ease;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
     }
   }
 
@@ -138,16 +130,6 @@ a.accountName {
 .targetAccount:hover {
   z-index: 10000000;
 
-  .avatar {
-    width: 80px;
-    height: 80px;
-
-    img {
-      width: 50px;
-      height: 50px;
-    }
-  }
-
   .accountInfo {
     opacity: 1;
     top: 0px;

src/components/Dao/DaoLandingPage.scss

@@ -88,33 +88,51 @@
           border: $disabled-button-border;
           cursor: not-allowed;
         }
+
+        img.loading {
+          position: relative;
+          top: 5px;
+          width: 18px;
+          margin-left: 6px;
+        }
       }
     }
 
     .threeboxposts {
       display: flex;
       flex-direction: column;
       .threeboxpost {
-        margin-bottom: 20px;
+        margin-bottom: 26px;
+        display: flex;
 
-        .author {
-          display: inline-block;
-          margin-right: 12px;
+        .column1 {
+          margin-right: 10px;
         }
 
-        .createdOn {
-          display: inline-block;
-          font-size: 12px;
-        }
-
-        .message {
-          padding: 20px;
+        .column2 {
+          display: flex;
+          flex-direction: column;
+
+          .info {
+            .author {
+              display: inline-block;
+              margin-right: 8px;
+            }
+            .createdOn {
+              font-size: 12px;
+              display: inline-block;
+            }
+          }
+
+          .message {
+            padding-bottom: 0; // stub
+          }
         }
       }
     }
 
     .threeboxCommentInput {
-      margin-bottom: 20px;
+      margin-bottom: 26px;
 
       .commentsInput {
         width: 100%;
@@ -131,7 +149,9 @@
         white-space: nowrap;
 
         &:hover {
-          opacity: 0.8;
+          background-color: $gray-1;
+          color: $white;
+          border-color: transparent;
         }
       }
     }

src/components/Dao/DaoLandingPage.tsx

@@ -14,9 +14,10 @@ import { connect } from "react-redux";
 import { I3BoxThread, I3BoxThreadPost, IProfilesState } from "reducers/profilesReducer";
 import { IRootState } from "reducers";
 import { enableWalletProvider, getAccountIsEnabled } from "arc";
-import { showNotification } from "reducers/notifications";
+import { NotificationStatus, showNotification } from "reducers/notifications";
 import AccountPopup from "components/Account/AccountPopup";
 import AccountProfileName from "components/Account/AccountProfileName";
+import { SortOrder, SortService } from "lib/sortService";
 
 type IExternalProps = {
   daoState: IDAOState;
@@ -35,6 +36,7 @@ interface IExternalStateProps {
 interface IStateProps {
   threeboxPosts?: Array<I3BoxThreadPost>;
   joinedThread?: I3BoxThread;
+  joiningThread?: boolean;
 }
 
 const mapDispatchToProps = {
@@ -62,6 +64,7 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
     this.state = {
       threeboxPosts: null,
       joinedThread: null,
+      joiningThread: false,
     };
   }
 
@@ -70,6 +73,10 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
     return joinThread(this.props.daoState.id, this.props.currentAccountAddress, this.props.profiles);
   }
 
+  private getPosts = async () => {
+    return (await getPosts(this.props.daoState.id)).sort((a, b) =>
+    { return SortService.evaluateDateTime(a.createDate, b.createDate, SortOrder.DESC); });
+  }
   public async componentDidMount(): Promise<void> {
     Analytics.track("Page View", {
       "Page Name": Page.DAOLanding,
@@ -83,14 +90,14 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
       subcribeToThread(thread, this.handleNewPosts);
       state.joinedThread = thread;
     }
-    const posts = await getPosts(this.props.daoState.id);
+    const posts = await this.getPosts();
     state.threeboxPosts = posts;
 
     this.setState(state);
   }
 
   private handleNewPosts = async () => {
-    const posts = await getPosts(this.props.daoState.id);
+    const posts = await this.getPosts();
     this.setState({ threeboxPosts: posts });
   }
 
@@ -108,19 +115,34 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
   }
 
   private startDiscussion = async () => {
-    if (!this.state.joinedThread) {
-      if (!await enableWalletProvider({ showNotification: this.props.showNotification })) {
-        return;
-      } else {
-        await waitUntilTrue(() => !!this.props.currentAccountAddress && getAccountIsEnabled(), 60000);
-        await this.props.threeboxLogin(this.props.currentAccountAddress);
-        await waitUntilTrue(() => !!this.props.profiles.threeBoxSpace, 60000);
-        const thread = await this.get3BoxThread();
-        if (thread) {
-          subcribeToThread(thread, this.handleNewPosts);
-          this.setState({ joinedThread: thread });
+    let joining = false;
+    try {
+      if (!this.state.joinedThread) {
+        joining = true;
+        this.setState({ joiningThread: true });
+        await waitUntilTrue(() => this.state.joiningThread, 10000);
+
+        if (!await enableWalletProvider({ showNotification: this.props.showNotification })) {
+          return;
+        } else {
+          await waitUntilTrue(() => !!this.props.currentAccountAddress && getAccountIsEnabled(), 15000);
+          await this.props.threeboxLogin(this.props.currentAccountAddress);
+          await waitUntilTrue(() => !!this.props.profiles.threeBoxSpace, 30000);
+          const thread = await this.get3BoxThread();
+          if (thread) {
+            subcribeToThread(thread, this.handleNewPosts);
+            this.setState({ joinedThread: thread });
+          } else {
+            showNotification(NotificationStatus.Failure, "Unable to join the conversation");
+          }
         }
       }
+    } catch (ex) {
+      showNotification(NotificationStatus.Failure, `Unable to join the conversation: ${ex?.message ?? "unknown error"}`);
+    } finally {
+      if (joining) {
+        this.setState({ joiningThread: false });
+      }
     }
   }
 
@@ -173,8 +195,10 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
           <div className={css.headerText}>Discuss {daoState.name}</div>
           <div className={css.discussionWarning}>IMPORTANT! We are moving from Disqus to 3Box for commenting! Before long, all the Disqus comments will disappear. So for a short time we are making both systems available here so that you may copy important comments from Disqus into 3Box, before the Disqus comments all disappear.</div>
           <div className={css.startDiscussionButton}>
-            {((this.state.threeboxPosts !== null) && (!this.state.threeboxPosts.length || !this.state.joinedThread)) ?
-              <a onClick={this.startDiscussion}>{this.state.threeboxPosts.length ? "Join the Conversation" : "Start a Conversation"}</a>
+            { !this.state.joinedThread ?
+              <a onClick={this.startDiscussion}>{this.state.threeboxPosts?.length ? "Join the Conversation" : "Start a Conversation"}
+                {this.state.joiningThread ? <img className={css.loading} src="/assets/images/Icon/Loading-white.svg" /> : ""}
+              </a>
               : ""
             }
           </div>
@@ -188,12 +212,16 @@ class DaoLandingPage extends React.Component<IProps, IStateProps> {
             <div className={css.threeboxposts}>
               {this.state.threeboxPosts.map((post, index) => {
                 return (<div key={index} className={css.threeboxpost}>
-                  <div className={css.author}>
-                    <AccountPopup accountAddress={post.author} daoState={daoState} />
-                    <AccountProfileName accountAddress={post.author} accountProfile={this.props.profiles[post.author]} daoAvatarAddress={daoState.address} />
+                  <div className={css.column1}>
+                    <AccountPopup accountAddress={post.author} daoState={daoState} width={38} />
+                  </div>
+                  <div className={css.column2}>
+                    <div className={css.info}>
+                      <div className={css.author}><AccountProfileName accountAddress={post.author} accountProfile={this.props.profiles[post.author]} daoAvatarAddress={daoState.address} /></div>
+                      <div className={css.createdOn}>{formatFriendlyDateForLocalTimezone(post.createDate)}</div>
+                    </div>
+                    <div className={css.message}>{post.message}</div>
                   </div>
-                  <div className={css.createdOn}>({formatFriendlyDateForLocalTimezone(post.createDate)})</div>
-                  <div className={css.message}>{post.message}</div>
                 </div>);
               })
               }