revert : Added displayUsername and username update functionality

removes implemenation from #35699
This reverts commit e154f38118.

client/src/client-only-routes/ShowProfileOrFourOhFour.js

@@ -22,7 +22,6 @@ const propTypes = {
   navigate: PropTypes.func.isRequired,
   requestedUser: PropTypes.shape({
     username: PropTypes.string,
-    displayUsername: PropTypes.string,
     profileUI: PropTypes.object
   }),
   showLoading: PropTypes.bool

client/src/client-only-routes/ShowSettings.js

@@ -48,7 +48,6 @@ const propTypes = {
         files: PropTypes.array
       })
     ),
-    displayUsername: PropTypes.string,
     email: PropTypes.string,
     githubProfile: PropTypes.string,
     is2018DataVisCert: PropTypes.bool,
@@ -122,7 +121,6 @@ export function ShowSettings(props) {
     toggleNightMode,
     user: {
       completedChallenges,
-      displayUsername,
       email,
       is2018DataVisCert,
       isApisMicroservicesCert,
@@ -193,12 +191,9 @@ export function ShowSettings(props) {
             </Button>
           </FullWidthRow>
           <Spacer />
-          <h1
-            className='text-center'
-            style={{ overflowWrap: 'break-word' }}
-          >{`Account Settings for ${
-            displayUsername ? displayUsername : username
-          }`}</h1>
+          <h1 className='text-center' style={{ overflowWrap: 'break-word' }}>
+            {`Account Settings for ${username}`}
+          </h1>
           <About
             about={about}
             currentTheme={theme}
@@ -208,7 +203,7 @@ export function ShowSettings(props) {
             points={points}
             submitNewAbout={submitNewAbout}
             toggleNightMode={toggleNightMode}
-            username={displayUsername ? displayUsername : username}
+            username={username}
           />
           <Spacer />
           <Privacy />

client/src/components/profile/Profile.js

@@ -27,7 +27,6 @@ const propTypes = {
       showPortfolio: PropTypes.bool,
       showTimeLine: PropTypes.bool
     }),
-    displayUsername: PropTypes.string,
     calendar: PropTypes.object,
     streak: PropTypes.shape({
       current: PropTypes.number,
@@ -122,15 +121,13 @@ function renderProfile(user) {
     picture,
     portfolio,
     about,
-    yearsTopContributor,
-    displayUsername
+    yearsTopContributor
   } = user;
 
   return (
     <Fragment>
       <Camper
         about={showAbout ? about : null}
-        displayUsername={displayUsername}
         githubProfile={githubProfile}
         isGithub={isGithub}
         isLinkedIn={isLinkedIn}
@@ -150,11 +147,7 @@ function renderProfile(user) {
       {showCerts ? <Certifications username={username} /> : null}
       {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
       {showTimeLine ? (
-        <Timeline
-          completedMap={completedChallenges}
-          displayUsername={displayUsername}
-          username={username}
-        />
+        <Timeline completedMap={completedChallenges} username={username} />
       ) : null}
       <Spacer />
     </Fragment>

client/src/components/profile/components/Camper.js

@@ -11,7 +11,6 @@ import './camper.css';
 
 const propTypes = {
   about: PropTypes.string,
-  displayUsername: PropTypes.string,
   githubProfile: PropTypes.string,
   isGithub: PropTypes.bool,
   isLinkedIn: PropTypes.bool,
@@ -49,7 +48,6 @@ function joinArray(array) {
 function Camper({
   name,
   username,
-  displayUsername,
   location,
   points,
   picture,
@@ -76,7 +74,7 @@ function Camper({
     />
   ) : (
     <Image
-      alt={displayUsername ? displayUsername : username + "'s avatar"}
+      alt={username + "'s avatar"}
       className='avatar'
       responsive={true}
       src={picture}
@@ -101,9 +99,7 @@ function Camper({
         website={website}
       />
       <br />
-      <h2 className='text-center username'>
-        @{displayUsername ? displayUsername : username}
-      </h2>
+      <h2 className='text-center username'>@{username}</h2>
       {name && <p className='text-center name'>{name}</p>}
       {location && <p className='text-center location'>{location}</p>}
       {about && <p className='bio text-center'>{about}</p>}

client/src/components/profile/components/TimeLine.js

@@ -27,7 +27,6 @@ const propTypes = {
       )
     })
   ),
-  displayUsername: PropTypes.string,
   username: PropTypes.string
 };
 
@@ -131,7 +130,6 @@ class TimelineInner extends Component {
   render() {
     const {
       completedMap,
-      displayUsername,
       idToNameMap,
       username,
       sortedTimeline,
@@ -173,9 +171,9 @@ class TimelineInner extends Component {
           >
             <Modal.Header closeButton={true}>
               <Modal.Title id='contained-modal-title'>
-                {`${
-                  displayUsername ? displayUsername : username
-                }'s Solution to ${idToNameMap.get(id).challengeTitle}`}
+                {`${username}'s Solution to ${
+                  idToNameMap.get(id).challengeTitle
+                }`}
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>

client/src/components/settings/Username.js

@@ -20,7 +20,6 @@ import FullWidthRow from '../helpers/FullWidthRow';
 import { isValidUsername } from '../../../../utils/validate';
 
 const propTypes = {
-  displayUsername: PropTypes.string,
   isValidUsername: PropTypes.bool,
   submitNewUsername: PropTypes.func.isRequired,
   username: PropTypes.string,
@@ -55,9 +54,6 @@ class UsernameSettings extends Component {
     this.state = {
       isFormPristine: true,
       formValue: props.username,
-      formDisplayValue: props.displayUsername
-        ? props.displayUsername
-        : props.username,
       characterValidation: { valid: false, error: null },
       submitClicked: false,
       isUserNew: tempUserRegex.test(props.username)
@@ -88,23 +84,21 @@ class UsernameSettings extends Component {
     e.preventDefault();
     const { submitNewUsername } = this.props;
     const {
-      formDisplayValue,
+      formValue,
       characterValidation: { valid }
     } = this.state;
 
     return this.setState({ submitClicked: true }, () =>
-      valid ? submitNewUsername(formDisplayValue) : null
+      valid ? submitNewUsername(formValue) : null
     );
   }
 
   handleChange(e) {
     e.preventDefault();
     const { username, validateUsername } = this.props;
-    const newDisplayUsernameValue = e.target.value;
-    const newValue = newDisplayUsernameValue.toLowerCase();
+    const newValue = e.target.value.toLowerCase();
     return this.setState(
       {
-        formDisplayValue: newDisplayUsernameValue,
         formValue: newValue,
         isFormPristine: username === newValue,
         characterValidation: this.validateFormInput(newValue),
@@ -166,7 +160,7 @@ class UsernameSettings extends Component {
   render() {
     const {
       isFormPristine,
-      formDisplayValue,
+      formValue,
       characterValidation: { valid, error },
       submitClicked
     } = this.state;
@@ -183,7 +177,7 @@ class UsernameSettings extends Component {
               <FormControl
                 name='username-settings'
                 onChange={this.handleChange}
-                value={formDisplayValue}
+                value={formValue}
               />
             </FormGroup>
           </FullWidthRow>

client/src/redux/fetch-user-saga.js

@@ -20,11 +20,7 @@ function* fetchSessionUser() {
     } = yield call(getSessionUser);
     const appUser = user[result] || {};
     yield put(
-      fetchUserComplete({
-        user: appUser,
-        username: result,
-        sessionMeta
-      })
+      fetchUserComplete({ user: appUser, username: result, sessionMeta })
     );
   } catch (e) {
     yield put(fetchUserError(e));