web2468/src/App.js

// GA
import ReactGA from 'react-ga4';

// utils
import {lazy, Suspense} from 'react';

// styles
import ThemeStyles from '@styles/theme';
import './style.scss';

// libs styles
import 'react-toastify/dist/ReactToastify.min.css';
import 'react-grid-layout/css/styles.css';
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

// fonts
import '@fonts/icomoon/icomoon.woff';
// import '@fonts/swisscbt/SWISSC-BT.ttf'

// contexts
import {SidebarProvider, useSidebar} from '@contexts/sidebarContext';
import {ThemeProvider} from 'styled-components';

// hooks
import {useThemeProvider} from '@contexts/themeContext';
import {useEffect, useRef} from 'react';
import {useWindowSize} from 'react-use';
import useAuthRoute from '@hooks/useAuthRoute';

// utils
import {StyleSheetManager} from 'styled-components';
import {ThemeProvider as MuiThemeProvider, createTheme} from '@mui/material/styles';
import {getUrlParam, localStorageSet, preventDefault} from '@utils/helpers';
import rtlPlugin from 'stylis-plugin-rtl';
import {CacheProvider} from '@emotion/react';
import createCache from '@emotion/cache';
// components
import {BrowserRouter, HashRouter, Route, Routes, useLocation} from 'react-router-dom';
import {ToastContainer} from 'react-toastify';
import Layout from "@layout/Layout";
import {getBFP, getFetchStatus, getUserID, getUserInfo} from '@features/mainSlice';
import {useDispatch, useSelector} from "react-redux";
import {REQ_STATUS} from "@api/config";
import {reqCustomService, reqGetRoutes, reqTurnplateIndex, reqWithdrawBaseInfo} from "@features/api";
import LoadingScreen from "@components/LoadingScreen";
import {reqPayConfig} from "@features/paySlice";
import {connectHall, disconnectHall} from "@features/actions/hallClient";
import * as toast from "react-toastify";
import {useBlocker} from "react-router";
import FontFaceObserver from 'fontfaceobserver';
import {getTurnplate} from "@features/turnplateSlice";
import {LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
const App = () => {
    const dispatch = useDispatch();
    const fetchStatus=useSelector(getFetchStatus);
    const userInfo=useSelector(getUserInfo);
    const userID=useSelector(getUserID);
    const turnplate=useSelector(getTurnplate);
    const appRef = useRef(null);
    const {theme, direction,setIsShowWheel} = useThemeProvider();
    const {pathname, search, hash} = useLocation();
    const gaKey = process.env.REACT_APP_PUBLIC_GA;
    gaKey && ReactGA.initialize(gaKey);
    // auto RTL support for Material-UI components and styled-components

    const plugins = direction === 'rtl' ? [rtlPlugin] : [];

    const muiTheme = createTheme({
        direction: direction,
    });

    const cacheRtl = createCache({
        key: 'css-rtl',
        stylisPlugins: plugins,
    });
    const startReqRoutes=()=>{
        //先请求指纹id
        dispatch(getBFP()).then((result)=>{
            dispatch(reqGetRoutes());
        });
    }
    const loadFont=()=>{
        // let swisscbt=new FontFaceObserver("SWISSC-BT");
        // swisscbt.load().then(() => {
        //
        // })
        new FontFaceObserver("SWISSC-BT").load();
        new FontFaceObserver("Roboto").load();
        new FontFaceObserver("Roboto-1").load();
    }
    //检查邀请码
    const checkInviteCode=()=>{
        let name="act";
        let code=getUrlParam(name);
        if (code!=null){
            localStorageSet(LOCAL_WHEEL_INVITE_CODE,code)
        }
        else {
            localStorageSet(LOCAL_WHEEL_INVITE_CODE,"")
        }
    }
    //初始化
    useEffect(() => {
        // scroll to top on route change
        loadFont();
        //请求routes
        startReqRoutes();
        appRef.current && appRef.current.scrollTo(0, 0);
        preventDefault();
        checkInviteCode();
    }, []);
    useEffect(()=>{
        if (userID!=0){
            dispatch(connectHall());
            //withdraw
            dispatch(reqWithdrawBaseInfo());
            //turnplate
            // dispatch(reqTurnplateIndex());
            //rest code
            localStorageSet(LOCAL_WHEEL_INVITE_CODE,"")
        }
        else
        {
            dispatch(disconnectHall());
        }
        //pay
        reqPayConfig(dispatch,userInfo);
        //customer
        dispatch(reqCustomService());
        dispatch(reqTurnplateIndex());
    },[userID])
    //转盘
    useEffect(()=>{
        if(turnplate){
            let times=turnplate.times;
            if (times>0){
                if (pathname==="/"){
                    if(hash==null||hash===""){
                        setIsShowWheel(true)
                    }
                }
            }
        }
    },[turnplate])
    const renderLayout=()=>{
        return (
            <>
                {
                    fetchStatus===REQ_STATUS.IDLE?<Layout />:(<LoadingScreen />)
                }
            </>
        )
    }
    // return (
    //     <CacheProvider value={cacheRtl}>
    //         <MuiThemeProvider theme={muiTheme}>
    //             <SidebarProvider>
    //                 <ThemeProvider theme={{theme: theme}}>
    //                     <ThemeStyles/>
    //                     <ToastContainer theme={theme} autoClose={2500}
    //                                     position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
    //                     <StyleSheetManager stylisPlugins={plugins}>
    //                         {
    //                             renderLayout()
    //                         }
    //                     </StyleSheetManager>
    //                 </ThemeProvider>
    //             </SidebarProvider>
    //         </MuiThemeProvider>
    //     </CacheProvider>
    // );
    return (
        <CacheProvider value={cacheRtl}>
            <MuiThemeProvider theme={muiTheme}>
                <ThemeProvider theme={{theme: theme}}>
                    <SidebarProvider>
                        <ThemeStyles/>
                        <ToastContainer theme={theme} autoClose={2500}
                                        position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
                        <StyleSheetManager stylisPlugins={plugins}>
                            {
                                renderLayout()
                            }
                        </StyleSheetManager>
                    </SidebarProvider>
                </ThemeProvider>
            </MuiThemeProvider>
        </CacheProvider>
    );
}

export default App