mobx base usage

packages/client/package.json

@@ -15,16 +15,18 @@
     "@hookform/resolvers": "^3.1.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@tspark/common": "^1.0.0",
+    "@types/react": "^18.2.19",
     "@types/react-bootstrap": "^0.32.32",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-bootstrap": "^0.26.0",
-    "@types/react": "^18.2.19",
     "axios": "^1.0.0",
     "bootstrap": "^5.3.0",
     "css-loader": "^6.8.1",
     "dotenv": "^16.3.1",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
+    "mobx": "^6.12.0",
+    "mobx-react-lite": "^4.0.5",
     "msw": "^1.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
@@ -49,7 +51,7 @@
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "prettier": "^3.0.1",
-    "webpack-bundle-analyzer": "^4.9.0",
-    "ts-jest": "^29.1.1"
+    "ts-jest": "^29.1.1",
+    "webpack-bundle-analyzer": "^4.9.0"
   }
 }

packages/client/src/core/api/axios.instance.ts

@@ -8,4 +8,5 @@ export const axiosInstance: AxiosInstance = axios.create({
     'Content-Type': 'application/json',
   },
   withCredentials: true,
+  validateStatus: (status) => (status >= 200 && status < 300) || status === 401,
 });

packages/client/src/core/root.store.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import { AuthStore } from '../features/auth/auth.store';
+
+export class RootStore {
+  authStore: AuthStore;
+
+  constructor() {
+    this.authStore = new AuthStore(this);
+
+    this._init();
+  }
+
+  private _init() {
+    this.authStore.init();
+  }
+}
+
+export const StoreContext = createContext(new RootStore());
+export const useStore = () => useContext(StoreContext);

packages/client/src/features/auth/auth.service.ts

@@ -0,0 +1,9 @@
+import { AuthCheckResponse } from '@tspark/common';
+import { axiosInstance } from '../../core/api/axios.instance';
+
+const authCheck = (): Promise<AuthCheckResponse> =>
+  axiosInstance.get('/auth/auth-check').then((response) => response.data);
+
+export const authService = {
+  authCheck,
+};

packages/client/src/features/auth/auth.store.ts

@@ -0,0 +1,43 @@
+import { UserDto } from '@tspark/common';
+import { RootStore } from '../../core/root.store';
+import { authService } from './auth.service';
+import { action, makeAutoObservable } from 'mobx';
+
+export class AuthStore {
+  private rootStore: RootStore;
+
+  private _isAuthenticated: boolean = false;
+  private _user?: UserDto;
+
+  constructor(rootStore: RootStore) {
+    this.rootStore = rootStore;
+    makeAutoObservable(this);
+  }
+
+  get isAuthenticated() {
+    return this._isAuthenticated;
+  }
+
+  set isAuthenticated(isAuthenticated: boolean) {
+    this._isAuthenticated = isAuthenticated;
+  }
+
+  get user() {
+    return this._user;
+  }
+
+  set user(user: UserDto | undefined) {
+    this._user = user;
+  }
+
+  init() {
+    this.authCheck();
+  }
+
+  authCheck() {
+    authService.authCheck().then((authCheckResponse) => {
+      this.isAuthenticated = authCheckResponse.isAuthenticated;
+      this.user = authCheckResponse.user;
+    });
+  }
+}

packages/client/src/index.tsx

@@ -4,19 +4,23 @@ import { BrowserRouter } from 'react-router-dom';
 import { App } from './app/app';
 import { Provider } from 'react-redux';
 import { setupStore } from './core/store';
+import { RootStore, StoreContext } from './core/root.store';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
+const rootStore = new RootStore();
 const store = setupStore();
 
 root.render(
   <StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
-        <App />
-      </Provider>
+      <StoreContext.Provider value={rootStore}>
+        <Provider store={store}>
+          <App />
+        </Provider>
+      </StoreContext.Provider>
     </BrowserRouter>
   </StrictMode>,
 );

packages/client/src/pages/home/home.page.tsx

@@ -1,9 +1,19 @@
+import { observer } from 'mobx-react-lite';
+import { useStore } from '../../core/root.store';
 import { Page } from '../page';
 
-export const HomePage: React.FC = () => {
+export const HomePage: React.FC = observer(function HomePage() {
+  const { authStore } = useStore();
+
   return (
     <Page title="Home">
-      <p>{'Hello :)'}</p>
+      <p>{`Hello${
+        authStore.isAuthenticated ? `, ${authStore.user?.username}` : ''
+      }! :)`}</p>
+
+      <button type="button" onClick={() => authStore.authCheck()}>
+        CLICK ME
+      </button>
     </Page>
   );
-};
+});