Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate react-scripts to vite #696

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
Small fixes on state management and vite configuration to make websoc…
…ket working
mfechner committed Oct 13, 2024
commit 24423d9c2983dd17edd4c5057e3e32681390f361
16 changes: 10 additions & 6 deletions ui/src/layout/Layout.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { MuiThemeProvider, Theme, WithStyles, withStyles} from '@material-ui/cor
import { createTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import * as React from 'react';
import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';
import Header from './Header';
import LoadingSpinner from '../common/LoadingSpinner';
import Navigation from './Navigation';
@@ -17,10 +17,10 @@ import PluginDetailView from '../plugin/PluginDetailView';
import Login from '../user/Login';
import Messages from '../message/Messages';
import Users from '../user/Users';
import {observer} from 'mobx-react';
import { observer } from 'mobx-react';
import { makeObservable, observable } from 'mobx';
import {inject, Stores} from '../inject';
import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
import { inject, Stores } from '../inject';
import { ConnectionErrorBanner } from '../common/ConnectionErrorBanner';

const styles = (theme: Theme) => ({
content: {
@@ -68,10 +68,12 @@ class Layout extends React.Component<
makeObservable(this);
}

@action
private setNavOpen(open: boolean) {
this.navOpen = open;
}

@action
public componentDidMount() {
const localStorageTheme = window.localStorage.getItem(localStorageThemeKey);
if (isThemeKey(localStorageTheme)) {
@@ -81,22 +83,23 @@ class Layout extends React.Component<
}
}

@action
public render() {
const {showSettings, currentTheme} = this;
const {
classes,
currentUser: {
loggedIn,
authenticating,
user: {name, admin},
user: { name, admin },
logout,
tryReconnect,
connectionErrorMessage,
},
} = this.props;
const theme = themeMap[currentTheme];
const loginRoute = () => (loggedIn ? <Redirect to="/" /> : <Login />);
const {version} = config.get('version');
const { version } = config.get('version');
return (
<MuiThemeProvider theme={theme}>
<HashRouter>
@@ -166,6 +169,7 @@ class Layout extends React.Component<
);
}

@action
private toggleTheme() {
this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem(localStorageThemeKey, this.currentTheme);
25 changes: 20 additions & 5 deletions ui/src/user/Login.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,16 @@ class Login extends Component<Stores<'currentUser'>> {
makeObservable(this);
}

@action
private setUsername = (value: string) => {
this.username = value;
};

@action
private setPassword = (value: string) => {
this.password = value;
};

public render() {
const {username, password, registerDialog} = this;
return (
@@ -32,23 +42,23 @@ class Login extends Component<Stores<'currentUser'>> {
<Container>
<form onSubmit={this.preventDefault} id="login-form">
<TextField
variant="standard"
autoFocus
className="name"
label="Username"
margin="dense"
autoComplete="username"
value={username}
onChange={(e) => (this.username = e.target.value)}
/>
onChange={(e) => this.setUsername(e.target.value)} />
<TextField
variant="standard"
type="password"
className="password"
label="Password"
margin="normal"
autoComplete="current-password"
value={password}
onChange={(e) => (this.password = e.target.value)}
/>
onChange={(e) => this.setPassword(e.target.value)} />
<Button
type="submit"
variant="contained"
@@ -65,14 +75,19 @@ class Login extends Component<Stores<'currentUser'>> {
</Grid>
{registerDialog && (
<RegistrationDialog
fClose={() => (this.registerDialog = false)}
fClose={() => this.setRegisterDialog(false)}
fOnSubmit={this.props.currentUser.register}
/>
)}
</DefaultPage>
);
}

@action
private setRegisterDialog = (open: boolean) => {
this.registerDialog = open;
};

@action
private login = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
13 changes: 13 additions & 0 deletions ui/vite.config.ts
Original file line number Diff line number Diff line change
@@ -30,6 +30,12 @@ export default defineConfig({
secure: false,
rewrite: (p) => p.replace(/^\/api/, ''),
},
'/api/stream': {
target: 'ws://localhost:3000/',
ws: true,
rewrite: (p) => p.replace(/^\/api/, ''),
rewriteWsOrigin: true,
}
},
cors: false,
},
@@ -41,7 +47,14 @@ export default defineConfig({
secure: false,
rewrite: (p) => p.replace(/^\/api/, ''),
},
'/api/stream': {
target: 'ws://localhost:3000/',
ws: true,
rewrite: (p) => p.replace(/^\/api/, ''),
rewriteWsOrigin: true,
}
},
cors: false,
},

});