All files / app/pages root.tsx

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Routes } from '../routes';
import { css, Global } from '@emotion/react';
import { color, CSSReset } from '@stacks/ui';
import { Store } from '@store/index';
import { loadFonts } from '@utils/load-fonts';
import { ConnectedRouter } from 'connected-react-router';
import { History } from 'history';
import React, { useEffect, useState, createContext } from 'react';
import { hot } from 'react-hot-loader/root';
import { Toaster } from 'react-hot-toast';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
 
const GlobalStyle = css`
  html,
  body,
  #root {
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    color: ${color('text-body')};
    border-color: ${color('border')};
  }
 
  #root {
    padding-top: 44px;
  }
 
  .draggable-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    width: 100%;
    box-shadow: 0px 1px 2px rgba(15, 17, 23, 0.08);
    -webkit-user-select: none;
    .inner-drag {
      -webkit-app-region: drag;
    }
  }
`;
interface RootProps {
  store: Store;
  history: History;
  persistor: any;
}
 
export interface BackContext {
  backUrl: null | string | (() => void);
  setBackUrl(url: null | string | (() => void)): void;
}
 
export const BackActionContext = createContext<BackContext>({
  backUrl: null,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  setBackUrl: (_url: string | (() => void)) => {},
});
 
function Root({ store, history, persistor }: RootProps) {
  const [backUrl, setBackUrl] = useState<string | (() => void) | null>(null);
 
  useEffect(() => void loadFonts(), []);
 
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <BackActionContext.Provider value={{ backUrl, setBackUrl }}>
          <Global styles={GlobalStyle} />
          {CSSReset}
          <Toaster position="bottom-center" />
          <ConnectedRouter history={history}>
            <Routes />
          </ConnectedRouter>
        </BackActionContext.Provider>
      </PersistGate>
    </Provider>
  );
}
 
export default hot(Root);