Merge pull request #17 from omaralbeik/pwa-fixes

fix: Fix some bugs causing app to crash when browsing offline

src/components/SnippetModal.js

@@ -21,6 +21,9 @@ import {copyToClipboard} from '../utils';
 import {withRouter} from 'react-router-dom';
 import {snippetsLink, snippetLink} from '../links';
 
+// Strings
+import {genericStrings} from '../strings';
+
 
 class SnippetModal extends Component {
   static propTypes = {
@@ -49,12 +52,12 @@ class SnippetModal extends Component {
 
   render() {
     const {copied} = this.state;
-    const {snippet, ...props} = this.props;
+    const {snippet, toggle} = this.props;
     const {style} = this.props.theme;
     const syntaxClassName = style === 'dark' ? 'dark-code' : 'light-code';
 
     return (
-      <Modal {...props}>
+      <Modal toggle={toggle} isOpen centered scrollable size='lg'>
         <Helmet key='meta'>
           <title>{snippetLink(snippet).documentTitle}</title>
           <meta name="description" content={snippet.summary}/>
@@ -64,8 +67,8 @@ class SnippetModal extends Component {
           <h2>{snippet.name} <StyledBadge>{snippet.language.name}</StyledBadge></h2>
           <p>{snippet.summary}</p>
           <ButtonGroup>
-            <StyledButton onClick={this.close}>Close</StyledButton>
-            <StyledButton onClick={this.copy}>{copied ? 'Copied!' : 'Copy'}</StyledButton>
+            <StyledButton onClick={this.close}>{genericStrings.close}</StyledButton>
+            <StyledButton onClick={this.copy}>{copied ? `${genericStrings.copies}` : `${genericStrings.copy}`}</StyledButton>
           </ButtonGroup>
           <CodeContainer ref={snippet.id} dangerouslySetInnerHTML={{__html: snippet.html_text}} className={syntaxClassName}/>
           <ShareButtons message={snippet.name}/>

src/pages/Blog.js

@@ -16,6 +16,7 @@ import PostCell from '../components/PostCell';
 import PageTitle from '../components/PageTitle';
 import ErrorContainer from '../components/ErrorContainer'
 import SearchInput from '../components/SearchInput';
+import Loading from '../components/Loading';
 
 // Links
 import {blogLink} from '../links';
@@ -69,7 +70,7 @@ class Blog extends Component {
     });
   }
 
-  resetSearch() {
+  resetSearch = _ => {
     this.setState({results:null});
   }
 
@@ -89,6 +90,10 @@ class Blog extends Component {
       sortedPosts = results
     }
 
+    if (sortedPosts.length === 0 && !results) {
+      return <Loading/>
+    }
+
     return (
       <Container>
         <Helmet>

src/pages/BlogPostDetails.js

@@ -28,14 +28,14 @@ import APIHelper from '../utils/APIHelper';
 import {arrayFromObject} from '../utils';
 
 // Strings
-import {genericStrings} from '../strings';
 import {blogPostLink} from '../links';
 
 
 class BlogPostDetails extends Component {
 
   constructor(props) {
     super(props);
+
     this.state = { error: null };
     this.fetchBlogPost();
   }
@@ -44,7 +44,7 @@ class BlogPostDetails extends Component {
     window.scrollTo(0, 0);
   }
 
-  fetchBlogPost() {
+  fetchBlogPost = _ => {
     const {post_id} = this.props.match.params;
     APIHelper.fetchBlogPost(post_id).then(post => {
       this.props.addBlogPost({post});
@@ -53,12 +53,6 @@ class BlogPostDetails extends Component {
     });
   }
 
-  setTitle(post) {
-    if (post) {
-      document.title = `${post.title} | ${genericStrings.name}`;
-    }
-  }
-
   render() {
     const {blogPosts} = this.props;
     const {post_id} = this.props.match.params;
@@ -71,15 +65,15 @@ class BlogPostDetails extends Component {
       post = postsArray.filter(p => (p.slug === post_id))[0]
     }
 
-    this.setTitle(post);
-
     const {error} = this.state;
-    if (error) {
+    if (error && !post) {
       return (
         <ErrorContainer error={error}/>
       );
     }
 
+    if (!post) { return <Loading/>; }
+
     const {summary='', tags=[]} = post;
 
     return (
@@ -95,7 +89,7 @@ class BlogPostDetails extends Component {
 
   }
 
-  generateBody(post) {
+  generateBody = (post) => {
     if (!post) {
       return <Loading/>
     }
@@ -111,7 +105,7 @@ class BlogPostDetails extends Component {
     ];
   }
 
-  generateCoverImage(post) {
+  generateCoverImage = (post) => {
     if (!post) { return }
     if (!post.cover_image_url) { return }
     return (

src/pages/Portfolio.js

@@ -16,6 +16,7 @@ import ProjectCell from '../components/ProjectCell';
 import PageTitle from '../components/PageTitle';
 import ErrorContainer from '../components/ErrorContainer'
 import SearchInput from '../components/SearchInput';
+import Loading from '../components/Loading';
 
 // Links
 import {portfolioLink} from '../links';
@@ -70,7 +71,7 @@ class Portfolio extends Component {
     });
   }
 
-  resetSearch() {
+  resetSearch = _ => {
     this.setState({q: "", results: null});
   }
 
@@ -90,6 +91,10 @@ class Portfolio extends Component {
       sortedProjects = results
     }
 
+    if (sortedProjects.length === 0 && !results) {
+      return <Loading/>
+    }
+
     let technologies = [];
     sortedProjects.forEach(p => { technologies = technologies.concat(p.technologies) });
     technologies = technologies.map(t => t.name);

src/pages/Snippets.js

@@ -17,6 +17,7 @@ import PageTitle from '../components/PageTitle';
 import SnippetCell from '../components/SnippetCell';
 import SnippetModal from '../components/SnippetModal';
 import SearchInput from '../components/SearchInput';
+import Loading from '../components/Loading';
 
 // Links
 import {snippetsLink} from '../links';
@@ -90,11 +91,11 @@ class Snippets extends Component {
     });
   }
 
-  resetSearch() {
+  resetSearch = _ => {
     this.setState({q: "", results:null});
   }
 
-  renderModal(snippets, snippetsArray) {
+  renderModal = (snippets, snippetsArray) => {
     const {snippet_id} = this.props.match.params;
     if (!snippet_id) { return }
 
@@ -105,10 +106,10 @@ class Snippets extends Component {
       snippet = snippetsArray.filter(s => (s.slug === snippet_id))[0]
     }
 
-    if (!snippet) { return; }
+    if (!snippet) { return null; }
 
     return (
-      <SnippetModal snippet={snippet} toggle={this.toggle} isOpen centered scrollable size='lg'/>
+      <SnippetModal snippet={snippet} toggle={this.toggle}/>
     );
   }
 
@@ -128,6 +129,10 @@ class Snippets extends Component {
       sortedSnippets = results
     }
 
+    if (sortedSnippets.length === 0 && !results) {
+      return <Loading/>
+    }
+
     return (
       <Container>
         <Helmet key='meta'>