Social: Connections API schema front end changes

projects/js-packages/publicize-components/changelog/update-social-schema-front-end-changes

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated the shape of connections object following the schema update

projects/js-packages/publicize-components/src/components/connection-management/connection-info.tsx

@@ -27,7 +27,7 @@ export function ConnectionInfo( { connection, service }: ConnectionInfoProps ) {
 			<div className={ styles[ 'connection-item' ] }>
 				<ConnectionIcon
 					serviceName={ connection.service_name }
-					label={ connection.display_name || connection.external_display }
+					label={ connection.display_name }
 					profilePicture={ connection.profile_picture }
 				/>
 				<div className={ styles[ 'connection-name-wrapper' ] }>

projects/js-packages/publicize-components/src/components/connection-management/connection-name.tsx

@@ -27,12 +27,10 @@ export function ConnectionName( { connection }: ConnectionNameProps ) {
 	return (
 		<div className={ styles[ 'connection-name' ] }>
 			{ ! connection.profile_link ? (
-				<span className={ styles[ 'profile-link' ] }>
-					{ connection.display_name || connection.external_name }
-				</span>
+				<span className={ styles[ 'profile-link' ] }>{ connection.display_name }</span>
 			) : (
 				<ExternalLink className={ styles[ 'profile-link' ] } href={ connection.profile_link }>
-					{ connection.display_name || connection.external_display || connection.external_name }
+					{ connection.display_name }
 				</ExternalLink>
 			) }
 			{ isUpdating ? (

projects/js-packages/publicize-components/src/components/connection-management/reconnect.tsx

@@ -63,7 +63,7 @@ export function Reconnect( { connection, service, variant = 'link' }: ReconnectP
 		const formData = new FormData();
 
 		if ( service.ID === 'mastodon' ) {
-			formData.set( 'instance', connection.external_display );
+			formData.set( 'instance', connection.external_handle );
 		}
 
 		if ( service.ID === 'bluesky' ) {

projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx

@@ -1,30 +1,18 @@
 import { Button } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createInterpolateElement, Fragment } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
-import { checkConnectionCode } from '../../utils/connections';
 import { getSocialScriptData } from '../../utils/script-data';
 import Notice from '../notice';
 import { useServiceLabel } from '../services/use-service-label';
 import styles from './styles.module.scss';
 
 export const BrokenConnectionsNotice: React.FC = () => {
-	const { connections } = useSocialMediaConnections();
-
-	const brokenConnections = connections.filter( connection => {
-		return (
-			connection.status === 'broken' ||
-			// This is a legacy check for connections that are not healthy.
-			// TODO remove this check when we are sure that all connections have
-			// the status property (same schema for connections endpoints), e.g. on Simple/Atomic sites
-			checkConnectionCode( connection, 'broken' )
-		);
-	} );
+	const brokenConnections = useSelect( select => select( store ).getBrokenConnections(), [] );
 
 	const { connectionsPageUrl } = usePublicizeConfig();
 
@@ -87,11 +75,9 @@ export const BrokenConnectionsNotice: React.FC = () => {
 									{
 										// Since Intl.ListFormat is not allowed in Jetpack yet,
 										// we join the connections with a comma and space
-										connectionsList.map( ( { display_name, external_display, id }, i ) => (
-											<Fragment key={ id }>
-												<span className={ styles[ 'broken-connection' ] }>
-													{ display_name || external_display }
-												</span>
+										connectionsList.map( ( { display_name, connection_id }, i ) => (
+											<Fragment key={ connection_id }>
+												<span className={ styles[ 'broken-connection' ] }>{ display_name }</span>
 												{ i < connectionsList.length - 1 &&
 													_x(
 														',',

projects/js-packages/publicize-components/src/components/form/connections-list.tsx

@@ -35,18 +35,17 @@ export const ConnectionsList: React.FC = () => {
 		<div>
 			<ul className={ styles[ 'connections-list' ] }>
 				{ connections.map( conn => {
-					const { display_name, id, service_name, profile_picture, connection_id } = conn;
-					const currentId = connection_id ? connection_id : id;
+					const { display_name, service_name, profile_picture, connection_id } = conn;
 
 					return (
 						<PublicizeConnection
 							disabled={ shouldBeDisabled( conn ) }
 							enabled={ canBeTurnedOn( conn ) && conn.enabled }
-							key={ currentId }
-							id={ currentId }
+							key={ connection_id }
+							id={ connection_id }
 							label={ display_name }
 							name={ service_name }
-							toggleConnection={ toggleConnection( currentId, conn ) }
+							toggleConnection={ toggleConnection( connection_id, conn ) }
 							profilePicture={ profile_picture }
 						/>
 					);

projects/js-packages/publicize-components/src/components/form/unsupported-connections-notice.tsx

@@ -3,16 +3,20 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { usePublicizeConfig } from '../../..';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { checkConnectionCode } from '../../utils/connections';
 import Notice from '../notice';
+import { useService } from '../services/use-service';
 
 export const UnsupportedConnectionsNotice: React.FC = () => {
 	const { connections } = useSocialMediaConnections();
 
 	const { connectionsPageUrl } = usePublicizeConfig();
 
-	const unsupportedConnections = connections.filter( connection =>
-		checkConnectionCode( connection, 'unsupported' )
+	const getServices = useService();
+
+	const unsupportedConnections = connections.filter(
+		connection =>
+			// If getServices returns falsy, it means the service is unsupported.
+			! getServices( connection.service_name )
 	);
 
 	return (

projects/js-packages/publicize-components/src/components/form/use-connection-state.ts

@@ -31,17 +31,16 @@ export const useConnectionState = () => {
 	 */
 	const isInGoodShape = useCallback(
 		( connection: Connection ) => {
-			const { id, is_healthy, connection_id, status } = connection;
-			const currentId = connection_id ? connection_id : id;
+			const { connection_id: id, status } = connection;
 
 			// 1. Be healthy
-			const isHealthy = false !== is_healthy && status !== 'broken';
+			const isHealthy = status !== 'broken';
 
 			// 2. Have no validation errors
-			const hasValidationErrors = validationErrors[ currentId ] !== undefined && ! isConvertible;
+			const hasValidationErrors = validationErrors[ id ] !== undefined && ! isConvertible;
 
 			// 3. Not have a NO_MEDIA_ERROR when media is required
-			const hasNoMediaError = validationErrors[ currentId ] === NO_MEDIA_ERROR;
+			const hasNoMediaError = validationErrors[ id ] === NO_MEDIA_ERROR;
 
 			return isHealthy && ! hasValidationErrors && ! hasNoMediaError;
 		},

projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx

@@ -162,7 +162,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 				display_name: accountInfo?.label,
 				profile_picture: accountInfo?.profile_picture,
 				service_name: service.ID,
-				external_id: external_user_ID,
+				external_id: external_user_ID.toString(),
 			} );
 
 			onComplete();

projects/js-packages/publicize-components/src/components/services/connect-form.tsx

@@ -24,7 +24,7 @@ type ConnectFormProps = {
  *
  * @param {ConnectFormProps} props - Component props
  *
- * @return {import('react').ReactNode} Connect form component
+ * @return Connect form component
  */
 export function ConnectForm( {
 	service,

projects/js-packages/publicize-components/src/components/services/custom-inputs.tsx

@@ -73,7 +73,7 @@ export function CustomInputs( { service }: CustomInputsProps ) {
 						name="handle"
 						defaultValue={
 							reconnectingAccount?.service_name === 'bluesky'
-								? reconnectingAccount?.external_name
+								? reconnectingAccount?.external_handle
 								: undefined
 						}
 						autoComplete="off"

projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx

@@ -33,9 +33,9 @@ export type PostPreviewProps = {
 export function PostPreview( { connection }: PostPreviewProps ) {
 	const user = useMemo(
 		() => ( {
-			displayName: connection.display_name || connection.external_display,
+			displayName: connection.display_name,
 			profileImage: connection.profile_picture,
-			externalName: connection.external_name,
+			externalName: connection.external_handle,
 		} ),
 		[ connection ]
 	);

projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx

@@ -33,7 +33,7 @@ export function PreviewSection() {
 					// to avoid errors for old connections like Twitter
 					.filter( ( { service_name } ) => getService( service_name ) )
 					.map( connection => {
-						const title = connection.display_name || connection.external_display;
+						const title = connection.display_name;
 						const name = `${ connection.service_name }-${ connection.connection_id }`;
 						const icon = (
 							<ConnectionIcon

projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts

@@ -83,28 +83,22 @@ export function mergeConnections( freshConnections ) {
 		const prevConnections = select.getConnections();
 		const connections = [];
 		const defaults = {
-			done: false,
 			enabled: true,
-			toggleable: true,
 		};
 
 		/*
 		 * Iterate connection by connection,
 		 * in order to refresh or update current connections.
 		 */
 		for ( const freshConnection of freshConnections ) {
-			const prevConnection = prevConnections.find( conn =>
-				conn.connection_id
-					? conn.connection_id === freshConnection.connection_id
-					: conn.id === freshConnection.id
+			const prevConnection = prevConnections.find(
+				conn => conn.connection_id === freshConnection.connection_id
 			);
 
 			const connection = {
 				...defaults,
 				...prevConnection,
 				...freshConnection,
-				shared: prevConnection?.shared,
-				is_healthy: freshConnection.test_success,
 			};
 			connections.push( connection );
 		}
@@ -378,7 +372,7 @@ export function createConnection( data, optimisticData = {} ) {
 					sprintf(
 						/* translators: %s is the name of the social media platform e.g. "Facebook" */
 						__( '%s account connected successfully.', 'jetpack-publicize-components' ),
-						connection.label
+						connection.service_label
 					),
 					{
 						type: 'snackbar',

projects/js-packages/publicize-components/src/social-store/actions/test/connection-data.js

@@ -119,22 +119,14 @@ describe( 'Social store actions: connectionData', () => {
 
 			const freshConnections = connections.map( connection => ( {
 				...connection,
-				test_success: false,
+				status: 'broken',
 			} ) );
 
 			registry.dispatch( socialStore ).mergeConnections( freshConnections );
 
 			const connectionsAfterMerge = registry.select( socialStore ).getConnections();
 
-			expect( connectionsAfterMerge ).toEqual(
-				freshConnections.map( connection => ( {
-					...connection,
-					// These 3 are added while merging
-					done: false,
-					toggleable: true,
-					is_healthy: false,
-				} ) )
-			);
+			expect( connectionsAfterMerge ).toEqual( freshConnections );
 		} );
 	} );
 
@@ -156,10 +148,7 @@ describe( 'Social store actions: connectionData', () => {
 				if ( path.startsWith( refreshConnections ) ) {
 					return connections.map( connection => ( {
 						...connection,
-						can_refresh: false,
-						refresh_url: '',
-						test_message: 'Some message',
-						test_success: true,
+						status: 'broken',
 					} ) );
 				}
 
@@ -184,14 +173,7 @@ describe( 'Social store actions: connectionData', () => {
 			expect( connectionsAfterRefresh ).toEqual(
 				connections.map( connection => ( {
 					...connection,
-					can_refresh: false,
-					refresh_url: '',
-					test_message: 'Some message',
-					test_success: true,
-					// These 3 are added while merging
-					done: false,
-					toggleable: true,
-					is_healthy: true,
+					status: 'broken',
 				} ) )
 			);
 

projects/js-packages/publicize-components/src/social-store/reducer/connection-data.ts

@@ -133,11 +133,7 @@ const connectionData = ( state: ConnectionData = { connections: [] }, action ) =
 			return {
 				...state,
 				connections: state.connections.map( connection => {
-					// If the connection has a connection_id, then give it priority.
-					// Otherwise, use the id.
-					const isTargetConnection = connection.connection_id
-						? connection.connection_id === action.connectionId
-						: connection.id === action.connectionId;
+					const isTargetConnection = connection.connection_id === action.connectionId;
 
 					if ( isTargetConnection ) {
 						return {