From 748c29c2607104696adcb8dc24c8bedc976ae673 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Fri, 14 Jan 2022 08:12:20 +0100 Subject: [PATCH] auto Save Blocks --- src/components/CodeEditor/SaveIcon.js | 99 ++++++++++++++++--- src/components/Home.js | 10 +- src/components/Workspace/AutoSave.js | 72 ++++++++++++++ src/components/Workspace/WorkspaceFunc.js | 115 ++++++++++++---------- 4 files changed, 228 insertions(+), 68 deletions(-) create mode 100644 src/components/Workspace/AutoSave.js diff --git a/src/components/CodeEditor/SaveIcon.js b/src/components/CodeEditor/SaveIcon.js index 5e65331..739b4b4 100644 --- a/src/components/CodeEditor/SaveIcon.js +++ b/src/components/CodeEditor/SaveIcon.js @@ -1,22 +1,93 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCircleNotch, faSave, faSpinner } from "@fortawesome/free-solid-svg-icons"; +import { useSelector } from "react-redux"; +import { + faCircleNotch, + faSave, + faSpinner, +} from "@fortawesome/free-solid-svg-icons"; import Tooltip from "@material-ui/core/Tooltip"; +import { IconButton } from "@material-ui/core"; +import PropTypes from "prop-types"; +import React from "react"; -const SaveIcon = ({ loading }) => ( - -
- {loading && } - { + const value = useSelector((state) => state.general.autoSave); + + return ( +
+ {value === true ? ( + + + {loading && ( + + )} + -
- ) + }} + icon={faSave} + color={loading ? "gray" : "#4EAF47"} + size={loading ? "1x" : "md"} + /> + + + ) : ( + + { + this.propTypes.setAutoSave(true); + }} + > + {loading && ( + + )} + + + + )} +
+ ); +}; -export default SaveIcon \ No newline at end of file +SaveIcon.propTypes = { + setAutoSave: PropTypes.func.isRequired, + autoSave: PropTypes.bool.isRequired, +}; + +export default SaveIcon; diff --git a/src/components/Home.js b/src/components/Home.js index 171a61f..de833e3 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -22,6 +22,7 @@ import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import TooltipViewer from "./TooltipViewer"; import Dialog from "./Dialog"; +import AutoSave from "./Workspace/AutoSave"; const styles = (theme) => ({ codeOn: { @@ -54,6 +55,7 @@ class Home extends Component { key: "", message: "", open: true, + initialXml: sessionStorage.getItem("autoSaveXML"), }; } @@ -114,11 +116,13 @@ class Home extends Component { render() { return (
+ {this.props.statistics ? (
) : null} +
+
{this.props.project ? ( @@ -169,7 +174,10 @@ class Home extends Component { initialXml={this.props.project.xml} /> ) : ( - + )}
diff --git a/src/components/Workspace/AutoSave.js b/src/components/Workspace/AutoSave.js new file mode 100644 index 0000000..b116853 --- /dev/null +++ b/src/components/Workspace/AutoSave.js @@ -0,0 +1,72 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; +import { workspaceName } from "../../actions/workspaceActions"; +import SaveIcon from "../CodeEditor/SaveIcon"; + +const resetTimeout = (id, newID) => { + clearTimeout(id); + return newID; +}; + +class AutoSave extends Component { + constructor(props) { + super(props); + this.state = { + timeout: null, + value: "", + saved: false, + autosave: false, + }; + } + + editValue = (value) => { + this.setState({ + timeout: resetTimeout( + this.state.timeout, + setTimeout(this.saveValue, 400) + ), + value: value, + }); + }; + + saveValue = () => { + this.setState({ ...this.state, saved: true }); + sessionStorage.setItem("autoSaveXML", this.props.xml); + setTimeout(() => this.setState({ ...this.state, saved: false }), 1000); + }; + + componentDidMount() { + console.log(this.props.xml); + } + + componentDidUpdate(prevProps) { + if (prevProps.xml !== this.props.xml) { + this.editValue(this.props.xml); + } + } + + render() { + return ( +
+ +
+ ); + } +} + +AutoSave.propTypes = { + xml: PropTypes.string.isRequired, + name: PropTypes.string, + workspaceName: PropTypes.func.isRequired, + setAutosave: PropTypes.func.isRequired, + autosave: PropTypes.bool.isRequired, +}; + +const mapStateToProps = (state) => ({ + auto: state.general.autosave, + xml: state.workspace.code.xml, + name: state.workspace.name, +}); + +export default connect(mapStateToProps, { workspaceName })(AutoSave); diff --git a/src/components/Workspace/WorkspaceFunc.js b/src/components/Workspace/WorkspaceFunc.js index 68e3741..b090294 100644 --- a/src/components/Workspace/WorkspaceFunc.js +++ b/src/components/Workspace/WorkspaceFunc.js @@ -1,101 +1,110 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; -import WorkspaceName from './WorkspaceName'; -import SaveProject from './SaveProject'; -import Compile from './Compile'; -import SolutionCheck from '../Tutorial/SolutionCheck'; -import DownloadProject from './DownloadProject'; -import OpenProject from './OpenProject'; -import Screenshot from './Screenshot'; -import ShareProject from './ShareProject'; -import ResetWorkspace from './ResetWorkspace'; -import DeleteProject from './DeleteProject'; -import CopyCode from './CopyCode'; +import WorkspaceName from "./WorkspaceName"; +import SaveProject from "./SaveProject"; +import Compile from "./Compile"; +import SolutionCheck from "../Tutorial/SolutionCheck"; +import DownloadProject from "./DownloadProject"; +import OpenProject from "./OpenProject"; +import Screenshot from "./Screenshot"; +import ShareProject from "./ShareProject"; +import ResetWorkspace from "./ResetWorkspace"; +import DeleteProject from "./DeleteProject"; +import CopyCode from "./CopyCode"; class WorkspaceFunc extends Component { + componentDidUpdate() { + console.log(this.props.autosave); + } render() { return ( -
- - {!this.props.assessment ? +
+ {!this.props.assessment ? ( - : null} + ) : null} - {this.props.assessment ? + {this.props.assessment ? ( - : !this.props.multiple ? - - : null} + ) : !this.props.multiple ? ( + + ) : null} - {!this.props.multiple ? - - : null} + {!this.props.multiple ? : null} - - {this.props.user && !this.props.multiple ? + {this.props.user && !this.props.multiple ? ( - : null} + ) : null} - {!this.props.multiple ? - - : null} + {!this.props.multiple ? ( + + ) : null} - - {!this.props.assessment && !this.props.multiple ? + {!this.props.assessment && !this.props.multiple ? ( - : null} + ) : null} - {!this.props.assessment && !this.props.multiple ? - - : null} + {!this.props.assessment && !this.props.multiple ? ( + + ) : null} - {this.props.projectType !== 'gallery' && !this.props.assessment ? + {this.props.projectType !== "gallery" && !this.props.assessment ? ( - : null} + ) : null} - {!this.props.multiple ? - - : null} + ) : null} - {!this.props.assessment && (this.props.projectType === 'project' || this.props.projectType === 'gallery') && this.props.user && this.props.user.email === this.props.project.creator ? + {!this.props.assessment && + (this.props.projectType === "project" || + this.props.projectType === "gallery") && + this.props.user && + this.props.user.email === this.props.project.creator ? ( - : null} - + ) : null}
); - }; + } } WorkspaceFunc.propTypes = { - user: PropTypes.object + user: PropTypes.object, + autosave: PropTypes.bool.isRequired, }; -const mapStateToProps = state => ({ - user: state.auth.user +const mapStateToProps = (state) => ({ + user: state.auth.user, + autosave: state.workspace.autosave, }); export default connect(mapStateToProps, null)(WorkspaceFunc);