z

web/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { Provider, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
-import { AppActions, RootState, store } from './store';
+import { AppActions, RootState } from './store';
 import { ToastContainer } from 'react-toastify';
 import { Box } from 'lr-components';
 import { NextUIProvider } from '@nextui-org/react';
@@ -9,7 +9,7 @@ import { isEnvBrowser } from './utils/misc';
 import { fetchNui } from './utils/fetchNui';
 
 function App() {
-  const show = useSelector((state: RootState) => state.state.show);
+  const show = useSelector((state: RootState) => state.main.show);
   useEffect(() => {
     if (!isEnvBrowser()) {
       setTimeout(() => {
@@ -20,38 +20,36 @@ function App() {
   return (
     show && (
       <NextUIProvider>
-        <Provider store={store}>
+        <Box
-          <Box
+          display='flex'
-            display='flex'
+          position='absolute'
-            position='absolute'
+          flexWrap='wrap'
-            flexWrap='wrap'
+          justifyContent='center'
-            justifyContent='center'
+          alignItems='center'
-            alignItems='center'
+          flexDirection='column'
-            flexDirection='column'
+          width={'50%'}
-            width={'50%'}
+          height={'50%'}
-            height={'50%'}
+          rGap={10}
-            rGap={10}
+        >
-          >
+          {Object.keys(AppActions).map((action) => {
-            {Object.keys(AppActions).map((action) => {
+            return (
-              return (
+              <AppActionHook
-                <AppActionHook
+                action={action as keyof typeof AppActions}
-                  action={action as keyof typeof AppActions}
+              ></AppActionHook>
-                ></AppActionHook>
+            );
-              );
+          })}
-            })}
+        </Box>
-          </Box>
+        <Box
-          <Box
+          width={'100%'}
-            width={'100%'}
+          height={'100%'}
-            height={'100%'}
+          display='flex'
-            display='flex'
+          justifyContent='center'
-            justifyContent='center'
+          alignItems='center'
-            alignItems='center'
+          className='prose'
-            className='prose'
+          pointerEvents='none'
-            pointerEvents='none'
+        ></Box>
-          ></Box>
 
-          <ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
+        <ToastContainer pauseOnFocusLoss={false} hideProgressBar={true} />
-        </Provider>
       </NextUIProvider>
     )
   );

web/src/main.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );

web/src/store/index.ts

@@ -1,10 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
+import mainSlice from './main';
 
 export const store = configureStore({
-  reducer: {},
+  reducer: { main: mainSlice.reducer },
 });
 
-export const AppActions = {};
+export const AppActions = { ...mainSlice.actions };
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;

web/src/store/main/index.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface InitialState {
+  show: boolean;
+}
+
+const initialState: InitialState = {
+  show: false,
+};
+
+const mainSlice = createSlice({
+  name: 'main',
+  initialState,
+  reducers: {
+    toggleShow(state) {
+      state.show = !state.show;
+    },
+  },
+});
+
+export const { toggleShow } = mainSlice.actions;
+
+export default mainSlice;