1 files changed, 51 insertions, 0 deletions
diff --git a/finished-application/frontend/components/ErrorMessage.js b/finished-application/frontend/components/ErrorMessage.js
new file mode 100644
index 0000000..52d59a8
--- /dev/null
+++ b/finished-application/frontend/components/ErrorMessage.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+const ErrorStyles = styled.div`
+  padding: 2rem;
+  background: white;
+  margin: 2rem 0;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: 5px solid red;
+  p {
+    margin: 0;
+    font-weight: 100;
+  }
+  strong {
+    margin-right: 1rem;
+  }
+`;
+
+const DisplayError = ({ error }) => {
+  if (!error || !error.message) return null;
+  if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
+    return error.networkError.result.errors.map((error, i) => (
+      <ErrorStyles key={i}>
+        <p data-test="graphql-error">
+          <strong>Shoot!</strong>
+          {error.message.replace('GraphQL error: ', '')}
+        </p>
+      </ErrorStyles>
+    ));
+  }
+  return (
+    <ErrorStyles>
+      <p data-test="graphql-error">
+        <strong>Shoot!</strong>
+        {error.message.replace('GraphQL error: ', '')}
+      </p>
+    </ErrorStyles>
+  );
+};
+
+DisplayError.defaultProps = {
+  error: {},
+};
+
+DisplayError.propTypes = {
+  error: PropTypes.object,
+};
+
+export default DisplayError;