-
Notifications
You must be signed in to change notification settings - Fork 797
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Social: Update share status modal to use Dataviews component (#39230)
* Add @wordpress/dataviews as a dependency * Create and use the dataview component * Do some makeup * Render and clean up * Add changelog * Copy paste clean up from previous PR * Pass data from parent to avoid duplication * Use only the styles from dataviews for now * Restore link styles * Add a comment about the color
- Loading branch information
1 parent
4d40673
commit 781e6cc
Showing
8 changed files
with
134 additions
and
81 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
4 changes: 4 additions & 0 deletions
4
...packages/publicize-components/changelog/update-social-share-status-modal-to-use-dataviews
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: patch | ||
| Type: added | ||
|
|
||
| Updated share status modal to use dataviews |
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
43 changes: 0 additions & 43 deletions
43
projects/js-packages/publicize-components/src/components/share-status/share-info.tsx
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
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
84 changes: 84 additions & 0 deletions
84
projects/js-packages/publicize-components/src/components/share-status/shares-dataview.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,84 @@ | ||
| import { getDate, humanTimeDiff } from '@wordpress/date'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { PostShareStatus, ShareStatusItem } from '../../social-store/types'; | ||
| import ConnectionIcon from '../connection-icon'; | ||
| import { ShareStatusAction } from './share-status-action'; | ||
| import { ShareStatusLabel } from './share-status-label'; | ||
| import styles from './styles.module.scss'; | ||
|
|
||
| const getItemId = ( item: ShareStatusItem ) => { | ||
| return `${ item.external_id || item.connection_id }:${ item.timestamp }`; | ||
| }; | ||
|
|
||
| type SharesDataViewProps = { | ||
| postShareStatus: PostShareStatus; | ||
| }; | ||
|
|
||
| /** | ||
| * The component for the shares data view. | ||
| * | ||
| * @param {SharesDataViewProps} props - The component props. | ||
| * | ||
| * @return {import('react').ReactNode} - The shares data view component. | ||
| */ | ||
| export function SharesDataView( { postShareStatus }: SharesDataViewProps ) { | ||
| return ( | ||
| <div className={ styles[ 'dataview-wrapper' ] }> | ||
| <div className="dataviews-wrapper"> | ||
| <table className="dataviews-view-table"> | ||
| <thead> | ||
| <tr className="dataviews-view-table__row"> | ||
| <th>{ __( 'Connection', 'jetpack' ) }</th> | ||
| <th>{ __( 'Time', 'jetpack' ) }</th> | ||
| <th>{ __( 'Status', 'jetpack' ) }</th> | ||
| <th>{ __( 'Actions', 'jetpack' ) }</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| { postShareStatus.shares.map( item => ( | ||
| <tr key={ getItemId( item ) } className="dataviews-view-table__row"> | ||
| <td> | ||
| <div className="dataviews-view-table__cell-content-wrapper"> | ||
| <div className={ styles[ 'connection-name' ] }> | ||
| <ConnectionIcon | ||
| serviceName={ item.service } | ||
| label={ item.external_name } | ||
| profilePicture={ item.profile_picture } | ||
| /> | ||
| <div className={ styles[ 'share-item-name-wrapper' ] }> | ||
| <div className={ styles[ 'share-item-name' ] }>{ item.external_name }</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div className="dataviews-view-table__cell-content-wrapper"> | ||
| { humanTimeDiff( | ||
| // @ts-expect-error - humanTimeDiff is incorrectly typed, first argument can be a timestamp | ||
| item.timestamp * 1000, | ||
| getDate( null ) | ||
| ) } | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div className="dataviews-view-table__cell-content-wrapper"> | ||
| <ShareStatusLabel status={ item.status } message={ item.message } /> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| <div className="dataviews-view-table__cell-content-wrapper"> | ||
| <ShareStatusAction | ||
| connectionId={ item.connection_id } | ||
| status={ item.status } | ||
| shareLink={ 'success' === item.status ? item.message : '' } | ||
| /> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| ) ) } | ||
| </tbody> | ||
| </table> | ||
| </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