MAINHACK

Viewing / Editing File: useRouter.js

import apiFetch from '@wordpress/api-fetch';
import { useCallback, useEffect } from '@wordpress/element';
import { useActivityStore } from '@shared/state/activity';
import { create } from 'zustand';
import { devtools, persist, createJSONStorage } from 'zustand/middleware';
import { routes as aiRoutes } from '@draft/pages/GenerateImage';
import { routes as generalRoutes } from '@draft/pages/Home';
import { routes as unsplashRoutes } from '@draft/pages/Unsplash';

const pages = [...generalRoutes, ...aiRoutes, ...unsplashRoutes];

const path = '/extendify/v1/draft/router-data';
const storage = {
	getItem: async () => await apiFetch({ path }),
	setItem: async (_name, state) =>
		await apiFetch({ path, method: 'POST', data: { state } }),
};

const useRouterState = create(
	persist(devtools(state, { name: 'Extendify Draft Router' }), {
		name: 'extendify-draft-router',
		storage: createJSONStorage(() => storage),
		skipHydration: true,
		partialize: ({ viewedPages }) => ({ viewedPages }),
	}),
);

export const useRouter = () => {
	const { current, setCurrent, history, goBack } = useRouterState();
	const Component = current?.component ?? (() => null);
	useEffect(() => {
		if (current) return;
		setCurrent(pages[0]);
	}, [current, setCurrent]);
	return {
		current,
		CurrentPage: useCallback(
			() => (
				<div role="region" aria-live="polite" className="h-full">
					{/* Announce to SR on change */}
					<h1 className="sr-only">{current?.title}</h1>
					<Component />
				</div>
			),
			[current],
		),
		navigateTo: (slug) => {
			const page = pages.find((a) => a.slug === slug);
			if (!page) return setCurrent(pages[0]);

useActivityStore.getState().incrementActivity(`draft-${page.slug}`);
			setCurrent(page);
		},
		goBack,
		history,
	};
};

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: useRouter.js

Server Info

System Features

User Info