react-woocommerce/app_shell.js at master · uxFeranmi/react-woocommerce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//import { useRouter } from 'next/router';
import Head from 'next/head';
import Router from "next/router";
import NProgress from "nprogress";
import { useEffect } from 'react';

import shop from './utils/shop';

import Header from './components/header';
import Footer from './components/footer';
import "./styles.scss";
import "./nprogress.scss";

Router.onRouteChangeStart = () => {
  NProgress.start();
};
Router.onRouteChangeComplete = () => {
  NProgress.done();
};
Router.onRouteChangeError = () => {
  NProgress.done();
};
/*
NProgress.set(0.4);
//Incrementing:
NProgress.inc();
//To increment by a specific value,
NProgress.inc(0.2);
*/

const AppShell = (props)=> {
  const {setAuth, categoryTree} = props;

  useEffect(()=> {
    shop.get('auth').then((a)=> console.log('isAuth: ', a) || a)
    .then(setAuth);
  }, []);

  return [ //Return an array of elements to keep header out of the <main> tag.
    (<Head key={'Document Head'}>
      <title>IT Supplies</title>
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossOrigin="anonymous"></link>
      <link rel="icon" href="/favicon.png" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Head>),

    <Header {...{categoryTree, key:'Page Header'}} />,

    (<main className="app-shell" key={'Main Content'}>
      {props.children}
    </main>),

    <Footer key={'Page Footer'} />
  ];
}

export default AppShell;