front-cli / fw-h5app-template

  import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
  import { Outlet, useNavigate } from '@modern-js/runtime/router';

  import dayjs from 'dayjs';

  import { ONE_SECOND, OnlyKey, helper, localdb, useOverlay } from '@feewee/h5app-common';

  import { StyleProvider } from '@ant-design/cssinjs';

  import { getServerTime } from './service';

  import 'dayjs/locale/zh-cn';
  import '@/style/global.scss';
  
  dayjs.locale('zh-cn');

  (() => {
    const { error } = console;
    console.error = (...args: any) => {
      if (/defaultProps/.test(args[0])) {
        return;
      }
      error(...args);
    };
  })();
  

  export default function Layout() {

    localdb.init('fw_h5_template', 'fw_h5_template', 'fw_h5_template_del');
    const timer = useRef<any>();
    const navigate = useNavigate();
  
    const saveServerTimeDif = useCallback(async () => {
      const idt = (await localdb.query<number>('i_dt')) || 0;
      if (Math.abs(idt - Date.now()) < 1000 * 60 * 10) {
        return;
      }
      const ser_time = await getServerTime();
      localdb.save<number>(process.env.MODERN_CALKEY ?? 'i_dif', ser_time ? ser_time - Date.now() : 0);
      localdb.save<number>('i_dt', Date.now());
    }, []);
  
    const lisFn = useCallback((e: any) => {
      if ('hardwareBackPress' === e.data) {
        helper.checkBack(() => navigate(-1));
      }
    }, []);
  
    useLayoutEffect(() => {
      localdb.clearExpireData();
      saveServerTimeDif();
  
      timer.current = setInterval(() => localdb.clearExpireData(), ONE_SECOND * 5);
      return () => {
        if (timer.current) {
          clearInterval(timer.current);
        }
      };
    }, [saveServerTimeDif]);
  
    useEffect(() => {
      window.document.addEventListener('message', lisFn);

      OnlyKey.clearOnlyKey();
      useOverlay.clear();

  
      return () => {
        window.document.removeEventListener('message', lisFn);
      };
    }, []);
  

    return (
      <StyleProvider hashPriority="high">
        <Outlet />
      </StyleProvider>
    );

  }