[Update] Fix #83 and improve button styles

service-worker.js

@@ -1,5 +1,5 @@
-const VERSION = 'v8';
-const RUNTIME = 'runtime';
+const VERSION = 'v9';
+const RUNTIME = 'runtime-9';
 
 const currentCaches = [RUNTIME, VERSION];
 

src/components/Button/index.js

@@ -3,10 +3,9 @@ import styled from 'emotion/react';
 export default styled.button`
   color: ${({ dark }) => dark ? `white` : `black`};
   background-color: ${({ naked }) => naked ? 'transparent' : 'white'};
-  border: none;
+  border: 1px solid darkgrey;
   outline: ${({ naked }) => naked ? 'none' : 'initial'};
   border-radius: '2px';
-  box-shadow: ${({ naked, noBorder }) => !naked && !noBorder ? '2px 2px 3px 0px black' : 'auto'};
   font-weight: 100;
   font-size: ${({ size = 16 }) => `${size}px`};
   margin: 2px 5px;

src/components/Icons/Bookmark.js

@@ -5,7 +5,7 @@ export default ({ isBookmarked, ...props }) => (
   <SVG viewBox="0 0 32 46" fill="black" x="0px" y="0px" {...props}>
     <g>
       <path d="M31.26,0.61A2.61,2.61,0,0,0,29.14,0H2.86A2.61,2.61,0,0,0,.74.61,2.37,2.37,0,0,0,0,2.39V42.74a3,3,0,0,0,1.66,2.66,2,2,0,0,0,2.66.17L16,36.31l11.68,9.26a2,2,0,0,0,2.66-.17A3,3,0,0,0,32,42.74V2.39A2.37,2.37,0,0,0,31.26.61ZM28,4V40.71L17.43,32.34A2,2,0,0,0,16,31.92a2,2,0,0,0-1.43.42L4,40.71V4H28Z" />
-      {!isBookmarked && <path d="M11,19.06h3v3a2,2,0,1,0,4,0v-3h3.38a2,2,0,0,0,0-4H18V11.47a2,2,0,1,0-4,0v3.59H11A2,2,0,0,0,11,19.06Z" />}
+      {isBookmarked && <path d="M11,19.06h3v3a2,2,0,1,0,4,0v-3h3.38a2,2,0,0,0,0-4H18V11.47a2,2,0,1,0-4,0v3.59H11A2,2,0,0,0,11,19.06Z" />}
     </g>
   </SVG>
 );

src/components/Select/index.js

@@ -2,7 +2,7 @@ import styled from 'emotion/react';
 
 export default styled.select`
   width: 300px;
-  box-shadow: 2px 2px 3px 0px black;
+  border: 1px solid darkgrey;
   background-color: #fafafa;
   text-overflow: ellipsis;
   outline: none;
@@ -13,4 +13,7 @@ export default styled.select`
   max-width: 80vw;
   font-size: 20px;
   padding: 5px;
+  &:focus, &:active {
+    border-color: teal;
+  }
 `;

src/components/Textfield/index.js

@@ -2,9 +2,8 @@ import styled from 'emotion/react';
 
 export default styled.input`
   border-radius: 1px;
-  box-shadow: 2px 2px 3px 0px black;
   background-color: #fafafa;
-  border: none;
+  border: 1px solid darkgrey;
   padding: 10px;
   margin: 5px;
   width: ${({ size }) => size ? `${size}px` : '280px'};
@@ -14,5 +13,6 @@ export default styled.input`
   text-align: ${({ center }) => center ? 'center' : 'initial'};
   &:focus {
     outline: none;
+    border-color: teal;
   }
 `;

src/constants.js

@@ -21,4 +21,9 @@ export const SETTINGS = {
 export const SEARCH_OPTIONS = {
   TYPE: 'search-type',
   SOURCE: 'search-source',
+};
+
+export const BOOKMARK_TYPES = {
+  SGGS: 'sggs',
+  SHABAD: 'shabad',
 };

src/pages/Bookmarks/index.js

@@ -1,57 +1,64 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
 import { Link } from 'react-router-dom';
-
 import styled from 'emotion/react';
-
-import Toolbar from '../../components/Toolbar';
-
-import Loader from '../../components/Loader';
-
+import { BOOKMARK_TYPES } from '../../constants';
 import { clearAllBookmarks, getAllBookmarks, updateBookmarkTitle } from '../../bookmarks';
-
-import { Card, CardActions, CardTitle } from '../../components/Card';
-
-import Textfield from '../../components/Textfield';
-
-import Button from '../../components/Button';
-
-const SearchCard = ({ data, onTitleChange }) => {
-  const { title, key, value } = data;
-
-  const Wrapper = styled.div`
-    display: flex;
-    flexWrap: wrap;
-    alignItems: center;
-    justifyContent: space-between 
-  `;
-
-  return (
-    <Card>
-      <CardTitle>
-        <Wrapper>
-          <Textfield
-            label={title}
-            onChange={(e, v) => onTitleChange(v)}
-            type="text"
-            defaultValue={title}
-          />
-        </Wrapper>
-      </CardTitle>
-      <CardActions>
-        { key === 'shabad' && <Link to={`/shabad/${value}`}><Button>Open Shabad</Button></Link> }
-        { key === 'sggs' && <Link to={`/SGGS/${value}`}><Button>{`Open Ang ${value}`}</Button></Link> }
-      </CardActions>
-    </Card>
-  );
-};
+import { Textfield, Button, Toolbar, Loader } from '../../components';
+import { Card, CardText, CardActions, CardTitle } from '../../components/Card';
+
+const { SGGS, SHABAD } = BOOKMARK_TYPES;
+
+const SearchCardWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: teal;
+  cursor: pointer;
+`;
+
+const SearchCard = ({ data: { title, key, value }, onTitleChange }) => (
+  <Card style={{ width: '30vw' }}>
+    <CardTitle style={{ textTransform: 'capitalize' }}>{title}</CardTitle>
+
+    <CardText>
+      Edit Title <Textfield className="input" label={title} onChange={onTitleChange} type="text" defaultValue={title} />
+    </CardText>
+
+    <CardActions>
+      {key === SHABAD && <StyledLink to={`/shabad/${value}`}>Open Shabad</StyledLink>}
+      {key === SGGS && <StyledLink to={`/SGGS/${value}`}>Open Ang {value}</StyledLink>}
+    </CardActions>
+  </Card>
+);
 
 SearchCard.propTypes = {
   data: PropTypes.object,
   onTitleChange: PropTypes.func,
 };
 
+const SearchCards = ({ items, onTitleChange }) => (
+  <SearchCardWrapper>
+    {
+      items
+        .map(b => (
+          <SearchCard
+            data={b}
+            key={b.id}
+            onTitleChange={({ currentTarget: { value: title = b.title } }) => onTitleChange({ ...b, title })}
+          />
+        ))
+    }
+  </SearchCardWrapper>
+);
+
 export default class Bookmarks extends Component {
   constructor (p) {
     super(p);
@@ -77,25 +84,6 @@ export default class Bookmarks extends Component {
       bookmarks = bookmarks.filter(e => e.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1);
     }
 
-    const SearchCards = ({ items }) => {
-      const Wrapper = styled.div`
-        display: flex;
-        flexWrap: wrap;
-        justifyContent: center;
-        flexDirection: row
-      `;
-
-      return (<Wrapper>{
-        items
-          .map(b => (
-            <SearchCard
-              data={b}
-              key={b.id}
-              onTitleChange={(title = b.title) => this.updateBookmark({ ...b, title })}
-            />
-          ))
-      }</Wrapper>);
-    };
 
     return (
       <div>
@@ -110,7 +98,7 @@ export default class Bookmarks extends Component {
         <Loader loading={loading}>{
           bookmarks.length === 0
             ? <h1 style={{ textAlign: 'center' }}>No Bookmarks Found</h1>
-            : <SearchCards items={bookmarks} />
+            : <SearchCards items={bookmarks} onTitleChange={this.handleUpdateBookmark} />
         }</Loader>
       </div>
     );
@@ -128,7 +116,7 @@ export default class Bookmarks extends Component {
       .catch(err => console.error(err));
   }
 
-  handleUpdateKeyword (keyword) {
+  handleUpdateKeyword ({ currentTarget: { value: keyword }}) {
     this.setState({ keyword });
   }
 }

src/pages/Main/Content.js

@@ -2,10 +2,13 @@ import React from 'react';
 import styled from 'emotion/react';
 import { Switch, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { SOURCES } from 'khajana';
 import {
   Author, Raag, Raags, Authors, Home, Bookmarks, Hukamnama, Baani,
   SGGS, Nitnem, Calendar, Shabad, Shabads, NotFound, Settings,
 } from '../';
+import pageTitleEnchancer from '../pageTitleEnchancer';
+import { findShabadTitle } from '../../utils';
 import { Search } from '../../components/Icons';
 import FloatingIcon from '../../components/FloatingIcon';
 
@@ -21,24 +24,30 @@ const BaaniWrapper = connect(mapStateToProps, null)(styled.div`
   padding-bottom: 100px;
 `);
 
+const propsToParamTitle = param => props => props.match.params[param];
+const propsToSGGSTitle = props => 'Sri Guru Granth Sahib - Ang ' + props.match.params.ang;
+const propsToTitle = ({ id, source, ang, gurbani: lines }) => (
+  findShabadTitle({ lines, id, ang, sourceName: SOURCES[source] })
+);
+
 const Content = () => (
   <div>
     <BaaniWrapper id="baaniWrapper">
       <Switch>
         <Route path="/" component={Home} exact />
-        <Route path="/sggs/:ang?" component={SGGS} />
-        <Route path="/calendar" component={Calendar} />
-        <Route path="/shabads/:q([a-z]+)?" exact component={Shabads} />
+        <Route path="/sggs/:ang?" component={pageTitleEnchancer(propsToSGGSTitle)(SGGS)} />
+        <Route path="/calendar" component={pageTitleEnchancer('Calendar')(Calendar)} />
+        <Route path="/shabads/:q([a-z]+)?" exact component={pageTitleEnchancer('Search Shabads')(Shabads)} />
         <Route path="/shabads/:id(\d+)" exact component={Shabad} />
-        <Route path="/settings" component={Settings} />
-        <Route path="/bookmarks" component={Bookmarks} />
-        <Route path="/authors" exact component={Authors} />
-        <Route path="/authors/:id/:name" component={Author} />
-        <Route path="/raags" exact component={Raags} />
-        <Route path="/raags/:id/:name" component={Raag} />
-        <Route path="/nitnem" exact component={Nitnem} />
-        <Route path="/nitnem/:baani" component={Baani} />
-        <Route path="/hukamnama" component={Hukamnama} />
+        <Route path="/settings" component={pageTitleEnchancer('Settings')(Settings)} />
+        <Route path="/bookmarks" component={pageTitleEnchancer('Bookmarks')(Bookmarks)} />
+        <Route path="/authors" exact component={pageTitleEnchancer('Authors')(Authors)} />
+        <Route path="/authors/:id/:name" component={pageTitleEnchancer(propsToParamTitle('name'))(Author)} />
+        <Route path="/raags" exact component={pageTitleEnchancer('Raags')(Raags)} />
+        <Route path="/raags/:id/:name" component={pageTitleEnchancer(propsToParamTitle('name'))(Raag)} />
+        <Route path="/nitnem" exact component={pageTitleEnchancer('Nitnem')(Nitnem)} />
+        <Route path="/nitnem/:baani" component={pageTitleEnchancer(propsToParamTitle('baani'))(Baani)} />
+        <Route path="/hukamnama" component={pageTitleEnchancer('Hukamnama')(Hukamnama)} />
         <Route component={NotFound} />
       </Switch>
     </BaaniWrapper>

src/pages/SGGS/index.js

@@ -13,9 +13,7 @@ class SGGS extends Component {
   constructor (props) {
     super(props);
 
-    let { ang = parseInt(localStorage.getItem('sggs-ang')) || 1} = this.props.match.params || { };
-
-    ang = parseInt(ang, 10);
+    const ang = parseInt(this.props.match.params.ang || localStorage.getItem('sggs-ang') || 1);
 
     this.state = {
       error: false,
@@ -27,15 +25,6 @@ class SGGS extends Component {
       isBookmarked: false,
     };
 
-    this.updateLines();
-
-    isBookmarked({ key: 'sggs', value: this.state.ang })
-      .then(isBookmarked => this.setState({ isBookmarked }))
-      .catch(err => {
-        console.error(err);
-        this.setState({ error: true });
-      });
-
     this.setAng = this.setAng.bind(this);
     this.handleDecrementAng = this.handleDecrementAng.bind(this);
     this.handleIncrementAng = this.handleIncrementAng.bind(this);
@@ -47,6 +36,21 @@ class SGGS extends Component {
     this.handleToggleBookmark = this.handleToggleBookmark.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.match.params.ang) {
+      this.updateLines();
+
+      isBookmarked({ key: 'sggs', value: this.state.ang })
+        .then(isBookmarked => this.setState({ isBookmarked }))
+        .catch(err => {
+          console.error(err);
+          this.setState({ error: true });
+        });
+    } else {
+      this.props.history.push(`/sggs/${this.state.ang}`);
+    }
+  }
+
   render () {
     const { isBookmarked, lines, ang, larivaar, larivaarAssist, showTranslation, error } = this.state;
 
@@ -86,6 +90,7 @@ class SGGS extends Component {
 
   updateLines(ang = this.state.ang) {
     this.setState({ lines: [] });
+
     return fetch(`assets/docs/json/SGGS/Ang ${ang}.json`)
       .then(r => r.json())
       .then(lines => this.setState({ lines, error: false, ang }))
@@ -98,17 +103,8 @@ class SGGS extends Component {
   setAng(ang) {
     console.log('SGGS received ' + ang);
     if (ang) {
-      this.props.history.push(`/sggs/${ang}`);
-      this.updateLines(ang);
-
-      isBookmarked({ key: 'sggs', value: ang })
-        .then(isBookmarked => this.setState({ isBookmarked }))
-        .catch(err => {
-          console.error(err);
-          this.setState({ error: true });
-        });
-
       localStorage.setItem('sggs-ang', ang);
+      this.props.history.push(`/sggs/${ang}`);
     }
   }