React layout wrapper HOC

react_layout_hoc.jsx

export default function Layout(props) {
    const classes = useStyles()
    const gc = useGlobalStyles()
    const { data: { user, loading } } = useContext(AppContext)

    console.log(`LOADING ${loading}`)

    const menuProps = { user }
    return (
        <>
         
                    <main className={classes.main}>
                        {/* {loading ? (<p>Loading...</p>) : props.children} */}
                        {props.children}
                    </main>
        <footer>
          Copyright {new Date().getFullYear()}  &copy; me
         </footer>

              
        </>

    )
}


//HOC
export const withLayout = (Component, cProps = {}) => {
    const name = `withLayout-${C.displayName || C.name}`
    function WithLayout(props) {
        return (
            <Layout {...props}>
                <Component {...cProps} />
            </Layout>
        )
    }
    WithLayout.displayName = name
    return WithLayout
}