fetchData with props

Home.js

/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
/* eslint-disable no-console */
import React, { useState, useEffect } from 'react'

import { api } from '../api'
import { useServerData } from '../state/serverDataContext'
import Cover from './Cover'
import Header from './Header'
import styles from '../styles/root/Root.module.scss'
import Slider from './Slider'
import Navigator from './Navigator'
import Loader from './common/Loader'

const Home = props => {
	const [activeSlide, setActiveSlide] = useState(0)
	const [isLoading, toggleLoading] = useState(true)
	const [fetchedData, setFetchedData] = useState(null)
	const [slides, setSlides] = useState(null)
	function handleNavigation(selectedSlideIndex) {
		setActiveSlide(selectedSlideIndex)
	}
	const memoSiteData = useServerData(data => data.memoSiteData || null)
	useEffect(() => {
		if (memoSiteData) {
			setFetchedData(memoSiteData)
			toggleLoading(false)
			const slidesArray = JSON.parse(memoSiteData.extended_fields).summary.map(item => {
				const newItem = { ...item }
				newItem.customerId = memoSiteData.customerId
				newItem.unique = memoSiteData.unique
				return newItem
			})
			setSlides(slidesArray)
		}
	}, [memoSiteData, fetchedData, isLoading])
	console.debug('PROPS', props)
	return (
		<>
			{
				!isLoading
					? (
						<div
							className={styles.rootContainer}
						>
							<Navigator
								slides={slides}
								activeSlide={activeSlide}
								setActiveSlide={selectedSlideIndex => handleNavigation(selectedSlideIndex)}
							/>
							<Header
								subject={fetchedData.subject}
								createdDate={fetchedData.created_at}
								memoSiteOwner={JSON.parse(fetchedData.extended_fields).userName}
							/>
							<Cover
								subject={fetchedData.subject}
								notes={fetchedData.notes}
								memoSiteOwner={JSON.parse(fetchedData.extended_fields).userName}
								logoImage={fetchedData.logoImageUrl}
							/>
							<div className={styles.scrollContainer}>
								<Slider
									slides={slides}
									activeSlide={activeSlide}
									setActiveSlide={selectedSlideIndex => handleNavigation(selectedSlideIndex)}
								/>
							</div>
							<div
								className={styles.bgImage}
								style={{
									backgroundColor:
										fetchedData.appMeta.applicationSecondaryBackgroundColor
										&& fetchedData.appMeta.applicationSecondaryBackgroundColor,
								}}
							>
								{
									fetchedData.bgImage && (
										<svg
											width="100%"
											height="100%"
											viewBox="0 0 1920 1080"
											preserveAspectRatio="xMinYMin slice"
										>
											<filter id="blurMe">
												<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
											</filter>
											<image filter="url(#blurMe)" href={`http://krypton.sfdev/${fetchedData.bgImage}`} />
										</svg>
									)
								}
							</div>
						</div>
					)
					: (
						<Loader />
					)
			}
		</>
	)
}

Home.fetchData = props => api.memoSiteData.all(props.match.params.id).then(memoSiteData => ({
	memoSiteData,
}))

export default Home