closes #64 (#68)

* remove links from qari to surah

* add surah button to other qaris. closes #64

src/containers/Qari/index.js

@@ -11,6 +11,7 @@ import { load as loadFiles } from 'actions/files';
 import zeroPad from 'utils/zeroPad';
 import formatSeconds from 'utils/formatSeconds';
 import Track from 'components/Audioplayer/Track';
+import LinkContainer from 'utils/LinkContainer';
 const styles = require('./style.scss');
 
 class Qaris extends Component {
@@ -83,7 +84,7 @@ class Qaris extends Component {
         </Grid>
         <Grid className={styles.list}>
           <Row>
-            <Col md={10} mdOffset={1}>
+            <Col md={11} mdOffset={1}>
               <div className={`panel panel-default ${styles.panel} ${isPlaying ? styles.panelPlaying : ''}`}>
                 <ul className="list-group">
                   {
@@ -94,7 +95,7 @@ class Qaris extends Component {
                         onClick={() => this.handleSurahSelection(surah)}
                       >
                         <Row className={styles.surahRow}>
-                          <Col md={6} xs={8}>
+                          <Col md={5} xs={8}>
                             <Row>
                               <Col md={2} xs={2}>
                               <h5 className={styles.numbering}>
@@ -109,7 +110,23 @@ class Qaris extends Component {
                               </Col>
                             </Row>
                           </Col>
-                          <Col md={4} className="text-right hidden-xs hidden-sm">
+                          <Col md={5} className="text-right hidden-xs hidden-sm">
+                            <LinkContainer to={`/sura/${surah.id}`}>
+                                <Button
+                                bsStyle="primary"
+                                className={styles.options}
+                                onClick={(event) => event.stopPropagation()}>
+                                <i className="fa fa-users" /> Other Qaris
+                              </Button>
+                            </LinkContainer>
+                             <Button
+                              bsStyle="primary"
+                              className={styles.options}
+                              href={`https://www.quran.com/${surah.id}`}
+                              target="_blank"
+                              onClick={(event) => event.stopPropagation()}>
+                              <i className="fa fa-book" /> Read
+                            </Button>
                             <Button
                               bsStyle="primary"
                               className={styles.options}
@@ -119,14 +136,6 @@ class Qaris extends Component {
                               download>
                               <i className="fa fa-arrow-circle-down" /> Download
                             </Button>
-                             <Button
-                              bsStyle="primary"
-                              className={styles.options}
-                              href={`https://www.quran.com/${surah.id}`}
-                              target="_blank"
-                              onClick={(event) => event.stopPropagation()}>
-                              <i className="fa fa-book" /> Read
-                            </Button>
                           </Col>
                           <Col md={2} xs={4} className="text-right">
                             <h5 className={`text-muted ${styles.muted}`}>

src/utils/LinkContainer.js

@@ -0,0 +1,105 @@
+import React from 'react';
+
+function isLeftClickEvent(event) {
+  return event.button === 0;
+}
+
+function isModifiedEvent(event) {
+  return !!(
+    event.metaKey ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.shiftKey
+  );
+}
+
+function createLocationDescriptor(to, query, hash, state) {
+  if (query || hash || state) {
+    return { pathname: to, query, hash, state };
+  }
+
+  return to;
+}
+
+const propTypes = {
+  onlyActiveOnIndex: React.PropTypes.bool.isRequired,
+  to: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.object,
+  ]).isRequired,
+  query: React.PropTypes.string,
+  hash: React.PropTypes.string,
+  state: React.PropTypes.object,
+  action: React.PropTypes.oneOf([
+    'push',
+    'replace',
+  ]).isRequired,
+  onClick: React.PropTypes.func,
+  active: React.PropTypes.bool,
+  target: React.PropTypes.string,
+  children: React.PropTypes.node.isRequired,
+};
+
+const contextTypes = {
+  router: React.PropTypes.object,
+};
+
+const defaultProps = {
+  onlyActiveOnIndex: false,
+  action: 'push',
+};
+
+class LinkContainer extends React.Component {
+  onClick = (event) => {
+    const {
+      to, query, hash, state, children, onClick, target, action,
+    } = this.props;
+
+    if (children.props.onClick) {
+      children.props.onClick(event);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (
+      target ||
+      event.defaultPrevented ||
+      isModifiedEvent(event) ||
+      !isLeftClickEvent(event)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+
+    this.context.router[action](
+      createLocationDescriptor(to, query, hash, state)
+    );
+  };
+
+  render() {
+    const { router } = this.context;
+    const { onlyActiveOnIndex, to, children, ...props } = this.props;
+
+    props.onClick = this.onClick;
+
+    // Ignore if rendered outside Router context; simplifies unit testing.
+    if (router) {
+      props.href = router.createHref(to);
+
+      if (props.active === null) {
+        props.active = router.isActive(to, onlyActiveOnIndex);
+      }
+    }
+
+    return React.cloneElement(React.Children.only(children), props);
+  }
+}
+
+LinkContainer.propTypes = propTypes;
+LinkContainer.contextTypes = contextTypes;
+LinkContainer.defaultProps = defaultProps;
+
+export default LinkContainer;