educoder/public/react/src/modules/page/component/UpdateDrawer.js

import React, { Component } from 'react';
import './UpdateDrawer.css'
import { Modal, Button } from 'antd'

import axios from 'axios';
class UpdateDrawer extends Component {

	constructor(props) {
		super(props)

		this.state = {
			loading: false
		}
	}
	onCasesModified(updateTogether) {
		const { game, myshixun, showSnackbar, updateDialogClose } = this.props;

		const url = `/tasks/${game.identifier}/sync_modify_time`
		axios.get(url, {
			// withCredentials: true,
		})
			.then((response) => {

				if (!updateTogether) {
					showSnackbar('更新状态已同步。')
				}
				updateDialogClose();
			})
			.catch((error) => {
				console.log(error);
			});

	}
	// 稍后再说
	onNextUpdate(tpmCasesModified) {
		const { tpm_cases_modified, tpm_modified, tpm_script_modified, challenge, updateDialogClose } = this.props;
		let needUpdateScript = (tpm_modified || tpm_script_modified) && challenge.st === 0;

		const { game, myshixun, showSnackbar } = this.props;
		// const url = `/myshixuns/${myshixun.identifier}/stages/${game.identifier}/system_update`

		// const url = `/api/v1/games/${game.identifier}/system_update?myshixun_id=${myshixun.id}`
		const url = `/tasks/${game.identifier}/system_update.json?myshixun_id=${myshixun.id}`
		this.setState({ loading: true })
		axios.get(url, {
			// withCredentials: true,
		})
			.then((response) => {
				this.setState({ loading: false })


				if (tpmCasesModified) {
					this.onCasesModified(true)
				}
				updateDialogClose(true);
			})
			.catch((error) => {
				console.log(error);
			});
	}

	// tpmCasesModified 如果为true，则需要调用后台接口置状态，下次就不用提醒了
	// 立即更新
	onUpdateNow(tpmCasesModified) {
		const { tpm_cases_modified, tpm_modified, tpm_script_modified, challenge, updateDialogClose } = this.props;
		let needUpdateScript = (tpm_modified || tpm_script_modified) && challenge.st === 0;

		const { game, myshixun, showSnackbar, updateChallengePath, fetchRepositoryCode } = this.props;
		if (needUpdateScript) {
			this.setState({ loading: true })

			const url = `/tasks/${game.identifier}/sync_codes.json`
			axios.get(url, {
				// withCredentials: true,
			})
				.then((response) => {
					this.setState({ loading: false })

					const { path, status } = response.data;
					if (status === -1) {
						showSnackbar(response.data.message || '更新失败，服务端错误')
					} else if (response.data) {
						if (path) {
							updateChallengePath(path);
							fetchRepositoryCode()
						}
						updateDialogClose(false, true);
						showSnackbar('更新成功，正在为您重新加载代码...')

					}

					if (tpmCasesModified) {
						this.onCasesModified(true)
					}
				})
				.catch((error) => {
					this.setState({ loading: false })

					// showSnackbar('更新失败，请求异常')
					console.log(error);
				});
		}
	}

	handleDialogClose() {
		// 必须得选择一个？
		const { updateDialogClose } = this.props;
		updateDialogClose();
	}
	render() {
		const { showUpdateDialog } = this.props;
		const { loading } = this.state;
		const { tpm_cases_modified, tpm_modified, tpm_script_modified, challenge } = this.props;
		let needUpdateScript = (tpm_modified || tpm_script_modified) && challenge.st === 0;

		// 立即更新		稍后再说
		return (
			<Modal
				title='更新通知'
				className="updateDialog"
				visible={showUpdateDialog && (tpm_cases_modified || needUpdateScript)}
				onCancel={() => this.handleDialogClose()}
				footer={
					needUpdateScript ?
						<React.Fragment >
							<Button
								disabled={loading}
								className={"nextUpdate "} onClick={() => this.onNextUpdate(tpm_cases_modified)} color="primary" >
								稍后再说
			            </Button>
							<Button
								disabled={loading}
								variant="raised" onClick={() => this.onUpdateNow(tpm_cases_modified)} color="primary" className={"updateNow "}>
								立即更新
			            </Button>
							{loading && <p>正在加载中...</p>}
						</ React.Fragment> :
						<Button onClick={() => this.onCasesModified()} color="primary" className={"nextUpdate "}>
							知道啦
		            </Button>

				}
			>
				<div style={{ textAlign: 'center' }}>
					{tpm_cases_modified && needUpdateScript ?
						<div>
							关卡任务的代码文件和测试集有更新啦~<br></br>更新操作将保留已完成的评测记录和成绩。<br></br>还未完成评测的任务代码，请自行保存！
		            		</div>
						:
						tpm_cases_modified ?
							<div>
								本关{challenge.st === 0 ? '测试集' : '答案'}已更新，您可以重新评测。<br></br>本次更新不影响已获得的经验值。
		            		</div> :
							<div>
								关卡任务的代码文件有更新啦~<br></br>更新操作将保留已完成的评测记录和成绩。<br></br>还未完成评测的任务代码，请自行保存！
		            		</div>
					}
				</div>
			</Modal>
		);
	}
}

export default UpdateDrawer