Render dataview and fetch viewers from API

projects/packages/jetpack-mu-wpcom/package.json

@@ -62,6 +62,7 @@
 		"@wordpress/compose": "7.35.0",
 		"@wordpress/data": "10.35.0",
 		"@wordpress/data-controls": "4.35.0",
+		"@wordpress/dataviews": "10.2.0",
 		"@wordpress/date": "5.35.0",
 		"@wordpress/dom": "4.35.0",
 		"@wordpress/dom-ready": "^4.8.1",

projects/packages/jetpack-mu-wpcom/src/features/private-viewers/private-viewers.php

@@ -32,7 +32,12 @@ function wpcom_private_viewers_load_page() {
  * Enqueue the Private Viewers assets.
  */
 function wpcom_private_viewers_enqueue_assets() {
-	jetpack_mu_wpcom_enqueue_assets( 'private-viewers', array( 'js' ) );
+	jetpack_mu_wpcom_enqueue_assets( 'private-viewers', array( 'js', 'css' ) );
+	wp_add_inline_script(
+		'jetpack-mu-wpcom-private-viewers',
+		'var wpcomPrivateViewers = ' . wp_json_encode( array( 'siteId' => get_wpcom_blog_id() ) ) . ';',
+		'before'
+	);
 }
 
 /**

projects/packages/jetpack-mu-wpcom/src/features/private-viewers/private-viewers.scss

@@ -0,0 +1 @@
+@import "@wordpress/dataviews/build-style/style.css";

projects/packages/jetpack-mu-wpcom/src/features/private-viewers/private-viewers.tsx

@@ -1,20 +1,129 @@
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	__experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { DataViews, Field } from '@wordpress/dataviews';
+import domReady from '@wordpress/dom-ready';
 import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
+import wpcomRequest from 'wpcom-proxy-request';
+
+import './private-viewers.scss';
+
+type Viewer = {
+	ID: number;
+	login: string;
+	email: boolean | string;
+	name: string;
+	first_name: string;
+	last_name: string;
+	nice_name: string;
+	URL: string;
+	avatar_URL: string;
+	profile_URL: string;
+	ip_address: boolean | string;
+};
+
+declare global {
+	interface Window {
+		wpcomPrivateViewers: {
+			siteId: number;
+		};
+	}
+}
+
+const useViewers = () => {
+	const [ viewers, setViewers ] = useState< Viewer[] >( [] );
+	const [ totalViewers, setTotalViewers ] = useState< number >( 0 );
+
+	const fetchViewers = useCallback( async () => {
+		const path = addQueryArgs( `/sites/${ window.wpcomPrivateViewers.siteId }/viewers`, {
+			page: 1,
+			number: 2,
+		} );
+		const response: { viewers: Viewer[]; found: number } = await wpcomRequest( {
+			path,
+			apiVersion: '1.1',
+		} );
+		setViewers( response.viewers );
+		setTotalViewers( response.found );
+	}, [] );
+
+	useEffect( () => {
+		fetchViewers();
+	}, [ fetchViewers ] );
+
+	return {
+		viewers,
+		totalViewers,
+	};
+};
+
+const noop = () => {};
+
+const getItemId = ( item: Viewer ) => item.ID.toString();
 
 /**
  * Private Viewers Component
  *
  * @return {JSX.Element} The component to render.
  */
 function PrivateViewers() {
+	const { viewers, totalViewers } = useViewers();
+
+	const fields = useMemo< Field< Viewer >[] >(
+		() => [
+			{
+				id: 'nice_name',
+				label: __( 'Name', 'jetpack-mu-wpcom' ),
+			},
+			{
+				id: 'login',
+				label: __( 'Login', 'jetpack-mu-wpcom' ),
+			},
+		],
+		[]
+	);
+
 	return (
 		<div className="wrap">
-			<h1>{ __( 'Private Viewers', 'jetpack-mu-wpcom' ) }</h1>
+			<Card>
+				<CardHeader>
+					<Heading level={ 1 }>{ __( 'Private Viewers', 'jetpack-mu-wpcom' ) }</Heading>
+					<Text>{ __( 'Manage who can access your private site', 'jetpack-mu-wpcom' ) }</Text>
+				</CardHeader>
+				<CardBody>
+					<DataViews
+						data={ viewers }
+						fields={ fields }
+						view={ {
+							type: 'table',
+							search: '',
+							filters: [],
+							page: 1,
+							perPage: 2,
+							fields: [ 'nice_name', 'login' ],
+						} }
+						getItemId={ getItemId }
+						paginationInfo={ {
+							totalItems: totalViewers,
+							totalPages: Math.ceil( totalViewers / 2 ),
+						} }
+						onChangeView={ noop }
+						defaultLayouts={ { table: {} } }
+					/>
+				</CardBody>
+			</Card>
 		</div>
 	);
 }
 
-document.addEventListener( 'DOMContentLoaded', function () {
+domReady( () => {
 	const container = document.getElementById( 'wpcom-private-viewers-root' );
 	if ( container ) {
 		const root = createRoot( container );