Merge pull request steemit#3720 from steemit/3714-communities-mobile-…

…links comprehensive mobile community explore selector
sudguru · Feb 20, 2020 · f2656a6 · f2656a6
2 parents 0fdb2c6 + a5b598d
commit f2656a6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/app/components/elements/NativeSelect/index.jsx b/src/app/components/elements/NativeSelect/index.jsx
@@ -8,7 +8,11 @@ const NativeSelect = ({ options, className, currentlySelected, onChange }) => {
 
     const opts = options.map(val => {
         return (
-            <option key={val.name + val.label} value={val.value}>
+            <option
+                key={val.name + val.label}
+                value={val.value}
+                disabled={val.disabled ? val.disabled : false}
+            >
                 {val.label}
             </option>
         );

diff --git a/src/app/components/pages/Topics.jsx b/src/app/components/pages/Topics.jsx
@@ -50,26 +50,37 @@ class Topics extends Component {
                 return { value: `/`, label: tt('g.all_tags') };
             };
 
-            let options = [];
+            const options = [];
             // Add 'All Posts' link.
             options.push(opt(null));
-
             if (username && subscriptions) {
                 // Add 'My Friends' Link
                 options.push(opt('@' + username));
                 // Add 'My Communities' Link
                 options.push(opt('my'));
-                options.concat(
-                    subscriptions.toJS().map(cat => opt(cat[0], cat[1]))
-                );
-            } else {
-                options = options.concat(
-                    topics.toJS().map(cat => opt(cat[0], cat[1]))
-                );
+                const subscriptionOptions = subscriptions
+                    .toJS()
+                    .map(cat => opt(cat[0], cat[1]));
+                options.push({
+                    value: 'Subscriptions',
+                    label: 'Community Subscriptions',
+                    disabled: true,
+                });
+                options.push(...subscriptionOptions);
+            }
+            if (topics) {
+                const topicsOptions = topics
+                    .toJS()
+                    .map(cat => opt(cat[0], cat[1]));
+                options.push({
+                    value: 'Topics',
+                    label: 'Trending Communities',
+                    disabled: true,
+                });
+                options.push(...topicsOptions);
             }
 
             options.push(opt('explore'));
-
             const currOpt = opt(current);
             if (!options.find(opt => opt.value == currOpt.value)) {
                 options.push(