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, useNavigate} from 'react-router-dom';
import {ToastContainer} from 'react-toastify';
import Layout from "@layout/Layout";
import {getBFP, getFetchStatus, getHallServerUrl, getUserID, getUserInfo, isLogined} from '@features/mainSlice';
import {useDispatch, useSelector} from "react-redux";
import {REQ_STATUS} from "@api/config";
import {
    reqAgentCheck, reqCheckinCheck,
    reqCustomService, reqFirstPayConfig, reqGameActivity, reqGameInfo,
    reqGetRoutes,
    reqMailCheck,
    reqRedpackCheck, reqRedpackConfig,
    reqTurnplateIndex,
    reqWithdrawBaseInfo
} from "@features/api";
import LoadingScreen from "@components/LoadingScreen";
import DropCoins from "@components/DropCoins";
import {reqPayConfig} from "@features/paySlice";
import {connectHall, disconnectHall} from "@features/actions/hallClient";
import {toast} from "react-toastify";
import {useBlocker} from "react-router";
import FontFaceObserver from 'fontfaceobserver';
import {getTurnplate} from "@features/turnplateSlice";
import {LOCAL_ACTIVITY_C, LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
import LoadingFull from "@components/Loading/LoadingFull";
import {ClickAwayListener} from "@mui/base/ClickAwayListener";
import useGlobalClick from "@hooks/useGlobalClick";
import SoundHelp from "@utils/SoundManger";
import usePreviousRoute from "@hooks/usePreviousRoute";
import {ROUTE_PATH} from "@constants/routes";
import {onChangeUser, onChangeUserID} from "@features/actions/mainAction";
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);
    const navigate = useNavigate();
    // auto RTL support for Material-UI components and styled-components

    const plugins = direction === 'rtl' ? [rtlPlugin] : [];
    const hallServerUrl=useSelector(getHallServerUrl);
    useGlobalClick();
    const prevLocation=usePreviousRoute();
    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,"")
        }
        let cname="c";
        let ccode=getUrlParam(cname);
        if (ccode!=null){
            localStorageSet(LOCAL_ACTIVITY_C,ccode);
        }
        // else{
        //     localStorageSet(LOCAL_ACTIVITY_C,"");
        // }
    }
    const reProgressierInstallBanner=()=>{
        if (window.NewProgressierInstallBanner!=null)return;
        let ProgressierInstallBanner=window.ProgressierInstallBanner;
        window.NewProgressierInstallBanner=ProgressierInstallBanner;
        window.ProgressierInstallBanner=function (e, t) {
            this.remove = async function() {

            };
            this.render = async function() {

            };
            this.make = function() {

            };
            this.init = async function() {

            }
        }
    }
    const reqInitData=()=>{
        //未初始化
        if (userID===-1)return;
        if (userID>0){
            dispatch(connectHall(hallServerUrl));
            localStorageSet(LOCAL_WHEEL_INVITE_CODE,"");
            localStorageSet(LOCAL_ACTIVITY_C,"");
            //Mail红点屏蔽
            dispatch(reqMailCheck());
        }
        else
        {
            dispatch(disconnectHall());
        }
        //pay
        // reqPayConfig(dispatch,userInfo);
        // dispatch(reqFirstPayConfig(userID))
        //customer
        // dispatch(reqCustomService());
        //turnplate
        dispatch(reqTurnplateIndex());
        //redpack
        // dispatch(reqRedpackCheck());
        // dispatch(reqRedpackConfig());
        //agent
        // dispatch(reqAgentCheck());
        //activity
        // dispatch(reqGameActivity());
        dispatch(onChangeUser(userInfo));
    }
    const appInitData=()=>{
        // scroll to top on route change
        loadFont();
        //请求routes
        startReqRoutes();
        checkInviteCode();
        appRef.current && appRef.current.scrollTo(0, 0);
        preventDefault();
        reProgressierInstallBanner();
        SoundHelp.loadAllAudioFile();
        // preventTouchMove();
    }
    const checkOpenCheckin=()=>{
        if (userID>0){
            if (pathname==="/"){
                if(hash==null||hash===""){
                    dispatch(reqCheckinCheck((isCanCheckIn)=>{
                        if(isCanCheckIn===1)navigate(ROUTE_PATH.CHECK_IN);
                    }));
                    return true;
                }
            }
        }
        return false;
    }
    const onCloseHallWheel=()=>{
        checkOpenCheckin();
    }
    //初始化
    useEffect(() => {
        appInitData();

        return ()=>{

        }
    }, []);
    useEffect(()=>{
        reqInitData();
    },[userID])
    //转盘
    useEffect(()=>{
        if(turnplate){
            let times=turnplate.times;
            if (times>0){
                if (pathname==="/"){
                    if(hash==null||hash===""){
                        setIsShowWheel(true);
                        return;
                    }
                }
            }
        }
        checkOpenCheckin();
    },[turnplate]);
    useEffect(()=>{
        if (prevLocation){
            let pathname=prevLocation.pathname;
            if (pathname){
                if (pathname.startsWith(ROUTE_PATH.GAME)){
                    //更新金币
                    dispatch(reqGameInfo());
                }
            }
        }
    },[prevLocation])

    const renderLayout=()=>{
        return (
            <>
                {
                    fetchStatus===REQ_STATUS.IDLE?<Layout onCloseHallWheel={onCloseHallWheel} />:(<LoadingFull />)
                }
            </>
        )
    }

    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