Merge pull request #47 from WordPress/correct-api-calls

Save post data

src/api/ApiClient.ts

@@ -3,6 +3,15 @@
 import { PlaygroundClient } from '@wp-playground/client';
 import { Post } from '@/api/Post';
 
+export interface CreatePostBody {
+ guid: string;
+}
+
+export interface UpdatePostBody {
+ title?: string;
+ content?: { cleanHtml: string; originalHtml: string };
+}
+
 export class ApiClient {
  private readonly playgroundClient: PlaygroundClient;
  private readonly _siteUrl: string;
@@ -16,30 +25,36 @@ export class ApiClient {
  return this._siteUrl;
  }
 
- async createPost( data: { guid: string } ): Promise< Post > {
- const { guid } = data;
+ async createPost( body: CreatePostBody ): Promise< Post > {
  return ( await this.post( '/liberated_posts', {
  meta: {
- guid,
+ guid: body.guid,
  },
  } ) ) as Post;
  }
 
- async updatePost( id: number, data: { title: string } ): Promise< Post > {
- return ( await this.post( `/liberated_posts/${ id }`, {
- title: data.title,
- } ) ) as Post;
+ async updatePost( id: number, body: UpdatePostBody ): Promise< Post > {
+ const actualBody: any = {};
+ if ( body.title ) {
+ actualBody.title = body.title;
+ }
+ if ( body.content ) {
+ actualBody.content = body.content.cleanHtml;
+ actualBody.meta = {
+ raw_content: body.content.originalHtml,
+ };
+ }
+ return ( await this.post(
+ `/liberated_posts/${ id }`,
+ actualBody
+ ) ) as Post;
  }
 
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  async getPostByGuid( guid: string ): Promise< Post | null > {
  return null;
  }
 
- async getPosts(): Promise< Post[] > {
- return ( await this.get( '/posts' ) ) as Post[];
- }
-
  private async get( route: string ): Promise< object > {
  const response = await this.playgroundClient.request( {
  url: `/index.php?rest_route=/wp/v2${ route }`,
@@ -56,8 +71,12 @@ export class ApiClient {
  const response = await this.playgroundClient.request( {
  url: `/index.php?rest_route=/wp/v2${ route }`,
  method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
  body: JSON.stringify( body ),
  } );
+
  if ( response.httpStatusCode < 200 || response.httpStatusCode >= 300 ) {
  console.error( response );
  throw Error( response.json.message );

src/ui/flows/blog-post/SelectContent.tsx

@@ -79,19 +79,26 @@ export function SelectContent( props: { post: Post; onExit: () => void } ) {
  // Save the post when selections happen.
  useEffect(
  () => {
- if ( ! title ) {
- return;
+ if ( apiClient && title ) {
+ apiClient
+ .updatePost( post.id, { title: title.cleanHtml } )
+ .then( () => playgroundClient.goTo( post.link ) );
  }
- apiClient
- ?.updatePost( post.id, {
- title: title.cleanHtml ?? post.title.raw ?? '',
- } )
- .then( () => playgroundClient.goTo( post.link ) );
  },
- // The dependencies are correct, we only want to trigger it when the title changes.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [ title ]
  );
+ useEffect(
+ () => {
+ if ( apiClient && content ) {
+ apiClient
+ .updatePost( post.id, { content } )
+ .then( () => playgroundClient.goTo( post.link ) );
+ }
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [ content ]
+ );
 
  const isValid = title && date && content;
  return (