Layout index.tsx

76.92% Statements 10/13

100% Branches 6/6

50% Functions 2/4

76.92% Lines 10/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
4x
 
 
 
 
4x
6x
 
 
 
 
 
 
 
 
 
 
6x
 
6x
4x
4x
2x
 
 
 
 
 
6x
 
 
 
 
6x
 
 
 
 
 
 
 
 
  import React, { FC, ReactNode, useEffect, useState } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { Header } from './Header';
import { Footer } from './Footer';
import { InfoModal } from './InfoModal';
import { getCookie, setCookie } from '../../helpers';
const styles = require('./Layout.module.css');
 
export const Layout: FC<{
  before?: ReactNode;
  classes?: string;
}> = ({ before, classes, children }) => {
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  const [showInfoModal, setShowInfoModal] = useState(false);
 
  useEffect(() => {
    const infoShown = getCookie('ks-info-shown') ?? false;
    if (!infoShown) {
      setTimeout(() => {
        setShowInfoModal(true);
      }, 2000);
    }
  }, []);
 
  const onCloseHandler = () => {
    setShowInfoModal(false);
    setCookie('ks-info-shown', '1', 60 * 24 * 36500);
  };
 
  return (
    <div className={`${styles.Layout}`}>
      <Header />
      {before}
      <main className={`${styles.LayoutContent} ${classes ? classes : ''}`}>{children}</main>
      <Footer />
      <InfoModal isOpen={showInfoModal} onClose={onCloseHandler} />
    </div>
  )
}