Plop user data into the store when loading up the base component

Author: DaneEveritt

resources/scripts/components/App.tsx

@@ -6,25 +6,47 @@ import AccountRouter from '@/routers/AccountRouter';
 import ServerOverviewContainer from '@/components/ServerOverviewContainer';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
+import { UserData } from '@/state/types';
 
-class App extends React.PureComponent {
-    componentDidMount () {
+interface WindowWithUser extends Window {
+    PterodactylUser?: {
+        uuid: string;
+        username: string;
+        email: string;
+        root_admin: boolean;
+        use_totp: boolean;
+        language: string;
+        updated_at: string;
+        created_at: string;
+    };
+}
 
+const App = () => {
+    const data = (window as WindowWithUser).PterodactylUser;
+    if (data) {
+        store.getActions().user.setUserData({
+            uuid: data.uuid,
+            username: data.username,
+            email: data.email,
+            language: data.language,
+            rootAdmin: data.root_admin,
+            useTotp: data.use_totp,
+            createdAt: new Date(data.created_at),
+            updatedAt: new Date(data.updated_at),
+        });
     }
 
-    render () {
-        return (
-            <StoreProvider store={store}>
-                <Router basename={'/'}>
-                    <div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
-                        <Route exact path="/" component={ServerOverviewContainer}/>
-                        <Route path="/auth" component={AuthenticationRouter}/>
-                        <Route path="/account" component={AccountRouter}/>
-                    </div>
-                </Router>
-            </StoreProvider>
-        );
-    }
-}
+    return (
+        <StoreProvider store={store}>
+            <Router basename={'/'}>
+                <div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
+                    <Route exact path="/" component={ServerOverviewContainer}/>
+                    <Route path="/auth" component={AuthenticationRouter}/>
+                    <Route path="/account" component={AccountRouter}/>
+                </div>
+            </Router>
+        </StoreProvider>
+    );
+};
 
 export default hot(App);

resources/scripts/state/index.ts

@@ -1,16 +1,11 @@
-import { action, createStore } from 'easy-peasy';
+import { createStore } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
+import flashes from '@/state/models/flashes';
+import user from '@/state/models/user';
 
 const state: ApplicationState = {
-    flashes: {
-        items: [],
-        addFlash: action((state, payload) => {
-            state.items.push(payload);
-        }),
-        clearFlashes: action(state => {
-            state.items = [];
-        }),
-    },
+    flashes,
+    user,
 };
 
 export const store = createStore(state);

resources/scripts/state/models/flashes.ts

@@ -0,0 +1,14 @@
+import { action } from 'easy-peasy';
+import { FlashState } from '@/state/types';
+
+const flashes: FlashState = {
+    items: [],
+    addFlash: action((state, payload) => {
+        state.items.push(payload);
+    }),
+    clearFlashes: action(state => {
+        state.items = [];
+    }),
+};
+
+export default flashes;

resources/scripts/state/models/user.ts

@@ -0,0 +1,11 @@
+import { UserState } from '@/state/types';
+import { action } from 'easy-peasy';
+
+const user: UserState = {
+    data: undefined,
+    setUserData: action((state, payload) => {
+        state.data = payload;
+    }),
+};
+
+export default user;

resources/scripts/state/types.d.ts

@@ -3,6 +3,7 @@ import { Action } from 'easy-peasy';
 
 export interface ApplicationState {
     flashes: FlashState;
+    user: UserState;
 }
 
 export interface FlashState {
@@ -11,6 +12,22 @@ export interface FlashState {
     clearFlashes: Action<FlashState>;
 }
 
+export interface UserState {
+    data?: UserData;
+    setUserData: Action<UserState, UserData>;
+}
+
+export interface UserData {
+    uuid: string;
+    username: string;
+    email: string;
+    language: string;
+    rootAdmin: boolean;
+    useTotp: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
 export interface FlashMessage {
     id?: string;
     type: FlashMessageType;