mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
refactor
This commit is contained in:
parent
0bc65e3184
commit
27cf2e9012
@ -1,7 +1,10 @@
|
||||
import './src/styles/global.scss'
|
||||
import React from 'react'
|
||||
import AppProvider from './src/store/Provider'
|
||||
import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
|
||||
import PropTypes from 'prop-types'
|
||||
import AppProvider from './src/store/AppProvider'
|
||||
import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
|
||||
|
||||
// Global styles
|
||||
import './src/styles/global.scss'
|
||||
|
||||
// IntersectionObserver polyfill for gatsby-image (Safari, IE)
|
||||
if (typeof window !== 'undefined' && !window.IntersectionObserver) {
|
||||
@ -9,10 +12,13 @@ if (typeof window !== 'undefined' && !window.IntersectionObserver) {
|
||||
}
|
||||
|
||||
// React Context in Browser
|
||||
// eslint-disable-next-line
|
||||
export const wrapRootElement = ({ element }) => {
|
||||
return <AppProvider>{element}</AppProvider>
|
||||
}
|
||||
|
||||
// Page Transitions & Layout
|
||||
export const wrapPageElement = wrapPageElementWithTransition
|
||||
wrapRootElement.propTypes = {
|
||||
element: PropTypes.any
|
||||
}
|
||||
|
||||
// Layout with Page Transitions
|
||||
export const wrapPageElement = wrapPageElementWithLayout
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { renderToString } from 'react-dom/server'
|
||||
import AppProvider from './src/store/Provider'
|
||||
import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
|
||||
import AppProvider from './src/store/AppProvider'
|
||||
import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
|
||||
|
||||
export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
|
||||
// React Context in SSR/build
|
||||
@ -9,5 +9,5 @@ export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
|
||||
replaceBodyHTMLString(renderToString(<ConnectedBody />))
|
||||
}
|
||||
|
||||
// Page Transitions & Layout
|
||||
export const wrapPageElement = wrapPageElementWithTransition
|
||||
// Layout with Page Transitions
|
||||
export const wrapPageElement = wrapPageElementWithLayout
|
||||
|
@ -14,9 +14,6 @@ import styles from './Layout.module.scss'
|
||||
// whyDidYouUpdate(React)
|
||||
// }
|
||||
|
||||
const timeout = 250
|
||||
const RoutesContainer = posed.div(fadeIn)
|
||||
|
||||
const query = graphql`
|
||||
query {
|
||||
contentYaml {
|
||||
@ -25,10 +22,27 @@ const query = graphql`
|
||||
}
|
||||
`
|
||||
|
||||
const LayoutMarkup = ({ children, data, location }) => {
|
||||
const { allowedHosts } = data.contentYaml
|
||||
const timeout = 200
|
||||
const RoutesContainer = posed.div(fadeIn)
|
||||
|
||||
export default class Layout extends PureComponent {
|
||||
static propTypes = {
|
||||
children: PropTypes.any.isRequired,
|
||||
location: PropTypes.shape({
|
||||
pathname: PropTypes.string.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, location } = this.props
|
||||
const isHomepage = location.pathname === '/'
|
||||
|
||||
return (
|
||||
<StaticQuery
|
||||
query={query}
|
||||
render={data => {
|
||||
const { allowedHosts } = data.contentYaml
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typekit />
|
||||
@ -48,39 +62,7 @@ const LayoutMarkup = ({ children, data, location }) => {
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
LayoutMarkup.propTypes = {
|
||||
children: PropTypes.any.isRequired,
|
||||
data: PropTypes.shape({
|
||||
contentYaml: PropTypes.shape({
|
||||
allowedHosts: PropTypes.array.isRequired
|
||||
}).isRequired
|
||||
}).isRequired,
|
||||
location: PropTypes.shape({
|
||||
pathname: PropTypes.string.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
export default class Layout extends PureComponent {
|
||||
static propTypes = {
|
||||
children: PropTypes.any.isRequired,
|
||||
location: PropTypes.shape({
|
||||
pathname: PropTypes.string.isRequired
|
||||
}).isRequired
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, location } = this.props
|
||||
|
||||
return (
|
||||
<StaticQuery
|
||||
query={query}
|
||||
render={data => (
|
||||
<LayoutMarkup data={data} location={location}>
|
||||
{children}
|
||||
</LayoutMarkup>
|
||||
)}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { render } from 'react-testing-library'
|
||||
import AppProvider from './Provider.jsx'
|
||||
import AppProvider from './AppProvider.jsx'
|
||||
|
||||
describe('AppProvider', () => {
|
||||
it('renders correctly', () => {
|
Loading…
Reference in New Issue
Block a user