clears state on unmount of components

relates #108
fac-12 · May 3, 2018 · 7725b19 · 7725b19
1 parent 4f43e8d
commit 7725b19
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 103 deletions.
diff --git a/client/src/actions/appointment.js b/client/src/actions/appointment.js
@@ -110,6 +110,7 @@ export const cancelAppointment = appt => {
 };
 
 export const onUnload = typeName => {
-  console.log("in onUnload", typeName);
-  return dispatch => dispatch({ type: typeName });
+  return {
+    type: typeName
+  };
 };
diff --git a/client/src/actions/types.js b/client/src/actions/types.js
@@ -9,4 +9,5 @@ export const UNAUTH_USER = "unauth_user";
 export const DISPLAY_ERROR = "display_error";
 export const USER_APTS = "user_apts";
 export const RESET_ERROR = "reset_error";
-export const PROFILE_PAGE_UNLOADED = "profile_page_unloaded";
+export const CLEAR_PROFILE_STATE = "clear_profile_state";
+export const CLEAR_AVAILABILITIES = "clear_availabilities";
diff --git a/client/src/components/profile/Profile.js b/client/src/components/profile/Profile.js
@@ -66,10 +66,24 @@ const NewAppButton = styled(LinkButton)`
   margin: 2vh 5vw 2vh 5vw;
 `;
 
+const PlaceholderDiv = styled.div`
+  height: 45vh;
+`;
+
 class Profile extends Component {
   render() {
     if (!this.props.apts) {
-      return <div />;
+      return (
+        <div>
+          <Header heading="My Appointments" logout />
+          <PlaceholderDiv />
+          <NewAppButton text="new appointment" url="/topics" primary />
+          <Crisis>
+            Immediate crisis? Don't use this site -{" "}
+            <Link to="/crisis">use these resources instead</Link>
+          </Crisis>
+        </div>
+      );
     } else {
       return (
         <div>
@@ -112,7 +126,7 @@ class Profile extends Component {
   }
 
   componentWillUnmount() {
-    this.props.onUnload("PROFILE_PAGE_UNLOADED");
+    this.props.onUnload("clear_profile_state");
   }
 
   handleClick = appt => {
@@ -139,6 +153,7 @@ class Profile extends Component {
 }
 
 const mapStateToProps = state => {
+  console.log("state", state.userApts.apts);
   return {
     apts: state.userApts.apts
   };

diff --git a/client/src/components/schedule/Mentor.js b/client/src/components/schedule/Mentor.js
@@ -9,121 +9,126 @@ import SubmitButton from "../SubmitButton";
 import styled from "styled-components";
 
 const Card = styled.label`
-	width: 340px;
-	height: 140px;
-	border-radius: 10px;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
-	margin: 15px;
-	border-left: solid 8px #f47a20;
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
+  width: 340px;
+  height: 140px;
+  border-radius: 10px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+  margin: 15px;
+  border-left: solid 8px #f47a20;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
 `;
 
 const Input = styled.input`
-	display: none;
+  display: none;
 
-	&:checked + div {
-		color: #f47a20;
-	}
+  &:checked + div {
+    color: #f47a20;
+  }
 `;
 
 const Label = styled.div`
-	width: 190px;
-	margin: 0 0 10px 0;
-	font-weight: bold;
+  width: 190px;
+  margin: 0 0 10px 0;
+  font-weight: bold;
 `;
 
 const Desc = styled.p`
-	width: 190px;
-	margin: 0;
-	font-size: 0.9rem;
+  width: 190px;
+  margin: 0;
+  font-size: 0.9rem;
 `;
 
 const Img = styled.img`
-	height: auto;
-	width: 80px;
-	padding: 5px;
+  height: auto;
+  width: 80px;
+  padding: 5px;
 `;
 
 class MentorForm extends Component {
-	componentDidMount() {
-		if (!this.props.topics) {
-			history.push("/topics");
-		} else {
-			this.props.fetchMentors();
-		}
-	}
+  componentDidMount() {
+    if (!this.props.topics) {
+      history.push("/topics");
+    } else {
+      this.props.fetchMentors();
+    }
+  }
 
-	render() {
+  render() {
+    if (!this.props.mentors) {
+      return (
+        <div className="container__div">
+          <Header heading="Choose a mentor to connect with" />
+        </div>
+      );
+    }
+    const { handleSubmit } = this.props;
 
-		if (!this.props.mentors) {
-			return <div />;
-		}
-		const { handleSubmit } = this.props;
+    return (
+      <div className="container__div">
+        <Header heading="Choose a mentor to connect with" />
+        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
+          {_.map(this.props.mentors, mentor => (
+            <Field
+              name="mentor"
+              type="radio"
+              key={mentor.id}
+              label={mentor.name}
+              desc={mentor.description}
+              img={mentor.img_url}
+              value={mentor.name}
+              component={this.renderField}
+            />
+          ))}
+          <Field name="error" component={this.renderError} />
+          <SubmitButton text="next" />
+        </form>
+      </div>
+    );
+  }
 
-		return (
-			<div className="container__div">
-				<Header heading="Choose a mentor to connect with" />
-				<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
-					{_.map(this.props.mentors, mentor => (
-						<Field
-							name="mentor"
-							type="radio"
-							key={mentor.id}
-							label={mentor.name}
-							desc={mentor.description}
-							img={mentor.img_url}
-							value={mentor.name}
-							component={this.renderField}
-						/>
-					))}
-					<Field name="error" component={this.renderError} />
-					<SubmitButton text="next" />
-				</form>
-			</div>
-		);
-	}
-
-	renderField(field) {
-		return (
-			<Card>
-				<div>
-					<Img src={field.img} alt="Mentor" />
-				</div>
-				<Input type="radio" id={field.label} {...field.input} />
-				<div>
-					<Label>{field.label}</Label>
-					<Desc>{field.desc}</Desc>
-				</div>
-			</Card>
-		);
-	}
-	renderError(field) {
-		const { meta: { error, submitFailed } } = field;
-		return <div>{submitFailed ? error : ""}</div>;
-	}
-	onSubmit(values) {
-		this.props.updateMentor(values);
-	}
+  renderField(field) {
+    return (
+      <Card>
+        <div>
+          <Img src={field.img} alt="Mentor" />
+        </div>
+        <Input type="radio" id={field.label} {...field.input} />
+        <div>
+          <Label>{field.label}</Label>
+          <Desc>{field.desc}</Desc>
+        </div>
+      </Card>
+    );
+  }
+  renderError(field) {
+    const {
+      meta: { error, submitFailed }
+    } = field;
+    return <div>{submitFailed ? error : ""}</div>;
+  }
+  onSubmit(values) {
+    this.props.updateMentor(values);
+  }
 }
 
 const validate = values => {
-	const errors = {};
-	if (_.isEmpty(values)) {
-		errors.error = "Please choose a mentor to chat to.";
-	}
-	return errors;
+  const errors = {};
+  if (_.isEmpty(values)) {
+    errors.error = "Please choose a mentor to chat to.";
+  }
+  return errors;
 };
 
 const mapStateToProps = state => {
-	return {
-		mentors: state.mentors.mentor_list,
-		topics: state.newApt.topics
-	};
+  return {
+    mentors: state.mentors.mentor_list,
+    topics: state.newApt.topics
+  };
 };
 
 export default reduxForm({
-	validate,
-	form: "MentorForm"
+  validate,
+  form: "MentorForm"
 })(connect(mapStateToProps, { updateMentor, fetchMentors })(MentorForm));
diff --git a/client/src/components/schedule/Schedule.js b/client/src/components/schedule/Schedule.js
@@ -4,7 +4,11 @@ import { connect } from "react-redux";
 import _ from "lodash";
 import history from "../../history";
 import styled from "styled-components";
-import { fetchAvailibilites, updateAptTime } from "../../actions/appointment";
+import {
+  fetchAvailibilites,
+  updateAptTime,
+  onUnload
+} from "../../actions/appointment";
 import Header from "../Header";
 import { Link } from "react-router-dom";
 import SubmitButton from "../SubmitButton";
@@ -62,7 +66,7 @@ const TextWrap = styled.div`
 class ScheduleForm extends Component {
   render() {
     if (!this.props.availibility) {
-      return <div />;
+      return <Header heading="Schedule an appointment" />;
     } else {
       return (
         <div>
@@ -83,6 +87,10 @@ class ScheduleForm extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.props.onUnload("clear_availabilities");
+  }
+
   renderNoApts() {
     return (
       <NoAptsCard>
@@ -125,7 +133,9 @@ class ScheduleForm extends Component {
   }
 
   renderError(field) {
-    const { meta: { error, submitFailed } } = field;
+    const {
+      meta: { error, submitFailed }
+    } = field;
     return <div>{submitFailed ? error : ""}</div>;
   }
 
@@ -166,6 +176,7 @@ export default reduxForm({
 })(
   connect(mapStateToProps, {
     fetchAvailibilites,
-    updateAptTime
+    updateAptTime,
+    onUnload
   })(ScheduleForm)
 );
diff --git a/client/src/reducers/newAppointmentReducer.js b/client/src/reducers/newAppointmentReducer.js
@@ -1,4 +1,10 @@
-import { TOPICS, MENTOR, AVAILIBILTY, APT_TIME } from "../actions/types";
+import {
+  TOPICS,
+  MENTOR,
+  AVAILIBILTY,
+  APT_TIME,
+  CLEAR_AVAILABILITIES
+} from "../actions/types";
 
 export default (state = {}, action) => {
   switch (action.type) {
@@ -10,6 +16,8 @@ export default (state = {}, action) => {
       return { ...state, availibility: action.payload };
     case APT_TIME:
       return { ...state, aptTime: action.payload };
+    case CLEAR_AVAILABILITIES:
+      return { ...state, availibility: null };
     default:
       return state;
   }

diff --git a/client/src/reducers/userAppointmentsReducer.js b/client/src/reducers/userAppointmentsReducer.js
@@ -1,9 +1,10 @@
-import { USER_APTS, PROFILE_PAGE_UNLOADED } from "../actions/types";
+import { USER_APTS, CLEAR_PROFILE_STATE } from "../actions/types";
 
 export default (state = {}, action) => {
+  console.log("here", action.type);
   switch (action.type) {
-    case PROFILE_PAGE_UNLOADED:
-      return state;
+    case CLEAR_PROFILE_STATE:
+      return { ...state, apts: null };
     case USER_APTS:
       return { ...state, apts: action.payload };
     default: