Make profile editable

MNNIT · Oct 1, 2018 · cb5bc22 · cb5bc22
1 parent cc2afb3
commit cb5bc22
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/components/dashboard/profile/Index.js b/components/dashboard/profile/Index.js
@@ -70,7 +70,7 @@ export default class extends Component {
     } else {
       return (
         <>
-          <ToggleDisplay hide={this.state.profileEditable}>
+          <ToggleDisplay hide={profileEditable}>
             <Profile
               profile={profile}
               toggleProfileForm={this.toggleProfileForm}

diff --git a/components/dashboard/profile/Profile.js b/components/dashboard/profile/Profile.js
@@ -10,6 +10,32 @@ const styles = theme => ({
     paddingBottom: theme.spacing.unit * 2
   }
 });
+function renderOtherFields(profile) {
+  if (profile.phone) {
+    return (
+      <>
+        <p>
+          <b>Phone</b> :&nbsp;
+          {profile.phone}
+        </p>
+        <p>
+          <b>College</b> :&nbsp;
+          {profile.college}
+        </p>
+      </>
+    );
+  }
+  return (
+    <>
+      <p>
+        <b>Phone</b> :&nbsp; Not provided
+      </p>
+      <p>
+        <b>College</b> :&nbsp; Not provided
+      </p>
+    </>
+  );
+}
 export default withStyles(styles)(function({
   profile,
   toggleProfileForm,
@@ -63,18 +89,16 @@ export default withStyles(styles)(function({
               <b>Gender</b> :&nbsp;
               {profile.gender}
             </p>
-            <p>
-              <b>College</b> :&nbsp;
-              {profile.college}
-            </p>
-            <ToggleDisplay hide={profile.updatedProfile}>
+
+            {renderOtherFields(profile)}
+            <ToggleDisplay>
               <Button
                 color="primary"
                 variant="contained"
                 onClick={toggleProfileForm}
                 style={{ margin: "auto" }}
               >
-                UPDATE PROFILE
+                {profile.updatedProfile ? "EDIT PROFILE" : "UPDATE PROFILE"}
               </Button>
             </ToggleDisplay>
           </Paper>

diff --git a/components/dashboard/profile/UpdateProfile.js b/components/dashboard/profile/UpdateProfile.js
@@ -46,17 +46,10 @@ class UpdateProfile extends Component {
     colleges: []
   };
 
-  static getDerivedStateFromProps(props, state) {
-    let newState = { ...state };
-    if (props.profile) {
-      newState.name = props.profile.name;
-      if (props.profile.gender) {
-        newState.gender = props.profile.gender;
-      }
-    }
-    return newState;
-  }
   componentDidMount() {
+    if (this.props.profile) {
+      this.setState({ ...this.state, ...this.props.profile });
+    }
     this.fetchAllCities();
   }
   fetchAllCities = () => {
@@ -131,9 +124,9 @@ class UpdateProfile extends Component {
       <div className="row center-md center-xs center-lg">
         <div className="col-md-6">
           <Paper className={classes.root} elevation={1}>
-            <p style={{ textAlign: "center", color: "red" }}>
-              * These fields must be filled and can only be updated once *
-            </p>
+            <h3 style={{ textAlign: "center", color: "#4caf50" }}>
+              UPDATE PROFILE
+            </h3>
             <form className={classes.container} noValidate autoComplete="off">
               <TextField
                 id="name"
@@ -239,16 +232,16 @@ class UpdateProfile extends Component {
                 fullWidth
                 required
               >
-                <MenuItem value={1}>1</MenuItem>
-                <MenuItem value={2}>2</MenuItem>
-                <MenuItem value={3}>3</MenuItem>
-                <MenuItem value={4}>4</MenuItem>
+                <MenuItem value="1">1</MenuItem>
+                <MenuItem value="2">2</MenuItem>
+                <MenuItem value="3">3</MenuItem>
+                <MenuItem value="4">4</MenuItem>
               </TextField>
-              <div>
+              {/* <div>
                 <p style={{ textAlign: "center", color: "red" }}>
                   * These fields must be filled and can only be updated once *
                 </p>
-              </div>
+              </div> */}
               <Button
                 color="primary"
                 variant="contained"