/
Project.tsx
89 lines (82 loc) · 2.8 KB
/
Project.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React = require("react");
import { Card, Col, Row } from "react-bootstrap";
import { AuthPortal, AuthButtons } from "../../auth";
import { Project, AccessStatus } from "../../types";
import API from "../API";
import { ProjectApp, AppTitle, ViewProject } from "../components";
import { Match, ProjectSettingsSection, ProjectValues } from "../types";
class ProjectDetail extends React.Component<
{ match: Match; edit: boolean; section?: ProjectSettingsSection },
{ project?: Project; accessStatus?: AccessStatus; edit: boolean }
> {
api: API;
constructor(props) {
super(props);
this.state = { edit: this.props.edit };
const owner = this.props.match.params.username;
const title = this.props.match.params.app_name;
this.api = new API(owner, title);
this.resetAccessStatus = this.resetAccessStatus.bind(this);
}
async resetAccessStatus() {
const accessStatus = await this.api.getAccessStatus();
this.setState({ accessStatus });
return accessStatus;
}
async componentDidMount() {
const project = await this.api.getProject();
const accessStatus = await this.api.getAccessStatus();
this.setState({
accessStatus,
project,
});
}
render() {
const username = this.props.match.params.username;
const app_name = this.props.match.params.app_name;
const id = `${username}/${app_name}`;
if (!this.state.project || !this.state.accessStatus) {
return <div />;
}
let style;
if (!["staging", "running"].includes(this.state.project?.status)) {
style = { maxWidth: "1000px" };
}
return (
<>
<AuthPortal>
<AuthButtons
accessStatus={this.state.accessStatus}
resetAccessStatus={this.resetAccessStatus}
message="You must be logged in to update an app."
/>
</AuthPortal>
{this.state.edit ? (
<Card className="card-outer">
<Row className="w-100 justify-content-center">
<Col style={style}>
<Card.Body>
<Card.Title>
<AppTitle project={this.state.project} />
</Card.Title>
<ProjectApp
project={this.state.project}
accessStatus={this.state.accessStatus}
resetAccessStatus={this.resetAccessStatus}
initialValues={(this.state.project as unknown) as ProjectValues}
api={this.api}
section={this.props.section}
edit={this.props.edit}
/>
</Card.Body>
</Col>
</Row>
</Card>
) : (
<ViewProject project={this.state.project} accessStatus={this.state.accessStatus} />
)}
</>
);
}
}
export { ProjectDetail };