<|start_filename|>src/constants/constant.js<|end_filename|>
export const AUTH_USER_SET = 'AUTH_USER_SET'
export const BLOG_PAGE = 'BLOG_PAGE'


<|start_filename|>src/components/SignOut/index.js<|end_filename|>
import React, { Component } from 'react'
import { withFirebase } from '../Firebase/FirebaseContext'

const SignOutButton = data => (
  <button
    type="button"
    onClick={data.data.firebase ? data.data.firebase.doSignOut : () => {}}
  >
    Sign Out
  </button>
)

const SignOutData = SignOutButton
class SignUP extends Component {
  render() {
    return <SignOutData data={this.props} />
  }
}

export default withFirebase(SignUP)


<|start_filename|>src/components/header.css<|end_filename|>
header {
    padding: 25px 0;
    display: inline-block !important;
    width: 100%;
    background: #f9f9ff;
    vertical-align: top;
}

header .logo img {
    margin: 0;
}

header .logo {
    display: inline-block;
    float: left;
    padding-left: 10px;
}

header ul.menulist {
    float: right;
    display: inline-block;
    margin: 0;
    padding: 10px 0;
}

header ul.menulist li {
    margin: 0;
    display: inline-block;
}

header ul.menulist li a, header ul.menulist li button {
    font-family: Open Sans, sans-serif;
    padding: 0 15px;
    text-decoration: none;
    display: inline-block;
    color: #222;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    outline: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

header ul.menulist li:last-of-type a {
    padding-right: 0;
}

@media (max-width: 1200px) {
    header ul.menulist li:last-of-type a{ padding-right: 10px; }
}

@media (max-width: 680px) {
    header ul.menulist, header .logo { float: none; width: 100%; }
    header { text-align: center }
    header ul.menulist li a, header ul.menulist li button { padding: 0 10px; font-size: 13px;}
}

<|start_filename|>src/pages/home.js<|end_filename|>
import React, { Component, Fragment } from 'react'
import { navigate } from 'gatsby'
import Layout from '../components/layout'
import withAuthorization from '../components/Session/withAuthorization'
import { StaticQuery, Link, graphql } from 'gatsby'
import HeadText from '../components/headText'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import cookie from 'react-cookies'

const BlogPost = ({ node }) => {
  return (
    <li>
      <img src={node.node.heroImage.fixed.src} alt={node.node.title} />
      <div className="blogtext">
        <Link to={node.node.slug}>{node.node.title}</Link>
        <p>{node.node.body.childMarkdownRemark.excerpt}</p>
      </div>
    </li>
  )
}

const SearchedBlogListData = ({ searchQuery }) => (
  <StaticQuery
    query={graphql`
      query pagesListQuery1 {
        allContentfulBlog(
          filter: { node_locale: { eq: "en-US" } }
          sort: { fields: [publishDate], order: DESC }
        ) {
          edges {
            node {
              title
              slug
              body {
                childMarkdownRemark {
                  excerpt
                }
              }
              heroImage {
                fixed(height: 300) {
                  src
                }
              }
            }
          }
        }
      }
    `}
    render={data1 => (
      <>
        <ul className="blog-post">
          {data1.allContentfulBlog.edges.map(item => {
            if (searchQuery !== '') {
              if (item.node.title.match(new RegExp(searchQuery, 'gi'))) {
                return <BlogPost node={item} key={Math.random()} />
              }
            } else {
              return <BlogPost node={item} key={Math.random()} />
            }
          })}
        </ul>
      </>
    )}
  />
)
class HomePageBase extends Component {
  constructor(props) {
    super(props)
    this.state = {
      searchQuery: '',
    }
  }

  onChange(e) {
    const value = e.target.value
    this.setState({ searchQuery: value })
  }

  render() {
    return (
      <React.Fragment>
        {this.props.users.sessionReducer.authUser ? (
          <div className="container">
            <div className="search-input">
              <input style={styles.input} onChange={this.onChange.bind(this)} />
              <span className="highlight" />
              <span className="bar" />
              <label>Search for blog</label>
              <span className="icon-search" />
            </div>
            <HeadText />
            <SearchedBlogListData searchQuery={this.state.searchQuery} />
          </div>
        ) : (
          navigate('/')
        )}
      </React.Fragment>
    )
  }
}
const authCondition = authUser => !!authUser

const mapStateToProps = state => {
  return {
    users: state,
  }
}

const HomePage = compose(
  connect(
    mapStateToProps,
    null
  ),
  withAuthorization(authCondition)
)(HomePageBase)

class Home extends Component {
  constructor() {
    super()
    this.state = {
      route: '',
    }
  }
  componentDidMount() {
    const saveData = cookie.load('authUser')
    if (saveData) {
      this.setState({ route: '' })
    } else {
      this.setState({ route: navigate('/') })
    }
  }
  render() {
    const saveData = cookie.load('authUser')
    return (
      <Fragment>
        {saveData ? (
          <Layout>
            <HomePage />
          </Layout>
        ) : (
          this.state.route
        )}
      </Fragment>
    )
  }
}
export default () => <Home />
const styles = {
  container: {
    padding: 10,
    borderBottom: '1px solid #ddd',
  },
  title: {
    fontSize: 18,
  },
  description: {
    fontSize: 15,
    color: 'rgba(0, 0, 0, .5)',
  },
  input: {
    height: 40,
    width: 300,
    padding: 7,
    fontSize: 15,
    outline: 'none',
  },
}


<|start_filename|>src/state/createStore.js<|end_filename|>
import { createStore as reduxCreateStore } from 'redux'
import rootReducer from '../reducers'

const createStore = () => reduxCreateStore(rootReducer)
export default createStore


<|start_filename|>src/pages/index.js<|end_filename|>
import React, { Component } from 'react'
import { Link } from 'gatsby'
import Layout from '../components/layout'
import * as routes from '../constants/routes'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import withAuthentication from '../components/Session/withAuthentication'
import * as Actions from '../actions/action'
class IndexPageBase extends Component {
  render() {
    const { users } = this.props
    return (
      <div className="mainparent">
        <div className="landingpage">
          <div className="container">
            <h1>
              {' '}
              Welcome To
              <br />
              Gatsby + Contentful + Firebase Demo{' '}
            </h1>
            {users.sessionReducer.authUser ? (
              <Link
                onClick={() => this.props.clickedOnBlog(true)}
                to={routes.HOME}
                className="signinlink"
              >
                Check Out Our Blogs
              </Link>
            ) : (
              <Link to={routes.SIGN_IN} className="signinlink">
                Sign In
              </Link>
            )}
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    users: state,
  }
}

const mapDispatchToProps = dispatch => ({
  clickedOnBlog: () => dispatch(Actions.clickedOnBlog(true)),
})

const Index1 = compose(
  withAuthentication,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(IndexPageBase)

export default () => (
  <Layout>
    <Index1 />
  </Layout>
)


<|start_filename|>src/templates/blog-post.js<|end_filename|>
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import Layout from '../components/layout'
import Disqus from '../components/Disqus'
import withAuthorization from '../components/Session/withAuthorization'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import cookie from 'react-cookies'
import { navigate } from 'gatsby'

const BlogPageContent = ({ data }) => (
  <>
    <Helmet title={`${data.title}`} />
    <div className="container blogdetails">
      <h1>{data.title}</h1>
      <div
        dangerouslySetInnerHTML={{ __html: data.body.childMarkdownRemark.html }}
      />
      <Disqus slug={data.slug} title={data.title} />
    </div>
  </>
)

const authCondition = authUser => !!authUser
const mapStateToProps = state => {
  return {
    users: state,
  }
}

const BlogPagePost = compose(
  connect(
    mapStateToProps,
    null
  ),
  withAuthorization(authCondition)
)(BlogPageContent)

class BlogPost extends Component {
  handleNewComment(comment) {
    console.log(comment.text)
  }
  constructor() {
    super()
    this.state = {
      route: '',
    }
  }

  componentDidMount() {
    const saveData = cookie.load('authUser')
    if (saveData) {
      this.setState({ route: '' })
    } else {
      this.setState({ route: navigate('/') })
    }
  }

  render() {
    const saveData = cookie.load('authUser')
    return (
      <Fragment>
        {saveData ? (
          <Layout>
            <BlogPagePost data={this.props.data.contentfulBlog} />
          </Layout>
        ) : (
          this.state.route
        )}
      </Fragment>
    )
  }
}

BlogPost.propTypes = {
  data: PropTypes.object.isRequired,
}

export default BlogPost

export const pageQuery = graphql`
  query blogPostQuery($slug: String!) {
    contentfulBlog(slug: { eq: $slug }) {
      title
      slug
      body {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`


<|start_filename|>src/pages/signup.js<|end_filename|>
import React, { Component, Fragment } from 'react'

import Layout from '../components/layout'
import SignUpForm from '../components/SignUp'
import { navigate } from 'gatsby'
import * as routes from '../constants/routes'
import { connect } from 'react-redux'
import cookie from 'react-cookies'
import Loader from '../components/Loader'

class SignUpPage extends Component {
  constructor() {
    super()
    this.state = {
      user: '',
      isLoading: true,
    }
  }
  componentDidMount() {
    const saveData = cookie.load('authUser')
    if (saveData) {
      this.setState({ user: saveData })
    } else {
      this.setState({ user: '' })
    }
    setTimeout(() => this.setState({ isLoading: false }), 1000)
  }

  render() {
    return (
      <Fragment>
        {this.state.user !== '' ? (
          navigate(routes.LANDING)
        ) : (
          <>
            {this.state.isLoading === true ? <Loader /> : null}
            <Layout>
              <div className="container signinpage">
                {' '}
                <h1>Sign Up</h1> <SignUpForm />{' '}
              </div>
            </Layout>
          </>
        )}
      </Fragment>
    )
  }
}
const mapStateToProps = state => {
  return {
    users: state,
  }
}
const Page = connect(mapStateToProps)(SignUpPage)
export default () => <Page />


<|start_filename|>src/pages/signin.js<|end_filename|>
import React, { Component, Fragment } from 'react'
import Layout from '../components/layout'

import SignInForm from '../components/SignIn'
import { SignUpLink } from '../components/SignUp'
import { PasswordForgetLink } from '../components/PasswordForget'
import { navigate } from 'gatsby'
import * as routes from '../constants/routes'
import getFirebase from '../components/Firebase'
import FirebaseContext from '../components/Firebase/FirebaseContext'
import withAuthentication from '../components/Session/withAuthentication'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import cookie from 'react-cookies'
import Loader from '../components/Loader'
class SignInPage extends Component {
  state = {
    firebase: null,
    isLoading: true,
  }

  componentDidMount() {
    const app = import('firebase/app')
    const auth = import('firebase/auth')
    const database = import('firebase/database')

    Promise.all([app, auth, database]).then(values => {
      const firebase = getFirebase(values[0])
      this.setState({ firebase })
    })
    setTimeout(() => this.setState({ isLoading: false }), 1000)
  }

  render() {
    return (
      <FirebaseContext.Provider value={this.state.firebase}>
        <SignInPageData {...this.props} load={this.state.isLoading} />
      </FirebaseContext.Provider>
    )
  }
}

const SignInPageData = props => {
  const saveData = cookie.load('authUser')
  return (
    <Fragment>
      {saveData ? (
        navigate(routes.LANDING)
      ) : (
        <>
          {props.load === true ? <Loader /> : null}
          <Layout>
            <div className="container signinpage">
              {' '}
              <h1>Log In</h1> <SignInForm /> <PasswordForgetLink />{' '}
              <SignUpLink />{' '}
            </div>
          </Layout>
        </>
      )}
    </Fragment>
  )
}
const mapStateToProps = state => {
  return {
    users: state,
  }
}

export default compose(
  connect(
    mapStateToProps,
    null
  ),
  withAuthentication
)(SignInPage)


<|start_filename|>data/siteConfig.js<|end_filename|>
module.exports = {
  siteTitle: 'gatsby-contentful-demo',
  siteDescription: "👋 Hey There! I'm a GatsbyJs starter!",
  authorName: 'Author',
  disqusSiteUrl: 'https://gatsby-blogger.netlify.com/',
  disqusShortname: 'https-gatsby-blogger-netlify-com',
}


<|start_filename|>src/components/headText.js<|end_filename|>
import React from 'react'

const HeadText = () => (
  <h1
    style={{ margin: `0 auto`, padding: `1rem 1rem 2rem`, textAlign: `center` }}
  >
    GatsbyJs + Contentful Demo
  </h1>
)

export default HeadText


<|start_filename|>src/components/Footer.js<|end_filename|>
import React, { Component } from 'react'

class Footer extends Component {
  render() {
    return (
      <footer style={{ textAlign: 'center' }}>
        <p>
          {' '}
          Copyright © 2019 Powered by{' '}
          <b>
            <a
              href="https://www.multidots.com/"
              target="_blank"
              rel="noopener noreferrer"
              style={{ textDecoration: 'none', color: '#8193fe' }}
            >
              Multidots
            </a>
            .
          </b>{' '}
          All rights reserved.{' '}
        </p>
      </footer>
    )
  }
}

export default Footer
