Redesign groundwork (home/search)

.flowconfig

@@ -18,5 +18,6 @@ module.name_mapper='^types\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/types\1'
 module.name_mapper='^component\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/component\1'
 module.name_mapper='^page\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/page\1'
 module.name_mapper='^lbry\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/lbry\1'
+module.name_mapper='^modal\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/modal\1'
 
 [strict]

flow-typed/react-modal.js

@@ -0,0 +1,3 @@
+declare module 'react-modal' {
+  declare module.exports: any;
+}

npm-debug.log.2899857694

@@ -0,0 +1,25 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/Users/seanyesmunt/.nvm/versions/node/v6.12.0/bin/node',
+1 verbose cli   '/Users/seanyesmunt/.nvm/versions/node/v6.12.0/bin/npm',
+1 verbose cli   'config',
+1 verbose cli   '--loglevel=warn',
+1 verbose cli   'get',
+1 verbose cli   'prefix' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose exit [ 0, true ]
+5 verbose stack Error: write EPIPE
+5 verbose stack     at exports._errnoException (util.js:1020:11)
+5 verbose stack     at WriteWrap.afterWrite (net.js:800:14)
+6 verbose cwd /Users/seanyesmunt/Workspace/lbry/lbry-app
+7 error Darwin 17.2.0
+8 error argv "/Users/seanyesmunt/.nvm/versions/node/v6.12.0/bin/node" "/Users/seanyesmunt/.nvm/versions/node/v6.12.0/bin/npm" "config" "--loglevel=warn" "get" "prefix"
+9 error node v6.12.0
+10 error npm  v3.10.10
+11 error code EPIPE
+12 error errno EPIPE
+13 error syscall write
+14 error write EPIPE
+15 error If you need help, you may report this error at:
+15 error     <https://github.com/npm/npm/issues>
+16 verbose exit [ 1, true ]

package.json

@@ -32,6 +32,7 @@
     "amplitude-js": "^4.0.0",
     "bluebird": "^3.5.1",
     "classnames": "^2.2.5",
+    "dom-scroll-into-view": "^1.2.1",
     "electron-dl": "^1.6.0",
     "formik": "^0.10.4",
     "from2": "^2.3.0",

src/renderer/component/app/view.jsx

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Router from 'component/router/index';
 import Header from 'component/header';
@@ -6,61 +7,83 @@ import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import throttle from 'util/throttle';
 
-class App extends React.PureComponent {
+type Props = {
+  alertError: (string | {}) => void,
+  recordScroll: number => void,
+  currentStackIndex: number,
+  currentPageAttributes: { path: string, scrollY: number },
+  pageTitle: ?string,
+};
+
+class App extends React.PureComponent<Props> {
   constructor() {
     super();
     this.mainContent = undefined;
+    (this: any).scrollListener = this.scrollListener.bind(this);
   }
 
   componentWillMount() {
     const { alertError } = this.props;
 
-    document.addEventListener('unhandledError', event => {
+    // TODO: create type for this object
+    // it lives in jsonrpc.js
+    document.addEventListener('unhandledError', (event: any) => {
       alertError(event.detail);
     });
   }
 
   componentDidMount() {
-    const { recordScroll } = this.props;
     const mainContent = document.getElementById('main-content');
     this.mainContent = mainContent;
 
-    const scrollListener = () => recordScroll(this.mainContent.scrollTop);
-
-    this.mainContent.addEventListener('scroll', throttle(scrollListener, 750));
+    if (this.mainContent) {
+      this.mainContent.addEventListener('scroll', throttle(this.scrollListener, 750));
+    }
 
     ReactModal.setAppElement('#window'); // fuck this
   }
 
-  componentWillUnmount() {
-    this.mainContent.removeEventListener('scroll', this.scrollListener);
-  }
-
-  componentWillReceiveProps(props) {
-    this.setTitleFromProps(props);
+  componentWillReceiveProps(props: Props) {
+    const { pageTitle } = props;
+    this.setTitleFromProps(pageTitle);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     const { currentStackIndex: prevStackIndex } = prevProps;
     const { currentStackIndex, currentPageAttributes } = this.props;
 
-    if (currentStackIndex !== prevStackIndex) {
+    if (this.mainContent && currentStackIndex !== prevStackIndex) {
       this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
     }
   }
 
-  setTitleFromProps(props) {
-    window.document.title = props.pageTitle || 'LBRY';
+  componentWillUnmount() {
+    if (this.mainContent) {
+      // having issues with this
+      // $FlowFixMe
+      this.mainContent.removeEventListener('scroll');
+    }
   }
 
+  setTitleFromProps = (title: ?string) => {
+    window.document.title = title || 'LBRY';
+  };
+
+  scrollListener() {
+    const { recordScroll } = this.props;
+    if (this.mainContent) {
+      recordScroll(this.mainContent.scrollTop);
+    }
+  }
+
+  mainContent: ?HTMLElement;
+
   render() {
     return (
       <div id="window">
         <Theme />
         <Header />
-        <div id="main-content">
-          <Router />
-        </div>
+        <Router />
         <ModalRouter />
       </div>
     );

src/renderer/component/cardMedia/view.jsx

@@ -1,48 +1,18 @@
+// @flow
 import React from 'react';
 
-class CardMedia extends React.PureComponent {
-  static AUTO_THUMB_CLASSES = [
-    'purple',
-    'red',
-    'pink',
-    'indigo',
-    'blue',
-    'light-blue',
-    'cyan',
-    'teal',
-    'green',
-    'yellow',
-    'orange',
-  ];
-
-  componentWillMount() {
-    this.setState({
-      autoThumbClass:
-        CardMedia.AUTO_THUMB_CLASSES[
-          Math.floor(Math.random() * CardMedia.AUTO_THUMB_CLASSES.length)
-        ],
-    });
-  }
+type Props = {
+  thumbnail: ?string, // externally sourced image
+};
 
+class CardMedia extends React.PureComponent<Props> {
   render() {
-    const { title, thumbnail } = this.props;
-    const atClass = this.state.autoThumbClass;
-
+    const { thumbnail } = this.props;
     if (thumbnail) {
       return <div className="card__media" style={{ backgroundImage: `url('${thumbnail}')` }} />;
     }
 
-    return (
-      <div className={`card__media card__media--autothumb ${atClass}`}>
-        <div className="card__autothumb__text">
-          {title &&
-            title
-              .replace(/\s+/g, '')
-              .substring(0, Math.min(title.replace(' ', '').length, 5))
-              .toUpperCase()}
-        </div>
-      </div>
-    );
+    return <div className="card__media card__media--autothumb">LBRY</div>;
   }
 }
 

src/renderer/component/common.js

@@ -1,25 +1,11 @@
+// just disabling the linter because this file shouldn't even exist
+// will continue to move components over to /components/common/{comp} - sean
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { formatCredits, formatFullPrice } from 'util/formatCredits';
 import lbry from '../lbry.js';
 
-// component/icon.js
-export class Icon extends React.PureComponent {
-  static propTypes = {
-    icon: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    fixed: PropTypes.bool,
-  };
-
-  render() {
-    const { fixed, className } = this.props;
-    const spanClassName = `icon ${'fixed' in this.props ? 'icon-fixed-width ' : ''}${
-      this.props.icon
-    } ${this.props.className || ''}`;
-    return <span className={spanClassName} />;
-  }
-}
-
 export class TruncatedText extends React.PureComponent {
   static propTypes = {
     lines: PropTypes.number,
@@ -187,3 +173,4 @@ export class Thumbnail extends React.PureComponent {
     );
   }
 }
+/* eslint-enable */