diff --git a/frontend_reactjs/package-lock.json b/frontend_reactjs/package-lock.json index c2ad56f..67fcf28 100644 --- a/frontend_reactjs/package-lock.json +++ b/frontend_reactjs/package-lock.json @@ -20,6 +20,7 @@ "@mui/material": "^5.15.20", "@mui/x-charts": "^7.8.0", "@mui/x-data-grid": "^7.7.1", + "@uidotdev/usehooks": "^2.4.1", "autoprefixer": "^10.4.19", "axios": "^1.7.2", "file-type": "^19.0.0", @@ -3897,6 +3898,18 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@uidotdev/usehooks": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz", + "integrity": "sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==", + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", diff --git a/frontend_reactjs/package.json b/frontend_reactjs/package.json index 168578c..e000c30 100644 --- a/frontend_reactjs/package.json +++ b/frontend_reactjs/package.json @@ -22,6 +22,7 @@ "@mui/material": "^5.15.20", "@mui/x-charts": "^7.8.0", "@mui/x-data-grid": "^7.7.1", + "@uidotdev/usehooks": "^2.4.1", "autoprefixer": "^10.4.19", "axios": "^1.7.2", "file-type": "^19.0.0", diff --git a/frontend_reactjs/src/components/CardInfo/CardInfo.tsx b/frontend_reactjs/src/components/CardInfo/CardInfo.tsx index 49dca84..db6586a 100644 --- a/frontend_reactjs/src/components/CardInfo/CardInfo.tsx +++ b/frontend_reactjs/src/components/CardInfo/CardInfo.tsx @@ -1,5 +1,5 @@ -import { Box, Chip, Divider, Paper, Typography } from '@mui/material' -import React, { PropsWithChildren, ReactElement, ReactNode } from 'react' +import { Divider, Paper, Typography } from '@mui/material' +import { PropsWithChildren } from 'react' interface CardInfoProps extends PropsWithChildren { label: string; diff --git a/frontend_reactjs/src/components/CardInfo/CardInfoChip.tsx b/frontend_reactjs/src/components/CardInfo/CardInfoChip.tsx index 6c1e00a..5c662ed 100644 --- a/frontend_reactjs/src/components/CardInfo/CardInfoChip.tsx +++ b/frontend_reactjs/src/components/CardInfo/CardInfoChip.tsx @@ -1,7 +1,5 @@ -import { Cloud } from '@mui/icons-material'; -import { Chip, SvgIconTypeMap } from '@mui/material' -import { OverridableComponent } from '@mui/material/OverridableComponent'; -import React, { ReactElement } from 'react' +import { Chip } from '@mui/material' +import { ReactElement } from 'react' interface CardInfoChipProps { status: boolean; diff --git a/frontend_reactjs/src/components/CardInfo/CardInfoLabel.tsx b/frontend_reactjs/src/components/CardInfo/CardInfoLabel.tsx index 53c0609..0004ca4 100644 --- a/frontend_reactjs/src/components/CardInfo/CardInfoLabel.tsx +++ b/frontend_reactjs/src/components/CardInfo/CardInfoLabel.tsx @@ -1,6 +1,4 @@ import { Box, Typography } from '@mui/material' -import React from 'react' - interface CardInfoLabelProps { label: string; value: string | number; diff --git a/frontend_reactjs/src/components/DataGridCellAutocomplete.tsx b/frontend_reactjs/src/components/DataGridCellAutocomplete.tsx deleted file mode 100644 index b6c0793..0000000 --- a/frontend_reactjs/src/components/DataGridCellAutocomplete.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { Autocomplete, CircularProgress, TextField } from '@mui/material' -import React, { Fragment, useEffect, useState } from 'react' - -interface DataGridCellAutocompleteProps { - selectedOption: any; - setSelectedOption: any; - isLoading: boolean; - setDebouncedSearch: any; - options: any; - setOptions: any; -} - -export default function DataGridCellAutocomplete({ - selectedOption, - setSelectedOption, - isLoading, - setDebouncedSearch, - options, - setOptions -}: DataGridCellAutocompleteProps) { - const [open, setOpen] = useState(false) - const [search, setSearch] = useState("") - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedSearch(search) - }, 500) - - return () => { - clearTimeout(handler) - } - }, [search]) - - const handleInputChange = (value: string) => { - setSearch(value) - } - - const handleOptionChange = (value: any | null) => { - setSelectedOption(value) - } - - return ( - { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - onInputChange={(_, value) => handleInputChange(value)} - onChange={(_, value) => handleOptionChange(value)} - filterOptions={(x) => x} - isOptionEqualToValue={(option: any, value: any) => option.name === value.name} - getOptionLabel={(option: any) => option.name ? option.name : ""} - options={options} - loading={isLoading} - value={selectedOption} - renderInput={(params) => ( - - {isLoading ? : null} - {params.InputProps.endAdornment} - - ) - }} - /> - )} - /> - ) -} \ No newline at end of file diff --git a/frontend_reactjs/src/components/ServerData.tsx b/frontend_reactjs/src/components/ServerData.tsx index 65477de..e2d8662 100644 --- a/frontend_reactjs/src/components/ServerData.tsx +++ b/frontend_reactjs/src/components/ServerData.tsx @@ -3,8 +3,9 @@ import { IServer } from '../interfaces/servers' import { useServerIps } from '../hooks/swrHooks' import FullFeaturedCrudGrid from './TableEditable' import { GridColDef } from '@mui/x-data-grid' +import { AxiosResponse } from 'axios' -function ServerData({ id, name, region_id }: IServer) { +function ServerData({ id }: IServer) { const { serverIps } = useServerIps(id, 0, 10) const serverIpsColumns: GridColDef[] = [ @@ -24,9 +25,16 @@ function ServerData({ id, name, region_id }: IServer) { columns={serverIpsColumns} actions onRowClick={(params, event, details) => { + console.log(params.id, event, details) //setCurrentServerData(params.row) //setServerDataOpen(true) }} + onSave={undefined} + onDelete={function (data: any): Promise> { + console.log(data) + throw new Error('Function not implemented.') + }} + loading={false} /> } diff --git a/frontend_reactjs/src/components/ServerHardware.tsx b/frontend_reactjs/src/components/ServerHardware.tsx index 4d257c7..682d8da 100644 --- a/frontend_reactjs/src/components/ServerHardware.tsx +++ b/frontend_reactjs/src/components/ServerHardware.tsx @@ -1,7 +1,7 @@ import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' -import React, { Fragment, useEffect, useState } from 'react' +import { Fragment, useEffect, useState } from 'react' import { IRegion } from '../interfaces/fuel' -import { useHardwares, useRegions, useServerIps, useServers } from '../hooks/swrHooks' +import { useHardwares, useServers } from '../hooks/swrHooks' import FullFeaturedCrudGrid from './TableEditable' import ServerService from '../services/ServersService' import { GridColDef } from '@mui/x-data-grid' @@ -95,41 +95,37 @@ export default function ServerHardware() { : hardwares && { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - onInputChange={(_, value) => handleInputChange(value)} - onChange={(_, value) => handleOptionChange(value)} - filterOptions={(x) => x} - isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} - getOptionLabel={(option: IRegion) => option.name ? option.name : ""} - options={options} - loading={isLoading} - value={selectedOption} - renderInput={(params) => ( - - {isLoading ? : null} - {params.InputProps.endAdornment} - - ) - }} - /> - )} - /> - } + autoComplete={ { + setOpen(true) + }} + onClose={() => { + setOpen(false) + }} + onInputChange={(_, value) => handleInputChange(value)} + onChange={(_, value) => handleOptionChange(value)} + filterOptions={(x) => x} + isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} + getOptionLabel={(option: IRegion) => option.name ? option.name : ""} + options={options} + loading={isLoading} + value={selectedOption} + renderInput={(params) => ( + + {isLoading ? : null} + {params.InputProps.endAdornment} + + ) + }} /> + )} />} onSave={(id: any) => { console.log(id) }} @@ -140,8 +136,7 @@ export default function ServerHardware() { onRowClick={(params, event, details) => { setCurrentServerData(params.row) setServerDataOpen(true) - }} - /> + }} loading={false} /> } ) diff --git a/frontend_reactjs/src/components/ServerIpsView.tsx b/frontend_reactjs/src/components/ServerIpsView.tsx index adf6302..723dd6b 100644 --- a/frontend_reactjs/src/components/ServerIpsView.tsx +++ b/frontend_reactjs/src/components/ServerIpsView.tsx @@ -1,7 +1,7 @@ import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' -import React, { Fragment, useEffect, useState } from 'react' +import { Fragment, useEffect, useState } from 'react' import { IRegion } from '../interfaces/fuel' -import { useRegions, useServerIps, useServers } from '../hooks/swrHooks' +import { useServerIps, useServers } from '../hooks/swrHooks' import FullFeaturedCrudGrid from './TableEditable' import ServerService from '../services/ServersService' import { GridColDef } from '@mui/x-data-grid' @@ -93,41 +93,37 @@ export default function ServerIpsView() { : serverIps && { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - onInputChange={(_, value) => handleInputChange(value)} - onChange={(_, value) => handleOptionChange(value)} - filterOptions={(x) => x} - isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} - getOptionLabel={(option: IRegion) => option.name ? option.name : ""} - options={options} - loading={isLoading} - value={selectedOption} - renderInput={(params) => ( - - {isLoading ? : null} - {params.InputProps.endAdornment} - - ) - }} - /> - )} - /> - } + autoComplete={ { + setOpen(true) + }} + onClose={() => { + setOpen(false) + }} + onInputChange={(_, value) => handleInputChange(value)} + onChange={(_, value) => handleOptionChange(value)} + filterOptions={(x) => x} + isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} + getOptionLabel={(option: IRegion) => option.name ? option.name : ""} + options={options} + loading={isLoading} + value={selectedOption} + renderInput={(params) => ( + + {isLoading ? : null} + {params.InputProps.endAdornment} + + ) + }} /> + )} />} onSave={(id: any) => { console.log(id) }} @@ -138,8 +134,7 @@ export default function ServerIpsView() { onRowClick={(params, event, details) => { setCurrentServerData(params.row) setServerDataOpen(true) - }} - /> + }} loading={false} /> } ) diff --git a/frontend_reactjs/src/components/ServerStorages.tsx b/frontend_reactjs/src/components/ServerStorages.tsx index 82d84de..acd05e3 100644 --- a/frontend_reactjs/src/components/ServerStorages.tsx +++ b/frontend_reactjs/src/components/ServerStorages.tsx @@ -1,34 +1,26 @@ import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material' -import React, { Fragment, useEffect, useState } from 'react' +import { Fragment, useEffect, useState } from 'react' import { IRegion } from '../interfaces/fuel' -import { useHardwares, useRegions, useServerIps, useServers, useStorages } from '../hooks/swrHooks' +import { useHardwares, useStorages } from '../hooks/swrHooks' import FullFeaturedCrudGrid from './TableEditable' import ServerService from '../services/ServersService' import { GridColDef } from '@mui/x-data-grid' import { Close } from '@mui/icons-material' import ServerData from './ServerData' +import { useDebounce } from '@uidotdev/usehooks' export default function ServerStorage() { const [open, setOpen] = useState(false) const [options, setOptions] = useState([]) const [search, setSearch] = useState("") - const [debouncedSearch, setDebouncedSearch] = useState("") const [selectedOption, setSelectedOption] = useState(null) const { hardwares, isLoading } = useHardwares() + const debouncedSearch = useDebounce(search, 500) + const [serverDataOpen, setServerDataOpen] = useState(false) const [currentServerData, setCurrentServerData] = useState(null) - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedSearch(search) - }, 500) - - return () => { - clearTimeout(handler) - } - }, [search]) - + useEffect(() => { if (hardwares) { setOptions([...hardwares]) @@ -92,41 +84,37 @@ export default function ServerStorage() { : storages && { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - onInputChange={(_, value) => handleInputChange(value)} - onChange={(_, value) => handleOptionChange(value)} - filterOptions={(x) => x} - isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} - getOptionLabel={(option: IRegion) => option.name ? option.name : ""} - options={options} - loading={isLoading} - value={selectedOption} - renderInput={(params) => ( - - {isLoading ? : null} - {params.InputProps.endAdornment} - - ) - }} - /> - )} - /> - } + autoComplete={ { + setOpen(true) + }} + onClose={() => { + setOpen(false) + }} + onInputChange={(_, value) => handleInputChange(value)} + onChange={(_, value) => handleOptionChange(value)} + filterOptions={(x) => x} + isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} + getOptionLabel={(option: IRegion) => option.name ? option.name : ""} + options={options} + loading={isLoading} + value={selectedOption} + renderInput={(params) => ( + + {isLoading ? : null} + {params.InputProps.endAdornment} + + ) + }} /> + )} />} onSave={(id: any) => { console.log(id) }} @@ -138,6 +126,7 @@ export default function ServerStorage() { setCurrentServerData(params.row) setServerDataOpen(true) }} + loading={false} /> } diff --git a/frontend_reactjs/src/components/ServersView.tsx b/frontend_reactjs/src/components/ServersView.tsx index d42e7cb..c3258cd 100644 --- a/frontend_reactjs/src/components/ServersView.tsx +++ b/frontend_reactjs/src/components/ServersView.tsx @@ -1,5 +1,5 @@ -import { AppBar, Autocomplete, Box, Chip, CircularProgress, Dialog, Divider, Grid, IconButton, Paper, TextField, Toolbar, Typography } from '@mui/material' -import React, { Fragment, useEffect, useState } from 'react' +import { AppBar, Autocomplete, Box, CircularProgress, Dialog, Grid, IconButton, TextField, Toolbar } from '@mui/material' +import { Fragment, useEffect, useState } from 'react' import { IRegion } from '../interfaces/fuel' import { useRegions, useServers, useServersInfo } from '../hooks/swrHooks' import FullFeaturedCrudGrid from './TableEditable' @@ -11,47 +11,30 @@ import { IServersInfo } from '../interfaces/servers' import CardInfo from './CardInfo/CardInfo' import CardInfoLabel from './CardInfo/CardInfoLabel' import CardInfoChip from './CardInfo/CardInfoChip' -import DataGridCellAutocomplete from './DataGridCellAutocomplete' +import { useDebounce } from '@uidotdev/usehooks' export default function ServersView() { - const [open, setOpen] = useState(false) - const [editOpen, setEditOpen] = useState(false) const [options, setOptions] = useState([]) const [search, setSearch] = useState("") - const [debouncedSearch, setDebouncedSearch] = useState("") + //const [debouncedSearch, setDebouncedSearch] = useState("") + + const debouncedSearch = useDebounce(search, 500) + const [selectedOption, setSelectedOption] = useState(null) + const { regions, isLoading } = useRegions(10, 1, debouncedSearch) const { serversInfo } = useServersInfo(selectedOption?.id) - const [serverDataOpen, setServerDataOpen] = useState(false) const [currentServerData, setCurrentServerData] = useState(null) - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedSearch(search) - }, 500) - - return () => { - clearTimeout(handler) - } - }, [search]) - useEffect(() => { if (regions) { setOptions([...regions]) } }, [regions]) - const handleInputChange = (value: string) => { - setSearch(value) - } - - const handleOptionChange = (value: IRegion | null) => { - setSelectedOption(value) - } - const { servers, isLoading: serversLoading } = useServers(selectedOption?.id, 0, 10) const serversColumns: GridColDef[] = [ @@ -60,16 +43,40 @@ export default function ServersView() { { field: 'region_id', editable: true, + renderCell: (params) => ( +
+ {params.value} +
+ ), renderEditCell: (params: GridRenderCellParams) => ( - { + setSearch(value)} + onChange={(_, value) => { params.value = value }} - isLoading={isLoading} - setDebouncedSearch={setDebouncedSearch} + isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} + getOptionLabel={(option: IRegion) => option.name ? option.name : ""} options={options} - setOptions={setOptions} + loading={isLoading} + value={params.value} + renderInput={(params) => ( + + {isLoading ? : null} + {params.InputProps.endAdornment} + + ) + }} + /> + )} /> ), width: 200 @@ -131,59 +138,47 @@ export default function ServersView() { } - {serversLoading ? - - : - servers && - { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - onInputChange={(_, value) => handleInputChange(value)} - onChange={(_, value) => handleOptionChange(value)} - filterOptions={(x) => x} - isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name} - getOptionLabel={(option: IRegion) => option.name ? option.name : ""} - options={options} - loading={isLoading} - value={selectedOption} - renderInput={(params) => ( - - {isLoading ? : null} - {params.InputProps.endAdornment} - - ) - }} - /> - )} - /> - } - onSave={(id: any) => { - console.log(id) - }} - onDelete={ServerService.removeServer} - initialRows={servers} - columns={serversColumns} - actions - onRowClick={(params, event, details) => { - setCurrentServerData(params.row) - setServerDataOpen(true) - }} - /> - } + setSearch(value)} + onChange={(_, value) => setSelectedOption(value)} + isOptionEqualToValue={(option: IRegion, value: IRegion) => option.id === value.id} + getOptionLabel={(option: IRegion) => option.name ? option.name : ""} + options={options} + loading={isLoading} + value={selectedOption} + renderInput={(params) => ( + + {isLoading ? : null} + {params.InputProps.endAdornment} + + ) + }} + /> + )} + /> + } + onSave={(id: any) => { + console.log(id) + }} + onDelete={ServerService.removeServer} + initialRows={servers} + columns={serversColumns} + actions + onRowClick={(params, event, details) => { + setCurrentServerData(params.row) + setServerDataOpen(true) + }} + /> ) } \ No newline at end of file diff --git a/frontend_reactjs/src/components/TableEditable.tsx b/frontend_reactjs/src/components/TableEditable.tsx index 2df6736..a76be2c 100644 --- a/frontend_reactjs/src/components/TableEditable.tsx +++ b/frontend_reactjs/src/components/TableEditable.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useEffect, useState } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import AddIcon from '@mui/icons-material/Add'; @@ -19,12 +19,8 @@ import { GridRowModel, GridRowEditStopReasons, GridSlots, - GridRowProps, - GridRow, - useGridApiContext, } from '@mui/x-data-grid'; import { AxiosResponse } from 'axios'; -import { Autocomplete } from '@mui/material'; interface EditToolbarProps { setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void; @@ -90,6 +86,7 @@ interface DataGridProps { onSave: any; onDelete: (data: any) => Promise>; autoComplete?: React.ReactElement | null; + loading: boolean; } export default function FullFeaturedCrudGrid({ @@ -99,10 +96,11 @@ export default function FullFeaturedCrudGrid({ onRowClick, onSave, onDelete, - autoComplete + autoComplete, + loading }: DataGridProps) { - const [rows, setRows] = React.useState(initialRows); - const [rowModesModel, setRowModesModel] = React.useState({}); + const [rows, setRows] = useState(initialRows); + const [rowModesModel, setRowModesModel] = useState({}); const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => { if (params.reason === GridRowEditStopReasons.rowFocusOut) { @@ -147,6 +145,12 @@ export default function FullFeaturedCrudGrid({ setRowModesModel(newRowModesModel); }; + useEffect(() => { + if (initialRows) { + setRows(initialRows) + } + }, [initialRows]) + const actionColumns: GridColDef[] = [ { field: 'actions', @@ -210,7 +214,8 @@ export default function FullFeaturedCrudGrid({ }} > fetcher(url, BASE_URL.servers), { - revalidateOnFocus: false + revalidateOnFocus: false, } ) diff --git a/frontend_reactjs/src/layouts/DashboardLayout.tsx b/frontend_reactjs/src/layouts/DashboardLayout.tsx index aed23ef..4b2bff5 100644 --- a/frontend_reactjs/src/layouts/DashboardLayout.tsx +++ b/frontend_reactjs/src/layouts/DashboardLayout.tsx @@ -11,7 +11,6 @@ import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; import Container from '@mui/material/Container'; import MenuIcon from '@mui/icons-material/Menu'; -import { Api, Assignment, Cloud, Dashboard, Factory, Home, People, Shield, Storage, } from '@mui/icons-material'; import { colors, ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material'; import { Outlet, useNavigate } from 'react-router-dom'; import { UserData } from '../interfaces/auth'; diff --git a/frontend_reactjs/src/main.tsx b/frontend_reactjs/src/main.tsx index 8dcaf4a..513e3df 100644 --- a/frontend_reactjs/src/main.tsx +++ b/frontend_reactjs/src/main.tsx @@ -9,7 +9,7 @@ import { createTheme } from '@mui/material' import { ruRU } from '@mui/material/locale' import { getDarkMode, usePrefStore } from "./store/preferences.ts"; -const darkTheme = createTheme( +const mainTheme = createTheme( { typography: { fontFamily: [ @@ -28,6 +28,11 @@ const darkTheme = createTheme( } } }, + } +) + +const darkTheme = createTheme( + { palette: { mode: "dark", primary: { main: '#1976d2' }, @@ -38,23 +43,6 @@ const darkTheme = createTheme( const lightTheme = createTheme( { - typography: { - fontFamily: [ - 'Inter' - ].join(',') - }, - components: { - MuiButtonBase: { - defaultProps: { - //disableRipple: true, - } - }, - MuiButtonGroup: { - defaultProps: { - //disableRipple: true, - } - } - }, palette: { mode: "light", primary: { main: '#1976d2' }, @@ -82,7 +70,7 @@ function ThemedApp() { }, []) return ( - + ) diff --git a/frontend_reactjs/src/pages/Boilers.tsx b/frontend_reactjs/src/pages/Boilers.tsx index 5711522..b079ece 100644 --- a/frontend_reactjs/src/pages/Boilers.tsx +++ b/frontend_reactjs/src/pages/Boilers.tsx @@ -1,6 +1,6 @@ import { Box, Typography } from '@mui/material' import { DataGrid, GridColDef } from '@mui/x-data-grid' -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { IBoiler } from '../interfaces/fuel' import { useBoilers } from '../hooks/swrHooks' diff --git a/frontend_reactjs/src/pages/Servers.tsx b/frontend_reactjs/src/pages/Servers.tsx index 1c406aa..06a683f 100644 --- a/frontend_reactjs/src/pages/Servers.tsx +++ b/frontend_reactjs/src/pages/Servers.tsx @@ -9,6 +9,7 @@ export default function Servers() { const [currentTab, setCurrentTab] = useState(0) const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { + console.log(event) setCurrentTab(newValue); } diff --git a/frontend_reactjs/src/services/AuthService.ts b/frontend_reactjs/src/services/AuthService.ts index 1354bed..49509ce 100644 --- a/frontend_reactjs/src/services/AuthService.ts +++ b/frontend_reactjs/src/services/AuthService.ts @@ -10,7 +10,7 @@ const config: AxiosRequestConfig = { } export default class AuthService { - static async login(data: FormData) { + static async login(data: URLSearchParams) { return await axiosInstance.post(`/auth/login`, data, config) } diff --git a/frontend_reactjs/tsconfig.json b/frontend_reactjs/tsconfig.json index fd7d8ae..4a13756 100644 --- a/frontend_reactjs/tsconfig.json +++ b/frontend_reactjs/tsconfig.json @@ -5,10 +5,13 @@ ], "target": "ES2020", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], "module": "ESNext", "skipLibCheck": true, - /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, @@ -16,13 +19,18 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] -} + "include": [ + "src" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file diff --git a/frontend_reactjs/yarn.lock b/frontend_reactjs/yarn.lock index 7124c97..d873d49 100644 --- a/frontend_reactjs/yarn.lock +++ b/frontend_reactjs/yarn.lock @@ -1706,6 +1706,11 @@ "@typescript-eslint/types" "7.13.0" eslint-visitor-keys "^3.4.3" +"@uidotdev/usehooks@^2.4.1": + version "2.4.1" + resolved "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz" + integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg== + "@ungap/structured-clone@^1.2.0": version "1.2.0" resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz" @@ -4167,7 +4172,7 @@ randomfill@^1.0.3: randombytes "^2.0.5" safe-buffer "^5.1.0" -"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0: +"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=18.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -4220,7 +4225,7 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^18.2.0, react@^18.3.1, react@>=16.6.0, react@>=16.8, react@>=16.8.0: +"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^18.2.0, react@^18.3.1, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=18.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==