diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
new file mode 100644
index 0000000..004cdb6
--- /dev/null
+++ b/src/components/error-boundary.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export class ErrorBoundary extends React.Component {
+ state = {
+ error: false
+ }
+
+ static getDerivedStateFromError() {
+ return {
+ error: true
+ }
+ }
+
+ render() {
+ if (this.state.error) {
+ return
Something went wrong.
+ }
+
+ return this.props.children
+ }
+}
\ No newline at end of file
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index 545b39f..d8ff653 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import data from '../__stubs__/landing-data.json'
+import data from "../__stubs__/landing-data.json";
import { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png";
@@ -21,30 +21,32 @@ import {
PageFooter,
PageHeader,
} from "./style";
+import { ErrorBoundary } from "../components/error-boundary";
export const LandingPage = () => {
return (
<>
-
-
+
+
-
-
-
+ />
+
+
+
@@ -64,21 +66,24 @@ export const LandingPage = () => {
- {data.map((item, index) => (
-
- {item.body}
-
- ))}
+
>
);
};
+
+const Cards = () =>
+ data.map((item, index) => (
+
+ {item.body}
+
+ ));
diff --git a/src/pages/search-character.tsx b/src/pages/search-character.tsx
index e7a1755..e04b1a4 100644
--- a/src/pages/search-character.tsx
+++ b/src/pages/search-character.tsx
@@ -6,6 +6,9 @@ import logo from "../assets/logo_1x.png";
import logo2x from "../assets/logo_2x.png";
import logo4x from "../assets/logo_4x.png";
import { NavPanel } from "../components/nav-panel";
+import { Header1 } from "../components/common";
+import { InputField } from "../components/field/field";
+import { URLs } from "../__data__/urls";
import {
BrandText,
@@ -19,9 +22,6 @@ import {
SearchButton,
SearchForm,
} from "./style";
-import { Header1 } from "../components/common";
-import { InputField } from "../components/field/field";
-import { URLs } from "../__data__/urls";
export const SearchCharacterPage = () => {
return (
diff --git a/src/routes.tsx b/src/routes.tsx
index 3344c5c..75961d1 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,16 +1,21 @@
-import React from 'react';
-import { Routes, Route } from'react-router-dom';
+import React from "react";
+import { Routes, Route } from "react-router-dom";
-import { URLs } from './__data__/urls';
-import { LandingPage } from './pages/landing';
-import { SearchCharacterPage } from './pages/search-character';
+import { URLs } from "./__data__/urls";
+import { LandingPage } from "./pages/landing";
+import { SearchCharacterPage } from "./pages/search-character";
+import { ErrorBoundary } from "./components/error-boundary";
export const PageRoutes = () => (
-
- } />
- } />
- {URLs.ui.search && } />}
+
+
+ } />
+ } />
+ {URLs.ui.search && (
+ } />
+ )}
- Page not found} />
-
-)
+ Page not found} />
+
+
+);