Avatar updates

- fixed bug in profile and directory
- changed the ProfilePicture component to pass all of the user data
- when a user signs up, photo isnt added to the jsonb data

components/core/ApplicationUserControls.js

@@ -121,9 +121,8 @@ export class ApplicationUserControlsPopup extends React.Component {
         <div css={Styles.HORIZONTAL_CONTAINER} style={{ marginBottom: 14 }}>
           <div style={{ marginRight: '16px', cursor: 'default' }} >
             <ProfilePhoto 
+              user={this.props.viewer}
               size={46}
-              userId={this.props.viewer.id}
-              photo={this.props.viewer.data.photo} 
             />
           </div>
 
@@ -283,8 +282,7 @@ export class ApplicationUserControls extends React.Component {
           style={{ position: "relative", cursor: 'pointer' }}
         >
           <ProfilePhoto 
-            photo={this.props.viewer.data.photo}
-            userId={this.props.viewer.id} 
+            user={this.props.viewer}
             size={24} 
           />
           {this.props.popup === "profile" ? tooltip : null}

components/core/Profile.js

@@ -244,14 +244,14 @@ const STYLES_DIRECTORY_NAME = css`
 
 function UserEntry({ user, button, onClick, message, checkStatus }) {
   const isOnline = checkStatus({ id: user.id });
+
   return (
     <div key={user.username} css={STYLES_USER_ENTRY}>
       <div css={STYLES_USER} onClick={onClick}>
         <div css={STYLES_DIRECTORY_PROFILE_IMAGE}>
           <ProfilePhoto 
-            photo={user.data.photo}
-            userId={user.id}
-            size={24}
+            user={user} 
+            size={24} 
           />
           {isOnline && <div css={STYLES_DIRECTORY_STATUS_INDICATOR} />}
         </div>
@@ -597,12 +597,11 @@ export default class Profile extends React.Component {
         />
         <div css={STYLES_PROFILE_BACKGROUND}>
           <div css={STYLES_PROFILE_INFO}>
-            <div
-              css={STYLES_PROFILE_IMAGE}
-              style={{
-                backgroundImage: `url('${user.data.photo}')`,
-              }}
-            >
+            <div css={STYLES_PROFILE_IMAGE}>
+              <ProfilePhoto 
+                user={user} 
+                size={120} 
+              />
               {showStatusIndicator && this.checkStatus({ id: user.id }) && (
                 <div css={STYLES_STATUS_INDICATOR} />
               )}

components/core/ProfilePhoto.js

@@ -67,13 +67,13 @@ function UploadedAvatar(props) {
   )
 }
 
-export default class ProfilePhoto extends React.Component {
+export default class ProfilePhoto extends React.Component {  
   render() {
     return (
       <>
-        {this.props.photo
-          ? <UploadedAvatar url={this.props.photo} size={this.props.size} />
-          : <BoringAvatar userId={this.props.userId} size={this.props.size} />
+        {this.props.user.data.photo
+          ? <UploadedAvatar url={this.props.user.data.photo} size={this.props.size} />
+          : <BoringAvatar userId={this.props.user.id} size={this.props.size} />
         }
       </>
     );

components/core/SearchModal.js

@@ -86,8 +86,7 @@ const UserEntry = ({ user }) => {
       <div css={STYLES_ENTRY_CONTAINER}>
         <div css={STYLES_PROFILE_PREVIEW}>
           <ProfilePhoto 
-            photo={user.data.photo}
-            userId={user.id} 
+            user={this.props.viewer}
             size={48} 
           />
         </div>

pages/api/twitter/signup-with-verification.js

@@ -108,7 +108,6 @@ export default async (req, res) => {
     email: newEmail,
     twitterId: twitterUser.id_str,
     data: {
-      photo: "",
       body: "",
       settings: {
         settings_deals_auto_approve: false,

pages/api/twitter/signup.js

@@ -90,7 +90,6 @@ export default async (req, res) => {
     email: newEmail,
     twitterId: twitterUser.id_str,
     data: {
-      photo: "",
       body: "",
       settings: {
         settings_deals_auto_approve: false,

pages/api/users/create.js

@@ -82,7 +82,6 @@ export default async (req, res) => {
     username: newUsername,
     email: newEmail,
     data: {
-      photo: "",
       body: "",
       settings: {
         settings_deals_auto_approve: false,

scenes/SceneDirectory.js

@@ -13,6 +13,7 @@ import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
 import EmptyState from "~/components/core/EmptyState";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+import ProfilePhoto from "~/components/core/ProfilePhoto"; 
 
 const STYLES_USER_ENTRY = css`
   display: grid;
@@ -119,7 +120,11 @@ function UserEntry({ user, button, onClick, message, checkStatus }) {
   return (
     <div key={user.username} css={STYLES_USER_ENTRY}>
       <div css={STYLES_USER} onClick={onClick}>
-        <div css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url(${user.data.photo})` }}>
+        <div css={STYLES_PROFILE_IMAGE}>
+          <ProfilePhoto
+            user={user}
+            size={24}
+          />
           {isOnline ? <div css={STYLES_STATUS_INDICATOR} /> : null}
         </div>
         <span css={STYLES_NAME}>

scenes/SceneEditAccount.js

@@ -199,9 +199,8 @@ export default class SceneEditAccount extends React.Component {
               <div css={STYLES_HEADER}>Your Avatar</div>
 
               <ProfilePhoto 
+                user={this.props.viewer}
                 size={256} 
-                photo={this.props.viewer.data.photo} 
-                userId={this.props.viewer.id} 
               />
 
               <div style={{ marginTop: 24 }}>