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} />

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

@@ -0,0 +1,9 @@
+import { keyframes } from 'styled-components'
+
+const Blink = keyframes`
+  0% {opacity: 0.1}
+  50% {opacity: 0.3}
+  100% {opacity: 0.1}
+`
+
+export default Blink

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const Button = styled.button`
+  background: #0eb550;
+  color: #fff;
+  border: 1px solid #1d99bd;
+  border-radius: 2px;
+  padding: 10px;
+  margin-top: 20px;
+  width: 100%;
+  outline: none;
+  font-size: 16px;
+  &:active {
+    background: #6ed396;
+  }
+`;
+
+export default Button;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const Card = styled.div`
+  background: #FFF;
+  border: 1px solid #DDD;
+  border-radius: 2px;
+  padding: 10px;
+`
+
+export default Card

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+const Clear = styled.div`
+  clear: both;
+`
+
+export default Clear

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const Input = styled.input`
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 10px;
+  width: calc(100% - 20px);
+  outline: none;
+  font-size: 16px;
+
+  &:hover,
+  &:focus {
+    border-color: #6ed396;
+  }
+`;
+
+export default Input;

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

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Label = styled.div`
+  height: 30px;
+  padding: 10px;
+  text-align: center;
+  color: ${props => props.color || "#0EB550"};
+`;
+
+export default Label;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const Star = styled.span`
+  margin: 10px;
+  &::after {
+    content: ' \\2605';
+    color: gold;
+  }
+`
+
+export default Star

exercises/src/error-boundaries/img/error.jpg

@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+import Profile from "./modules/Profile";
+
+class App extends Component {
+  render() {
+    return <Profile />;
+  }
+}
+
+export default App;

exercises/src/error-boundaries/img/github-logo.png

@@ -0,0 +1,8 @@
+import React from 'react'
+import styled from 'styled-components'
+const Description = styled.div`
+  color: #999;
+  font-size: 12px;
+`
+
+export default props => <Description>{props.content}</Description>

exercises/src/error-boundaries/index.js

@@ -0,0 +1,51 @@
+import React, { Component, Fragment } from "react";
+import { getRepos } from "../../api/repos";
+import { getUser } from "../../api/user";
+import ProfileInput from "./profile-input";
+import UserProfile from "./profile";
+import Repositories from "./repositories";
+import Card from "../../components/library/card";
+import styled from "styled-components";
+
+const RepositoriesCard = styled(Card)`
+  text-align: center;
+  box-sizing: border-box;
+  margin: 20px auto 0;
+  padding: 30px 50px;
+  width: 500px;
+  min-height: 100px;
+  color: #000000;
+
+  @media (max-width: 600px) {
+    width: 90%;
+  }
+`;
+export default class Profile extends Component {
+  state = {
+    userRepos: [{}, {}, {}, {}, {}],
+    userProfile: {}
+  };
+  getUserInfo = userName => {
+    getUser(userName).then(userProfile => this.setState({ userProfile }));
+    getRepos(userName).then(userRepos => this.setState({ userRepos }));
+  };
+  render() {
+    const { userRepos, userProfile } = this.state;
+    let RepositoriesData = (
+      <RepositoriesCard>
+        <UserProfile userProfile={userProfile} />
+        <Repositories repos={userRepos} />
+      </RepositoriesCard>
+    );
+
+    if (!userProfile.url) {
+      RepositoriesData = <RepositoriesCard>No Data Found..</RepositoriesCard>;
+    }
+    return (
+      <Fragment>
+        <ProfileInput getUserInfo={this.getUserInfo} />
+        {RepositoriesData}
+      </Fragment>
+    );
+  }
+}