1.mutation.js中

export const createSupportRecord = `mutation createSupportRecord($support: CreateSupportRecordInput!) {
  createSupportRecord(input: $support ) {
    id
    time
    supporter
    problems
    comments
    userId
  }
}
`;

2.types.js

export const ADD_SUPPORT = "add_support";

3.addReducer.js

import React, { Component } from "react";
import * as TYPES from "../types/types";
const initialState = {
  listViews: []
};
export default function viewsList(state = initialState, action) {
  switch (action.type) {
    case TYPES.ADD_REVIEW:
      return {
        ...state,
        listViews: action.text
      };
    default:
      return state;
  }
}
export default function supportsList(state = initialState, action) {
  switch (action.type) {
    case TYPES.ADD_SUPPORT:
      return {
        ...state,
        listViews: action.text
      };
    default:
      return state;
  }
}
 

4.addAction.js

import React, { Component } from "react";
import * as TYPES from "../types/types";
import { createSupportRecord } from "../graphql/mutations";
import { graphqlOperation, API } from "aws-amplify";
export function getAddSupport(support) {
  return async dispatch => {
    try{
      const newEvent = await API.graphql(graphqlOperation(createSupportRecord,{support}));
      if (newEvent) {
        dispatch(updateAddSupports(newEvent.data.createSupportRecord.items));
        window.location.reload();
      }
    }catch(err){
      console.log('getAddSupport exception: ',err);
    }
  };
}

function updateAddSupports(supportsList) {
  return {
    type: TYPES.ADD_SUPPORT,
    text: supportsList
  };
}
 

5.AddSupport.js

import React, { Component } from 'react'
import { Modal, Button, Form, Input, Icon, Header, Label, Dropdown } from 'semantic-ui-react'
import './AddSupport.css'
import {connect} from 'react-redux';
import {getPatientStatus} from '../action/patientAction'
import {getAddSupport} from '../action/addAction'
class addSupport extends Component {
    constructor(props) {
        super(props)
        this.handleInputChange.bind(this)
        this.submit.bind(this)
        this.supports=[]
    }
    state = { open: false,  supports: [], supportTime:'',supportSupporter:'',supportProblems:'',supportComments:''}
    handleOpen = () => this.setState({ open: true })
    close = () => this.setState({ open: false })
    submit() {
        const{getAddSupport} = this.props;
        const time = this.state.supportTime;
        const supporter = this.state.supportSupporter;
        const problems = this.state.supportProblems;
        const comments = this.state.supportComments;
        const support = {time,supporter,problems,comments,userId:this.props.patientStatus.userId};
        getAddSupport(support);
    }

    handleInputChange(field, value) {
        switch(field){
            case 'time':
              this.setState({supportTime:value});
              break;
            case 'supporter':
              this.setState({supportSupporter:value});
              break;
            case 'problems':
              this.setState({supportProblems:value});
              break;
            case 'comments':
              this.setState({supportComments:value});
              break;
            default:
              break;
        }
    }
    render() {
        const { open } = this.state
        return (
            <Modal trigger={<Button size='small' onClick={this.handleOpen}>Add Support Records</Button>}
                open={open}
                className='add-box-form-container'
            >
                <Modal.Header>Add Support Records</Modal.Header>
                <Modal.Content>
                    <Form className='attached'>
                        <Form.Group>
                            <Form.Field width="8">
                                <label>User ID</label>
                                <span>{this.props.patientStatus.userId}</span>
                            </Form.Field>
                            <Form.Field width="8">
                                <label>Time</label>
                                <Input type="text" onChange={(e, data) => { this.handleInputChange('time', e.target.value) }} />
                            </Form.Field>
                            <Form.Field width="8">
                                <label>Supporter</label>
                                <Input type="text" onChange={(e, data) => { this.handleInputChange('supporter', e.target.value) }} />
                            </Form.Field>
                        </Form.Group>
                        <Form.Group>
                            <Form.Field width="8">
                                <label>Problems	</label>
                                <textarea type="text" onChange={(e, data) => { this.handleInputChange('problems', e.target.value) }} />
                            </Form.Field>
                            <Form.Field width="8">
                                <label>Comments</label>
                                <textarea type="text" onChange={(e, data) => { this.handleInputChange('comments', e.target.value) }} />
                            </Form.Field>
                        </Form.Group>
                    </Form>
                </Modal.Content>
                <Modal.Actions>
                    <Button basic color='red' onClick={e => this.close()}>
                        <Icon name='remove' />Cancel
                    </Button>
                    <Button color='green' onClick={e => this.submit()}>
                        <Icon name='checkmark' />Add
                    </Button>
                </Modal.Actions>
            </Modal>
        )
    }
}
const mapStateToProp = state =>({
    patientStatus: state.patientsListStore.patientStatus
});

const mapDispatchToProp = dispatch=>({
    getPatientStatus:userId=>dispatch(getPatientStatus(userId)),
    getAddSupport: support=>dispatch(getAddSupport(support))
});
export default connect(mapStateToProp,mapDispatchToProp)(addSupport)