#3 Use Errors component from app

package.json

@@ -9,17 +9,20 @@
 		"lint": "eslint --fix ./src/**/*.js"
 	},
 	"dependencies": {
+		"@smooth-ui/core-sc": "^7.0.4",
 		"@yarnpkg/pnpify": "^2.3.3",
 		"jquery": "^3.5.1",
 		"next": "^9.5.5",
 		"next-optimized-images": "^2.6.2",
+		"polished": "^4.0.3",
 		"preact": "^10.5.4",
 		"prop-types": "15.7.2",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-is": "^16.13.1",
 		"react-slick": "^0.27.11",
 		"react-spring": "^8.0.27",
+		"reakit": "^1.2.4",
 		"resolve": "^1.17.0",
 		"slick-carousel": "^1.8.1",
 		"styled-components": "^4.4.1",

src/components/Errors/Errors.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+import Typography from '../Typography';
+
+const Headline = styled(Typography)`
+	line-height: 1.5rem;
+`;
+
+const Container = styled.div`
+	width: 28rem;
+	position: fixed;
+	bottom: 2rem;
+	left: 50%;
+	transform: translateX(-50%);
+	color: ${({ theme }) => theme.color.danger};
+	background: ${({ theme }) => lighten(0.53, theme.color.danger)};
+	border: 1px solid ${({ theme }) => lighten(0.45, theme.color.danger)};
+	padding: 2rem;
+	z-index: 1;
+	border-radius: .25rem;
+	font-size: 1rem;
+	line-height: 1.4rem;
+	box-shadow: 0 .5rem 1rem -.25rem rgba(0,0,0,.1);
+	text-align: left;
+`;
+
+const CloseButton = styled.span`
+	position: absolute;
+	top: 2rem;
+	right: 2rem;
+	cursor: pointer;
+	opacity: 1;
+	transition: opacity 200ms ease-out;
+
+	&:hover {
+		opacity: .6;
+	}
+`;
+
+const Title = styled(Headline)`
+
+`;
+
+const ErrorEl = styled.div`
+	padding-top: 1rem;
+	border-top: 1px solid ${({ theme }) => lighten(0.45, theme.color.danger)};
+
+	& > p {
+		margin-top: 0;
+		margin-bottom: 0.5rem;
+	}
+`;
+
+const getErrorTitle = (errors) => {
+  if (errors.length === 1) return 'An unexpected error has occurred';
+  return `${errors.length} unexpected errors have occurred`;
+};
+
+const Errors = ({ errors }) => {
+  const [isOpened, setIsOpened] = useState(true);
+  const onClose = () => setIsOpened(false);
+
+  return (errors.length > 0 && isOpened ? (
+    <Container>
+      <CloseButton onClick={onClose}>✕</CloseButton>
+      <Title variant="h5">{getErrorTitle(errors)}</Title>
+      {errors.map((error) => (
+        <ErrorEl key={error}>
+          {error.split('\n').map((errorLine) => (
+            <p key={errorLine}>{errorLine}</p>
+          ))}
+        </ErrorEl>
+      ))}
+    </Container>
+  ) : null);
+};
+
+export default Errors;

src/components/Errors/index.js

@@ -0,0 +1,3 @@
+import Errors from './Errors';
+
+export default Errors;

src/lib/theme/dark/color.js

@@ -8,6 +8,7 @@ export default {
   typoPrimary: '#fff',
   typoSecondary: '#6F767D',
   typoTertiary: '#77777c',
+  danger: '#ce1126',
 
   typoAccent: 'rgb(143, 75, 0)',
 };

src/lib/theme/light/color.js

@@ -8,6 +8,7 @@ export default {
   typoPrimary: '#252525',
   typoSecondary: '#6F767D',
   typoTertiary: '#77777c',
+  danger: '#ce1126',
 
   typoAccent: 'rgb(143, 75, 0)',
 };

src/pages/index.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { space } from 'styled-system';
+import Errors from '../components/Errors';
 import Typography from '../components/Typography';
 import OuterRow from '../components/Layout/OuterRow';
 // import Feature from '../components/_project/home/Feature'
@@ -43,9 +44,10 @@ const ButtonWrapper = styled('div')`
 `;
 
 const Index = (props) => {
-  const { contributors, photoUrls } = props;
+  const { contributors, photoUrls, errors } = props;
   return (
     <Wrapper>
+      <Errors errors={errors} />
       <HeaderWrapper py={[6]}>
         <OuterRow rowWidth="wide">
           <Typography type="h1">US-Iran Relations</Typography>
@@ -155,7 +157,9 @@ const Index = (props) => {
         <>
           <FeatureWrapper>
             <Features />
-            <Footer contributors={contributors} photoUrls={photoUrls} />
+            {!errors && (
+              <Footer contributors={contributors} photoUrls={photoUrls} />
+            )}
           </FeatureWrapper>
         </>
       </ThemeProvider>
@@ -164,22 +168,26 @@ const Index = (props) => {
 };
 
 export async function getStaticProps() {
-  const res = await fetch(`${process.env.API_URL}/items/contributors`);
-  const contributors = await res.json();
-  const photoUrls = {};
-  await Promise.all(contributors.data.map(async (contributor) => {
-    const { photo } = contributor;
-    const photoRes = photo
-      ? await fetch(`${process.env.API_URL}/files/${photo}`)
-      : await fetch(`${process.env.API_URL}/files/11`);
-    const { data } = await photoRes.json();
-    const photoUrl = `${process.env.API_URL}/assets/${data.private_hash}`;
-    photoUrls[contributor.photo] = photoUrl;
-  }));
-
-  return {
-    props: { contributors, photoUrls }, // will be passed to the page component as props
-  };
+  const res = await fetch(`${process.env.API_URL}/items/contributors`)
+    .catch((err) => ({
+      error: err.message,
+    }));
+  if (!res.error) {
+    const contributors = await res.json();
+    const photoUrls = {};
+    await Promise.all(contributors.data.map(async (contributor) => {
+      const { photo } = contributor;
+      const photoRes = photo
+        ? await fetch(`${process.env.API_URL}/files/${photo}`)
+        : await fetch(`${process.env.API_URL}/files/11`);
+      const { data } = await photoRes.json();
+      const photoUrl = `${process.env.API_URL}/assets/${data.private_hash}`;
+      photoUrls[contributor.photo] = photoUrl;
+    }));
+    return {
+      props: { contributors, photoUrls },
+    };
+  } return { props: { errors: [res.error] } };
 }
 
 export default Index;