create root, user stores & connect to component

.env

@@ -1,10 +0,0 @@
-NEXT_PUBLIC_COLOR_PRIMARY=#BF3676
-NEXT_PUBLIC_COLOR_SECONDARY=#FD4047
-NEXT_PUBLIC_COLOR_TERTIARTY=#FF9112
-
-# Production
-# NEXT_PUBLIC_COLOR_PRIMARY=#1C01A9
-# NEXT_PUBLIC_COLOR_SECONDARY=#3A0185
-# NEXT_PUBLIC_COLOR_TERTIARTY=#580161
-
-

.env.development

@@ -0,0 +1,8 @@
+####### Colors ########
+NEXT_PUBLIC_COLOR_PRIMARY=#BF3676
+NEXT_PUBLIC_COLOR_SECONDARY=#FD4047
+NEXT_PUBLIC_COLOR_TERTIARTY=#FF9112
+
+
+####### URLS ########
+URL_GET_USER=http://localhost:1000/auth/user

.env.production

@@ -0,0 +1,8 @@
+####### Colors ########
+NEXT_PUBLIC_COLOR_PRIMARY=#1C01A9
+NEXT_PUBLIC_COLOR_SECONDARY=#3A0185
+NEXT_PUBLIC_COLOR_TERTIARTY=#580161
+
+
+####### URLS ########
+URL_GET_USER=http://auth_service/auth/user

Components/Layout/Auth.jsx

@@ -1,3 +1,5 @@
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'stores/Provider';
 import styled from 'styled-components';
 import { Flex } from 'UIKit/grid';
 import { min } from 'UIKit/mq';
@@ -16,7 +18,10 @@ const UserText = styled.span`
   }
 `;
 
-const User = () => <UserText>username</UserText>;
+const User = observer(() => {
+  const { $user } = useStore();
+  return <UserText>{$user?.user?.displayName}</UserText>;
+});
 
 const Logout = styled.a`
   margin: 0;

package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "antd": "^4.19.5",
+    "axios": "^0.26.1",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
+    "mobx": "^6.5.0",
+    "mobx-react-lite": "^3.3.0",
     "next": "12.1.5",
     "next-compose-plugins": "^2.2.1",
     "next-with-less": "^2.0.5",

pages/_app.tsx

@@ -5,6 +5,7 @@ import Head from 'next/head';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from 'UIKit/colors';
 import theme from 'UIKit/theme';
+import { StoreProvider } from '../stores/Provider';
 import '../styles/globals.css';
 
 function App({ Component, pageProps }: AppProps) {
@@ -17,9 +18,11 @@ function App({ Component, pageProps }: AppProps) {
         />
       </Head>
       <GlobalStyle />
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <StoreProvider {...pageProps}>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </StoreProvider>
     </ThemeProvider>
   );
 }

pages/index.tsx

@@ -1,7 +1,24 @@
-import type { NextPage } from 'next';
+import axios from 'axios';
+import type { GetServerSideProps, NextPage } from 'next';
+import { User } from 'stores/user';
 
-const Home: NextPage = () => {
+interface PageProps {
+  user: User;
+}
+
+const Home: NextPage<PageProps> = ({ user }) => {
   return <div>Home</div>;
 };
 
+export const getServerSideProps: GetServerSideProps<PageProps> = async ctx => {
+  const user = await axios
+    .get(process.env.URL_GET_USER || '', {
+      headers: ctx?.req?.headers?.cookie
+        ? { cookie: ctx.req.headers.cookie }
+        : undefined,
+    })
+    .then(res => res.data);
+  return { props: { user } };
+};
+
 export default Home;

stores/Provider.jsx

@@ -0,0 +1,36 @@
+import { createContext, useContext } from 'react';
+import { RootStore } from './root';
+
+/** @type{RootStore} */
+let store;
+const StoreContext = createContext(store);
+
+export function useStore() {
+  const context = useContext(StoreContext);
+  if (context === undefined) {
+    throw new Error('useStore must be used within StoreProvider');
+  }
+
+  return context;
+}
+
+function initializeStore(initialData) {
+  const _store = store ?? new RootStore();
+
+  if (initialData) {
+    const { user } = initialData;
+    _store.$user.hydrate(user);
+  }
+
+  if (typeof window === 'undefined') return _store;
+  if (!store) store = _store;
+
+  return _store;
+}
+
+export function StoreProvider({ children, ...initialData }) {
+  const store = initializeStore(initialData);
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
+}

stores/root.ts

@@ -0,0 +1,11 @@
+import { enableStaticRendering } from 'mobx-react-lite';
+import { UserStore } from './user';
+
+enableStaticRendering(typeof window === 'undefined');
+
+export class RootStore {
+  $user: UserStore;
+  constructor() {
+    this.$user = new UserStore(this);
+  }
+}

stores/user.ts

@@ -0,0 +1,31 @@
+import { makeAutoObservable } from 'mobx';
+import { RootStore } from './root';
+
+export type User = {
+  displayName: string;
+  username: string;
+  department: string;
+  position: string;
+  mail: string;
+  domain: string;
+};
+
+export class UserStore {
+  root: RootStore;
+  user?: User = undefined;
+
+  constructor(rootStore: RootStore) {
+    makeAutoObservable(this);
+    this.root = rootStore;
+  }
+
+  hydrate = (user: User) => {
+    this.user = user;
+  };
+  getDomainName() {
+    if (this.user) {
+      const { username, domain } = this.user;
+      return `${domain}\\${username}`;
+    }
+  }
+}

yarn.lock

@@ -808,6 +808,13 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -1558,6 +1565,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+follow-redirects@^1.14.8:
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
+  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -2147,6 +2159,16 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
+mobx-react-lite@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz#7174e807201943beff6f9d3701492314c9fc0db3"
+  integrity sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==
+
+mobx@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.5.0.tgz#dc2d028b1882737f6e813fc92454381e438b7ad3"
+  integrity sha512-pHZ/cySF00FVENDWIDzJyoObFahK6Eg4d0papqm6d7yMkxWTZ/S/csqJX1A3PsYy4t5k3z2QnlwuCfMW5lSEwA==
+
 moment@^2.24.0, moment@^2.25.3:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"