| @@ -1,98 +1,13 @@ |
| -import * as React from 'react' |
| -import { connect } from 'react-redux' |
| -import Accordion from '@material-ui/core/Accordion' |
| -import AccordionDetails from '@material-ui/core/AccordionDetails' |
| +import React, { useState } from 'react' |
| +import { useDispatch } from 'react-redux' |
| import FormControlLabel from '@material-ui/core/FormControlLabel' |
| import Checkbox from '@material-ui/core/Checkbox' |
| -import { withStyles } from '@material-ui/core/es/styles' |
| import { MonitoringStationType, ProjectType, ManageProjectsType } from '../reducers/manageProjects' |
| -import { |
| - onSelectProject } from '../actions' |
| -import CatenaMap from './catena_map' |
| +import { onSelectProject } from '../actions' |
| |
| -export const SubAccordion = withStyles({ |
| - root: { |
| - backgroundColor: 'rgba(173, 216, 230, 0.6)', |
| - color: 'black', |
| - width: '100%', |
| - '&$expanded': { |
| - marginTop: 0, |
| - marginBottom: 'auto', |
| - }, |
| - }, |
| - expanded: {}, |
| -})(Accordion) |
| - |
| -export const SuperAccordion = withStyles({ |
| - root: { |
| - backgroundColor: 'rgba(173, 216, 230, 0.2)', |
| - color: 'black', |
| - width: '100%', |
| - '&$expanded': { |
| - marginTop: 0, |
| - marginBottom: 'auto', |
| - }, |
| - }, |
| - expanded: {}, |
| -})(Accordion) |
| - |
| -export const AccordionDetailsDense = withStyles({ |
| - root: { |
| - padding: '0px 8px 8px 8px', |
| - flexDirection: 'column', |
| - }, |
| -})(AccordionDetails) |
| - |
| -const styles = theme => ({ |
| - box: { |
| - marginTop: '5px', |
| - padding: '5px', |
| - minHeight: '230px', |
| - }, |
| - chip: { |
| - margin: '0px 15px 5px 0px', |
| - }, |
| - icon: { |
| - width: 'fit-content', |
| - color: '#12a4b6', |
| - fontSize: 15, |
| - float: 'right', |
| - }, |
| - iconContainer: { |
| - verticalAlign: 'bottom', |
| - }, |
| - inset: { |
| - margin: '15px', |
| - }, |
| - inputComponent: { |
| - width: '100%', |
| - }, |
| - lrMargin: { |
| - margin: '0px 5px', |
| - }, |
| - flexContainer: { |
| - display: 'flex', |
| - }, |
| - flexItem: { |
| - flex: '1', |
| - }, |
| - flexTripleItem: { |
| - flex: '3', |
| - }, |
| - projectSelect: { |
| - marginTop: 10, |
| - }, |
| - button: { |
| - padding: 10, |
| - }, |
| - margin5: { |
| - margin: 5, |
| - }, |
| -}) |
| |
| interface State { |
| undoStation: MonitoringStationType, |
| - activeStep: number, |
| createStationDetailsID: string, |
| createStationDetailsProjectID: string, |
| createStationDetailsTreatmentIndicator: string, |
| @@ -102,50 +17,16 @@ |
| errorInputs: string[], |
| } |
| |
| -interface Props { |
| +interface PropsType { |
| project: ProjectType, |
| - catenaMap: typeof CatenaMap, |
| - classes: { |
| - iconContainer: string, |
| - icon: string, |
| - }, |
| - manageProjects: ManageProjectsType, |
| - onAreaDelete: Function, |
| - onAreaDownload: Function, |
| - onAreaFeaturesUpload: Function, |
| - onCreateMonitoringStation: Function, |
| - editMonitoringStation: Function, |
| + |
| onSelectProject: Function, |
| - isEditingStation: boolean, |
| - isCreatingStation: boolean, |
| - toggleIsEditingStation: Function, |
| - toggleIsCreatingStation: Function, |
| - theme: { |
| - controlBar: string, |
| - controlBarTop: string, |
| - toolbuttonPanel: string, |
| - }, |
| } |
| |
| -class Project extends React.Component<Props, State> { |
| - state = { |
| - undoStation: null, |
| - activeStep: 0, |
| - createStationDetailsID: '', |
| - createStationDetailsProjectID: '', |
| - createStationDetailsTreatmentIndicator: 'none', |
| - createStationLatitude: '', |
| - createStationLongitude: '', |
| - createStationDrainageAcres: '', |
| - errorInputs: [], |
| - } |
| +export const Project = (props: PropsType) => { |
| |
| - componentDidUpdate() { |
| - |
| - } |
| - |
| - render = () => { |
| - const { project, theme } = this.props |
| + const { project } = props |
| + const dispatch = useDispatch() |
| |
| return ( |
| <div |
| @@ -154,28 +35,18 @@ |
| color: 'black', |
| padding: '2px 10px' }} |
| onClick={(event) => { |
| - this.props.onSelectProject(project) |
| + dispatch(onSelectProject(project)) |
| event.stopPropagation() |
| }} |
| > |
| <FormControlLabel |
| checked={project.selected} |
| - onFocus={event => event.stopPropagation()} |
| + onFocus={e => e.stopPropagation()} |
| control={<Checkbox />} |
| label={project.title} |
| /> |
| </div>) |
| - } |
| + |
| } |
| |
| -const mapStateToProps = state => ({ |
| - isEditingStation: state.manageProjects.isEditingStation, |
| - isCreatingStation: state.manageProjects.isCreatingStation, |
| - manageProjects: state.manageProjects, |
| -}) |
| - |
| -const mapDispatchToProps = { |
| - onSelectProject, |
| -} |
| - |
| -export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Project)) |
| +export default Project |
| \ No newline at end of file |