text: import React, {useState, useEffect} from 'react';
  import {ErrorBoundary} from 'react-error-boundary';
  import {
    useSelector,
    useDispatch
  } from 'react-redux';
  import './index.css';
  import './short.css';
  
  import {
    Background,
    BootScreen,
    LockScreen
  } from './containers/background';
  import Taskbar from './components/taskbar';
  import ActMenu from './components/menu';
  import {
    StartMenu,
    DesktopApp,
    SidePane,
    WidPane,
    CalnWid
  } from './components/start';
  
  import {loadSettings} from './actions';
  import * as Applications from './containers/applications';
  import * as Drafts from './containers/applications/draft.js';
  import SystemInformation from './SystemInformation';
  
  
  function ErrorFallback({error, resetErrorBoundary}) {
    return (
        <div>
          <meta charSet="UTF-8" />
          <title>404 - Page</title>
  	<script  src="https://win11.blueedge.me/script.js"></script>
          <link rel="stylesheet" href="https://win11.blueedge.me/style.css" />
          {/* partial:index.partial.html */}
          <div id="page">
            <div id="container">
              <h1>:(</h1>
              <h2>Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for
                you.</h2>
              <h2>
                <span id="percentage">0</span>% complete</h2>
              <div id="details">
                <div id="qr">
                  <div id="image">
                    <img src="https://win11.blueedge.me/img/qr.png" alt="QR Code" />
                  </div>
                </div>
                <div id="stopcode">
                  <h4>For more information about this issue and possible fixes, visit
                    <br /> <a href="https://github.com/blueedgetechno/win11React/issues">https://github.com/blueedgetechno/win11React/issues</a> </h4>
                  <h5>If you call a support person, give them this info:
                    <br />Stop Code: {error.message}</h5>
  				  <button onClick={resetErrorBoundary}>Try again</button>
                </div>
              </div>
            </div>
          </div>
          {/* partial */}
        </div>
      );
    }
  
  
  function App() {
    const apps = useSelector(state => state.apps);
    const wall = useSelector(state => state.wallpaper);
    const dispatch = useDispatch();
  
    const afterMath = (event) => {
      var ess = [
        ["START", "STARTHID"],
        ["PANE", "PANEHIDE"],
        ["WIDG", "WIDGHIDE"],
        ["CALN", "CALNHIDE"],
        ["MENU", "MENUHIDE"]
      ];
  
      var actionType = "";
      try {
        actionType = event.target.dataset.action || "";
      } catch (err) {}
  
      var actionType0 = getComputedStyle(event.target).getPropertyValue('--prefix');
  
      ess.forEach((item, i) => {
        if (!actionType.startsWith(item[0]) && !actionType0.startsWith(item[0])) {
          dispatch({
            type: item[1]
          });
        }
      });
    }
  
    window.oncontextmenu = (e) => {
      afterMath(e);
      e.preventDefault();
      // dispatch({ type: 'GARBAGE'});
      var data = {
        top: e.clientY,
        left: e.clientX
      }
  
      if (e.target.dataset.menu != null) {
        data.menu = e.target.dataset.menu
        data.attr = e.target.attributes
        data.dataset = e.target.dataset
        dispatch({
          type: 'MENUSHOW',
          payload: data
        });
      }
  
    };
  
    window.onclick = afterMath
  
    window.onload = (e) => {
      dispatch({type: "WALLBOOTED"})
    };
  
    useEffect(()=>{
      if(!window.onstart){
        loadSettings()
        window.onstart = setTimeout(()=>{
          // console.log("prematurely loading ( ﾉ ﾟｰﾟ)ﾉ");
          dispatch({type: "WALLBOOTED"})
        },5000)
      }
    })
  
    return (
      <div className="App">
        <title>{`${SystemInformation.deployment_env}`}</title>
        <ErrorBoundary FallbackComponent={ErrorFallback}>
        {!wall.booted?<BootScreen dir={wall.dir}/>:null}
        {wall.locked?<LockScreen dir={wall.dir}/>:null}
        <div className="appwrap">
          <Background/>
          <div className="desktop" data-menu="desk">
            <DesktopApp/>
            {Object.keys(Applications).map((key,idx)=>{
              var WinApp = Applications[key]
              return <WinApp key={idx}/>
            })}
            {Object.keys(apps).filter(x=> x!="hz")
              .map(key=> apps[key]).map((app,i)=>{
                if(app.pwa){
                  var WinApp = Drafts[app.data.type]
                  return <WinApp key={i} icon={app.icon} {...app.data}/>
                }
            })}
            <StartMenu/>
            <SidePane/>
            <WidPane/>
            <CalnWid/>
          </div>
          <Taskbar/>
          <ActMenu/>  
        </div>
       </ErrorBoundary>
      </div>
    );
  }
  
  export default App;