Merge pull request #5 from kamleshchandnani/error-boundaries

Error Boundaries exercise and slides

Author: kamleshchandnani

exercises/package.json

@@ -7,8 +7,10 @@
   "dependencies": {
     "react": "16.2.0",
     "react-dom": "16.2.0",
+    "react-helmet": "^5.2.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.0"
+    "react-scripts": "1.1.0",
+    "styled-components": "^3.2.5"
   },
   "devDependencies": {},
   "scripts": {

exercises/src/App.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
-import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
-import PerformanceOptimizations from './performance-optimizations'
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import PerformanceOptimizations from "./performance-optimizations";
+import ErrorBoundaries from "./error-boundaries";
 
 class App extends Component {
   render() {
@@ -9,13 +10,21 @@ class App extends Component {
         <div className="container">
           <div className="sidebar">
             <ul>
-              <li><Link to='/'>Refs</Link></li>
-              <li><Link to='/performance-optimizations'>perfromance optimizations</Link></li>
+              <li>
+                <Link to="/">Refs</Link>
+              </li>
+              <li>
+                <Link to="/performance-optimizations">perfromance optimizations</Link>
+              </li>
+              <li>
+                <Link to="/error-boundaries">Error Boundaries</Link>
+              </li>
             </ul>
           </div>
           <div className="content">
-            <Route exact path='/' component={PerformanceOptimizations} />
-            <Route path='/performance-optimizations' component={PerformanceOptimizations} />
+            <Route exact path="/" component={PerformanceOptimizations} />
+            <Route path="/performance-optimizations" component={PerformanceOptimizations} />
+            <Route path="/error-boundaries" component={ErrorBoundaries} />
           </div>
         </div>
       </Router>

exercises/src/error-boundaries/api/repos.js

@@ -0,0 +1,23 @@
+export const getRepos = username => {
+  return fetch(`https://api.github.com/users/${username}/repos?sort=updated`)
+    .then(response => response.json())
+    .then(data => {
+      let repos = data.map(repo => {
+        return {
+          id: repo.id,
+          name: repo.name,
+          stars: repo.stargazers_count,
+          description: repo.description,
+          url: repo.html_url
+        };
+      });
+      repos = repos.sort((a, b) => b.stars - a.stars).slice(0, 5);
+      return repos;
+    })
+    .catch(error => {
+      /* Error handling */
+      return {
+        error
+      };
+    });
+};

exercises/src/error-boundaries/api/user.js

@@ -0,0 +1,16 @@
+export const getUser = username => {
+  return fetch(`https://api.github.com/users/${username}`)
+    .then(response => response.json())
+    .then(data => {
+      return {
+        username: data.login,
+        name: data.name,
+        photo: data.avatar_url,
+        bio: data.bio || "no description",
+        url: data.html_url
+      };
+    })
+    .catch(error => {
+      return { error };
+    });
+};

exercises/src/error-boundaries/components/common/errorImage.js

@@ -0,0 +1,6 @@
+import React from "react";
+import errorImage from "../../img/error.jpg";
+
+const ErrorImage = () => <img alt="error" src={errorImage} />;
+
+export default ErrorImage;

exercises/src/error-boundaries/components/common/link.js

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+import A from "../library/anchor";
+import Blink from "../library/blink";
+
+const Loading = styled(A)`
+  background: #6ed396;
+  width: 40%;
+  height: 22px;
+  margin-top: 10px;
+  &::before {
+    content: "x";
+  }
+  animation: ${Blink} 2s linear infinite;
+`;
+
+export default props => {
+  if (props.url) return <A href={props.url}>{props.children}</A>;
+  else return <Loading />;
+};

exercises/src/error-boundaries/components/common/logo.js

@@ -0,0 +1,5 @@
+import React from "react";
+import githubLogo from "../../img/github-logo.png";
+const Logo = () => <img alt="github" src={githubLogo} />;
+
+export default Logo;

exercises/src/error-boundaries/components/common/nav.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styled, { injectGlobal } from "styled-components";
+import Logo from "./logo";
+import Helmet from "react-helmet";
+
+injectGlobal`
+  body {
+    margin: 0;
+    padding: 0;
+    background: #EEE;
+    font-family: 'Nunito', sans-serif;
+  }
+`;
+
+const NavBar = styled.div`
+  height: 30px;
+  padding: 10px;
+  background: #fff;
+  border-bottom: 1px solid #ddd;
+  text-align: center;
+  > img {
+    height: 30px;
+  }
+`;
+
+const Nav = () => (
+  <NavBar>
+    <Helmet
+      title="react-error"
+      link={[
+        {
+          href: "https://fonts.googleapis.com/css?family=Nunito",
+          rel: "stylesheet"
+        }
+      ]}
+    />
+    <Logo />
+  </NavBar>
+);
+
+export default Nav;

exercises/src/error-boundaries/components/library/anchor.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const A = styled.a`
+  text-decoration: none;
+  color: #6ed396;
+  display: inline-block;
+  width: "20px";
+`;
+
+export default A;

exercises/src/error-boundaries/components/library/avatar.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Avatar = styled.span`
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  border: 5px solid #EEE;
+  background-color: #EEE;
+  ${props => (props.src ? `background-image: url(${props.src})` : '')};
+  background-size: cover;
+`
+
+export default props => <Avatar src={props.url} />