hide community row if nsfw content is hidden

lbryio · Jul 12, 2018 · afbc365 · afbc365
1 parent 97e2c1d
commit afbc365
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 44 deletions.
diff --git a/src/renderer/component/categoryList/index.js b/src/renderer/component/categoryList/index.js
@@ -4,15 +4,20 @@ import {
   makeSelectClaimsInChannelForCurrentPage,
   makeSelectFetchingChannelClaims,
 } from 'lbry-redux';
+import { selectShowNsfw } from 'redux/selectors/settings';
 import CategoryList from './view';
 
 const select = (state, props) => ({
   channelClaims: makeSelectClaimsInChannelForCurrentPage(props.categoryLink)(state),
   fetching: makeSelectFetchingChannelClaims(props.categoryLink)(state),
+  obscureNsfw: !selectShowNsfw(state),
 });
 
 const perform = dispatch => ({
   fetchChannel: channel => dispatch(doFetchClaimsByChannel(channel)),
 });
 
-export default connect(select, perform)(CategoryList);
+export default connect(
+  select,
+  perform
+)(CategoryList);
diff --git a/src/renderer/component/categoryList/view.jsx b/src/renderer/component/categoryList/view.jsx
@@ -1,11 +1,11 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import ToolTip from 'component/common/tooltip';
 import FileCard from 'component/fileCard';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
-import Claim from 'types/claim';
+import type { Claim } from 'types/claim';
 
 type Props = {
   category: string,
@@ -14,6 +14,7 @@ type Props = {
   fetching: boolean,
   channelClaims: Array<Claim>,
   fetchChannel: string => void,
+  obscureNsfw: boolean,
 };
 
 type State = {
@@ -206,11 +207,12 @@ class CategoryList extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { category, categoryLink, names, channelClaims } = this.props;
+    const { category, categoryLink, names, channelClaims, obscureNsfw } = this.props;
     const { canScrollNext, canScrollPrevious } = this.state;
 
-    // The lint was throwing an error saying we should use <button> instead of <a>
-    // We are using buttons, needs more exploration
+    const isCommunityTopBids = category.match(/^community/i);
+    const showScrollButtons = isCommunityTopBids ? !obscureNsfw : true;
+
     return (
       <div className="card-row">
         <div className="card-row__header">
@@ -220,45 +222,55 @@ class CategoryList extends React.PureComponent<Props, State> {
             ) : (
               category
             )}
-            {category &&
-              category.match(/^community/i) && (
-                <ToolTip
-                  label={__("What's this?")}
-                  body={__(
-                    'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names from "one" to "ten" to put your content here!'
-                  )}
-                />
-              )}
-          </div>
-          <div className="card-row__scroll-btns">
-            <Button
-              className="btn--arrow"
-              disabled={!canScrollPrevious}
-              onClick={this.handleScrollPrevious}
-              icon={icons.ARROW_LEFT}
-            />
-            <Button
-              className="btn--arrow"
-              disabled={!canScrollNext}
-              onClick={this.handleScrollNext}
-              icon={icons.ARROW_RIGHT}
-            />
+            {isCommunityTopBids && (
+              <ToolTip
+                label={__("What's this?")}
+                body={__(
+                  'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names from "one" to "ten" to put your content here!'
+                )}
+              />
+            )}
           </div>
+          {showScrollButtons && (
+            <div className="card-row__scroll-btns">
+              <Button
+                className="btn--arrow"
+                disabled={!canScrollPrevious}
+                onClick={this.handleScrollPrevious}
+                icon={icons.ARROW_LEFT}
+              />
+              <Button
+                className="btn--arrow"
+                disabled={!canScrollNext}
+                onClick={this.handleScrollNext}
+                icon={icons.ARROW_RIGHT}
+              />
+            </div>
+          )}
         </div>
-        <div
-          ref={ref => {
-            this.rowItems = ref;
-          }}
-          className="card-row__scrollhouse"
-        >
-          {names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
-
-          {channelClaims && channelClaims.length
-            ? channelClaims.map(claim => (
+        {obscureNsfw && isCommunityTopBids ? (
+          <div className="card__content help">
+            {__(
+              'The community top bids section is only visible if you allow NSFW content in the app. You can change your content viewing preferences'
+            )}{' '}
+            <Button button="link" navigate="/settings" label={__('here')} />.
+          </div>
+        ) : (
+          <div
+            className="card-row__scrollhouse"
+            ref={ref => {
+              this.rowItems = ref;
+            }}
+          >
+            {names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
+
+            {channelClaims &&
+              channelClaims.length &&
+              channelClaims.map(claim => (
                 <FileCard key={claim.claim_id} uri={`lbry://${claim.name}#${claim.claim_id}`} />
-              ))
-            : null}
-        </div>
+              ))}
+          </div>
+        )}
       </div>
     );
   }

diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
@@ -148,6 +148,7 @@ $large-breakpoint: 1921px;
   --card-text-color: var(--color-grey-dark);
   --card-radius: 2px;
   --card-max-width: 1000px;
+  --card-row-min-height: 175px;
   --card-wallet-color: var(--text-color-inverse);
   --success-msg-color: var(--color-green);
   --success-msg-border: var(--color-green-blue);

diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
@@ -21,7 +21,6 @@
 }
 
 .card--small {
-  width: var(--card-small-width);
   white-space: normal;
 
   .card__media {
@@ -273,7 +272,7 @@
 .card-row {
   white-space: nowrap;
   width: 100%;
-  min-width: var(--card-small-width);
+  min-height: var(--card-row-min-height);
   padding-top: $spacing-vertical;
 
   &:first-of-type {