@elementor/editor-site-navigation 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.6.2...@elementor/editor-site-navigation@0.7.0) (2023-06-25)
+
+
+### Features
+
+* **api:** add PostsData class for managing post data and API interactions [ED-11021] ([#57](https://github.com/elementor/elementor-packages/issues/57)) ([a7b93ac](https://github.com/elementor/elementor-packages/commit/a7b93acfc00076f9452cf86f04670412c42b5773))
+
+
+
+
+
 ## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.6.1...@elementor/editor-site-navigation@0.6.2) (2023-06-13)
 
 **Note:** Version bump only for package @elementor/editor-site-navigation

package/README.md

@@ -3,3 +3,51 @@
 > **Warning**
 > 
 > This package is under development and not ready for production use.
+
+## Code examples
+
+**Get all pages and create a new one:**
+
+```
+import * as React from 'react';
+import { useEffect } from 'react';
+import { usePosts } from './use-posts';
+
+const PageList = () => {
+	const { getPosts: getPages, createPost: createPage, isLoading, posts } = usePosts( 'page' );
+
+	useEffect( () => {
+		getPages();
+	}, [ getPages ] );
+
+	const createNewPage = () => {
+		const newPage = {
+			title: 'New Page',
+			content: 'This is a demo page',
+			status: 'publish',
+		};
+
+		createPage( newPage );
+	};
+
+	if ( isLoading ) {
+		return <div>Loading...</div>;
+	}
+
+	return (
+		<div>
+			<h1>Pages</h1>
+			<button onClick={ createNewPage }>Create New Page</button>
+			<ul>
+				{
+					posts.map( ( page ) => (
+						<li key={ page.id }>{ page.title }</li>
+					) )
+				}
+			</ul>
+		</div>
+	);
+};
+
+export default PageList;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.6.2",
+	"version": "0.7.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,8 +32,8 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.6.1",
-		"@elementor/editor-documents": "^0.8.1",
+		"@elementor/editor-app-bar": "^0.6.2",
+		"@elementor/editor-documents": "^0.8.2",
 		"@elementor/icons": "^0.4.0",
 		"@elementor/ui": "^1.4.50",
 		"@wordpress/api-fetch": "^6.27.0",
@@ -46,5 +46,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "064efc4a576a4f74c32f838e9c89419bd973e112"
+	"gitHead": "ad9032e095915dbef0f8543d83f73b9288adc8ad"
 }

package/src/hooks/types/interfaces.ts

@@ -0,0 +1,13 @@
+export interface Post {
+	id: number;
+	title: string;
+	content: string;
+}
+
+export interface PostType {
+	name: string;
+	slug: string;
+	labels: Record<string, string>;
+	rest_base: string;
+	rest_namespace: string;
+}

package/src/hooks/use-post-types.ts

@@ -0,0 +1,64 @@
+import { useState, useEffect, useMemo } from 'react';
+import { PostType } from './types/interfaces';
+import apiFetch from '@wordpress/api-fetch';
+
+type PostTypesResponse = Record<string, PostType>;
+
+// allowedPostTypes is only used to filter irrelevant types when fetching all post types.
+// You can still use a specific post type name to fetch a post type not present in allowedPostTypes.
+const allowedPostTypes = [ 'page' ];
+
+const useFetchPostTypes = (
+	postTypeName?: string
+): ( PostType | null )[] => {
+	const [ postTypes, setPostTypes ] = useState<( PostType | null )[]>( [] );
+
+	useEffect( () => {
+		const fetchPostTypes = async () => {
+			try {
+				const response: PostTypesResponse = await apiFetch( {
+					path: '/wp/v2/types',
+				} );
+
+				if ( postTypeName ) {
+					const specificPostType = response[ postTypeName ];
+
+					setPostTypes( [
+						specificPostType
+							? { ...specificPostType }
+							: null,
+					] );
+				} else {
+					const filteredResponse: PostTypesResponse = {};
+
+					allowedPostTypes.forEach( ( type ) => {
+						if ( response[ type ] ) {
+							filteredResponse[ type ] = response[ type ];
+						}
+					} );
+
+					const filteredPostTypes: ( PostType | null )[] = Object.keys( filteredResponse ).map(
+						( key ) => ( { ...filteredResponse[ key ] } )
+					);
+
+					setPostTypes( filteredPostTypes );
+				}
+			} catch ( error ) {
+				// eslint-disable-next-line no-console
+				console.error( 'Error fetching post types:', error );
+			}
+		};
+
+		fetchPostTypes();
+	}, [ postTypeName ] );
+
+	return postTypes;
+};
+
+export const usePostTypes = (
+	postTypeName?: string
+): ( PostType | null )[] => {
+	const postTypes = useFetchPostTypes( postTypeName );
+
+	return useMemo( () => postTypes, [ postTypes ] );
+};

package/src/hooks/use-posts.ts

@@ -0,0 +1,123 @@
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { usePostTypes } from './use-post-types';
+import { Post, PostType } from './types/interfaces';
+import apiFetch from '@wordpress/api-fetch';
+
+const defaultRestNamespace = 'wp/v2';
+
+const useFetchPosts = ( postType: PostType | null | undefined ): [ Post[], () => void, boolean ] => {
+	const [ posts, setPosts ] = useState<Post[]>( [] );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	const fetchPosts = useCallback( () => {
+		setIsLoading( true );
+
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( { path } )
+			.then( ( response ) => {
+				if ( Array.isArray( response ) ) {
+					setPosts( response );
+				}
+			} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error fetching posts:', error );
+			} )
+			.finally( () => {
+				setIsLoading( false );
+			} );
+	}, [ postType ] );
+
+	useEffect( () => {
+		fetchPosts();
+	}, [ fetchPosts ] );
+
+	return [ posts, fetchPosts, isLoading ];
+};
+
+const useUpdatePost = ( postType: PostType | null | undefined ): ( ( postId: number, updatedPost: Partial<Post> ) => void ) => {
+	return ( postId: number, updatedPost: Partial<Post> ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path: `/${ path }/${ postId }`,
+			method: 'POST',
+			data: updatedPost,
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error updating post:', error );
+			} );
+	};
+};
+
+const useCreatePost = ( postType: PostType | null | undefined ): ( ( newPost: Partial<Post> ) => void ) => {
+	return ( newPost: Partial<Post> ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path,
+			method: 'POST',
+			data: newPost,
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error creating post:', error );
+			} );
+	};
+};
+
+const useDeletePost = ( postType: PostType | null | undefined ): ( ( postId: number ) => void ) => {
+	return ( postId: number ) => {
+		const path = postType
+			? `/${ postType.rest_namespace }/${ postType.rest_base }`
+			: `/${ defaultRestNamespace }/posts`;
+
+		apiFetch( {
+			path: `/${ path }/${ postId }`,
+			method: 'DELETE',
+		} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Error deleting post:', error );
+			} );
+	};
+};
+
+export const usePosts = ( postType?: string | null ): {
+	posts: Post[];
+	getPosts: () => void;
+	updatePost: ( postId: number, updatedPost: Partial<Post> ) => void;
+	createPost: ( newPost: Partial<Post> ) => void;
+	deletePost: ( postId: number ) => void;
+	isLoading: boolean;
+} => {
+	const postTypes = usePostTypes();
+	const postTypeData = postTypes.find( ( type ) => type?.name === postType );
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [ posts, fetchPosts, isLoading ] = useFetchPosts( postTypeData );
+	const updatePost = useUpdatePost( postTypeData );
+	const createPost = useCreatePost( postTypeData );
+	const deletePost = useDeletePost( postTypeData );
+
+	const getPosts = useMemo( () => {
+		return () => posts;
+	}, [ posts ] );
+
+	return {
+		posts,
+		getPosts,
+		updatePost,
+		createPost,
+		deletePost,
+		isLoading,
+	};
+};