schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading spinner for shorty fetch and qr-code

Browse Source
This commit is contained in:
fab-scm 2022-07-26 13:33:12 +02:00
parent c71a150f38
commit 69de659c11
2 changed files with 89 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -38,6 +38,8 @@
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.0",
"react-share": "^4.4.0",
"react-spinners": "^0.13.3",
"reactour": "^1.18.7", "reactour": "^1.18.7",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",

37
src/components/Workspace/ShareProject.js
View File

@ -4,15 +4,16 @@ import { connect } from "react-redux";
import { shareProject } from "../../actions/projectActions"; import { shareProject } from "../../actions/projectActions";
import { clearMessages } from "../../actions/messageActions"; import { clearMessages } from "../../actions/messageActions";
import QRCode from "react-qr-code"; import QRCode from "react-qr-code";
import axios from 'axios'; // import axios from 'axios';
import moment from "moment"; import moment from "moment";
import Dialog from "../Dialog"; import Dialog from "../Dialog";
import Snackbar from "../Snackbar"; import Snackbar from "../Snackbar";
import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
import GridLoader from "react-spinners/GridLoader";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
@ -58,6 +59,8 @@ class WorkspaceFunc extends Component {
open: false, open: false,
id: "", id: "",
shortLink: "", shortLink: "",
isFetching: false,
loading: false,
}; };
} }
@ -117,6 +120,7 @@ class WorkspaceFunc extends Component {
}; };
createShortlink(id) { createShortlink(id) {
this.setState({ isFetching: true, loading: true })
const requestOptions = { const requestOptions = {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@ -124,7 +128,7 @@ class WorkspaceFunc extends Component {
}; };
fetch('https://www.snsbx.de/api/shorty', requestOptions) fetch('https://www.snsbx.de/api/shorty', requestOptions)
.then(response => response.json()) .then(response => response.json())
.then(data => this.setState({ shortLink: data[0].link })); .then(data => this.setState({ shortLink: data[0].link, isFetching: false, loading: false }));
} }
render() { render() {
@ -153,15 +157,21 @@ class WorkspaceFunc extends Component {
onClick={this.toggleDialog} onClick={this.toggleDialog}
button={Blockly.Msg.button_close} button={Blockly.Msg.button_close}
> >
{ this.state.isFetching ? (
<div style={{ display: 'flex', justifyContent: 'center'}}>
<GridLoader color={"#4EAF47"} loading={this.state.loading} size={50} />
</div>
) : (
<div style={{ marginTop: "10px" }}> <div style={{ marginTop: "10px" }}>
<Typography> <Typography>
Über den folgenden Link kannst du dein Programm teilen: Über den folgenden Link kannst du dein Programm teilen:
</Typography> </Typography>
<Link <a
to={this.state.shortLink} href={this.state.shortLink}
onClick={() => this.toggleDialog()} onClick={() => this.toggleDialog()}
className={this.props.classes.link} className={this.props.classes.link}
>{this.state.shortLink}</Link> target="_blank"
>{this.state.shortLink}</a>
<Tooltip <Tooltip
title={Blockly.Msg.tooltip_copy_link} title={Blockly.Msg.tooltip_copy_link}
arrow arrow
@ -192,7 +202,8 @@ class WorkspaceFunc extends Component {
<Typography <Typography
variant="body2" variant="body2"
style={{ marginTop: "20px" }} style={{ marginTop: "20px" }}
>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${ >
{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
moment(this.props.project.shared).diff( moment(this.props.project.shared).diff(
moment().utc(), moment().utc(),
"days" "days"
@ -213,14 +224,20 @@ class WorkspaceFunc extends Component {
moment().utc(), moment().utc(),
"days" "days"
)} Tage` )} Tage`
} gültig.`}</Typography> } gültig.`}
</Typography>
) : ( ) : (
<Typography <Typography
variant="body2" variant="body2"
style={{ marginTop: "20px" }} style={{ marginTop: "20px" }}
>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography> >
)} {`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}
</Typography>
)
}
</div> </div>
)
}
</Dialog> </Dialog>
</div> </div>
); );