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