-
Notifications
You must be signed in to change notification settings - Fork 799
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Social: Add Social Share Status modal for published posts #39051
Merged
Merged
Changes from all commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
c560c10
Register meta with name of `jetpack_social_post_shares`
gmjuhasz 1848811
Add new meta to usePostMeta hook
gmjuhasz 34f0219
Add bare components with fetching data
gmjuhasz be45e2f
changelog
gmjuhasz 98b4231
Add moment
gmjuhasz efde646
Populate the modal
gmjuhasz b5eba3a
Merge branch 'trunk' into add/social-share-status-shares-modal
gmjuhasz 502b21c
Remove moment and schema as we use store
gmjuhasz 0b3f3d8
Improve share retrieval and css
gmjuhasz a4c4328
Merge branch 'trunk' into add/social-share-status-shares-modal
gmjuhasz 82f9e7d
Only order the list
gmjuhasz 54ae707
Rebase onto the global modal
gmjuhasz 1046ce5
Remove leftover file
gmjuhasz 5db5551
revert bad change
gmjuhasz 68b94a9
Fix minification issue
gmjuhasz 902fa2c
remove external_id from types
gmjuhasz 3c5e987
Improve normalizeShareStatus
manzoorwanijk File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/js-packages/publicize-components/changelog/add-social-share-status-shares-modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: added | ||
|
||
Add share status log modal to published posts |
29 changes: 0 additions & 29 deletions
29
projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
...cts/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
projects/js-packages/publicize-components/src/components/share-status/share-info.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { getDate, humanTimeDiff } from '@wordpress/date'; | ||
import ConnectionIcon from '../connection-icon'; | ||
import { ShareStatusAction } from './share-status-action'; | ||
import { ShareStatusLabel } from './share-status-label'; | ||
import styles from './styles.module.scss'; | ||
|
||
/** | ||
* | ||
* ShareInfo component | ||
* | ||
* @param {object} props - component props | ||
* @param {object} props.share - share object | ||
* @return {import('react').ReactNode} - React element | ||
*/ | ||
export function ShareInfo( { share } ) { | ||
const { service, external_name, profile_picture, timestamp, status, message } = share; | ||
|
||
return ( | ||
<div className={ styles[ 'share-item' ] }> | ||
<ConnectionIcon | ||
serviceName={ service } | ||
label={ external_name } | ||
profilePicture={ profile_picture } | ||
/> | ||
<div className={ styles[ 'share-item-name-wrapper' ] }> | ||
<div className={ styles[ 'share-item-name' ] }>{ external_name }</div> | ||
</div> | ||
<div> | ||
{ | ||
// @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp | ||
humanTimeDiff( timestamp * 1000, getDate() ) | ||
} | ||
</div> | ||
<ShareStatusLabel status={ status } message={ message } /> | ||
<ShareStatusAction status={ status } shareLink={ 'success' === status ? message : '' } /> | ||
</div> | ||
); | ||
} |
46 changes: 46 additions & 0 deletions
46
projects/js-packages/publicize-components/src/components/share-status/share-list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { Spinner } from '@wordpress/components'; | ||
import { useSelect } from '@wordpress/data'; | ||
import { store as editorStore } from '@wordpress/editor'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { store as socialStore } from '../../social-store'; | ||
import { ShareInfo } from './share-info'; | ||
import styles from './styles.module.scss'; | ||
|
||
/** | ||
* ShareList component | ||
* | ||
* @return {import('react').ReactNode} - Share status modal component. | ||
*/ | ||
export function ShareList() { | ||
const { shareStatus } = useSelect( select => { | ||
const store = select( socialStore ); | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- `@wordpress/editor` is a nightmare to work with TypeScript | ||
const _editorStore = select( editorStore ) as any; | ||
|
||
return { | ||
shareStatus: store.getPostShareStatus( _editorStore.getCurrentPostId() ), | ||
}; | ||
}, [] ); | ||
|
||
return ( | ||
<div className="connection-management"> | ||
{ shareStatus.loading && ( | ||
<div className={ styles.spinner }> | ||
<Spinner /> { __( 'Loading…', 'jetpack' ) } | ||
</div> | ||
) } | ||
{ shareStatus.shares.length > 0 && ( | ||
<ul className={ styles[ 'share-log-list' ] }> | ||
{ shareStatus.shares.map( ( share, idx ) => ( | ||
<li | ||
key={ `${ share.external_id || share.connection_id }${ idx }}` } | ||
className={ styles[ 'share-log-list-item' ] } | ||
> | ||
<ShareInfo share={ share } /> | ||
</li> | ||
) ) } | ||
</ul> | ||
) } | ||
</div> | ||
); | ||
} |
26 changes: 26 additions & 0 deletions
26
...ects/js-packages/publicize-components/src/components/share-status/share-status-action.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { ExternalLink } from '@wordpress/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
import styles from './styles.module.scss'; | ||
|
||
/** | ||
* | ||
* Share status action component. | ||
* | ||
* @param {object} props - component props | ||
* @param {boolean} props.status - status of the share | ||
* @param {string} props.shareLink - link to the share | ||
* @return {import('react').ReactNode} - React element | ||
*/ | ||
export function ShareStatusAction( { status, shareLink } ) { | ||
return ( | ||
<div className={ styles[ 'share-status-action-wrapper' ] }> | ||
{ 'success' !== status ? ( | ||
<span>Retry</span> | ||
) : ( | ||
<ExternalLink className={ styles[ 'profile-link' ] } href={ shareLink }> | ||
{ __( 'View', 'jetpack' ) } | ||
</ExternalLink> | ||
) } | ||
</div> | ||
); | ||
} |
46 changes: 46 additions & 0 deletions
46
projects/js-packages/publicize-components/src/components/share-status/share-status-label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { IconTooltip, Text } from '@automattic/jetpack-components'; | ||
import { __, _x } from '@wordpress/i18n'; | ||
import { Icon, check } from '@wordpress/icons'; | ||
import clsx from 'clsx'; | ||
import React from 'react'; | ||
import styles from './styles.module.scss'; | ||
|
||
/** | ||
* | ||
* Share status label component. | ||
* | ||
* @param {object} props - component props | ||
* @param {boolean} props.status - status of the share | ||
* @param {string} props.message - link to the share, or error message if failed | ||
* @return {import('react').ReactNode} - React element | ||
*/ | ||
export function ShareStatusLabel( { status, message } ) { | ||
const isSuccessful = 'success' === status; | ||
|
||
const icon = isSuccessful ? ( | ||
<Icon className={ styles[ 'share-status-icon' ] } icon={ check } /> | ||
) : ( | ||
<IconTooltip | ||
title={ __( 'Sharing failed with the following message:', 'jetpack' ) } | ||
className={ styles[ 'share-status-icon-tooltip' ] } | ||
> | ||
<Text variant="body-small">{ message }</Text> | ||
</IconTooltip> | ||
); | ||
|
||
return ( | ||
<div | ||
className={ clsx( styles[ 'share-status-wrapper' ], { | ||
[ styles[ 'share-status-success' ] ]: isSuccessful, | ||
[ styles[ 'share-status-failure' ] ]: ! isSuccessful, | ||
} ) } | ||
> | ||
<div className={ styles[ 'share-status-icon' ] }>{ icon }</div> | ||
<div className={ styles[ 'share-status-label' ] }> | ||
{ isSuccessful | ||
? _x( 'Shared', 'The sharing is successful', 'jetpack' ) | ||
: __( 'Failed', 'jetpack' ) } | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
projects/js-packages/publicize-components/src/utils/share-status.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { PostShareStatus } from '../social-store/types'; | ||
|
||
/** | ||
* Normalizes the share status object. | ||
* | ||
* @param {PostShareStatus} shareStatus - Share status object. | ||
* @return {PostShareStatus} - Normalized share status object. | ||
*/ | ||
export function normalizeShareStatus( shareStatus: PostShareStatus ) { | ||
if ( shareStatus && 'shares' in shareStatus && shareStatus.done ) { | ||
// Sort shares to show the latest shares on the top. | ||
shareStatus.shares.sort( ( a, b ) => b.timestamp - a.timestamp ); | ||
} | ||
|
||
return shareStatus; | ||
} |
4 changes: 4 additions & 0 deletions
4
projects/packages/publicize/changelog/add-social-share-status-shares-modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: added | ||
|
||
Add share status log modal to published posts |
4 changes: 4 additions & 0 deletions
4
projects/packages/sync/changelog/add-social-share-status-shares-modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: added | ||
|
||
Add share status log modal to published posts |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What happens
external_name
andprofile_picture
is undefined?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If external_name is undefined it won't be shown as with the case of linkedIN in your example, I'm not sure why linkedIn has no external name, but we might have to send down another data to fix that if for LinkedIn that's undefined all the time. If there is no profile picture, you get the basic connection icon as with LinkedIn in your case
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we fallback to the network logo if there is no profile picture?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ConnectionIcon already does that, you can see it on Sid's screenshot for Linkedin