use new frontend

admin-frontend/src/features/auth/Auth.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { Navigate, useParams } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { login, selectIsFailed, selectIsLogin } from './authSlice';
+
+export default function Auth() {
+  const isLogin = useAppSelector(selectIsLogin);
+  const dispatch = useAppDispatch();
+  const { code } = useParams();
+  const isFailed = useAppSelector(selectIsFailed);
+
+  useEffect(() => {
+    if (!isLogin && code) {
+      dispatch(login(code));
+    }
+  }, [isLogin, code]);
+  return (
+      { isLogin
+        ? <Navigate to="/home" />
+        : isFailed
+          ? <Navigate to="/unauthed" />
+          : <div> login </div>}
+  );
+}

admin-frontend/src/features/auth/authQuery.ts

@@ -0,0 +1,33 @@
+import {
+  BaseQueryFn, FetchArgs, fetchBaseQuery, FetchBaseQueryError,
+} from '@reduxjs/toolkit/dist/query';
+import { RootState } from '../../app/store';
+import { baseUrl } from '../../utils/urls';
+import { setLogout } from './authSlice';
+
+const baseQuery = fetchBaseQuery({
+  baseUrl,
+  prepareHeaders: (headers, { getState }) => {
+    const { token } = (getState() as RootState).auth;
+
+    if (token) {
+      headers.set('authorization', `Bearer ${token}`);
+    }
+
+    return headers;
+  },
+});
+
+export const baseQueryWithAuth: BaseQueryFn<
+string | FetchArgs,
+unknown,
+FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  const result = await baseQuery(args, api, extraOptions);
+  if (result.error && result.error.status === 401) {
+    api.dispatch(setLogout());
+  }
+  return result;
+};
+
+export default baseQueryWithAuth;

admin-frontend/src/features/auth/authSlice.ts

@@ -0,0 +1,70 @@
+import {
+  CaseReducer, createAsyncThunk, createSlice, PayloadAction,
+} from '@reduxjs/toolkit';
+import { RootState } from '../../app/store';
+import { TokenResp } from '../../utils/type';
+import { authUrl } from '../../utils/urls';
+
+export interface AuthStatus {
+  login: boolean;
+  token: string;
+  failed: boolean;
+  userType: string;
+  id: number;
+}
+
+const initialState = {
+  login: false,
+  failed: false,
+  token: '',
+  userType: '',
+  id: 0,
+} as AuthStatus;
+
+export const login = createAsyncThunk(
+  'auth/login',
+  async (code: string) => {
+    const res = await fetch(`${authUrl}?token=${code}`);
+    return (await res.json()) as TokenResp;
+  },
+);
+
+const setLoginReducer: CaseReducer<AuthStatus, PayloadAction<TokenResp>> = (state, action) => {
+  if (action.payload.status === 200) {
+    state.login = true;
+    state.id = action.payload.id;
+    state.userType = action.payload.type;
+    state.token = action.payload.token;
+  } else {
+    state.login = false;
+    state.failed = true;
+  }
+};
+
+export const setLogoutReducer: CaseReducer<AuthStatus> = (state) => {
+  state.login = false;
+};
+
+export const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    setLogin: setLoginReducer,
+    setLogout: setLogoutReducer,
+  },
+  extraReducers(builder) {
+    builder
+      .addCase(login.pending, (state) => {
+        state.failed = false;
+      })
+      .addCase(login.fulfilled, setLoginReducer)
+      .addCase(login.rejected, setLogoutReducer);
+  },
+});
+
+export const { setLogin, setLogout } = authSlice.actions;
+
+export const selectIsLogin = (state: RootState) => state.auth.login;
+export const selectIsFailed = (state: RootState) => state.auth.failed;
+
+export default authSlice.reducer;

admin-frontend/src/features/globalConf/globalConfSlice.ts

@@ -0,0 +1,35 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '../../app/store';
+import { GlobalConf } from '../../utils/type';
+import { globalConfUrl } from '../../utils/urls';
+
+const initialState = {
+  loaded: false,
+  platformConf: {},
+} as GlobalConf;
+
+export const loadGlobalConf = createAsyncThunk(
+  'globalConf/load',
+  async () => {
+    const res = await fetch(globalConfUrl);
+    return (await res.json()) as GlobalConf;
+  },
+);
+
+export const globalConfSlice = createSlice({
+  name: 'globalConf',
+  initialState,
+  reducers: {},
+  extraReducers(builder) {
+    builder
+      .addCase(loadGlobalConf.fulfilled, (state, payload) => {
+        state.platformConf = payload.payload.platformConf;
+        state.loaded = true;
+      });
+  },
+});
+
+export default globalConfSlice.reducer;
+
+export const selectGlobalConfLoaded = (state: RootState) => state.globalConf.loaded;
+export const selectPlatformConf = (state: RootState) => state.globalConf.platformConf;

admin-frontend/src/features/subsribeConfigManager/SubscribeManager.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SubscribeResp } from '../../utils/type';
+import { useGetSubsQuery } from './subscribeConfigSlice';
+
+export function SubscribeManager() {
+  const {
+    data: subs,
+    isLoading,
+    isFetching,
+    isSuccess,
+  } = useGetSubsQuery();
+  return (
+    <>
+    </>
+  );
+}

admin-frontend/src/features/subsribeConfigManager/subscribeConfigSlice.ts

@@ -0,0 +1,35 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { RootState } from '../../app/store';
+import { StatusResp, SubscribeResp, SubscribeConfig } from '../../utils/type';
+import { subsribeUrl } from '../../utils/urls';
+import { baseQueryWithAuth } from '../auth/authQuery';
+
+export const subscribeApi = createApi({
+  reducerPath: 'subscribe',
+  baseQuery: baseQueryWithAuth,
+  tagTypes: ['Subscribe'],
+  endpoints: (builder) => ({
+    getSubs: builder.query<SubscribeResp, void>({
+      query: () => '/subs',
+      providesTags: ['Subscribe'],
+    }),
+    newSub: builder.mutation<StatusResp, SubscribeConfig>({
+      query: (config) => ({
+        method: 'POST',
+        url: '/subs',
+        body: config,
+      }),
+      invalidatesTags: ['Subscribe'],
+    }),
+    updateSub: builder.mutation<StatusResp, SubscribeResp>({
+      query: (config) => ({
+        method: 'PATCH',
+        url: '/subs',
+        body: config,
+      }),
+      invalidatesTags: ['Subscribe'],
+    }),
+  }),
+});
+
+export const { useGetSubsQuery } = subscribeApi;