chore (DVIZ-42): enhance API structure and type definitions

Author: timothygachengo

wp-react-lib/package.json

@@ -68,6 +68,11 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
+    },
+    "./api": {
+      "types": "./dist/types/api/index.d.ts",
+      "import": "./dist/esm/api/index.js",
+      "require": "./dist/cjs/api/index.js"
     }
   }
 }

wp-react-lib/src/api/index.ts

@@ -1,4 +1,5 @@
-import type { Media } from "../types"
+import type { PageResponse } from "../post-type"
+import type { DgSettings, Media } from "../types"
 
 const API_ROOT = process.env.VITE_REACT_APP_WP_API ?? '/wp/wp-json'
 const URL_MENU = API_ROOT + '/menus/v1/menus/'
@@ -92,37 +93,52 @@ export const getTaxonomy = (name: string, locale: string) => {
 }
 
 //TODO:make a unique getPost method
-export const getPostsByTypeAndTaxonomy = (type: string, category: string, value: string, locale: string, page = 1, perPage = 1) => {
+export const getPostsByTypeAndTaxonomy = (
+    {type, category, value, locale, page = 1, perPage = 1}:
+    {type: string, category: string, value: string, locale: string, page?: number, perPage?: number}) => {
     return get(URL_API_BASE + type + "?_embed&" + category + '=' + value + '&lang=' + locale + '&per_page=' + perPage + '&page=' + page)
 }
 
 
-export const getSettings=(locale: string,changeUUID: string)=>{
-    return get(URL_SETTINGS+'?cacheBust='+((Math.random() + 1).toString(36).substring(7))+'&lang='+locale+(changeUUID?'&customize_changeset_uuid='+changeUUID:''))
+export const getSettings=(locale: string,changeUUID?: string) : Promise<DgSettings> =>{
+    return get(URL_SETTINGS+'?cacheBust='+((Math.random() + 1).toString(36).substring(7))+'&lang='+locale+(changeUUID?'&customize_changeset_uuid='+changeUUID:'')) as Promise<DgSettings>
 }
 
 export const getMenu = (name: string, locale: string) => {
     return get(URL_MENU + name + '?lang=' + locale)
 }
 
-export const getPosts = (
-    slug: string,
-    type: string,
-    taxonomy: string,
-    categories: string,
-    before: Date,
-    perPage: number,
-    page: number,
-    fields: string,
-    locale: string,
-    previewNonce: string,
-    previewId: string,
-    search: string
-) => {
+export const getPosts = ({
+    slug,
+    type,
+    taxonomy,
+    categories,
+    before,
+    perPage,
+    page,
+    fields,
+    locale,
+    previewNonce,
+    previewId,
+    search
+}: {
+    slug?: string;
+    type?: string;
+    taxonomy?: string;
+    categories?: string;
+    before?: Date;
+    perPage?: number;
+    page?: number;
+    fields?: string;
+    locale?: string;
+    previewNonce?: string;
+    previewId?: string;
+    search?: string;
+}) => {
     //language , categories id, date before, record per page, number of page, fields to be included, post type
     //const {lang, slug, wType: type, taxonomy, categories, before, perPage, page, fields} = params
 
-    let url = URL_API_BASE + (type ? type : 'posts')
+    let url = URL_API_BASE + (type ?? 'posts')
     if (previewId) {
         url += '/' + previewId + '/revisions'
             + (previewNonce ? '?_wpnonce=' + previewNonce + '&' : '')
@@ -133,7 +149,7 @@ export const getPosts = (
         + (slug ? '&slug=' + slug : '')
     if (!slug) {
         url += (categories ? (taxonomy ? '&' + taxonomy : '&categories')
-                + "=" + (categories ? categories : "") : '') //ids
+                + "=" + (categories ??  "") : '') //ids
             + (before ? "&before=" + before.toISOString() : "")
             + (perPage ? '&per_page=' + perPage : '')
             + (page ? '&page=' + page : '')
@@ -142,22 +158,34 @@ export const getPosts = (
     }
 
     //url += "&lang=" + locale
-    return get(url)
+    return get(url);
 }
 
-export const getPages = (
-    before: Date,
-    perPage: number,
-    page: number,
-    fields: string,
-    parent: string,
-    slug: string,
-    locale: string,
-    previewNonce: string,
-    previewId: string,
-    search: string,
-    noCache: boolean) => {
-
+export const getPages = ({
+    before,
+    perPage,
+    page,
+    fields,
+    parent,
+    slug,
+    locale,
+    previewNonce,
+    previewId,
+    search,
+    noCache
+}: {
+    before?: Date;
+    perPage?: number;
+    page?: number;
+    fields?: string;
+    parent?: string;
+    slug?: string;
+    locale?: string;
+    previewNonce?: string;
+    previewId?: string;
+    search?: string;
+    noCache?: boolean;
+}) => {
     let url = URL_PAGE
 
     if (previewId) {
@@ -178,17 +206,17 @@ export const getPages = (
             + (search ? '&search=' + search : '')
             + (noCache ? '&cacheBust='+((Math.random() + 1).toString(36).substring(7)) : '')
     }
-    return get(url)
+    return get(url) as Promise<PageResponse>
 }
 
 export const search = (
-    context: string,
-    page: number,
-    perPage: number,
-    search: string,
-    type: string,
-    subtype: string,
-    locale: string) => {
+    context?: string,
+    page?: number,
+    perPage?: number,
+    search?: string,
+    type?: string,
+    subtype?: string,
+    locale?: string) => {
     let url = URL_SEARCH + '?lang=' + locale
         + (context ? "&context=" + context : '')
         + (perPage ? '&per_page=' + perPage : '')

wp-react-lib/src/index.js

@@ -33,7 +33,7 @@ import SearchProvider from "./providers/SearchProvider";
 import utils from "./util";
 import wordpress from "./reducers/wordpress";
 
-import { SettingsContext } from './providers/Context'
+import { SettingsContext, PageContext, AppContext, PostContext } from './providers/Context'
 
 export {
     Post,
@@ -63,7 +63,11 @@ export {
     PostIcon,
     SearchConsumer,
     SearchProvider,
-    SettingsContext
+    SettingsContext,
+    PageContext,
+    AppContext,
+    PostContext
 }
 
 export * from './types';
+export * from './post-type';

wp-react-lib/src/post-type.ts

@@ -34,6 +34,8 @@ export interface Post {
     _links:          PostLinks;
 }
 
+export type PostType = Post;
+
 export interface PostLinks {
     self:                  Self[];
     collection:            About[];
@@ -107,7 +109,9 @@ export interface PostYoastHeadJSON {
     twitter_site?:           string;
     twitter_misc?:           PostTwitterMisc;
     schema?:                 PostSchema;
-    og_description?:        string;
+    og_description?:         string;
+    description?:            string;
+    twitter_image?:          string;
 }
 
 
@@ -216,4 +220,18 @@ export interface TargetClass {
 export interface PostTwitterMisc {
     "Written by":         string;
     "Est. reading time"?: string;
+}
+
+
+export interface PageMetaResponse {
+    "content-type": string;
+    "link": string;
+    "x-wp-total": string;
+    "x-wp-totalpages": string;
+}
+
+
+export interface PageResponse {
+    data: Post[];
+    meta: PageMetaResponse;
 }

wp-react-lib/src/reducers/actions.js

@@ -53,7 +53,7 @@ export const getPostByTaxonomy = ({
 
     dispatch({type: LOAD_CUSTOM_POSTS_BY_TAXONOMY, ...payLoad})
 
-    wp.getPostsByTypeAndTaxonomy(wpType, taxonomy, categoryId, locale, page, perPage)
+    wp.getPostsByTypeAndTaxonomy({type: wpType, category: taxonomy, value: categoryId, locale, page, perPage})
         .then(response => {
             const {data, meta} = response
             dispatch({type: LOAD_CUSTOM_POSTS_BY_TAXONOMY_DONE, data, meta, ...payLoad})
@@ -81,7 +81,7 @@ export const getPosts = ({
 
     dispatch({type: LOAD_POSTS, slug, taxonomy, categories, before, perPage, page, fields, store, locale})
 
-    wp.getPosts(slug, type, taxonomy, categories, before, perPage, page, fields, locale, previewNonce, previewId, search)
+    wp.getPosts({slug, type, taxonomy, categories, before, perPage, page, fields, locale, previewNonce, previewId, search})
         .then(response => {
             const {data, meta} = response
             dispatch({
@@ -151,7 +151,7 @@ export const getPages = ({
                          }) => (dispatch, getState) => {
 
     dispatch({type: LOAD_PAGES, store})
-    wp.getPages(before, perPage, page, fields, parent, slug, store, locale, previewNonce, previewId, search)
+    wp.getPages({before, perPage, page, fields, parent, slug, locale, previewNonce, previewId, search})
         .then(response => {
             const {data, meta} = response
             dispatch({

wp-react-lib/vite.config.ts

@@ -39,6 +39,7 @@ export default defineConfig({
             ],
             input: {
                 index: resolve(__dirname, 'src/index.js'),
+                'api/index': resolve(__dirname, 'src/api/index.js'),
             },
             plugins: [preserveDirectives()],
             output: [