From 39f61ef749f178f9e12876be7fad6df6f7211bb0 Mon Sep 17 00:00:00 2001 From: Chika Date: Sat, 23 Apr 2022 23:37:36 +0300 Subject: [PATCH] create root, user stores & connect to component --- .env | 10 ---------- .env.development | 8 ++++++++ .env.production | 8 ++++++++ Components/Layout/Auth.jsx | 7 ++++++- package.json | 3 +++ pages/_app.tsx | 9 ++++++--- pages/index.tsx | 21 +++++++++++++++++++-- stores/Provider.jsx | 36 ++++++++++++++++++++++++++++++++++++ stores/root.ts | 11 +++++++++++ stores/user.ts | 31 +++++++++++++++++++++++++++++++ yarn.lock | 22 ++++++++++++++++++++++ 11 files changed, 150 insertions(+), 16 deletions(-) delete mode 100644 .env create mode 100644 .env.development create mode 100644 .env.production create mode 100644 stores/Provider.jsx create mode 100644 stores/root.ts create mode 100644 stores/user.ts diff --git a/.env b/.env deleted file mode 100644 index f634f28..0000000 --- a/.env +++ /dev/null @@ -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 - - diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..5e1d965 --- /dev/null +++ b/.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 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..e866c30 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/Components/Layout/Auth.jsx b/Components/Layout/Auth.jsx index f1f609a..7ecd66c 100644 --- a/Components/Layout/Auth.jsx +++ b/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 = () => username; +const User = observer(() => { + const { $user } = useStore(); + return {$user?.user?.displayName}; +}); const Logout = styled.a` margin: 0; diff --git a/package.json b/package.json index 4553d52..6a4f150 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 13a6460..4b977f6 100644 --- a/pages/_app.tsx +++ b/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) { /> - - - + + + + + ); } diff --git a/pages/index.tsx b/pages/index.tsx index 0ba09c7..a0e3cbb 100644 --- a/pages/index.tsx +++ b/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 = ({ user }) => { return
Home
; }; +export const getServerSideProps: GetServerSideProps = 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; diff --git a/stores/Provider.jsx b/stores/Provider.jsx new file mode 100644 index 0000000..3da37a5 --- /dev/null +++ b/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 ( + {children} + ); +} diff --git a/stores/root.ts b/stores/root.ts new file mode 100644 index 0000000..9a35e6a --- /dev/null +++ b/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); + } +} diff --git a/stores/user.ts b/stores/user.ts new file mode 100644 index 0000000..fabd94d --- /dev/null +++ b/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}`; + } + } +} diff --git a/yarn.lock b/yarn.lock index 6a00e37..fc9ac94 100644 --- a/yarn.lock +++ b/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"