[PAY-161] Redesign Follow Notification#1273
Conversation
8f26c79 to
20b71bd
Compare
|
Preview this change https://demo.audius.co/dj-pay-161-desktop-notification-redesign |
| if (!loadImage) { | ||
| const t = setTimeout(() => { | ||
| setLoadImage(true) | ||
| }, 500) |
There was a problem hiding this comment.
Love this optimizing! Although half a second is pretty long, can it be shorter? also should this be a constant at the top?
There was a problem hiding this comment.
pretty much pulled from the existing notifs image, happy to do that
| import React, { MouseEventHandler, useCallback } from 'react' | ||
|
|
||
| import cn from 'classnames' | ||
| import { push } from 'connected-react-router' |
There was a problem hiding this comment.
super-duper nit but I think we typically import this as pushRoute for clarity?
There was a problem hiding this comment.
yeah sure thing
| if (is_deactivated) { | ||
| return ( | ||
| <span className={cn(styles.root, styles.deactivated)}> | ||
| {name} [{messages.deactivated}] |
There was a problem hiding this comment.
<3 the joy of deactivated accounts
|
|
||
| let userNameElement = ( | ||
| <span className={styles.root}> | ||
| <a onClick={handleClick} href={`/${handle}`} className={styles.link}> |
There was a problem hiding this comment.
Maybe reuse profilePage() here for the href
| users: Array<User> | ||
| } | ||
|
|
||
| export const UserProfileList = ({ users }: UserProfileListProps) => { |
There was a problem hiding this comment.
Nit: Maybe UserProfilePictureList?
| <div className={styles.root}> | ||
| {users | ||
| .filter(u => !u.is_deactivated) | ||
| .slice(0, showUserListModal ? USER_LENGTH_LIMIT : USER_LENGTH_LIMIT) |
There was a problem hiding this comment.
What is this ternary doing?
There was a problem hiding this comment.
good catch, nothing now!
|
Preview this change https://demo.audius.co/dj-pay-161-desktop-notification-redesign |
| } | ||
|
|
||
| export const UserProfilePictureList = ({ users }: UserProfileListProps) => { | ||
| const showUserListModal = users.length > USER_LENGTH_LIMIT |
There was a problem hiding this comment.
we could make USER_LENGTH_LIMIT a prop so that diff places (e.g. top followers in tipping) using this list can control what the cutoff is
| disablePopover?: boolean | ||
| } | ||
|
|
||
| export const ProfilePicture = (props: ProfilePictureProps) => { |
There was a problem hiding this comment.
hmm looks like i should be able to use this component in many of the tipping components im making. nice
There was a problem hiding this comment.
Sweet, I'll move both of these to components directory in the next few prs
Description
Redesigns Desktop follow notifications using reusable Notification components.