create modular structure of WorkspaceFunc component

2020-12-08 13:53:43 +01:00
parent a1834875a0
commit e6813ba2d3
18 changed files with 1105 additions and 493 deletions
@@ -0,0 +1,94 @@
+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';
+
+class WorkspaceFunc extends Component {
+
+  render() {
+    return (
+      <div style={{ width: 'max-content', display: 'flex' }}>
+
+        {!this.props.assessment ?
+          <WorkspaceName
+            style={{marginRight: '5px'}}
+            multiple={this.props.multiple}
+            project={this.props.project}
+            projectType={this.props.projectType}
+          />
+          : null}
+
+        {this.props.assessment ?
+          <SolutionCheck />
+        : !this.props.multiple ?
+            <Compile iconButton />
+          : null}
+
+        {this.props.user && !this.props.multiple?
+          <SaveProject
+            style={{marginRight: '5px'}}
+            projectType={this.props.projectType}
+            project={this.props.project}
+          />
+        : null}
+
+        {!this.props.multiple ?
+          <DownloadProject style={{marginRight: '5px'}} />
+        : null}
+
+        {!this.props.assessment && !this.props.multiple?
+          <OpenProject
+            style={{marginRight: '5px'}}
+            assessment={this.props.assessment}
+          />
+        : null}
+
+        {!this.props.assessment && !this.props.multiple?
+          <Screenshot style={{marginRight: '5px'}} />
+        : null}
+
+        {this.props.projectType !== 'gallery' && !this.props.assessment ?
+          <ShareProject
+            style={{marginRight: '5px'}}
+            multiple={this.props.multiple}
+            project={this.props.project}
+            projectType={this.props.projectType}
+          />
+        :null}
+
+        {!this.props.multiple ?
+          <ResetWorkspace style={this.props.projectType === 'project' || this.props.projectType === 'gallery' ? { marginRight: '5px' }:null}
+          />
+        : null}
+
+        {!this.props.assessment && (this.props.projectType === 'project' || this.props.projectType === 'gallery') && this.props.user && this.props.user.email === this.props.project.creator ?
+          <DeleteProject
+            project={this.props.project}
+            projectType={this.props.projectType}
+          />
+        :null}
+
+      </div>
+    );
+  };
+}
+
+WorkspaceFunc.propTypes = {
+  user: PropTypes.object
+};
+
+const mapStateToProps = state => ({
+  user: state.auth.user
+});
+
+export default connect(mapStateToProps, null)(WorkspaceFunc);