Skip to content

Commit 757914e

Browse files
Lulu300Lulu300
committed
refactor: Use dynamic import for media & handle dynamic url
1 parent b6e75ce commit 757914e

10 files changed

Lines changed: 104 additions & 86 deletions

File tree

‎src/client/src/Routes.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const HOME = "/";
2+
export const PROFILE = "/profile";
3+
export const FORGOT_PASSWORD = "/forgot";
4+
export const RESET_PASSWORD = "/reset/:token";
5+
export const LOGIN = "/login";
6+
export const SIGNUP = "/signup";
7+
export const TERMINAL = "/term";
8+
export const NOTFOUND = "*";

‎src/client/src/components/CodeChillRouter.tsx‎

Lines changed: 48 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,66 @@
11
import * as React from "react";
2-
// import { BrowserRouter as Router, Route } from "react-router-dom";
3-
import { Route, Switch } from "react-router-dom";
2+
import * as R from "../Routes";
3+
import { Route, Switch, BrowserRouter } from "react-router-dom";
44
import App from "../App";
55
import CodeChillXterm from "./CodeChillXterm";
66
import UserConnection from "./user/UserConnection";
77
import UserSignUp from "./user/UserSignUp";
8-
import Presentation from "./Presentation";
98
import UserProfile from "./user/UserProfile";
109
import NotFound from "./NotFound";
1110
import UserForgotPassword from "./user/UserForgotPassword";
1211
import UserResetPassword from "./user/UserResetPassword";
12+
var config = require("../../package.json");
1313

1414
export default class CodeChillRouter extends React.Component<any, any> {
15-
16-
// Term = withAuth(Term);
1715

1816
render() {
19-
// const ccxterm = "CodeChillXterm";
20-
// const url = "ws://localhost:2375/containers/code-chill/attach/ws?logs=0&stream=1&stdin=0&stdout=0&stderr=0";
2117
return (
2218
<main>
23-
<Switch>
24-
<Route
25-
exact={true}
26-
path="/"
27-
component={Presentation}
28-
/>
29-
<Route
30-
exact={true}
31-
path="/home"
32-
component={App}
33-
/>
34-
<Route
35-
exact={true}
36-
path="/profile"
37-
component={UserProfile}
38-
/>
39-
<Route
40-
exact={true}
41-
path="/forgot"
42-
// render={(props) => <UserConnection props={...props} />}
43-
component={UserForgotPassword}
44-
/>
45-
<Route
46-
exact={true}
47-
path="/reset/:token"
48-
// render={(props) => <UserConnection props={...props} />}
49-
component={UserResetPassword}
50-
/>
51-
<Route
52-
exact={true}
53-
path="/login"
54-
// render={(props) => <UserConnection props={...props} />}
55-
component={UserConnection}
56-
/>
57-
<Route
58-
exact={true}
59-
path="/signup"
60-
// render={(props) => <UserConnection props={...props} />}
61-
component={UserSignUp}
62-
/>
63-
<Route
64-
exact={true}
65-
path="/term"
66-
component={CodeChillXterm}
67-
/* render={(props) =>
68-
<CodeChillXterm
69-
props={...props}
70-
ref={ccxterm}
71-
url={url}
72-
/>} */
73-
/>
74-
<Route
75-
path="*"
76-
component={NotFound}
77-
/>
78-
</Switch>
19+
<BrowserRouter basename={config.homepage}>
20+
<Switch>
21+
22+
<Route
23+
exact={true}
24+
path={R.HOME}
25+
component={App}
26+
/>
27+
<Route
28+
exact={true}
29+
path={R.PROFILE}
30+
component={UserProfile}
31+
/>
32+
<Route
33+
exact={true}
34+
path={R.FORGOT_PASSWORD}
35+
component={UserForgotPassword}
36+
/>
37+
<Route
38+
exact={true}
39+
path={R.RESET_PASSWORD}
40+
component={UserResetPassword}
41+
/>
42+
<Route
43+
exact={true}
44+
path={R.LOGIN}
45+
component={UserConnection}
46+
/>
47+
<Route
48+
exact={true}
49+
path={R.SIGNUP}
50+
// render={(props) => <UserConnection props={...props} />}
51+
component={UserSignUp}
52+
/>
53+
<Route
54+
exact={true}
55+
path={R.TERMINAL}
56+
component={CodeChillXterm}
57+
/>
58+
<Route
59+
path={R.NOTFOUND}
60+
component={NotFound}
61+
/>
62+
</Switch>
63+
</BrowserRouter>
7964
</main>
8065
);
8166
}

‎src/client/src/components/CodeChillXterm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`);
9292
}`;
9393
return (
9494
<div>
95-
<div ref={container} className={terminalClassName} />
96-
<style>{css}</style>
95+
<div ref={container} className={terminalClassName} />
96+
<style>{css}</style>
9797
</div>
9898
);
9999
}

‎src/client/src/components/NavBar.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ import {
1010
Sidebar,
1111
Responsive
1212
} from "semantic-ui-react";
13+
import { Link } from "react-router-dom";
14+
import { formatRoute } from "react-router-named-routes";
15+
import { TERMINAL, HOME, LOGIN, PROFILE } from "../Routes";
16+
const logo = require("../resources/logocodeandchill.png");
1317

1418
const NavBarChildren = ({ children }) => (
1519
<Container style={{ marginTop: "5em" }}>{children}</Container>
@@ -38,7 +42,7 @@ export default class NavBar extends React.Component<any, any> {
3842
rmenu = (
3943
<Dropdown item={true} text={this.props.user.username}>
4044
<Dropdown.Menu>
41-
<Dropdown.Item><a href="/profile">Profile</a></Dropdown.Item>
45+
<Dropdown.Item><Link to={formatRoute(PROFILE)}>Profile</Link></Dropdown.Item>
4246
<Dropdown.Item
4347
onClick={this.handleLogout}
4448
>Log out
@@ -47,12 +51,12 @@ export default class NavBar extends React.Component<any, any> {
4751
</Dropdown>
4852
);
4953
leftItems = [
50-
{ as: "a", content: "Terminal", key: "terminal", href: "/term" }
54+
{ as: Link, content: "Terminal", key: "terminal", to: formatRoute(TERMINAL) }
5155
];
5256
} else {
5357
rmenu = (
5458
<Menu.Item>
55-
<a href="/login">Login</a>
59+
<Link to={formatRoute(LOGIN)}>Login</Link>
5660
</Menu.Item>
5761
);
5862
leftItems = [];
@@ -77,7 +81,9 @@ export default class NavBar extends React.Component<any, any> {
7781
>
7882
<Menu fixed="top" inverted={true}>
7983
<Menu.Item>
80-
<Image size="mini" src="logocodeandchill.png" />
84+
<Link to={formatRoute(HOME)}>
85+
<Image size="mini" src={logo} />
86+
</Link>
8187
</Menu.Item>
8288
<Menu.Item onClick={this.handleToggle}>
8389
<Icon name="sidebar" />
@@ -93,7 +99,9 @@ export default class NavBar extends React.Component<any, any> {
9399
<Responsive minWidth={Responsive.onlyTablet.minWidth}>
94100
<Menu fixed="top" inverted={true}>
95101
<Menu.Item>
96-
<Image size="mini" src="logocodeandchill.png" />
102+
<Link to={formatRoute(HOME)}>
103+
<Image size="mini" src={logo} />
104+
</Link>
97105
</Menu.Item>
98106
{_.map(leftItems, (item) => <Menu.Item {...item} />)}
99107
<Menu.Menu position="right">

‎src/client/src/components/user/UserConnection.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import * as React from "react";
22
import { Button, Form, Grid, Header, Image, Message, Segment } from "semantic-ui-react";
33
import AuthService from "../../AuthService";
4+
import { Link } from "react-router-dom";
5+
import { formatRoute } from "react-router-named-routes";
6+
import { HOME, SIGNUP, FORGOT_PASSWORD } from "../../Routes";
7+
const logo = require("../../resources/logocodeandchill.png");
48

59
export default class UserConnection extends React.Component<any, any> {
610

@@ -16,7 +20,7 @@ export default class UserConnection extends React.Component<any, any> {
1620

1721
componentWillMount() {
1822
if (this.Auth.loggedIn()) {
19-
this.props.history.replace("/");
23+
this.props.history.replace(formatRoute(HOME));
2024
}
2125
}
2226

@@ -37,7 +41,7 @@ export default class UserConnection extends React.Component<any, any> {
3741
>
3842
<Grid.Column style={{ maxWidth: 450 }}>
3943
<Header as="h2" color="teal" textAlign="center">
40-
<Image src="logocodeandchill.png" />
44+
<Image src={logo} />
4145
{" "}Log-in to your account
4246
</Header>
4347
<Form
@@ -74,8 +78,8 @@ export default class UserConnection extends React.Component<any, any> {
7478
</Segment>
7579
</Form>
7680
<Message>
77-
<p>New to us? <a href="/signup">Sign Up</a></p>
78-
<p>Forgot your password? <a href="/forgot">Click here</a></p>
81+
<p>New to us? <Link to={formatRoute(SIGNUP)}>Sign Up</Link></p>
82+
<p>Forgot your password? <Link to={formatRoute(FORGOT_PASSWORD)}>Click here</Link></p>
7983
</Message>
8084
</Grid.Column>
8185
</Grid>
@@ -97,7 +101,7 @@ export default class UserConnection extends React.Component<any, any> {
97101

98102
this.Auth.login(this.state.username, this.state.password)
99103
.then((res) => {
100-
this.props.history.replace("/home");
104+
this.props.history.replace(formatRoute(HOME));
101105
})
102106
.catch((err) => {
103107
alert(err);

‎src/client/src/components/user/UserForgotPassword.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import * as React from "react";
22
import NavBar from "../NavBar";
33
import AuthService from "../../AuthService";
44
import { Button, Form, Grid, Header, Image, Message, Segment } from "semantic-ui-react";
5+
import { formatRoute } from "react-router-named-routes";
6+
import { HOME } from "../../Routes";
7+
const logo = require("../../resources/logocodeandchill.png");
58

69
export default class UserForgotPassword extends React.Component<any, any> {
710

@@ -24,7 +27,7 @@ export default class UserForgotPassword extends React.Component<any, any> {
2427

2528
componentWillMount() {
2629
if (this.Auth.loggedIn()) {
27-
this.props.history.replace("/home");
30+
this.props.history.replace(formatRoute(HOME));
2831
}
2932
}
3033

@@ -45,7 +48,7 @@ export default class UserForgotPassword extends React.Component<any, any> {
4548
>
4649
<Grid.Column style={{ maxWidth: 450 }}>
4750
<Header as="h2" color="teal" textAlign="center">
48-
<Image src="https://react.semantic-ui.com/logo.png" />
51+
<Image src={logo} />
4952
{" "}Recover your password
5053
</Header>
5154
<Form

‎src/client/src/components/user/UserResetPassword.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import * as React from "react";
22
import NavBar from "../NavBar";
33
import AuthService from "../../AuthService";
44
import { Button, Form, Grid, Header, Image, Message, Segment } from "semantic-ui-react";
5+
import { formatRoute } from "react-router-named-routes";
6+
import { HOME } from "../../Routes";
7+
const logo = require("../../resources/logocodeandchill.png");
58

69
export default class UserResetPassword extends React.Component<any, any> {
710

@@ -24,7 +27,7 @@ export default class UserResetPassword extends React.Component<any, any> {
2427

2528
componentWillMount() {
2629
if (this.Auth.loggedIn()) {
27-
this.props.history.replace("/home");
30+
this.props.history.replace(formatRoute(HOME));
2831
}
2932
this.Auth.checkTokenPassword(this.props.match.params.token).then((res) => {
3033
this.setState(
@@ -67,7 +70,7 @@ export default class UserResetPassword extends React.Component<any, any> {
6770
>
6871
<Grid.Column style={{ maxWidth: 450 }}>
6972
<Header as="h2" color="teal" textAlign="center">
70-
<Image src="https://react.semantic-ui.com/logo.png" />
73+
<Image src={logo} />
7174
{" "}Reset your password
7275
</Header>
7376
<Form
@@ -166,7 +169,7 @@ export default class UserResetPassword extends React.Component<any, any> {
166169
private handleFormSubmit(e: any) {
167170
e.preventDefault();
168171
this.Auth.resetPassword(this.props.match.params.token, this.state.password).then((res) => {
169-
this.setMessage("success", "You can now <a href=\"/login\">log-in</a> to your account");
172+
this.setMessage("success", `You can now <Link to="${formatRoute(HOME)}">log-in</Link> to your account`);
170173
}).catch((err) => {
171174
this.setMessage("error", err);
172175
});

‎src/client/src/components/user/UserSignUp.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import * as React from "react";
22
import NavBar from "../NavBar";
33
import AuthService from "../../AuthService";
44
import { Button, Form, Grid, Header, Image, Message, Segment } from "semantic-ui-react";
5+
import { Link } from "react-router-dom";
6+
import { formatRoute } from "react-router-named-routes";
7+
import { HOME, LOGIN } from "../../Routes";
8+
const logo = require("../../resources/logocodeandchill.png");
59

610
export default class UserSignUp extends React.Component<any, any> {
711

@@ -23,7 +27,7 @@ export default class UserSignUp extends React.Component<any, any> {
2327

2428
componentWillMount() {
2529
if (this.Auth.loggedIn()) {
26-
this.props.history.replace("/");
30+
this.props.history.replace(formatRoute(HOME));
2731
}
2832
}
2933

@@ -44,7 +48,7 @@ export default class UserSignUp extends React.Component<any, any> {
4448
>
4549
<Grid.Column style={{ maxWidth: 450 }}>
4650
<Header as="h2" color="teal" textAlign="center">
47-
<Image src="logocodeandchill.png" />
51+
<Image src={logo} />
4852
{" "}Register your account
4953
</Header>
5054
<Form
@@ -123,7 +127,7 @@ export default class UserSignUp extends React.Component<any, any> {
123127
</Segment>
124128
</Form>
125129
<Message>
126-
<p>Already have an account? <a href="/login">Login</a></p>
130+
<p>Already have an account? <Link to={formatRoute(LOGIN)}>Login</Link></p>
127131
</Message>
128132
</Grid.Column>
129133
</Grid>
@@ -147,7 +151,8 @@ export default class UserSignUp extends React.Component<any, any> {
147151
"message": (
148152
<Message positive={true}>
149153
<Message.Header>Your user registration was successful</Message.Header>
150-
<p>You may now <a href="/login">log-in</a> with the username you have chosen</p>
154+
<p>You may now <Link to={formatRoute(LOGIN)}>log-in</Link>
155+
with the username you have chosen</p>
151156
</Message>
152157
)
153158
}

‎src/client/src/components/withAuth.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from "react";
22
import AuthService from "../AuthService";
33
import NavBar from "./NavBar";
4+
import { formatRoute } from "react-router-named-routes";
5+
import { LOGIN } from "../Routes";
46

57
export default function withAuth(AuthComponent: any) {
68
const Auth = new AuthService();
@@ -14,7 +16,7 @@ export default function withAuth(AuthComponent: any) {
1416
}
1517
componentWillMount() {
1618
if (!Auth.loggedIn()) {
17-
this.props.history.replace("/login");
19+
this.props.history.replace(formatRoute(LOGIN));
1820
} else {
1921
try {
2022
const profile = Auth.getProfile();
@@ -26,7 +28,7 @@ export default function withAuth(AuthComponent: any) {
2628
});
2729
} catch (err) {
2830
Auth.logout();
29-
this.props.history.replace("/login");
31+
this.props.history.replace(formatRoute(LOGIN));
3032
}
3133
}
3234
}

‎src/client/src/resources/logocodeandchill.png‎

14.6 KB
Loading

0 commit comments

Comments
 (0)