Error Boundaries solution

solutions/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
+      };
+    });
+};

solutions/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 };
+    });
+};

solutions/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;

solutions/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 />;
+};

solutions/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;

solutions/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;

solutions/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;

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

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

solutions/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;

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

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

solutions/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;

solutions/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;

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

solutions/src/error-boundaries/index.js

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

solutions/src/error-boundaries/modules/ErrorBoundary/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import ErrorImage from "../../components/common/errorImage";
+import Card from "../../components/library/card";
+import Button from "../../components/library/button";
+import Label from "../../components/library/label";
+const ErrorCard = 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 ErrorBoundary extends Component {
+  state = { hasError: false };
+
+  componentDidCatch(error, info) {
+    // Display fallback UI
+    this.setState({ hasError: true });
+    // You can also log the error to an error reporting service
+    // logErrorToMyService(error, info);
+  }
+  reloadPage = () => {
+    window.location.reload();
+  };
+  render() {
+    console.log("chekc here", this.state);
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <ErrorCard>
+          <Label>Ahhh! Something went wrong.</Label>
+          <ErrorImage />
+          <Button onClick={this.reloadPage}>Reload</Button>
+        </ErrorCard>
+      );
+    }
+    return this.props.children;
+  }
+}

solutions/src/error-boundaries/modules/Profile/description.js

@@ -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>

solutions/src/error-boundaries/modules/Profile/index.js

@@ -0,0 +1,52 @@
+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 Nav from "../../components/common/nav";
+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>
+    );
+  }
+}