caremyway-client/src/components/User/EditProfile.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Container, Header, Tab } from "semantic-ui-react";

import {
  setEditProfileTabActiveIndex,
  clearUserRequestError,
  clearUserRequestSuccess
} from "../../actions/user/reducer.actions";
import EditClientForm from "./EditClientForm";
import EditProviderForm from "./EditProviderForm";
import EditUserInfoForm from "./EditUserInfoForm";

class EditProfile extends Component {
  onTabChange = (event, { activeIndex }) => {
    if (this.props.editProfileActiveIndex !== activeIndex) {
      this.props.dispatch(clearUserRequestError());
      this.props.dispatch(clearUserRequestSuccess());
    }
    this.props.dispatch(setEditProfileTabActiveIndex(activeIndex));
  };

  render() {
    const { selfUser, editProfileActiveIndex } = this.props;
    const panes = [
      {
        menuItem: "User Information",
        render: () => <Tab.Pane><EditUserInfoForm /></Tab.Pane>
      }
    ];
    if (selfUser.client) {
      panes.push({
        menuItem: "Client Information",
        render: () => <Tab.Pane><EditClientForm /></Tab.Pane>
      });
    } else if (selfUser.provider) {
      panes.push({
        menuItem: "Provider Information",
        render: () => <Tab.Pane><EditProviderForm /></Tab.Pane>
      });
    }
    return (
      <Container>
        <Header>Edit Profile</Header>
        <Tab
          panes={panes}
          onTabChange={this.onTabChange}
          activeIndex={editProfileActiveIndex}
        />
      </Container>
    );
  }
}

function mapStateToProps(state) {
  return { ...state.user };
}

export default connect(mapStateToProps)(EditProfile);