diff --git a/src/components/Blog.js b/src/components/Blog.js
index bd1fdf2..8a5417d 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -9,7 +9,9 @@ import contentStyle from '../stylesheets/content.scss'
export default class Blog extends Component {
static propTypes = {
isLoading: PropTypes.bool.isRequired,
- posts: PropTypes.arrayOf(PropTypes.object).isRequired
+ posts: PropTypes.arrayOf(PropTypes.object).isRequired,
+ searchString: PropTypes.string.isRequired,
+ handleChange: PropTypes.func.isRequired
}
render () {
@@ -41,7 +43,7 @@ export default class Blog extends Component {
-
+
{postsHTML}
diff --git a/src/components/NotFoundPage.js b/src/components/NotFoundPage.js
index dce0428..17a26c0 100644
--- a/src/components/NotFoundPage.js
+++ b/src/components/NotFoundPage.js
@@ -3,7 +3,7 @@ import { Navbar, Header } from '.'
import '../stylesheets/globals.scss'
import contentStyle from '../stylesheets/content.scss'
-export const NotFoundPage = (props) => {
+const NotFoundPage = (props) => {
return (
diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js
index f0d9433..b67e55e 100644
--- a/src/components/SearchBox.js
+++ b/src/components/SearchBox.js
@@ -5,14 +5,17 @@ import styles from './SearchBox.scss'
export default class SearchBox extends Component {
static propTypes = {
- query: PropTypes.string
+ handleChange: PropTypes.func.isRequired,
+ searchString: PropTypes.string
}
render () {
return (
-
-
+
+
+
+
)
}
diff --git a/src/components/SearchBox.scss b/src/components/SearchBox.scss
index fafeb68..d88a738 100644
--- a/src/components/SearchBox.scss
+++ b/src/components/SearchBox.scss
@@ -6,7 +6,6 @@
justify-content: center;
align-items: center;
box-sizing: border-box;
- border: 2px $black;
}
.search {
@@ -15,11 +14,10 @@
width: 20px;
color: $black;
font-size: 16px;
- font-weight: 100;
letter-spacing: 2px;
border: none;
border-radius: 5px;
- background: $body;
+ background: $white;
transition: width 0.4s ease;
outline: none;
box-sizing: border-box;
@@ -27,7 +25,7 @@
&:focus{ width: 300px; }
}
-i{
+.icon{
position: relative;
left: -37px;
color: $black;
diff --git a/src/containers/BlogContainer.js b/src/containers/BlogContainer.js
index 0fe9e3f..574e4fa 100644
--- a/src/containers/BlogContainer.js
+++ b/src/containers/BlogContainer.js
@@ -12,13 +12,18 @@ export default class BlogContainer extends Component {
super(props)
this.state = {
isLoading: false,
- posts: props.posts
+ posts: props.posts,
+ searchString: ''
}
}
+ handleChange (event) {
+ this.setState({ searchString: event.target.value })
+ }
+
render () {
return (
-
+
)
}
}
diff --git a/src/containers/NotFoundContainer.js b/src/containers/NotFoundContainer.js
index 1ec8a02..7222b6d 100644
--- a/src/containers/NotFoundContainer.js
+++ b/src/containers/NotFoundContainer.js
@@ -11,13 +11,11 @@ export default class NotFoundContainer extends Component {
constructor (props) {
super(props)
let data
-
- // eslint-disable-next-line no-undef
- if (__isBrowser__) {
+ if (typeof window === 'undefined') {
+ data = props.staticContext.context
+ } else {
data = window.__INITIAL_DATA__
delete window.__INITIAL_DATA__
- } else {
- data = props.staticContext.context
}
this.state = {