cleanup

lbryio · Sep 27, 2019 · af6f155 · af6f155
1 parent 02f8659
commit af6f155
Show file tree

Hide file tree

Showing 49 changed files with 476 additions and 455 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -24,6 +24,7 @@ module.name_mapper='^app\(.*\)$' -> '<PROJECT_ROOT>/src/ui/app\1'
 module.name_mapper='^native\(.*\)$' -> '<PROJECT_ROOT>/src/ui/native\1'
 module.name_mapper='^analytics\(.*\)$' -> '<PROJECT_ROOT>/src/ui/analytics\1'
 module.name_mapper='^i18n\(.*\)$' -> '<PROJECT_ROOT>/src/ui/i18n\1'
+module.name_mapper='^effects\(.*\)$' -> '<PROJECT_ROOT>/src/ui/effects\1'
 module.name_mapper='^config\(.*\)$' -> '<PROJECT_ROOT>/config\1'
 
 

diff --git a/package.json b/package.json
@@ -128,7 +128,7 @@
     "husky": "^0.14.3",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#d44cd9ca56dee784dba42c0cc13061ae75cbd46c",
+    "lbry-redux": "lbryio/lbry-redux#42bf926138872d14523be7191694309be4f37605",
     "lbryinc": "lbryio/lbryinc#368040d64658cf2a4b8a7a6725ec1787329ce65d",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx
@@ -11,8 +11,7 @@ import useKonamiListener from 'util/enhanced-layout';
 import Yrbl from 'component/yrbl';
 import FileViewer from 'component/fileViewer';
 import { withRouter } from 'react-router';
-import usePrevious from 'util/use-previous';
-import SyncBackgroundManager from 'component/syncBackgroundManager';
+import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
@@ -121,7 +120,6 @@ function App(props: Props) {
       <Router />
       <ModalRouter />
       <FileViewer pageUri={uri} />
-      <SyncBackgroundManager />
 
       {/* @if TARGET='app' */}
       {showUpgradeButton && (

diff --git a/src/ui/component/blockButton/view.jsx b/src/ui/component/blockButton/view.jsx
@@ -3,7 +3,7 @@ import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import React, { useRef } from 'react';
 import Button from 'component/button';
-import useHover from 'util/use-hover';
+import useHover from 'effects/use-hover';
 
 type Props = {
   permanentUrl: ?string,

diff --git a/src/ui/component/channelContent/view.jsx b/src/ui/component/channelContent/view.jsx
@@ -64,7 +64,7 @@ function ChannelContent(props: Props) {
         </div>
       )}
 
-      {!channelIsMine && <HiddenNsfwClaims className="card__subtitle" uri={uri} />}
+      {!channelIsMine && <HiddenNsfwClaims uri={uri} />}
 
       {hasContent && !channelIsBlocked && !channelIsBlackListed && (
         <ClaimList header={false} uris={claimsInChannel.map(claim => claim && claim.canonical_url)} />

diff --git a/src/ui/component/channelEdit/view.jsx b/src/ui/component/channelEdit/view.jsx
@@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
           onChange={text => setParams({ ...params, description: text })}
         />
         <TagSelect
-          title={false}
+          title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your channel.')}
           empty={__('No tags added')}

diff --git a/src/ui/component/claimList/view.jsx b/src/ui/component/claimList/view.jsx
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import ClaimPreview from 'component/claimPreview';
 import Spinner from 'component/spinner';
 import { FormField } from 'component/common/form';
-import usePersistedState from 'util/use-persisted-state';
+import usePersistedState from 'effects/use-persisted-state';
 
 const SORT_NEW = 'new';
 const SORT_OLD = 'old';

diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
@@ -187,19 +187,19 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           <div className="claim-preview-title">
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
-          {actions !== undefined
-            ? actions
-            : !hideActions && (
-                <div className="card__actions--inline">
-                  {isChannel && !channelIsBlocked && !claimIsMine && (
-                    <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                  )}
-                  {isChannel && !isSubscribed && !claimIsMine && (
-                    <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                  )}
-                  {!isChannel && claim && <FileProperties uri={uri} />}
-                </div>
+          {!hideActions && actions !== undefined ? (
+            actions
+          ) : (
+            <div className="card__actions--inline">
+              {isChannel && !channelIsBlocked && !claimIsMine && (
+                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+              )}
+              {isChannel && !isSubscribed && !claimIsMine && (
+                <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
               )}
+              {!isChannel && claim && <FileProperties uri={uri} />}
+            </div>
+          )}
         </div>
 
         <div className="claim-preview-properties">

diff --git a/src/ui/component/commentCreate/view.jsx b/src/ui/component/commentCreate/view.jsx
@@ -5,7 +5,7 @@ import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
-import usePersistedState from 'util/use-persisted-state';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,

diff --git a/src/ui/component/common/card.jsx b/src/ui/component/common/card.jsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Icon from 'component/common/icon';
 
 type Props = {
-  title: string | Node,
+  title?: string | Node,
   subtitle?: string | Node,
   body?: string | Node,
   actions?: string | Node,
@@ -16,15 +16,17 @@ export default function Card(props: Props) {
   const { title, subtitle, body, actions, icon } = props;
   return (
     <section className={classnames('card')}>
-      <div className="card__header">
-        <div className="section__flex">
-          {icon && <Icon sectionIcon icon={icon} />}
-          <div>
-            <h2 className="section__title">{title}</h2>
-            <p className="section__subtitle">{subtitle}</p>
+      {title && (
+        <div className="card__header">
+          <div className="section__flex">
+            {icon && <Icon sectionIcon icon={icon} />}
+            <div>
+              <h2 className="section__title">{title}</h2>
+              <p className="section__subtitle">{subtitle}</p>
+            </div>
           </div>
         </div>
-      </div>
+      )}
 
       {body && <div className={classnames('card__body', { 'card__body--with-icon': icon })}>{body}</div>}
       {actions && (

diff --git a/src/ui/component/fileViewer/view.jsx b/src/ui/component/fileViewer/view.jsx
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
 import FileRender from 'component/fileRender';
 import UriIndicator from 'component/uriIndicator';
-import usePersistedState from 'util/use-persisted-state';
-import usePrevious from 'util/use-previous';
+import usePersistedState from 'effects/use-persisted-state';
+import usePrevious from 'effects/use-previous';
 import { FILE_WRAPPER_CLASS } from 'page/file/view';
 import Draggable from 'react-draggable';
 import Tooltip from 'component/common/tooltip';
@@ -86,7 +86,7 @@ export default function FileViewer(props: Props) {
     function handleResize() {
       const element = document.querySelector(`.${FILE_WRAPPER_CLASS}`);
       if (!element) {
-        console.error("Can't find file viewer wrapper to attach to the inline viewer to");
+        console.error("Can't find file viewer wrapper to attach to the inline viewer to"); // eslint-disable-line
         return;
       }
 

diff --git a/src/ui/component/hiddenNsfwClaims/view.jsx b/src/ui/component/hiddenNsfwClaims/view.jsx
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import classnames from 'classnames';
 
 type Props = {
   numberOfNsfwClaims: number,
@@ -10,12 +9,12 @@ type Props = {
 };
 
 export default (props: Props) => {
-  const { numberOfNsfwClaims, obscureNsfw, className } = props;
+  const { numberOfNsfwClaims, obscureNsfw } = props;
 
   return (
     obscureNsfw &&
     Boolean(numberOfNsfwClaims) && (
-      <div className={classnames('card--section', className || 'help')}>
+      <div className="section--padded section__subtitle">
         {numberOfNsfwClaims} {numberOfNsfwClaims > 1 ? __('files') : __('file')} {__('hidden due to your')}{' '}
         <Button button="link" navigate="/$/settings" label={__('content viewing preferences')} />.
       </div>

diff --git a/src/ui/component/publishAdditionalOptions/view.jsx b/src/ui/component/publishAdditionalOptions/view.jsx
@@ -1,10 +1,11 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
-import usePersistedState from 'util/use-persisted-state';
+import usePersistedState from 'effects/use-persisted-state';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import LicenseType from './license-type';
+import Card from 'component/common/card';
 
 type Props = {
   language: ?string,
@@ -25,67 +26,75 @@ function PublishAdvanced(props: Props) {
   }
 
   return (
-    <section className="card card--section">
-      {!hideSection && (
-        <div className={classnames({ 'card--disabled': !name })}>
-          <FormField
-            label={__('Language')}
-            type="select"
-            name="content_language"
-            value={language}
-            onChange={event => updatePublishForm({ language: event.target.value })}
-          >
-            <option value="en">{__('English')}</option>
-            <option value="zh">{__('Chinese')}</option>
-            <option value="fr">{__('French')}</option>
-            <option value="de">{__('German')}</option>
-            <option value="jp">{__('Japanese')}</option>
-            <option value="ru">{__('Russian')}</option>
-            <option value="es">{__('Spanish')}</option>
-            <option value="id">{__('Indonesian')}</option>
-            <option value="it">{__('Italian')}</option>
-            <option value="nl">{__('Dutch')}</option>
-            <option value="tr">{__('Turkish')}</option>
-            <option value="pl">{__('Polish')}</option>
-            <option value="ms">{__('Malay')}</option>
-            <option value="pt">{__('Portuguese')}</option>
-            <option value="vi">{__('Vietnamese')}</option>
-            <option value="th">{__('Thai')}</option>
-            <option value="ar">{__('Arabic')}</option>
-            <option value="cs">{__('Czech')}</option>
-            <option value="hr">{__('Croatian')}</option>
-            <option value="km">{__('Cambodian')}</option>
-            <option value="ko">{__('Korean')}</option>
-            <option value="no">{__('Norwegian')}</option>
-            <option value="ro">{__('Romanian')}</option>
-            <option value="hi">{__('Hindi')}</option>
-            <option value="el">{__('Greek')}</option>
-          </FormField>
+    <Card
+      actions={
+        <React.Fragment>
+          {!hideSection && (
+            <div className={classnames({ 'card--disabled': !name })}>
+              <FormField
+                label={__('Language')}
+                type="select"
+                name="content_language"
+                value={language}
+                onChange={event => updatePublishForm({ language: event.target.value })}
+              >
+                <option value="en">{__('English')}</option>
+                <option value="zh">{__('Chinese')}</option>
+                <option value="fr">{__('French')}</option>
+                <option value="de">{__('German')}</option>
+                <option value="jp">{__('Japanese')}</option>
+                <option value="ru">{__('Russian')}</option>
+                <option value="es">{__('Spanish')}</option>
+                <option value="id">{__('Indonesian')}</option>
+                <option value="it">{__('Italian')}</option>
+                <option value="nl">{__('Dutch')}</option>
+                <option value="tr">{__('Turkish')}</option>
+                <option value="pl">{__('Polish')}</option>
+                <option value="ms">{__('Malay')}</option>
+                <option value="pt">{__('Portuguese')}</option>
+                <option value="vi">{__('Vietnamese')}</option>
+                <option value="th">{__('Thai')}</option>
+                <option value="ar">{__('Arabic')}</option>
+                <option value="cs">{__('Czech')}</option>
+                <option value="hr">{__('Croatian')}</option>
+                <option value="km">{__('Cambodian')}</option>
+                <option value="ko">{__('Korean')}</option>
+                <option value="no">{__('Norwegian')}</option>
+                <option value="ro">{__('Romanian')}</option>
+                <option value="hi">{__('Hindi')}</option>
+                <option value="el">{__('Greek')}</option>
+              </FormField>
 
-          <LicenseType
-            licenseType={licenseType}
-            otherLicenseDescription={otherLicenseDescription}
-            licenseUrl={licenseUrl}
-            handleLicenseChange={(newLicenseType, newLicenseUrl) =>
-              updatePublishForm({
-                licenseType: newLicenseType,
-                licenseUrl: newLicenseUrl,
-              })
-            }
-            handleLicenseDescriptionChange={event =>
-              updatePublishForm({
-                otherLicenseDescription: event.target.value,
-              })
-            }
-            handleLicenseUrlChange={event => updatePublishForm({ licenseUrl: event.target.value })}
-          />
-        </div>
-      )}
+              <LicenseType
+                licenseType={licenseType}
+                otherLicenseDescription={otherLicenseDescription}
+                licenseUrl={licenseUrl}
+                handleLicenseChange={(newLicenseType, newLicenseUrl) =>
+                  updatePublishForm({
+                    licenseType: newLicenseType,
+                    licenseUrl: newLicenseUrl,
+                  })
+                }
+                handleLicenseDescriptionChange={event =>
+                  updatePublishForm({
+                    otherLicenseDescription: event.target.value,
+                  })
+                }
+                handleLicenseUrlChange={event => updatePublishForm({ licenseUrl: event.target.value })}
+              />
+            </div>
+          )}
 
-      <div className="card__actions">
-        <Button label={hideSection ? __('Additional Options') : __('Hide')} button="link" onClick={toggleHideSection} />
-      </div>
-    </section>
+          <div className="card__actions">
+            <Button
+              label={hideSection ? __('Additional Options') : __('Hide')}
+              button="link"
+              onClick={toggleHideSection}
+            />
+          </div>
+        </React.Fragment>
+      }
+    />
   );
 }