Prepare UI for text search

This commit is contained in:
LordMathis 2020-01-08 22:28:57 +01:00
parent 8d917e7216
commit c7c46db413
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
9 changed files with 96 additions and 8 deletions

View File

@ -1,6 +1,6 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import { Spinner, Header } from '.' import { Spinner, Header, SearchBox } from '.'
import '../stylesheets/globals.scss' import '../stylesheets/globals.scss'
import MarkdownIt from 'markdown-it' import MarkdownIt from 'markdown-it'
import styles from './Blog.scss' import styles from './Blog.scss'
@ -39,8 +39,10 @@ export default class Blog extends Component {
return ( return (
<div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts"> <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
<div className={styles.headerContainer}>
<Header header={'Blog'} role="heading" aria-level="2"/> <Header header={'Blog'} role="heading" aria-level="2"/>
<SearchBox />
</div>
<div className={`${styles.postsList}`} role="list"> <div className={`${styles.postsList}`} role="list">
{postsHTML} {postsHTML}
</div> </div>

View File

@ -24,3 +24,8 @@
.postListItem { .postListItem {
border-bottom: 5px solid $body; border-bottom: 5px solid $body;
} }
.headerContainer {
display: flex;
justify-content: space-between;
}

View File

@ -0,0 +1,19 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import '../stylesheets/globals.scss'
import styles from './SearchBox.scss'
export default class SearchBox extends Component {
static propTypes = {
query: PropTypes.string
}
render () {
return (
<div className={styles.container}>
<input placeholder='Search' className={styles.search} type="text" />
<i className="fa fa-search"></i>
</div>
)
}
}

View File

@ -0,0 +1,34 @@
@import "../stylesheets/variables.scss";
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 2px $black;
}
.search {
position: relative;
padding: 15px 40px 15px 20px;
width: 20px;
color: $black;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
border: none;
border-radius: 5px;
background: $body;
transition: width 0.4s ease;
outline: none;
box-sizing: border-box;
&:focus{ width: 300px; }
}
i{
position: relative;
left: -37px;
color: $black;
}

View File

@ -12,3 +12,4 @@ export { default as SocialLinks } from './SocialLinks'
export { default as Column } from './Column' export { default as Column } from './Column'
export { default as Resume } from './Resume' export { default as Resume } from './Resume'
export { default as Footer } from './Footer' export { default as Footer } from './Footer'
export { default as SearchBox } from './SearchBox'

View File

@ -0,0 +1,24 @@
import React, { Component } from 'react'
import { Blog } from '../components'
import PropTypes from 'prop-types'
import '../stylesheets/globals.scss'
export default class BlogContainer extends Component {
static propTypes = {
posts: PropTypes.arrayOf(PropTypes.object).isRequired
}
constructor (props) {
super(props)
this.state = {
isLoading: false,
posts: props.posts
}
}
render () {
return (
<Blog isLoading={ this.state.isLoading } posts={ this.state.posts } />
)
}
}

View File

@ -1,6 +1,7 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { About, Blog, Home, Wrapper, Column, Footer } from '../components' import { About, Home, Wrapper, Column, Footer } from '../components'
import { BlogContainer } from '.'
export default class MainContainer extends Component { export default class MainContainer extends Component {
static propTypes = { static propTypes = {
@ -37,8 +38,7 @@ export default class MainContainer extends Component {
about={this.state.about}/> about={this.state.about}/>
</Column> </Column>
<Column left={false}> <Column left={false}>
<Blog isLoading={this.state.isLoadingBlog} <BlogContainer posts={this.state.posts}/>
posts={this.state.posts}/>
</Column> </Column>
</Wrapper> </Wrapper>
<Footer config={this.state.config} /> <Footer config={this.state.config} />

View File

@ -1,3 +1,4 @@
export { default as MainContainer } from './MainContainer' export { default as MainContainer } from './MainContainer'
export { default as ContentContainer } from './ContentContainer' export { default as ContentContainer } from './ContentContainer'
export { default as NotFoundContainer } from './NotFoundContainer' export { default as NotFoundContainer } from './NotFoundContainer'
export { default as BlogContainer } from './BlogContainer'

View File

@ -54,8 +54,10 @@ if (config.storage === 'file') {
storage = new MongoStorage(config) storage = new MongoStorage(config)
} }
if (config.storage === 'mongo') {
const postApi = new Api(storage) const postApi = new Api(storage)
app.get('/api/v1/posts', postApi.getPosts.bind(postApi)) app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
}
const scanner = new Scanner(config, storage) const scanner = new Scanner(config, storage)