fix: added possibility to revert back to default profile picture (#43962)

* added possibility to revert to default profile picture

* removed required from picture input

* remove addPlaceholderImage and replaced with empty string

* added test for empty string to avatar-renderer

api-server/src/server/utils/index.js

@@ -1,3 +0,0 @@
-exports.addPlaceholderImage = function addPlaceholderImage(name) {
-  return `https://example.com/${name}.png`;
-};

api-server/src/server/utils/publicUserProps.js

@@ -5,7 +5,6 @@ import {
   calcCurrentStreak,
   calcLongestStreak
 } from '../utils/user-stats';
-import { addPlaceholderImage } from './';
 
 export const publicUserProps = [
   'about',
@@ -62,7 +61,7 @@ export const userPropsForSession = [
 
 export function normaliseUserFields(user) {
   const about = user.bio && !user.about ? user.bio : user.about;
-  const picture = user.picture || addPlaceholderImage(user.username);
+  const picture = user.picture || '';
   const twitter =
     user.twitter && isURL(user.twitter)
       ? user.twitter

client/src/components/helpers/avatar-renderer.tsx

@@ -33,7 +33,7 @@ function AvatarRenderer({
 
   const isPlaceHolderImage =
     !isPictureValid ||
-    /example.com|identicon.org/.test(picture) ||
+    /example.com|identicon.org|^$/.test(picture) ||
     picture === defaultUserImage;
 
   return (

client/src/components/settings/about.tsx

@@ -139,7 +139,10 @@ class AboutSettings extends Component<AboutProps, AboutState> {
   }
 
   loadEvent = () => this.setState({ isPictureUrlValid: true });
-  errorEvent = () => this.setState({ isPictureUrlValid: false });
+  errorEvent = () =>
+    this.setState(state => ({
+      isPictureUrlValid: state.formValues.picture === ''
+    }));
 
   handlePictureChange = (e: React.FormEvent<HTMLInputElement>) => {
     const value = (e.target as HTMLInputElement).value.slice(0);
@@ -214,7 +217,6 @@ class AboutSettings extends Component<AboutProps, AboutState> {
               </ControlLabel>
               <FormControl
                 onChange={this.handlePictureChange}
-                required={true}
                 type='url'
                 value={picture}
               />