Commit 3f4e339a authored by Laurent Wouters's avatar Laurent Wouters
Browse files

Transform into a web extension

parent f3fe0b3d8ddf
......@@ -21,21 +21,26 @@
import * as React from "react";
import { RawContent, Application } from "../../common/api";
class LoadingState {
message: string;
}
class ErrorState {
error: string;
enum StateType {
Loading,
Error,
Displaying
}
class DisplayingState {
class State {
stateType: StateType;
message: string;
content: RawContent;
}
type State = LoadingState | ErrorState | DisplayingState;
export class Viewer extends React.Component<any, State> implements Application {
state: State = {
stateType: StateType.Loading,
message: "Loading",
content: null
};
constructor(props: any) {
super(props);
this.state = { message: "Loading" };
this.onContent = this.onContent.bind(this);
this.onError = this.onError.bind(this);
}
......@@ -45,9 +50,12 @@ export class Viewer extends React.Component<any, State> implements Application {
* @param content The content
*/
public onContent(content: RawContent): void {
this.setState({
let newState: State = {
stateType: StateType.Displaying,
message: "",
content: content
});
};
this.setState(newState);
}
/**
......@@ -55,12 +63,45 @@ export class Viewer extends React.Component<any, State> implements Application {
* @param description The error's description
*/
public onError(description: string): void {
this.setState({
error: description
});
let newState: State = {
stateType: StateType.Error,
message: description,
content: null
};
this.setState(newState);
}
render() {
return <div>Content</div>;
if (this.state.stateType == StateType.Loading) {
return (
<div style={{ width: "75%", marginLeft: "12.5%", marginTop: "10vh" }}>
<div className="alert alert-info" role="alert">
{this.state.message}
</div>
</div>
);
} else if (this.state.stateType == StateType.Error) {
return (
<div style={{ width: "75%", marginLeft: "12.5%", marginTop: "10vh" }}>
<div className="alert alert-danger" role="alert">
{this.state.message}
</div>
</div>
);
} else if (this.state.stateType == StateType.Displaying) {
return (
<div style={{ width: "90%", marginLeft: "5%", marginTop: "10vh" }}>
<div>{this.state.content.content}</div>
</div>
);
} else {
return (
<div style={{ width: "75%", marginLeft: "12.5%", marginTop: "10vh" }}>
<div className="alert alert-danger" role="alert">
Internal error!
</div>
</div>
);
}
}
}
......@@ -57,7 +57,17 @@ module.exports = [
},
plugins: [
new CopyWebpackPlugin(
[{ from: "src/content/main.css", to: "content/main.css" }],
[
{ from: "src/content/main.css", to: "content/main.css" },
{
from: "node_modules/bootstrap/dist/css/bootstrap.min.css",
to: "content/bootstrap.min.css"
},
{
from: "node_modules/bootstrap/dist/js/bootstrap.min.js",
to: "content/bootstrap.min.js"
}
],
{}
)
]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment