67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import React, { createContext, useEffect, useState } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { AppActions, RootState } from './store';
|
|
import { ToastContainer } from 'react-toastify';
|
|
import { Box } from 'lr-components';
|
|
import AppActionHook from './components/AppActionHook';
|
|
import { isEnvBrowser } from './utils/misc';
|
|
import { fetchNui } from './utils/fetchNui';
|
|
import { DefaultUISetting, ISettingContext, UISetting } from './types';
|
|
|
|
const SettingContext = createContext<ISettingContext>(DefaultUISetting);
|
|
|
|
function App() {
|
|
const show = useSelector((state: RootState) => state.main.show);
|
|
const [setting, setSetting] = useState<UISetting>({ locale: {} });
|
|
const L = (key: string) => setting.locale[key] || key;
|
|
useEffect(() => {
|
|
if (!isEnvBrowser()) {
|
|
setTimeout(async () => {
|
|
const UISetting = await fetchNui<UISetting>('AppReady');
|
|
setSetting(UISetting);
|
|
}, 2000);
|
|
}
|
|
}, [setSetting]);
|
|
return (
|
|
<SettingContext.Provider value={{ setting, setSetting, L }}>
|
|
<Box
|
|
display='flex'
|
|
position='absolute'
|
|
flexWrap='wrap'
|
|
justifyContent='center'
|
|
alignItems='center'
|
|
flexDirection='column'
|
|
width={'50%'}
|
|
height={'50%'}
|
|
rGap={10}
|
|
>
|
|
{Object.keys(AppActions).map((action) => {
|
|
return (
|
|
<AppActionHook
|
|
key={action}
|
|
action={action as keyof typeof AppActions}
|
|
></AppActionHook>
|
|
);
|
|
})}
|
|
</Box>
|
|
{show && (
|
|
<Box
|
|
width={'100vw'}
|
|
height={'100vh'}
|
|
position='absolute'
|
|
top={0}
|
|
left={0}
|
|
display='flex'
|
|
justifyContent='center'
|
|
alignItems='center'
|
|
className='prose'
|
|
pointerEvents='none'
|
|
></Box>
|
|
)}
|
|
<ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
|
|
</SettingContext.Provider>
|
|
);
|
|
}
|
|
|
|
export default App;
|