From 5f0dbc3612c7e8705e06b924d326c72a27462f45 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 5 Sep 2024 11:56:21 +0100
Subject: [PATCH 1/7] Lift state for playgroundInfo

---
 src/ui/App.tsx             | 10 ++++++++--
 src/ui/preview/Preview.tsx | 18 +++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index e93d359d..43855880 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -11,13 +11,14 @@ import {
 	useNavigate,
 	useRouteLoaderData,
 } from 'react-router-dom';
-import { StrictMode, useEffect } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { NewSession } from '@/ui/start/NewSession';
 import { ViewSession } from '@/ui/session/ViewSession';
 import { Home } from '@/ui/start/Home';
 import { getConfig, setConfig } from '@/storage/config';
 import { getSession, listSessions, Session } from '@/storage/session';
 import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview';
+import { PlaygroundInfo } from '@/ui/preview/Playground';
 
 export const Screens = {
 	home: () => '/start/home',
@@ -75,11 +76,16 @@ function App() {
 	}, [ location ] );
 
 	const session = useRouteLoaderData( 'session' ) as Session;
+	const [ playgroundInfo, setPlaygroundInfo ] = useState< PlaygroundInfo >();
 
 	const preview = ! session ? (
 		<PlaceholderPreview />
 	) : (
-		<Preview sessionId={ session.id } />
+		<Preview
+			sessionId={ session.id }
+			playgroundInfo={ playgroundInfo }
+			onReady={ () => setPlaygroundInfo( playgroundInfo ) }
+		/>
 	);
 
 	return (
diff --git a/src/ui/preview/Preview.tsx b/src/ui/preview/Preview.tsx
index 70cff15b..5a8bd230 100644
--- a/src/ui/preview/Preview.tsx
+++ b/src/ui/preview/Preview.tsx
@@ -6,10 +6,13 @@ const tabFront = 0;
 const tabAdmin = 1;
 const defaultTab = tabFront;
 
-export function Preview( props: { sessionId: string } ) {
-	const { sessionId } = props;
+export function Preview( props: {
+	sessionId: string;
+	playgroundInfo?: PlaygroundInfo;
+	onReady: ( info: PlaygroundInfo ) => void;
+} ) {
+	const { sessionId, playgroundInfo, onReady } = props;
 	const [ currentTab, setCurrentTab ] = useState< number >( defaultTab );
-	const [ playgroundInfo, setPlaygroundInfo ] = useState< PlaygroundInfo >();
 
 	const previewAdminUrl =
 		playgroundInfo?.url && playgroundInfo.url?.length > 0
@@ -28,14 +31,7 @@ export function Preview( props: { sessionId: string } ) {
 		/>
 	);
 
-	const previewFront = (
-		<Playground
-			slug={ sessionId }
-			onReady={ ( info ) => {
-				setPlaygroundInfo( info );
-			} }
-		/>
-	);
+	const previewFront = <Playground slug={ sessionId } onReady={ onReady } />;
 
 	const previewAdmin = (
 		<iframe title={ `${ sessionId }-admin` } src={ previewAdminUrl } />

From 960685664f91dda7186923343c0ba886a55e2d8e Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 5 Sep 2024 12:09:48 +0100
Subject: [PATCH 2/7] Pass the playground url as context to all session screens

---
 src/ui/App.tsx                    | 14 ++++++--------
 src/ui/preview/Preview.tsx        | 10 +++++-----
 src/ui/session/SessionProvider.ts | 22 ++++++++++++++++++++++
 src/ui/session/ViewSession.tsx    | 11 +++++++----
 4 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 src/ui/session/SessionProvider.ts

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 43855880..133cd2fd 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -19,6 +19,7 @@ import { getConfig, setConfig } from '@/storage/config';
 import { getSession, listSessions, Session } from '@/storage/session';
 import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview';
 import { PlaygroundInfo } from '@/ui/preview/Playground';
+import { SessionContext, SessionProvider } from '@/ui/session/SessionProvider';
 
 export const Screens = {
 	home: () => '/start/home',
@@ -77,27 +78,24 @@ function App() {
 
 	const session = useRouteLoaderData( 'session' ) as Session;
 	const [ playgroundInfo, setPlaygroundInfo ] = useState< PlaygroundInfo >();
+	const sectionContext: SessionContext = { session, playgroundInfo };
 
 	const preview = ! session ? (
 		<PlaceholderPreview />
 	) : (
-		<Preview
-			sessionId={ session.id }
-			playgroundInfo={ playgroundInfo }
-			onReady={ () => setPlaygroundInfo( playgroundInfo ) }
-		/>
+		<Preview onReady={ setPlaygroundInfo } />
 	);
 
 	return (
-		<>
+		<SessionProvider value={ sectionContext }>
 			<div className="app">
 				<Navbar className={ 'app-nav' } />
 				<div className="app-main">
-					<Outlet context={ session } />
+					<Outlet />
 				</div>
 			</div>
 			<div className="preview">{ preview }</div>
-		</>
+		</SessionProvider>
 	);
 }
 
diff --git a/src/ui/preview/Preview.tsx b/src/ui/preview/Preview.tsx
index 5a8bd230..afcb4141 100644
--- a/src/ui/preview/Preview.tsx
+++ b/src/ui/preview/Preview.tsx
@@ -1,18 +1,18 @@
 import { useState } from 'react';
 import { PreviewTabBar } from '@/ui/preview/PreviewTabBar';
 import { Playground, PlaygroundInfo } from '@/ui/preview/Playground';
+import { useSessionContext } from '@/ui/session/SessionProvider';
 
 const tabFront = 0;
 const tabAdmin = 1;
 const defaultTab = tabFront;
 
 export function Preview( props: {
-	sessionId: string;
-	playgroundInfo?: PlaygroundInfo;
 	onReady: ( info: PlaygroundInfo ) => void;
 } ) {
-	const { sessionId, playgroundInfo, onReady } = props;
+	const { onReady } = props;
 	const [ currentTab, setCurrentTab ] = useState< number >( defaultTab );
+	const { session, playgroundInfo } = useSessionContext();
 
 	const previewAdminUrl =
 		playgroundInfo?.url && playgroundInfo.url?.length > 0
@@ -31,10 +31,10 @@ export function Preview( props: {
 		/>
 	);
 
-	const previewFront = <Playground slug={ sessionId } onReady={ onReady } />;
+	const previewFront = <Playground slug={ session.id } onReady={ onReady } />;
 
 	const previewAdmin = (
-		<iframe title={ `${ sessionId }-admin` } src={ previewAdminUrl } />
+		<iframe title={ `${ session.id }-admin` } src={ previewAdminUrl } />
 	);
 
 	const showTabBar = ! isPlaygroundLoading;
diff --git a/src/ui/session/SessionProvider.ts b/src/ui/session/SessionProvider.ts
new file mode 100644
index 00000000..92033cbc
--- /dev/null
+++ b/src/ui/session/SessionProvider.ts
@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+import { Session } from '@/storage/session';
+import { PlaygroundInfo } from '@/ui/preview/Playground';
+
+export interface SessionContext {
+	session: Session;
+	playgroundInfo?: PlaygroundInfo;
+}
+
+const sessionContext = createContext< SessionContext >( {
+	session: {
+		id: '',
+		url: '',
+		title: '',
+	},
+} );
+
+export const SessionProvider = sessionContext.Provider;
+
+export function useSessionContext() {
+	return useContext( sessionContext );
+}
diff --git a/src/ui/session/ViewSession.tsx b/src/ui/session/ViewSession.tsx
index a9718fff..38f9d102 100644
--- a/src/ui/session/ViewSession.tsx
+++ b/src/ui/session/ViewSession.tsx
@@ -1,11 +1,14 @@
-import { useOutletContext } from 'react-router-dom';
-import { Session } from '@/storage/session';
+import { useSessionContext } from '@/ui/session/SessionProvider';
 
 export function ViewSession() {
-	const session = useOutletContext() as Session;
+	const { session, playgroundInfo } = useSessionContext();
+
 	return (
 		<>
-			<span>{ `view session: ${ session.id }` }</span>
+			<div>view session: { session.id }</div>
+			{ playgroundInfo?.url ? (
+				<div>url: { playgroundInfo.url }</div>
+			) : null }
 		</>
 	);
 }

From 1436c038b5fbec6b2b2c74ae823030af692098d1 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 5 Sep 2024 12:55:55 +0100
Subject: [PATCH 3/7] Add ApiClient and call it

---
 src/api/ApiClient.ts           | 21 +++++++++++++++++++++
 src/ui/session/ViewSession.tsx | 19 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/api/ApiClient.ts

diff --git a/src/api/ApiClient.ts b/src/api/ApiClient.ts
new file mode 100644
index 00000000..684e96b6
--- /dev/null
+++ b/src/api/ApiClient.ts
@@ -0,0 +1,21 @@
+export interface Foo {
+	name: string;
+}
+
+export class ApiClient {
+	private readonly url: string;
+	constructor( opts: { url: string } ) {
+		this.url = opts.url;
+	}
+
+	async getFoo(): Promise< Foo > {
+		return new Promise( ( resolve ) => {
+			try {
+				resolve( { name: 'foo' } );
+			} catch ( error ) {
+				console.log( error );
+				throw error;
+			}
+		} );
+	}
+}
diff --git a/src/ui/session/ViewSession.tsx b/src/ui/session/ViewSession.tsx
index 38f9d102..26919e4c 100644
--- a/src/ui/session/ViewSession.tsx
+++ b/src/ui/session/ViewSession.tsx
@@ -1,14 +1,33 @@
 import { useSessionContext } from '@/ui/session/SessionProvider';
+import { ApiClient, Foo } from '@/api/ApiClient';
+import { useEffect, useState } from 'react';
 
 export function ViewSession() {
 	const { session, playgroundInfo } = useSessionContext();
 
+	const apiClient = playgroundInfo?.url
+		? new ApiClient( { url: playgroundInfo?.url } )
+		: null;
+
+	const [ foo, setFoo ] = useState< Foo >();
+	useEffect( () => {
+		if ( ! apiClient ) {
+			return;
+		}
+		const getFoo = async () => {
+			const result = await apiClient?.getFoo();
+			setFoo( result );
+		};
+		void getFoo();
+	}, [ playgroundInfo ] );
+
 	return (
 		<>
 			<div>view session: { session.id }</div>
 			{ playgroundInfo?.url ? (
 				<div>url: { playgroundInfo.url }</div>
 			) : null }
+			{ foo ? <div>{ foo.name }</div> : null }
 		</>
 	);
 }

From 75c2e60a635a80e5c24aaa29d6a8def6f9f0e485 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Sep 2024 10:19:45 +0100
Subject: [PATCH 4/7] Pass playground client to API client

---
 src/api/ApiClient.ts              | 15 ++++++++++++---
 src/ui/App.tsx                    |  8 ++++----
 src/ui/preview/Playground.tsx     | 23 ++++++++++++-----------
 src/ui/preview/Preview.tsx        | 11 ++++++-----
 src/ui/session/SessionProvider.ts |  4 ++--
 src/ui/session/ViewSession.tsx    | 14 +++++---------
 6 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/api/ApiClient.ts b/src/api/ApiClient.ts
index 684e96b6..cddabe96 100644
--- a/src/api/ApiClient.ts
+++ b/src/api/ApiClient.ts
@@ -1,11 +1,20 @@
+import { PlaygroundClient } from '@wp-playground/client';
+
 export interface Foo {
 	name: string;
 }
 
 export class ApiClient {
-	private readonly url: string;
-	constructor( opts: { url: string } ) {
-		this.url = opts.url;
+	private readonly playgroundClient: PlaygroundClient;
+	private readonly _siteUrl: string;
+
+	constructor( playgroundClient: PlaygroundClient, siteUrl: string ) {
+		this.playgroundClient = playgroundClient;
+		this._siteUrl = siteUrl;
+	}
+
+	get siteUrl(): string {
+		return this._siteUrl;
 	}
 
 	async getFoo(): Promise< Foo > {
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 133cd2fd..6cf4322c 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -18,8 +18,8 @@ import { Home } from '@/ui/start/Home';
 import { getConfig, setConfig } from '@/storage/config';
 import { getSession, listSessions, Session } from '@/storage/session';
 import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview';
-import { PlaygroundInfo } from '@/ui/preview/Playground';
 import { SessionContext, SessionProvider } from '@/ui/session/SessionProvider';
+import { ApiClient } from '@/api/ApiClient';
 
 export const Screens = {
 	home: () => '/start/home',
@@ -77,13 +77,13 @@ function App() {
 	}, [ location ] );
 
 	const session = useRouteLoaderData( 'session' ) as Session;
-	const [ playgroundInfo, setPlaygroundInfo ] = useState< PlaygroundInfo >();
-	const sectionContext: SessionContext = { session, playgroundInfo };
+	const [ apiClient, setApiClient ] = useState< ApiClient >();
+	const sectionContext: SessionContext = { session, apiClient };
 
 	const preview = ! session ? (
 		<PlaceholderPreview />
 	) : (
-		<Preview onReady={ setPlaygroundInfo } />
+		<Preview onReady={ setApiClient } />
 	);
 
 	return (
diff --git a/src/ui/preview/Playground.tsx b/src/ui/preview/Playground.tsx
index 4e7d9c96..5bf50c7b 100644
--- a/src/ui/preview/Playground.tsx
+++ b/src/ui/preview/Playground.tsx
@@ -4,17 +4,14 @@ import {
 	StartPlaygroundOptions,
 	startPlaygroundWeb,
 } from '@wp-playground/client';
+import { ApiClient } from '@/api/ApiClient';
 
 const playgroundIframeId = 'playground';
 
-export interface PlaygroundInfo {
-	url: string;
-}
-
 export function Playground( props: {
 	slug: string;
 	className?: string;
-	onReady: ( info: PlaygroundInfo ) => void;
+	onReady: ( apiClient: ApiClient ) => void;
 } ) {
 	const { slug, className, onReady } = props;
 
@@ -29,12 +26,16 @@ export function Playground( props: {
 		}
 
 		initPlayground( iframe, slug )
-			.then( async ( client: PlaygroundClient ) => {
-				const info = {
-					url: await client.absoluteUrl,
-				};
-				console.log( 'Playground communication established!', info );
-				onReady( info );
+			.then( async ( playgroundClient: PlaygroundClient ) => {
+				const apiClient = new ApiClient(
+					playgroundClient,
+					await playgroundClient.absoluteUrl
+				);
+				console.log(
+					'Playground communication established!',
+					apiClient.siteUrl
+				);
+				onReady( apiClient );
 			} )
 			.catch( ( error ) => {
 				throw error;
diff --git a/src/ui/preview/Preview.tsx b/src/ui/preview/Preview.tsx
index afcb4141..06fb934b 100644
--- a/src/ui/preview/Preview.tsx
+++ b/src/ui/preview/Preview.tsx
@@ -1,22 +1,23 @@
 import { useState } from 'react';
 import { PreviewTabBar } from '@/ui/preview/PreviewTabBar';
-import { Playground, PlaygroundInfo } from '@/ui/preview/Playground';
+import { Playground } from '@/ui/preview/Playground';
 import { useSessionContext } from '@/ui/session/SessionProvider';
+import { ApiClient } from '@/api/ApiClient';
 
 const tabFront = 0;
 const tabAdmin = 1;
 const defaultTab = tabFront;
 
 export function Preview( props: {
-	onReady: ( info: PlaygroundInfo ) => void;
+	onReady: ( apiClient: ApiClient ) => void;
 } ) {
 	const { onReady } = props;
 	const [ currentTab, setCurrentTab ] = useState< number >( defaultTab );
-	const { session, playgroundInfo } = useSessionContext();
+	const { session, apiClient } = useSessionContext();
 
 	const previewAdminUrl =
-		playgroundInfo?.url && playgroundInfo.url?.length > 0
-			? `${ playgroundInfo.url }/wp-admin/`
+		apiClient?.siteUrl && apiClient.siteUrl?.length > 0
+			? `${ apiClient.siteUrl }/wp-admin/`
 			: '';
 
 	const isPlaygroundLoading = previewAdminUrl === '';
diff --git a/src/ui/session/SessionProvider.ts b/src/ui/session/SessionProvider.ts
index 92033cbc..5043c75a 100644
--- a/src/ui/session/SessionProvider.ts
+++ b/src/ui/session/SessionProvider.ts
@@ -1,10 +1,10 @@
 import { createContext, useContext } from 'react';
 import { Session } from '@/storage/session';
-import { PlaygroundInfo } from '@/ui/preview/Playground';
+import { ApiClient } from '@/api/ApiClient';
 
 export interface SessionContext {
 	session: Session;
-	playgroundInfo?: PlaygroundInfo;
+	apiClient?: ApiClient;
 }
 
 const sessionContext = createContext< SessionContext >( {
diff --git a/src/ui/session/ViewSession.tsx b/src/ui/session/ViewSession.tsx
index 26919e4c..b599c900 100644
--- a/src/ui/session/ViewSession.tsx
+++ b/src/ui/session/ViewSession.tsx
@@ -1,13 +1,9 @@
 import { useSessionContext } from '@/ui/session/SessionProvider';
-import { ApiClient, Foo } from '@/api/ApiClient';
+import { Foo } from '@/api/ApiClient';
 import { useEffect, useState } from 'react';
 
 export function ViewSession() {
-	const { session, playgroundInfo } = useSessionContext();
-
-	const apiClient = playgroundInfo?.url
-		? new ApiClient( { url: playgroundInfo?.url } )
-		: null;
+	const { session, apiClient } = useSessionContext();
 
 	const [ foo, setFoo ] = useState< Foo >();
 	useEffect( () => {
@@ -19,13 +15,13 @@ export function ViewSession() {
 			setFoo( result );
 		};
 		void getFoo();
-	}, [ playgroundInfo ] );
+	}, [ apiClient?.siteUrl ] );
 
 	return (
 		<>
 			<div>view session: { session.id }</div>
-			{ playgroundInfo?.url ? (
-				<div>url: { playgroundInfo.url }</div>
+			{ apiClient?.siteUrl ? (
+				<div>url: { apiClient.siteUrl }</div>
 			) : null }
 			{ foo ? <div>{ foo.name }</div> : null }
 		</>

From 83368d59f2cf3ea2216d80143ee576f7c453adbd Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Sep 2024 10:56:35 +0100
Subject: [PATCH 5/7] Install wp-types

---
 package-lock.json | 16 +++++++++++++++-
 package.json      |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 934900f4..8ffdba67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,8 @@
 				"ts-loader": "^9.5.1",
 				"tsconfig-paths-webpack-plugin": "^4.1.0",
 				"typescript": "^5.5.4",
-				"web-ext": "^8.2.0"
+				"web-ext": "^8.2.0",
+				"wp-types": "^4.66.1"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -25399,6 +25400,19 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/wp-types": {
+			"version": "4.66.1",
+			"resolved": "https://registry.npmjs.org/wp-types/-/wp-types-4.66.1.tgz",
+			"integrity": "sha512-T2sEGcg3MdQ1vojiEMfzO4JpXUPdb+FWgflM6FZln0UTvFwmDBKyNyTik3ODu0nNdAtaSAJzR/HYyqBerKP31g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"typescript": ">=4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/johnbillion"
+			}
+		},
 		"node_modules/wrap-ansi": {
 			"version": "7.0.0",
 			"license": "MIT",
diff --git a/package.json b/package.json
index fd407580..2d535471 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,8 @@
 		"ts-loader": "^9.5.1",
 		"tsconfig-paths-webpack-plugin": "^4.1.0",
 		"typescript": "^5.5.4",
-		"web-ext": "^8.2.0"
+		"web-ext": "^8.2.0",
+		"wp-types": "^4.66.1"
 	},
 	"dependencies": {
 		"@wp-playground/client": "^0.9.31",

From 2f5a19e31925e9c6a98153416e50f67abf86add9 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Sep 2024 10:57:14 +0100
Subject: [PATCH 6/7] Retrieve posts using the REST API

---
 src/api/ApiClient.ts           | 36 ++++++++++++++++++++++++----------
 src/ui/session/ViewSession.tsx | 17 +++++++++-------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/api/ApiClient.ts b/src/api/ApiClient.ts
index cddabe96..87733800 100644
--- a/src/api/ApiClient.ts
+++ b/src/api/ApiClient.ts
@@ -1,7 +1,11 @@
+/* eslint-disable camelcase */
+
 import { PlaygroundClient } from '@wp-playground/client';
+import type { WP_REST_API_Posts } from 'wp-types';
 
-export interface Foo {
-	name: string;
+export interface Post {
+	id: number;
+	title: string;
 }
 
 export class ApiClient {
@@ -17,14 +21,26 @@ export class ApiClient {
 		return this._siteUrl;
 	}
 
-	async getFoo(): Promise< Foo > {
-		return new Promise( ( resolve ) => {
-			try {
-				resolve( { name: 'foo' } );
-			} catch ( error ) {
-				console.log( error );
-				throw error;
-			}
+	async getPosts(): Promise< Post[] > {
+		const response = ( await this.get(
+			'/wp/v2/posts'
+		) ) as WP_REST_API_Posts;
+
+		return response.map( ( post ) => {
+			return {
+				id: post.id,
+				title: post.title.rendered,
+			};
+		} );
+	}
+
+	private async get( route: string ): Promise< object > {
+		const response = await this.playgroundClient.request( {
+			url: `/index.php?rest_route=${ route }`,
+			method: 'GET',
 		} );
+		return response.json;
 	}
 }
+
+/* eslint-enable camelcase */
diff --git a/src/ui/session/ViewSession.tsx b/src/ui/session/ViewSession.tsx
index b599c900..4f6a1597 100644
--- a/src/ui/session/ViewSession.tsx
+++ b/src/ui/session/ViewSession.tsx
@@ -1,20 +1,19 @@
 import { useSessionContext } from '@/ui/session/SessionProvider';
-import { Foo } from '@/api/ApiClient';
+import { Post } from '@/api/ApiClient';
 import { useEffect, useState } from 'react';
 
 export function ViewSession() {
 	const { session, apiClient } = useSessionContext();
 
-	const [ foo, setFoo ] = useState< Foo >();
+	const [ posts, setPosts ] = useState< Post[] >( [] );
 	useEffect( () => {
 		if ( ! apiClient ) {
 			return;
 		}
-		const getFoo = async () => {
-			const result = await apiClient?.getFoo();
-			setFoo( result );
+		const getPosts = async () => {
+			setPosts( await apiClient.getPosts() );
 		};
-		void getFoo();
+		void getPosts();
 	}, [ apiClient?.siteUrl ] );
 
 	return (
@@ -23,7 +22,11 @@ export function ViewSession() {
 			{ apiClient?.siteUrl ? (
 				<div>url: { apiClient.siteUrl }</div>
 			) : null }
-			{ foo ? <div>{ foo.name }</div> : null }
+			<ul>
+				{ posts.map( ( post ) => {
+					return <li key={ post.id }>{ post.title }</li>;
+				} ) }
+			</ul>
 		</>
 	);
 }

From e73be66f0979e17281a63fc9acd7080962f020dd Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Sep 2024 11:10:22 +0100
Subject: [PATCH 7/7] Throw API errors

---
 src/api/ApiClient.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/api/ApiClient.ts b/src/api/ApiClient.ts
index 87733800..feec9df8 100644
--- a/src/api/ApiClient.ts
+++ b/src/api/ApiClient.ts
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 
 import { PlaygroundClient } from '@wp-playground/client';
-import type { WP_REST_API_Posts } from 'wp-types';
+import { WP_REST_API_Post } from 'wp-types';
 
 export interface Post {
 	id: number;
@@ -24,7 +24,7 @@ export class ApiClient {
 	async getPosts(): Promise< Post[] > {
 		const response = ( await this.get(
 			'/wp/v2/posts'
-		) ) as WP_REST_API_Posts;
+		) ) as WP_REST_API_Post[];
 
 		return response.map( ( post ) => {
 			return {
@@ -39,6 +39,9 @@ export class ApiClient {
 			url: `/index.php?rest_route=${ route }`,
 			method: 'GET',
 		} );
+		if ( response.httpStatusCode !== 200 ) {
+			throw Error( response.json.message );
+		}
 		return response.json;
 	}
 }