From 357cbb557eedbc925f7e2f5e08d294608e63b13b Mon Sep 17 00:00:00 2001 From: Matthias Feyll <matthias.feyll@stud.h-da.de> Date: Tue, 1 Oct 2024 13:11:05 +0200 Subject: [PATCH] refactor login to component --- .../login}/layouts/login.layout.tsx | 2 +- .../{view/login => login/view}/login.scss | 0 .../{view/login => login/view}/login.view.tsx | 2 +- .../viewmodel}/login.viewmodel.ts | 0 .../src/components/routines/device.routine.ts | 2 +- react-ui/src/components/view/device/device.scss | 15 ++++++--------- .../components/view/device/device.view.table.tsx | 2 +- .../src/components/view/device/device.view.tsx | 2 +- react-ui/src/index.scss | 11 +++++------ react-ui/src/routes.tsx | 4 ++-- .../protected.layout/protected.layout.scss | 6 +++--- .../layouts/protected.layout/protected.layout.tsx | 2 +- react-ui/src/shared/provider/auth.provider.tsx | 2 +- .../reducer => shared/store}/user.reducer.ts | 0 react-ui/src/{ => shared}/style/box.scss | 0 react-ui/src/{ => shared}/style/colors.scss | 0 react-ui/src/{ => shared}/style/fonts.scss | 0 react-ui/src/{ => shared}/style/index.scss | 0 react-ui/src/{ => shared}/style/toast.scss | 0 react-ui/src/{ => shared}/style/utils.scss | 0 react-ui/src/shared/utils/routine.manager.ts | 2 +- react-ui/src/stores/index.ts | 2 +- react-ui/src/stores/persist.store.ts | 2 +- .../reducer/device.reducer/device.reducer.ts | 2 +- react-ui/src/stores/reducer/routine.reducer.ts | 2 +- react-ui/tsconfig.json | 7 +++---- react-ui/vite.config.mjs | 5 ++--- 27 files changed, 33 insertions(+), 39 deletions(-) rename react-ui/src/{shared => components/login}/layouts/login.layout.tsx (92%) rename react-ui/src/components/{view/login => login/view}/login.scss (100%) rename react-ui/src/components/{view/login => login/view}/login.view.tsx (98%) rename react-ui/src/components/{view_model => login/viewmodel}/login.viewmodel.ts (100%) rename react-ui/src/{stores/reducer => shared/store}/user.reducer.ts (100%) rename react-ui/src/{ => shared}/style/box.scss (100%) rename react-ui/src/{ => shared}/style/colors.scss (100%) rename react-ui/src/{ => shared}/style/fonts.scss (100%) rename react-ui/src/{ => shared}/style/index.scss (100%) rename react-ui/src/{ => shared}/style/toast.scss (100%) rename react-ui/src/{ => shared}/style/utils.scss (100%) diff --git a/react-ui/src/shared/layouts/login.layout.tsx b/react-ui/src/components/login/layouts/login.layout.tsx similarity index 92% rename from react-ui/src/shared/layouts/login.layout.tsx rename to react-ui/src/components/login/layouts/login.layout.tsx index 43e40aa30..323941a67 100644 --- a/react-ui/src/shared/layouts/login.layout.tsx +++ b/react-ui/src/components/login/layouts/login.layout.tsx @@ -1,7 +1,7 @@ import { useAuth } from "@provider/auth.provider"; -import LoginView from "@view/login/login.view"; import { useEffect } from "react"; import { useNavigate, useOutlet } from "react-router-dom"; +import LoginView from "../view/login.view"; export const LoginLayout = ({ children }) => { diff --git a/react-ui/src/components/view/login/login.scss b/react-ui/src/components/login/view/login.scss similarity index 100% rename from react-ui/src/components/view/login/login.scss rename to react-ui/src/components/login/view/login.scss diff --git a/react-ui/src/components/view/login/login.view.tsx b/react-ui/src/components/login/view/login.view.tsx similarity index 98% rename from react-ui/src/components/view/login/login.view.tsx rename to react-ui/src/components/login/view/login.view.tsx index 405a42f84..0db0ea206 100644 --- a/react-ui/src/components/view/login/login.view.tsx +++ b/react-ui/src/components/login/view/login.view.tsx @@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next' import './login.scss' import logo from '@assets/logo.svg' -import useLoginViewModel from '@viewmodel/login.viewmodel' import React, { useRef } from 'react' +import useLoginViewModel from '../viewmodel/login.viewmodel' const LoginView = ({ children }) => { const { t } = useTranslation('common') diff --git a/react-ui/src/components/view_model/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts similarity index 100% rename from react-ui/src/components/view_model/login.viewmodel.ts rename to react-ui/src/components/login/viewmodel/login.viewmodel.ts diff --git a/react-ui/src/components/routines/device.routine.ts b/react-ui/src/components/routines/device.routine.ts index 0290f637d..7cafd91b7 100644 --- a/react-ui/src/components/routines/device.routine.ts +++ b/react-ui/src/components/routines/device.routine.ts @@ -1,7 +1,7 @@ import { NetworkElementServiceGetAllFlattenedApiArg, api } from "@api/api"; import { setDevices } from "@reducer/device.reducer/device.reducer"; -import { setUser } from "@reducer/user.reducer"; import { createAsyncThunk } from "@reduxjs/toolkit"; +import { setUser } from "@shared/store/user.reducer"; import { RootState } from "src/stores"; import { startListening } from "../../stores/middleware/listener.middleware"; import { FETCH_DEVICE_ACTION } from "./action.routine"; diff --git a/react-ui/src/components/view/device/device.scss b/react-ui/src/components/view/device/device.scss index d24b08084..0890fc928 100644 --- a/react-ui/src/components/view/device/device.scss +++ b/react-ui/src/components/view/device/device.scss @@ -1,25 +1,22 @@ -@import '../../../style/colors.scss'; +@import '/src/shared/style/colors.scss'; thead { font-size: 0.9em; } -tr:hover > td { +tr:hover > td { background-color: lighten(map-get($theme-colors, primary), 30%) !important; } -tr:nth-child(2n+1) > td { - background-color: lighten(map-get($theme-colors, primary) , 38%) +tr:nth-child(2n + 1) > td { + background-color: lighten(map-get($theme-colors, primary), 38%); } .c-box { padding: 2em !important; padding-top: 1em !important; - } - - .border-right { $border-padding: 2em; @@ -39,7 +36,7 @@ tr:nth-child(2n+1) > td { &:hover { color: lighten(map-get($theme-colors, primary), 10%); } - + &:focus { border: none !important; color: lighten(map-get($theme-colors, primary), 10%); @@ -49,4 +46,4 @@ tr:nth-child(2n+1) > td { color: map-get($theme-colors, primary); font-weight: 500; } -} \ No newline at end of file +} diff --git a/react-ui/src/components/view/device/device.view.table.tsx b/react-ui/src/components/view/device/device.view.table.tsx index 17d4bfd25..16c9c7730 100644 --- a/react-ui/src/components/view/device/device.view.table.tsx +++ b/react-ui/src/components/view/device/device.view.table.tsx @@ -1,8 +1,8 @@ import { useAppSelector } from "@hooks"; -import { useDeviceTableViewModel } from "@viewmodel/device.table.viewmodel"; import { MutableRefObject, useCallback } from "react"; import { OverlayTrigger, Table, Tooltip } from "react-bootstrap"; import { useTranslation } from "react-i18next"; +import { useDeviceTableViewModel } from "../../view_model/device.table.viewmodel"; export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) => { const { devices, pnds } = useAppSelector(state => state.device); diff --git a/react-ui/src/components/view/device/device.view.tsx b/react-ui/src/components/view/device/device.view.tsx index c85ce6be6..c620636bf 100644 --- a/react-ui/src/components/view/device/device.view.tsx +++ b/react-ui/src/components/view/device/device.view.tsx @@ -1,10 +1,10 @@ -import { useDeviceViewModel } from '@viewmodel/device.viewmodel'; import { useRef } from 'react'; import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; import './device.scss'; import { DeviceViewTable } from './device.view.table'; import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs'; +import { useDeviceViewModel } from '/src/components/view_model/device.viewmodel'; function DeviceView() { const { t } = useTranslation('common'); diff --git a/react-ui/src/index.scss b/react-ui/src/index.scss index 3526e18bc..8dd280e64 100644 --- a/react-ui/src/index.scss +++ b/react-ui/src/index.scss @@ -1,10 +1,9 @@ -@import './style/index.scss'; +@import './shared/style/index.scss'; body { - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; - - background-color: map-get($theme-colors, bg-primary) !important; + background-color: map-get($theme-colors, bg-primary) !important; } diff --git a/react-ui/src/routes.tsx b/react-ui/src/routes.tsx index a63d6d875..1015d87af 100644 --- a/react-ui/src/routes.tsx +++ b/react-ui/src/routes.tsx @@ -1,8 +1,8 @@ import { BasicLayout } from "@layout/basic.layout"; -import { LoginLayout } from "@layout/login.layout"; import { ProtectedLayout } from "@layout/protected.layout/protected.layout"; -import DeviceView from "@view/device/device.view"; import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom"; +import { LoginLayout } from "./components/login/layouts/login.layout"; +import DeviceView from "./components/view/device/device.view"; export const DEVICE_URL = '/device/'; export const LOGIN_URL = '/login'; diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss index 47561615d..ffc4acf0d 100644 --- a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss +++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss @@ -1,4 +1,4 @@ -@import "/src/style/colors.scss"; +@import '/src/shared/style/colors.scss'; $sidebar-width: 4.5em; @@ -12,7 +12,7 @@ $sidebar-width: 4.5em; color: map-get($theme-colors, primary); font-weight: 600; } - + &.active { color: map-get($theme-colors, primary); font-weight: 600; @@ -26,4 +26,4 @@ $sidebar-width: 4.5em; .main-content { margin-left: $sidebar-width; -} \ No newline at end of file +} diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx index faff61c40..020389984 100644 --- a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx +++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx @@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useAppDispatch, useAppSelector } from '@hooks'; import { useAuth } from "@provider/auth.provider"; import { fetchPnds } from '@reducer/device.reducer/device.reducer'; -import { fetchUser } from '@reducer/user.reducer'; import { DEVICE_URL, LOGIN_URL } from '@routes'; +import { fetchUser } from '@shared/store/user.reducer'; import React, { useEffect } from "react"; import { Dropdown } from "react-bootstrap"; import { useTranslation } from "react-i18next"; diff --git a/react-ui/src/shared/provider/auth.provider.tsx b/react-ui/src/shared/provider/auth.provider.tsx index d1f472cc7..b6bde9262 100644 --- a/react-ui/src/shared/provider/auth.provider.tsx +++ b/react-ui/src/shared/provider/auth.provider.tsx @@ -1,11 +1,11 @@ import { AuthServiceLoginApiArg, AuthServiceLoginApiResponse, useAuthServiceLoginMutation } from "@api/api"; import { getCookieValue } from "@helper/coookie"; import { useAppDispatch, useAppSelector } from "@hooks"; -import { setToken } from "@reducer/user.reducer"; import { DEVICE_URL, LOGIN_URL } from "@routes"; import { jwtDecode } from "jwt-decode"; import { createContext, useContext, useEffect, useMemo } from "react"; import { useNavigate } from "react-router-dom"; +import { setToken } from "../store/user.reducer"; interface AuthProviderType { login: (username: string, password: string) => void, diff --git a/react-ui/src/stores/reducer/user.reducer.ts b/react-ui/src/shared/store/user.reducer.ts similarity index 100% rename from react-ui/src/stores/reducer/user.reducer.ts rename to react-ui/src/shared/store/user.reducer.ts diff --git a/react-ui/src/style/box.scss b/react-ui/src/shared/style/box.scss similarity index 100% rename from react-ui/src/style/box.scss rename to react-ui/src/shared/style/box.scss diff --git a/react-ui/src/style/colors.scss b/react-ui/src/shared/style/colors.scss similarity index 100% rename from react-ui/src/style/colors.scss rename to react-ui/src/shared/style/colors.scss diff --git a/react-ui/src/style/fonts.scss b/react-ui/src/shared/style/fonts.scss similarity index 100% rename from react-ui/src/style/fonts.scss rename to react-ui/src/shared/style/fonts.scss diff --git a/react-ui/src/style/index.scss b/react-ui/src/shared/style/index.scss similarity index 100% rename from react-ui/src/style/index.scss rename to react-ui/src/shared/style/index.scss diff --git a/react-ui/src/style/toast.scss b/react-ui/src/shared/style/toast.scss similarity index 100% rename from react-ui/src/style/toast.scss rename to react-ui/src/shared/style/toast.scss diff --git a/react-ui/src/style/utils.scss b/react-ui/src/shared/style/utils.scss similarity index 100% rename from react-ui/src/style/utils.scss rename to react-ui/src/shared/style/utils.scss diff --git a/react-ui/src/shared/utils/routine.manager.ts b/react-ui/src/shared/utils/routine.manager.ts index c86e30d4a..449e2c690 100644 --- a/react-ui/src/shared/utils/routine.manager.ts +++ b/react-ui/src/shared/utils/routine.manager.ts @@ -1,7 +1,7 @@ +import { fetchDevicesThunk } from '@component/routines/device.routine'; import { fetchSelectedMneThunk } from '@reducer/device.reducer/mne.subscription'; import { AsyncThunk } from '@reduxjs/toolkit'; import { QueryActionCreatorResult } from '@reduxjs/toolkit/query'; -import { fetchDevicesThunk } from '@routine/device.routine'; type Routine = QueryActionCreatorResult<any>; diff --git a/react-ui/src/stores/index.ts b/react-ui/src/stores/index.ts index 1b3c3335e..f620923b5 100644 --- a/react-ui/src/stores/index.ts +++ b/react-ui/src/stores/index.ts @@ -1,12 +1,12 @@ import { configureStore } from '@reduxjs/toolkit' import { setupListeners } from '@reduxjs/toolkit/query' -import { FETCH_DEVICE_ACTION, FETCH_MNE_ACTION } from '@routine/action.routine' import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from 'redux-persist' import persistStore from 'redux-persist/es/persistStore' import { emptySplitApi } from './api.store' import { rtkQueryErrorLogger } from './middleware/devLogging.middleware' import { listenerMiddleware } from './middleware/listener.middleware' import persistedReducer from './persist.store' +import { FETCH_DEVICE_ACTION, FETCH_MNE_ACTION } from '/src/components/routines/action.routine' export const store = configureStore({ diff --git a/react-ui/src/stores/persist.store.ts b/react-ui/src/stores/persist.store.ts index 65ade7d3e..d66bcf930 100644 --- a/react-ui/src/stores/persist.store.ts +++ b/react-ui/src/stores/persist.store.ts @@ -1,10 +1,10 @@ import deviceReducer from "@reducer/device.reducer/device.reducer"; import routineReducer from "@reducer/routine.reducer"; -import userReducer from "@reducer/user.reducer"; import { combineReducers } from "redux"; import { persistReducer } from "redux-persist"; import storage from "redux-persist/es/storage"; import { emptySplitApi } from "./api.store"; +import userReducer from "/src/shared/store/user.reducer"; /** local storage config */ diff --git a/react-ui/src/stores/reducer/device.reducer/device.reducer.ts b/react-ui/src/stores/reducer/device.reducer/device.reducer.ts index 9f21bcbeb..c9388adc5 100644 --- a/react-ui/src/stores/reducer/device.reducer/device.reducer.ts +++ b/react-ui/src/stores/reducer/device.reducer/device.reducer.ts @@ -1,6 +1,6 @@ import { api, NetworkelementFlattenedManagedNetworkElement, NetworkelementManagedNetworkElement, PndPrincipalNetworkDomain, PndServiceGetPndListApiArg } from '@api/api'; +import { DeviceViewTabValues } from '@component/view/device/device.view.tabs'; import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { DeviceViewTabValues } from '@view/device/device.view.tabs'; export type Device = NetworkelementFlattenedManagedNetworkElement; diff --git a/react-ui/src/stores/reducer/routine.reducer.ts b/react-ui/src/stores/reducer/routine.reducer.ts index 85ddd7b2b..79e7c8683 100644 --- a/react-ui/src/stores/reducer/routine.reducer.ts +++ b/react-ui/src/stores/reducer/routine.reducer.ts @@ -1,9 +1,9 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit'; +import { setToken } from '@shared/store/user.reducer'; import { RoutineDictionary, RoutineManager, THUNK_KEY } from '@utils/routine.manager'; import { REHYDRATE } from 'redux-persist'; import { RootState } from '..'; import { startListening } from '../middleware/listener.middleware'; -import { setToken } from './user.reducer'; diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json index 6bd0a18b7..6cfd61712 100644 --- a/react-ui/tsconfig.json +++ b/react-ui/tsconfig.json @@ -24,8 +24,6 @@ "paths": { "@assets/*": ["assets/*"], "@api/*": ["src/shared/api/*"], - "@viewmodel/*": ["src/components/view_model/*"], - "@view/*": ["src/components/view/*"], "@reducer/*": ["src/stores/reducer/*"], "@provider/*": ["src/shared/provider/*"], "@layout/*": ["src/shared/layouts/*"], @@ -33,8 +31,9 @@ "@routes": ["src/routes.tsx"], "@task/*": ["src/shared/tasks/*"], "@helper/*": ["src/shared/helper/*"], - "@routine/*": ["src/components/routines/*"], - "@utils/*": ["src/shared/utils/*"] + "@utils/*": ["src/shared/utils/*"], + "@shared/*": ["src/shared/*"], + "@component/*": ["src/components/*"] } }, "include": [ diff --git a/react-ui/vite.config.mjs b/react-ui/vite.config.mjs index d36e8cf3a..bdff7502a 100644 --- a/react-ui/vite.config.mjs +++ b/react-ui/vite.config.mjs @@ -37,8 +37,6 @@ export default defineConfig({ alias: { '@assets': '/assets', '@api': '/src/shared/api', - '@viewmodel': '/src/components/view_model', - '@view': '/src/components/view', '@reducer': '/src/stores/reducer', '@provider': '/src/shared/provider', '@layout': '/src/shared/layouts', @@ -46,8 +44,9 @@ export default defineConfig({ '@task': '/src/shared/tasks', '@helper': '/src/shared/helper', '@routes': '/src/routes.tsx', - '@routine': '/src/components/routines', '@utils': '/src/shared/utils', + '@shared': '/src/shared', + '@component': '/src/components', }, }, -- GitLab