[JES] WIP. Mostly finished condenser changes for decentralized system....

[JES] WIP. Mostly finished condenser changes for decentralized system. Translations for other languages (or at least placeholders) should probably be added, and should come up with suggested accounts to follow for the newbies

src/app/ResolveRoute.js

@@ -13,7 +13,11 @@ const reg = pattern => {
         )
         .replace('<tag>', '([\\w\\W\\d-]{1,32})')
         .replace('<permlink>', '([\\w\\d-]+)')
-        .replace('/', '\\/');
+        .replace('/', '\\/')
+        .replace(
+            '<list_type>',
+            '(blacklisted|muted|followed_blacklists|followed_muted_lists)'
+        );
     return new RegExp('^\\/' + pattern + '$');
 };
 
@@ -27,6 +31,7 @@ export const routeRegex = {
     PostJson: reg('<tag>/<account>/<permlink>(\\.json)'),
     UserJson: reg('<account>(\\.json)'),
     Search: reg('search'),
+    ListManagement: reg('<account>/lists/<list_type>'),
 };
 
 export default function resolveRoute(path) {
@@ -88,6 +93,8 @@ export default function resolveRoute(path) {
     // /search, /search?q=searchTerm&s=searchOrder
     match = path.match(routeRegex.Search);
     if (match) return { page: 'SearchIndex' };
+    match = path.match(routeRegex.ListManagement);
+    if (match) return { page: 'ListManagement', params: match.slice(2) }; //, params: match.slice(1) };
 
     // -----------
 

src/app/RootRoute.js

@@ -98,6 +98,9 @@ export default {
             //cb(null, [require('app/components/pages/PostsIndex')]);
             cb(null, [PostsIndex]);
             //});
+        } else if (route.page === 'ListManagement') {
+            require('app/components/pages/ListManagement');
+            cb(null, [require('app/components/pages/ListManagement')]);
         } else {
             //require.ensure([], (require) => {
             cb(process.env.BROWSER ? null : Error(404), [

src/app/components/all.scss

@@ -65,3 +65,4 @@
 @import "./pages/CommunitiesIndex";
 @import "./pages/CommunityRoles";
 @import "./pages/Rewards";
+@import "./pages/ListManagement";

src/app/components/cards/UserProfileHeader.jsx

@@ -127,6 +127,39 @@ class UserProfileHeader extends React.Component {
                                     )}
                                 </span>
                             )}
+
+                            <span>
+                                <br />
+                                <Link to={`/@${accountname}/lists/blacklisted`}>
+                                    Blacklisted Users
+                                </Link>
+                            </span>
+
+                            <span>
+                                <Link to={`/@${accountname}/lists/muted`}>
+                                    Muted Users
+                                </Link>
+                            </span>
+
+                            <span>
+                                <Link
+                                    to={`/@${
+                                        accountname
+                                    }/lists/followed_blacklists`}
+                                >
+                                    Followed Blacklists
+                                </Link>
+                            </span>
+
+                            <span>
+                                <Link
+                                    to={`/@${
+                                        accountname
+                                    }/lists/followed_muted_lists`}
+                                >
+                                    Followed Muted Lists
+                                </Link>
+                            </span>
                         </div>
 
                         <p className="UserProfile__info">

src/app/components/modules/Header/index.jsx

@@ -217,6 +217,8 @@ class Header extends React.Component {
                     username: user_title,
                 });
             }
+        } else if (route.page === 'ListManagement') {
+            page_title = 'Manage Lists';
         } else {
             page_name = ''; //page_title = route.page.replace( /([a-z])([A-Z])/g, '$1 $2' ).toLowerCase();
         }

src/app/components/modules/Settings.jsx

@@ -52,6 +52,8 @@ class Settings extends React.Component {
                 'witness_owner',
                 'witness_description',
                 'account_is_witness',
+                'blacklist_description',
+                'mute_list_description',
             ],
             initialValues: props.profile,
             validation: values => {
@@ -96,6 +98,16 @@ class Settings extends React.Component {
                         values.witness_description.length > 512
                             ? tt('settings_jsx.witness_description_is_too_long')
                             : null,
+                    blacklist_description:
+                        values.blacklist_description &&
+                        values.blacklist_description.length > 256
+                            ? 'description is too long'
+                            : null,
+                    mute_list_description:
+                        values.mute_list_description &&
+                        values.mute_list_description.length > 256
+                            ? 'description is too long'
+                            : null,
                 };
             },
         });
@@ -168,6 +180,8 @@ class Settings extends React.Component {
             website,
             witness_owner,
             witness_description,
+            blacklist_description,
+            mute_list_description,
         } = this.state;
 
         // Update relevant fields
@@ -179,6 +193,8 @@ class Settings extends React.Component {
         metaData.profile.website = website.value;
         metaData.profile.witness_owner = witness_owner.value;
         metaData.profile.witness_description = witness_description.value;
+        metaData.profile.blacklist_description = blacklist_description.value;
+        metaData.profile.mute_list_description = mute_list_description.value;
         metaData.profile.version = 2; // signal upgrade to posting_json_metadata
 
         // Remove empty keys
@@ -193,6 +209,10 @@ class Settings extends React.Component {
             delete metaData.profile.witness_owner;
         if (!metaData.profile.witness_description)
             delete metaData.profile.witness_description;
+        if (!metaData.profile.blacklist_description)
+            delete metaData.profile.blacklist_description;
+        if (!metaData.profile.mute_list_description)
+            delete metaData.profile.mute_list_description;
 
         const { account, updateAccount } = this.props;
         this.setState({ loading: true });
@@ -336,6 +356,8 @@ class Settings extends React.Component {
             witness_description,
             progress,
             account_is_witness,
+            blacklist_description,
+            mute_list_description,
         } = this.state;
 
         const preferred_api_endpoint = this.getPreferredApiEndpoint();
@@ -493,6 +515,38 @@ class Settings extends React.Component {
                                                 website.error}
                                         </div>
                                     </div>
+                                    <div className="form__field column small-12 medium-6 large-4">
+                                        <label>
+                                            Blacklist Description
+                                            <input
+                                                type="text"
+                                                maxLength="256"
+                                                autoComplete="off"
+                                                {...blacklist_description.props}
+                                            />
+                                        </label>
+                                        <div className="error">
+                                            {website.blur &&
+                                                website.touched &&
+                                                website.error}
+                                        </div>
+                                    </div>
+                                    <div className="form__field column small-12 medium-6 large-4">
+                                        <label>
+                                            Mute List Description
+                                            <input
+                                                type="text"
+                                                maxLength="256"
+                                                autoComplete="off"
+                                                {...mute_list_description.props}
+                                            />
+                                        </label>
+                                        <div className="error">
+                                            {website.blur &&
+                                                website.touched &&
+                                                website.error}
+                                        </div>
+                                    </div>
                                     {account_is_witness.value && (
                                         <div className="form__field column small-12 medium-6 large-4">
                                             <label>
@@ -730,6 +784,9 @@ class Settings extends React.Component {
                             </div>
                         </div>
                     )}
+                <div>
+                    <h4>Blacklisted Users</h4>
+                </div>
             </div>
         );
     }

src/app/components/pages/ListManagement.scss

+.UserProfile {
+  margin-top: -1.5rem;
+
+  .articles {
+    @include MQ(M) {
+      margin: 0 auto;
+    }
+  }
+}
+
+.UserProfile__blacklists {
+  .account_warn {font-size: 0.8em;}
+  .VerticalMenu {
+      font-size: 1rem;
+      text-shadow: none;
+        @include themify($themes) {
+          background-color: themed('backgroundColor');
+          color: themed('textColorPrimary');
+        }
+  }
+}
+
+.UserProfile__postmenu {
+  margin: -0.5rem 0 1rem;
+  padding-bottom: 0.5rem;
+  @include themify($themes) {
+      border-bottom: themed('border');
+  }
+  div {display: inline-block; padding: 0 0.5rem; margin: 0 0.5rem;}
+}
+
+.UserProfile__tab_content {
+  margin-top: 1.5rem;
+}
+
+.UserProfile__top-nav {
+background-color: $color-blue-dark;
+padding: 0;
+.menu {
+  background-color: transparent;
+}
+.menu > li > a {
+    transition: all 200ms ease-in;
+    transform: translate3d( 0, 0, 0);
+    padding-left: 0.7rem;
+    padding-right: 0.7rem;
+    background-color: transparent;
+    color: $color-white;
+    &:hover, &:focus {
+      background-color: $color-hive-black;
+    }
+    &.active {
+        @include themify($themes) {
+          background-color: themed('backgroundColor');
+          color: themed('textColorPrimary');
+        }
+        z-index: 2;
+        font-weight: bold;
+      }
+}
+
+div.UserProfile__top-menu {
+    max-width: 71.42857rem;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    // Override default svg vertical alignment
+    .Icon > svg, .Icon span.icon {
+        vertical-align: middle!important;
+    }
+}
+}
+
+.UserProfile__section-title {
+margin-bottom: 1.5rem;
+padding-bottom: 0.5rem;
+border-bottom: 1px solid #EEE;
+}
+
+.UserProfile__banner {
+  text-align: center;
+  color: $white;
+  a {
+      color: $white;
+  }
+  > div.column {
+      background: $color-background-less-dark;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      text-shadow: 1px 1px 2px black;
+      .button {text-shadow: none;}
+
+      min-height: 155px;
+  }
+  h1 {
+      padding-top: 20px;
+      font-weight: 600;
+      font-size: 1.84524rem!important;
+      @media screen and (max-width: 39.9375em) {
+          font-size: 1.13095rem!important;
+      }
+  }
+  .Icon {
+      margin-left: 1rem;
+      svg {fill: #def;}
+  }
+
+  .Userpic {
+      margin-right: 0.75rem;
+      vertical-align: middle;
+  }
+
+  .UserProfile__rep {
+      font-size: 80%;
+      font-weight: 200;
+  }
+
+  .UserProfile__buttons {
+      position: absolute;
+      top: 15px;
+      right: 5px;
+
+      label.button {
+          color: black;
+          border-radius: 3px;
+          background-color: white;
+      }
+  }
+
+  .UserProfile__bio {
+      margin: -0.4rem auto 0.5rem;
+      font-size: 95%;
+      max-width: 420px;
+      line-height: 1.4;
+  }
+  .UserProfile__info {
+      font-size: 90%;
+  }
+
+  .UserProfile__stats {
+      margin-bottom: 5px;
+      padding-bottom: 5px;
+      font-size: 90%;
+
+      a {
+          @include hoverUnderline;
+          vertical-align: middle;
+    }
+
+      > span {
+          padding: 0px 10px;
+          border-left: 1px solid #CCC;
+          &:first-child {border-left: none;}
+          &:nth-child(6) {border-left: none;}
+      }
+  }
+}
+
+@media screen and (max-width: 39.9375em) {
+
+  div.UserProfile__top-nav .menu li>a {
+      padding: 8px;
+  }
+
+  .UserProfile__top-menu > div.columns {
+      padding-left: 0;
+      padding-right: 0;
+  }
+
+  .UserProfile__banner .Userpic {
+      width: 36px !important;
+      height: 36px !important;
+  }
+
+  .UserProfile__banner .UserProfile__buttons {
+      text-align: right;
+
+      label.button {
+          display: block;
+      }
+  }
+
+  .UserProfile__banner .UserProfile__buttons_mobile {
+      position: inherit;
+      margin-bottom: .5rem;
+      .button {
+          background-color: $white;
+          color: $black;
+      }
+  }
+}
+
+// Temporary fix to prevent alternate User Profile pages outside the blog from taking the narrow layout.
+
+.UserProfile {
+.articles {
+    margin-bottom: 4em;
+  &__h1 {
+    text-transform: none;
+    @include MQ(M) {
+      @include font-size(20px);
+    }
+  }
+}
+&__tab_content.layout-block.settings, &__tab_content.layout-block.curation-rewards, &__tab_content.layout-block.author-rewards {
+  .articles {
+      padding: 1.5em 1.5em;
+      max-width: 1056px;
+      @include MQ(XL) {
+        min-width: 1050px;
+      }
+  }
+}
+.settings .articles__layout-selector, .curation-rewards .articles__layout-selector, .author-rewards .articles__layout-selector  {
+    display: none;
+  }
+}
+
+

src/app/components/pages/UserProfile.scss

@@ -154,6 +154,7 @@
             padding: 0px 10px;
             border-left: 1px solid #CCC;
             &:first-child {border-left: none;}
+            &:nth-child(6) {border-left: none;}
         }
     }
 }

src/app/locales/en.json

@@ -843,5 +843,66 @@
         "resteems": "Resteems",
         "upvotes": "Upvotes",
         "mentions": "Mentions"
+    },
+    "list_management_jsx": {
+        "busy":
+            "currently waiting for a broadcast operation to finish, try again soon",
+        "button_unblacklist": "Unblacklist",
+        "button_unmute": "Unmute",
+        "button_unfollow_blacklist": "Unfollow Blacklist",
+        "button_unfollow_muted_list": "Unfollow Muted List",
+        "button_busy": "Busy, Please Wait",
+        "blacklisted_header": "Accounts Blacklisted By ",
+        "muted_header": "Accounts Muted By ",
+        "followed_blacklists_header": "Followed Blacklists",
+        "followed_muted_lists_header": "Followed Muted LIsts",
+        "add_to_blacklist": "Add Accounts To Blacklist ",
+        "add_to_muted_list": "Add Accounts to Muted List",
+        "follow_blacklists": "Follow Blacklists Of These Accounts ",
+        "follow_muted_lists": "Follow Muted Lists Of These Accounts ",
+        "button_blacklist": "Blacklist Accounts",
+        "button_mute": "Mute Users",
+        "button_follow_blacklists": "Follow Blacklists",
+        "button_follow_muted_lists": "Follow Muted Lists",
+        "unknown_accounts": "Unable to find account(s): ",
+        "page_count": "Viewing Page %(current)s of %(total)s",
+        "search_for_user": "Search List For Account:",
+        "add_users_to_list": "Add Account(s) To List",
+        "multi_add_notes": "(single account or comma separated list)",
+        "updates_are_pending":
+            "Your list will reflect the updates shortly. You do not have to remain on this page for them to take effect.",
+        "list_description_field":
+            "Enter a description for your list (how you choose people, if they can contact you for removal, etc)",
+        "save_description": "Save Description",
+        "reset_blacklist": "Reset Blacklist",
+        "reset_muted_list": "Reset Muted List",
+        "reset_followed_blacklists": "Reset Followed Blacklists",
+        "reset_followed_muted_list": "Reset Followed Muted Lists",
+        "reset_all_lists": "Reset All Follows/Lists",
+        "reset_header": "Reset Options",
+        "empty_list": "There are no users on this list yet",
+        "welcome_header": "It looks like you might be new here!",
+        "welcome_body":
+            "This is the new decentralized list feature. You can create your own black list and mute list and give them a description",
+        "list_description_placement": "List Description:",
+        "no_results_found": "No search results found",
+        "acknowledge": "Acknowledge",
+        "what_is_this": "What Is This?",
+        "info1":
+            "This is the new decentralized list system. From here you can manage your own mute list or blacklist, as well as subscribe to the mute lists and blacklists of other users. ",
+        "info2": "There are some new fields on the ",
+        "info3": "Settings ",
+        "info4":
+            "page where you can set a description of how you choose who you've added to your lists and if there are any actions that account can take to get removed from them. ",
+        "info5":
+            "You can see the descriptions of the lists of other accounts by browsing directly to their personal blacklist or mute list page. These links can be found on their profile page below the follower information. ",
+        "info6":
+            "To get started, we recommend that you follow the blacklists/mute lists of these accounts: ",
+        "info7":
+            "Click the button below to dismiss this dialog. This will automatically subscribe you to the mute list and blacklist of the null account.",
+        "first": "First",
+        "previous": "Previous",
+        "next": "Next",
+        "last": "Last"
     }
 }

src/app/redux/UserProfilesReducer.js

@@ -2,9 +2,11 @@ import { fromJS } from 'immutable';
 
 // Action constants
 const ADD_USER_PROFILE = 'user_profile/ADD';
+const ADD_LISTED_ACCOUNTS = 'user_profile/LISTED';
 
 const defaultState = fromJS({
     profiles: {},
+    listed_accounts: {},
 });
 
 export default function reducer(state = defaultState, action) {
@@ -21,6 +23,16 @@ export default function reducer(state = defaultState, action) {
             return state;
         }
 
+        case ADD_LISTED_ACCOUNTS: {
+            if (payload) {
+                return state.setIn(
+                    ['listedAccounts', payload.username],
+                    fromJS(payload.listed_accounts)
+                );
+            }
+            return state;
+        }
+
         default:
             return state;
     }
@@ -31,3 +43,8 @@ export const addProfile = payload => ({
     type: ADD_USER_PROFILE,
     payload,
 });
+
+export const addList = payload => ({
+    type: ADD_LISTED_ACCOUNTS,
+    payload,
+});

src/app/redux/UserProfilesSaga.js

@@ -3,11 +3,25 @@ import * as userProfileActions from './UserProfilesReducer';
 import { callBridge } from 'app/utils/steemApi';
 
 const FETCH_PROFILE = 'userProfilesSaga/FETCH_PROFILE';
+const FETCH_LISTS = 'userProfilesSaga/FETCH_LISTS';
 
 export const userProfilesWatches = [
     takeLatest(FETCH_PROFILE, fetchUserProfile),
+    takeLatest(FETCH_LISTS, fetchLists),
 ];
 
+export function* fetchLists(action) {
+    const { observer, follow_type } = action.payload;
+    const ret = yield call(callBridge, 'get_follow_list', {
+        observer,
+        follow_type,
+    });
+    if (!ret) throw new Error('Account not found');
+    yield put(
+        userProfileActions.addList({ username: observer, listed_accounts: ret })
+    );
+}
+
 export function* fetchUserProfile(action) {
     const { account, observer } = action.payload;
     const ret = yield call(callBridge, 'get_profile', { account, observer });
@@ -23,4 +37,8 @@ export const actions = {
         type: FETCH_PROFILE,
         payload,
     }),
+    fetchLists: payload => ({
+        type: FETCH_LISTS,
+        payload,
+    }),
 };