Update DAOs page to show "Your DAOs" first

Separate section at the top of the DAOs page with DAOs user is a member of or follows first. Then below that is an Other DAOs section with all other DAOs.
Note that this will currently not show more than 100 DAOs that a user is a member of and 100 that they folllow.

Depends on new client daostack/arc.js#443

Fixes #1581

Author: tibetsprague

src/App.tsx

@@ -27,7 +27,7 @@ export class App extends React.Component<{}, {
     };
   }
 
-                
+
   private getPdfHtml = (filename: string): any => {
     window.location.href = `${window.location.protocol}//${window.location.host}/assets/${filename}`;
     return null;
@@ -77,7 +77,7 @@ export class App extends React.Component<{}, {
         await sleep(2000);
       }
     }
-    
+
 
     let GOOGLE_ANALYTICS_ID: string;
     switch (process.env.NODE_ENV) {
@@ -122,6 +122,7 @@ export class App extends React.Component<{}, {
                 <Route path="/" exact component={AppContainer}/>
                 <Route path="/dao" component={AppContainer}/>
                 <Route path="/daos" component={AppContainer}/>
+                <Route path="/feed" component={AppContainer}/>
                 <Route path="/profile" component={AppContainer}/>
                 <Route path="/redemptions" component={AppContainer}/>
                 <Route path="/daos/create" component={AppContainer} />

src/components/Daos/Daos.scss

@@ -42,9 +42,10 @@
 }
 
 .createDaoButton {
-  position: absolute;
+  position: fixed;
   right: 20px;
-  bottom: 5px;
+  top: 100px;
+  z-index: 100000000;
   border-radius: 15px;
   background-color: rgba(3, 118, 255, 1);
   color: $white;

src/components/Daos/DaosPage.tsx

@@ -1,9 +1,10 @@
-import { DAO } from "@daostack/client";
+import { DAO, DAOFieldsFragment } from "@daostack/client";
 import { getArc } from "arc";
 import Loading from "components/Shared/Loading";
 import withSubscription, { ISubscriptionProps } from "components/Shared/withSubscription";
 import gql from "graphql-tag";
 import Analytics from "lib/analytics";
+import { createDaoStateFromQuery } from "lib/daoHelpers";
 import { Page } from "pages";
 import * as React from "react";
 import { BreadcrumbsItem } from "react-breadcrumbs-dynamic";
@@ -12,24 +13,23 @@ import { connect } from "react-redux";
 import * as Sticky from "react-stickynode";
 import { Link } from "react-router-dom";
 import { IRootState } from "reducers";
-import { IProfileState } from "reducers/profilesReducer";
 import { combineLatest, of } from "rxjs";
 import { first } from "rxjs/operators";
 
 import DaoCard from "./DaoCard";
 import * as css from "./Daos.scss";
 
-type SubscriptionData = [DAO[], string[]];
+type SubscriptionData = [DAO[], DAO[], DAO[]];
 
 interface IStateProps {
   currentAccountAddress: string;
-  currentAccountProfile: IProfileState;
+  followingDAOs: string[];
 }
 
 const mapStateToProps = (state: IRootState): IStateProps => {
   return {
     currentAccountAddress: state.web3.currentAccountAddress,
-    currentAccountProfile: state.profiles[state.web3.currentAccountAddress],
+    followingDAOs: state.profiles[state.web3.currentAccountAddress] ? state.profiles[state.web3.currentAccountAddress].follows.daos : [],
   };
 };
 
@@ -81,39 +81,46 @@ class DaosPage extends React.Component<IProps, IState> {
   }
 
   public render(): RenderOutput {
-    const { currentAccountProfile, data, fetchMore } = this.props;
+    const { data, fetchMore } = this.props;
     const search = this.state.search.length > 2 ? this.state.search.toLowerCase() : "";
 
-    let allDAOs = data[0];
+    // Always show DAOs that the current user is a member of or follows first
+    const yourDAOs = data[1].concat(data[2]).filter(d => d.staticState.name.toLowerCase().includes(search)).sort((a, b) => a.staticState.name.localeCompare(b.staticState.name));
+    const yourDAOAddresses = yourDAOs.map(dao => dao.id);
 
+    // Then all the rest of the DAOs
+    let otherDAOs = data[0];
     // Add any DAOs found from searching the server to the list
     if (this.state.searchDaos.length > 0) {
       // make sure we don't add duplicate DAOs to the list
       const extraFoundDaos = this.state.searchDaos.filter((dao) => {
-        return !allDAOs.find((d) => d.id === dao.id);
+        return !otherDAOs.find((d) => d.id === dao.id);
       });
-      allDAOs = allDAOs.concat(extraFoundDaos);
+      otherDAOs = otherDAOs.concat(extraFoundDaos);
     }
 
-    // Always show Genesis Alpha first
-    let finalDAOList = allDAOs.filter((d: DAO) => d.staticState.name === "Genesis Alpha" && d.staticState.name.toLowerCase().includes(search));
-
     if (process.env.NODE_ENV === "staging") {
       // on staging we show all daos (registered or not)
-      finalDAOList = finalDAOList.concat(allDAOs.filter((d: DAO) => d.staticState.name !== "Genesis Alpha" && d.staticState.name.toLowerCase().includes(search)));
+      otherDAOs = otherDAOs.filter((d: DAO) => !yourDAOAddresses.includes(d.id) && d.staticState.name.toLowerCase().includes(search));
     } else {
-      // Otherwise show registered DAOs or DAOs that the person follows or is a member of
-      const memberOfDAOs = data[1];
-      finalDAOList = finalDAOList.concat(allDAOs.filter((d: DAO) => {
-        return d.staticState.name !== "Genesis Alpha" &&
+      // Otherwise show registered DAOs
+      otherDAOs = otherDAOs.filter((d: DAO) => {
+        return !yourDAOAddresses.includes(d.id) &&
                d.staticState.name.toLowerCase().includes(search) &&
-               (d.staticState.register === "registered" ||
-                  (currentAccountProfile && currentAccountProfile.follows.daos.includes(d.staticState.address)) ||
-                  memberOfDAOs.includes(d.staticState.address));
-      }));
+               d.staticState.register === "registered";
+      });
     }
 
-    const daoNodes = finalDAOList.map((dao: DAO) => {
+    const yourDaoNodes = yourDAOs.map((dao: DAO) => {
+      return (
+        <DaoCard
+          key={dao.id}
+          dao={dao}
+        />
+      );
+    });
+
+    const otherDaoNodes = otherDAOs.map((dao: DAO) => {
       return (
         <DaoCard
           key={dao.id}
@@ -126,24 +133,45 @@ class DaosPage extends React.Component<IProps, IState> {
       <div className={css.wrapper}>
         <BreadcrumbsItem to="/daos/">All DAOs</BreadcrumbsItem>
 
+        <Link to={"/daos/create"} className={css.createDaoButton}>
+          Create A DAO
+        </Link>
+
         <Sticky enabled top={50} innerZ={10000}>
           <div className={css.headerWrapper}>
             <div className={css.headerTitle + " clearfix"}>
-              <h2 data-test-id="header-all-daos">All DAOs</h2>
+              <h2 data-test-id="header-all-daos">Your DAOs</h2>
+            </div>
+            {yourDAOs.length ?
+              <div className={css.searchBox}>
+                <span>Search:</span>
+                <input type="text" name="search" placeholder="DAO Name" onChange={this.onSearchChange} value={this.state.search} />
+              </div>
+              : ""}
+          </div>
+        </Sticky>
+        {yourDAOs.length ?
+          <div className={css.daoList}>
+            {yourDaoNodes}
+          </div>
+          : <h2>Look for DAOs to join or follow below</h2>
+        }
+
+        <Sticky enabled top={50} innerZ={10000}>
+          <div className={css.headerWrapper}>
+            <div className={css.headerTitle + " clearfix"}>
+              <h2 data-test-id="header-all-daos">Other DAOs</h2>
             </div>
             <div className={css.searchBox}>
               <span>Search:</span>
               <input type="text" name="search" placeholder="DAO Name" onChange={this.onSearchChange} value={this.state.search} />
             </div>
-            <Link to={"/daos/create"} className={css.createDaoButton}>
-              Create A DAO
-            </Link>
           </div>
         </Sticky>
         <div className={css.daoList}>
-          {daoNodes ?
+          {otherDaoNodes ?
             <InfiniteScroll
-              dataLength={finalDAOList.length} // This is important field to render the next data
+              dataLength={otherDaoNodes.length} // This is important field to render the next data
               next={fetchMore}
               hasMore
               loader=""
@@ -153,69 +181,65 @@ class DaosPage extends React.Component<IProps, IState> {
                 </p>
               }
             >
-              {daoNodes}
+              {otherDaoNodes}
             </InfiniteScroll> : "None"}
         </div>
       </div>
     );
   }
 }
 
+const createSubscriptionObservable = (props: IStateProps, data: SubscriptionData = null) => {
+  const arc = getArc();
+  const { currentAccountAddress, followingDAOs } = props;
+
+  // TODO: right now we don't handle a user following or being a member of more than 100 DAOs
+  //       it was too hard to figure out the UI with infinite scrolling in this case we would need a different UI
+
+  // Get list of DAO addresses the current user is a member of,
+  //   ignoring ones that they are following so we dont show those twice
+  const memberDAOsquery = gql`
+    query ReputationHolderSearch {
+      reputationHolders(where: {
+          address: "${currentAccountAddress}"
+          ${followingDAOs.length ? "dao_not_in: [" + followingDAOs.map(dao => "\"" + dao + "\"").join(",") + "]" : ""}
+        },
+      ) {
+        dao {
+          ...DAOFields
+        }
+      }
+    }
+    ${DAOFieldsFragment}
+  `;
+  const memberOfDAOs = currentAccountAddress ? arc.getObservableList(memberDAOsquery, (r: any) => createDaoStateFromQuery(r.dao).dao, { subscribe: true }) : of([]);
+  // eslint-disable-next-line @typescript-eslint/camelcase
+  const followDAOs = followingDAOs.length ? arc.daos({ where: { id_in: followingDAOs }, orderBy: "name", orderDirection: "asc"}, { fetchAllData: true, subscribe: true }) : of([]);
+
+  return combineLatest(
+    arc.daos({ orderBy: "name", orderDirection: "asc", first: PAGE_SIZE, skip: data ? data[0].length : 0}, { fetchAllData: true, subscribe: true }),
+    followDAOs,
+    memberOfDAOs
+  );
+};
+
 const SubscribedDaosPage = withSubscription({
   wrappedComponent: DaosPage,
   loadingComponent: <div className={css.wrapper}><Loading/></div>,
   errorComponent: (props) => <div>{ props.error.message }</div>,
 
   // Don't ever update the subscription
-  checkForUpdate: ["currentAccountAddress"],
+  checkForUpdate: ["currentAccountAddress", "followingDAOs"],
 
   // used for hacky pagination tracking
   pageSize: PAGE_SIZE,
 
-  createObservable: (props: IStateProps) => {
-    const arc = getArc();
-
-    // Get list of DAO addresses the current user is a member of
-    const memberDAOsquery = gql`
-      query ReputationHolderSearch {
-        reputationHolders(where: { address: "${props.currentAccountAddress}" }, first: ${PAGE_SIZE}, skip: 0) {
-          dao {
-            id
-          }
-        }
-      }
-    `;
-    const memberOfDAOs = props.currentAccountAddress ? arc.getObservableList(memberDAOsquery, (r: any) => r.dao.id, { subscribe: true }) : of([]);
-
-    return combineLatest(
-      arc.daos({ orderBy: "name", orderDirection: "asc", first: PAGE_SIZE, skip: 0}, { fetchAllData: true, subscribe: true }),
-      memberOfDAOs
-    );
-  },
+  createObservable: createSubscriptionObservable,
 
-  getFetchMoreObservable: (props: IStateProps, data: SubscriptionData) => {
-    const arc = getArc();
-
-    // Get list of DAO addresses the current user is a member of
-    const memberDAOsquery = gql`
-      query ReputationHolderSearch {
-        reputationHolders(where: { address: "${props.currentAccountAddress}" }, first: ${PAGE_SIZE}, skip: ${data[1].length}) {
-          dao {
-            id
-          }
-        }
-      }
-    `;
-    const memberOfDAOs = props.currentAccountAddress ? arc.getObservableList(memberDAOsquery, (r: any) => r.dao.id, { subscribe: true }) : of([]);
-
-    return combineLatest(
-      arc.daos({ orderBy: "name", orderDirection: "asc", first: PAGE_SIZE, skip: data[0].length}, { fetchAllData: true, subscribe: true }),
-      memberOfDAOs
-    );
-  },
+  getFetchMoreObservable: createSubscriptionObservable,
 
   fetchMoreCombine: (prevData: SubscriptionData, newData: SubscriptionData) => {
-    return [prevData[0].concat(newData[0]), prevData[1].concat(newData[1])] as SubscriptionData;
+    return [prevData[0].concat(newData[0]), prevData[1], prevData[2]] as SubscriptionData;
   },
 });
 

src/components/Feed/FeedPage.tsx

@@ -4,6 +4,7 @@ import Loading from "components/Shared/Loading";
 import withSubscription, { ISubscriptionProps } from "components/Shared/withSubscription";
 import gql from "graphql-tag";
 import * as React from "react";
+import { BreadcrumbsItem } from "react-breadcrumbs-dynamic";
 import * as InfiniteScroll from "react-infinite-scroll-component";
 import { connect } from "react-redux";
 import { IRootState } from "reducers";
@@ -53,6 +54,8 @@ class FeedPage extends React.Component<IProps, null> {
 
   public renderEmptyFeed() {
     return <div className={css.emptyFeedBanner}>
+      <BreadcrumbsItem to="/daos/">Feed</BreadcrumbsItem>
+
       <img className={css.birds} src="/assets/images/birds.svg" />
       <h1>Looks like you&apos;re not following anything</h1>
       <h3>Follow DAOs, people and proposals to stay up to date with new proposals and their statuses</h3>
@@ -66,6 +69,8 @@ class FeedPage extends React.Component<IProps, null> {
 
     if (!currentAccountAddress) {
       return <div className={css.emptyFeedBanner} data-test-id="not-logged-in-banner">
+        <BreadcrumbsItem to="/daos/">Feed</BreadcrumbsItem>
+
         <img src="/assets/images/unplugged.svg" />
         <h1>Hi there! Have we met before?</h1>
         <h3>Please Log In to see your personal feed</h3>
@@ -115,6 +120,8 @@ class FeedPage extends React.Component<IProps, null> {
 
     return (
       <div className={css.feedContainer}>
+        <BreadcrumbsItem to="/daos/">Feed</BreadcrumbsItem>
+
         <InfiniteScroll
           dataLength={events.length} // This is important field to render the next data
           next={this.props.fetchMore}