Improve performance by removing unnecessary hook (#193)

* Improve performance by removing unnecessary hook * Update pr-checks.yml * Fix bot token test * Update pr-checks.yml
wpsocio · Oct 26, 2024 · 35f1abc · 35f1abc
1 parent 1d2b4bd
commit 35f1abc
Show file tree

Hide file tree

Showing 53 changed files with 217 additions and 196 deletions.
diff --git a/.changeset/six-dolls-raise.md b/.changeset/six-dolls-raise.md
@@ -0,0 +1,8 @@
+---
+"wptelegram-comments": patch
+"wptelegram-widget": patch
+"wptelegram-login": patch
+"wptelegram": patch
+---
+
+Performance improvements
diff --git a/packages/js/services/use-plugin-data.ts → packages/js/services/get-plugin-data.ts b/packages/js/services/use-plugin-data.ts → packages/js/services/get-plugin-data.ts
@@ -1,13 +1,15 @@
 import type { BaseDOMData } from './types';
 
-export const usePluginData = <
+export const getPluginData = <
 	PluginData extends BaseDOMData,
 	K extends keyof PluginData | undefined = undefined,
 >(
 	plugin: string,
 	dataKey?: K,
 ): K extends keyof PluginData ? PluginData[K] : PluginData => {
 	const pluginData = window[plugin];
-	// @ts-ignore
-	return dataKey ? pluginData?.[dataKey] : pluginData;
+	return dataKey
+		? // @ts-expect-error
+			pluginData?.[dataKey]
+		: pluginData;
 };
diff --git a/...-comments/js/settings/services/useData.ts → ...mments/js/settings/services/getDomData.ts b/...-comments/js/settings/services/useData.ts → ...mments/js/settings/services/getDomData.ts
@@ -1,12 +1,12 @@
-import { usePluginData } from '@wpsocio/services/use-plugin-data.js';
+import { getPluginData } from '@wpsocio/services/get-plugin-data.js';
 import type { WPTelegramCommentsData } from './types';
 
-export const useData = <
+export const getDomData = <
 	K extends keyof WPTelegramCommentsData | undefined = undefined,
 >(
 	key?: K,
 ): K extends keyof WPTelegramCommentsData
 	? WPTelegramCommentsData[K]
 	: WPTelegramCommentsData => {
-	return usePluginData('wptelegram_comments', key);
+	return getPluginData('wptelegram_comments', key);
 };
diff --git a/plugins/wptelegram-comments/js/settings/services/index.ts b/plugins/wptelegram-comments/js/settings/services/index.ts
@@ -1,6 +1,6 @@
 export * from './fields';
 export * from './types';
-export * from './useData';
+export * from './getDomData';
 export * from './useInit';
 export * from './useOnInvalid';
 export * from './useOnSubmit';

diff --git a/plugins/wptelegram-comments/js/settings/services/useInit.ts b/plugins/wptelegram-comments/js/settings/services/useInit.ts
@@ -1,12 +1,10 @@
 import botApi from '@wpsocio/services/telegram/telegram-api.js';
 import { useEffect } from 'react';
-import { useData } from './useData';
+import { getDomData } from './getDomData';
 
 export const useInit = () => {
-	const { api } = useData();
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
+		const { api } = getDomData();
 		botApi.setApiData(api || {});
 	}, []);
 

diff --git a/plugins/wptelegram-comments/js/settings/services/useOnSubmit.ts b/plugins/wptelegram-comments/js/settings/services/useOnSubmit.ts
@@ -2,15 +2,15 @@ import type { SubmitHandler, UseFormReturn } from '@wpsocio/form';
 import { useSubmitForm } from '@wpsocio/services/use-submit-form.js';
 import { useCallback } from 'react';
 import { getErrorMessage } from './fields';
+import { getDomData } from './getDomData';
 import type { DataShape } from './types';
-import { useData } from './useData';
 import { normalizeData, prepDefaultValues } from './utils';
 
+const { rest_namespace } = getDomData('api') || {};
+
 export const useOnSubmit = (
 	form: UseFormReturn<DataShape>,
 ): SubmitHandler<DataShape> => {
-	const { rest_namespace } = useData('api') || {};
-
 	const path = `${rest_namespace}/settings`;
 
 	const submitForm = useSubmitForm<DataShape>({

diff --git a/plugins/wptelegram-comments/js/settings/ui/App.tsx b/plugins/wptelegram-comments/js/settings/ui/App.tsx
@@ -1,11 +1,10 @@
 import { Form, useForm, zodResolver } from '@wpsocio/form';
 import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
-import { useMemo } from 'react';
 import { ROOT_ID } from '../constants';
 import {
+	getDomData,
 	prepDefaultValues,
-	useData,
 	useInit,
 	useOnInvalid,
 	useOnSubmit,
@@ -18,16 +17,11 @@ import Sidebar from './Sidebar';
 
 const resolver = zodResolver(validationSchema);
 
+const defaultValues = prepDefaultValues(getDomData().savedSettings);
+
 const App: React.FC = () => {
 	useInit();
 
-	const { savedSettings } = useData();
-
-	const defaultValues = useMemo(
-		() => prepDefaultValues(savedSettings),
-		[savedSettings],
-	);
-
 	const form = useForm({ defaultValues, resolver, mode: 'onBlur' });
 
 	const onSubmit = useOnSubmit(form);

diff --git a/plugins/wptelegram-comments/js/settings/ui/Configuration.tsx b/plugins/wptelegram-comments/js/settings/ui/Configuration.tsx
@@ -8,11 +8,12 @@ import {
 	FormControl,
 	FormField,
 } from '@wpsocio/ui-components/wrappers/form.js';
-import { type DataShape, getFieldLabel, useData } from '../services';
+import { type DataShape, getDomData, getFieldLabel } from '../services';
 import { Code } from './Code';
 
+const { post_types } = getDomData('uiData');
+
 export const Configuration = () => {
-	const { post_types } = useData('uiData');
 	const { control } = useFormContext<DataShape>();
 
 	return (

diff --git a/plugins/wptelegram-comments/js/settings/ui/Header.tsx b/plugins/wptelegram-comments/js/settings/ui/Header.tsx
@@ -1,8 +1,8 @@
 import { PluginHeader } from '@wpsocio/shared-ui/components/plugin-info/plugin-header.js';
-import { useData } from '../services';
+import { getDomData } from '../services';
 
-export const Header = () => {
-	const { pluginInfo, assets } = useData();
+const { pluginInfo, assets } = getDomData();
 
+export const Header = () => {
 	return <PluginHeader {...pluginInfo} assets={assets} />;
 };
diff --git a/plugins/wptelegram-comments/js/settings/ui/Sidebar.tsx b/plugins/wptelegram-comments/js/settings/ui/Sidebar.tsx
@@ -3,13 +3,14 @@ import { __ } from '@wpsocio/i18n';
 import { PluginInfoCard } from '@wpsocio/shared-ui/components/plugin-info/plugin-info-card';
 import { WPTGSocialIcons } from '@wpsocio/shared-ui/components/wptg-social-icons.js';
 import { FormDebug } from '@wpsocio/shared-ui/form/form-debug';
-import { useData } from '../services';
+import { getDomData } from '../services';
+
+const {
+	pluginInfo: { title },
+	assets: { tgIconUrl },
+} = getDomData();
 
 const Sidebar: React.FC = () => {
-	const {
-		pluginInfo: { title },
-		assets: { tgIconUrl },
-	} = useData();
 	const { watch } = useFormContext();
 
 	return (

diff --git a/plugins/wptelegram-login/js/blocks/telegram-login/Edit.tsx b/plugins/wptelegram-login/js/blocks/telegram-login/Edit.tsx
@@ -13,8 +13,8 @@ import { useCallback, useEffect } from '@wordpress/element';
 import { __ } from '@wpsocio/i18n';
 
 import { Output } from './Output';
+import { getDomData } from './getDomData';
 import type { TelegramLoginAtts } from './types';
-import { useData } from './useData';
 
 const getButtonStyleOptions = () => [
 	{ label: __('Large'), value: 'large' },
@@ -46,7 +46,7 @@ export const Edit: React.FC<BlockEditProps<TelegramLoginAtts>> = ({
 		}
 	}, []);
 
-	const uiData = useData('uiData');
+	const uiData = getDomData('uiData');
 
 	const onChangeButtonStyle = useCallback(
 		(newStyle: string) => setAttributes({ button_style: newStyle }),

diff --git a/plugins/wptelegram-login/js/blocks/telegram-login/Output.tsx b/plugins/wptelegram-login/js/blocks/telegram-login/Output.tsx
@@ -1,12 +1,13 @@
 import type { BlockEditProps } from '@wordpress/blocks';
 
+import { getDomData } from './getDomData';
 import type { TelegramLoginAtts } from './types';
-import { useData } from './useData';
+
+const assets = getDomData('assets');
 
 export const Output: React.FC<
 	Pick<BlockEditProps<TelegramLoginAtts>, 'attributes' | 'className'>
 > = ({ attributes, className }) => {
-	const assets = useData('assets');
 	const { button_style, show_user_photo, corner_radius } = attributes;
 
 	let button_width: string | undefined;

diff --git a/...ram-login/js/settings/services/useData.ts → ...in/js/blocks/telegram-login/getDomData.ts b/...ram-login/js/settings/services/useData.ts → ...in/js/blocks/telegram-login/getDomData.ts
@@ -1,12 +1,12 @@
-import { usePluginData } from '@wpsocio/services/use-plugin-data.js';
+import { getPluginData } from '@wpsocio/services/get-plugin-data.js';
 import type { WPTelegramLoginData } from './types';
 
-export const useData = <
+export const getDomData = <
 	K extends keyof WPTelegramLoginData | undefined = undefined,
 >(
 	key?: K,
 ): K extends keyof WPTelegramLoginData
 	? WPTelegramLoginData[K]
 	: WPTelegramLoginData => {
-	return usePluginData('wptelegram_login', key);
+	return getPluginData('wptelegram_login', key);
 };
diff --git a/...login/js/blocks/telegram-login/useData.ts → ...-login/js/settings/services/getDomData.ts b/...login/js/blocks/telegram-login/useData.ts → ...-login/js/settings/services/getDomData.ts
@@ -1,12 +1,12 @@
-import { usePluginData } from '@wpsocio/services/use-plugin-data';
+import { getPluginData } from '@wpsocio/services/get-plugin-data.js';
 import type { WPTelegramLoginData } from './types';
 
-export const useData = <
+export const getDomData = <
 	K extends keyof WPTelegramLoginData | undefined = undefined,
 >(
 	key?: K,
 ): K extends keyof WPTelegramLoginData
 	? WPTelegramLoginData[K]
 	: WPTelegramLoginData => {
-	return usePluginData('wptelegram_login', key);
+	return getPluginData('wptelegram_login', key);
 };
diff --git a/plugins/wptelegram-login/js/settings/services/index.ts b/plugins/wptelegram-login/js/settings/services/index.ts
@@ -1,6 +1,6 @@
 export * from './fields';
 export * from './types';
-export * from './useData';
+export * from './getDomData';
 export * from './useInit';
 export * from './useOnInvalid';
 export * from './useOnSubmit';
diff --git a/plugins/wptelegram-login/js/settings/services/useInit.ts b/plugins/wptelegram-login/js/settings/services/useInit.ts
@@ -1,12 +1,10 @@
 import botApi from '@wpsocio/services/telegram/telegram-api.js';
 import { useEffect } from 'react';
-import { useData } from './useData';
+import { getDomData } from './getDomData';
 
 export const useInit = () => {
-	const { api } = useData();
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
+		const { api } = getDomData();
 		botApi.setApiData(api);
 	}, []);
 

diff --git a/plugins/wptelegram-login/js/settings/services/useOnSubmit.ts b/plugins/wptelegram-login/js/settings/services/useOnSubmit.ts
@@ -2,13 +2,13 @@ import type { SubmitHandler, UseFormReturn } from '@wpsocio/form';
 import { useSubmitForm } from '@wpsocio/services/use-submit-form.js';
 import { useCallback } from 'react';
 import { getErrorMessage } from './fields';
+import { getDomData } from './getDomData';
 import type { DataShape } from './types';
-import { useData } from './useData';
 
 export const useOnSubmit = (
 	form: UseFormReturn<DataShape>,
 ): SubmitHandler<DataShape> => {
-	const { rest_namespace } = useData('api');
+	const { rest_namespace } = getDomData('api');
 
 	const path = `${rest_namespace}/settings/`;
 

diff --git a/plugins/wptelegram-login/js/settings/ui/App.tsx b/plugins/wptelegram-login/js/settings/ui/App.tsx
@@ -2,7 +2,7 @@ import { Form, useForm, zodResolver } from '@wpsocio/form';
 import { WpAdminContainer } from '@wpsocio/shared-ui/components/wp-admin-container.js';
 import { SubmitBar } from '@wpsocio/shared-ui/form/submit/submit-bar.js';
 import { ROOT_ID } from '../constants';
-import { useData, validationSchema } from '../services';
+import { getDomData, validationSchema } from '../services';
 import { useInit, useOnInvalid, useOnSubmit } from '../services';
 import { ButtonOptions } from './ButtonOptions';
 import { ErrorMessageOptions } from './ErrorMessageOptions';
@@ -14,11 +14,11 @@ import { TelegramOptions } from './TelegramOptions';
 
 const resolver = zodResolver(validationSchema);
 
+const { savedSettings: defaultValues } = getDomData();
+
 const App: React.FC = () => {
 	useInit();
 
-	const { savedSettings: defaultValues } = useData();
-
 	const form = useForm({ defaultValues, resolver, mode: 'onBlur' });
 
 	const onSubmit = useOnSubmit(form);

diff --git a/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx b/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx
@@ -11,17 +11,17 @@ import { Input } from '@wpsocio/ui-components/wrappers/input';
 import { RadioGroup } from '@wpsocio/ui-components/wrappers/radio-group';
 import { Select } from '@wpsocio/ui-components/wrappers/select.js';
 import { Switch } from '@wpsocio/ui-components/wrappers/switch';
-import { getFieldLabel, useData } from '../services';
+import { getDomData, getFieldLabel } from '../services';
 
 const getButtonStyleOptions = () => [
 	{ value: 'large', label: __('Large') },
 	{ value: 'medium', label: __('Medium') },
 	{ value: 'small', label: __('Small') },
 ];
 
-export const ButtonOptions = () => {
-	const { uiData } = useData();
+const { uiData } = getDomData();
 
+export const ButtonOptions = () => {
 	const { control } = useFormContext();
 
 	return (

diff --git a/plugins/wptelegram-login/js/settings/ui/Header.tsx b/plugins/wptelegram-login/js/settings/ui/Header.tsx
@@ -1,8 +1,8 @@
 import { PluginHeader } from '@wpsocio/shared-ui/components/plugin-info/plugin-header';
-import { useData } from '../services';
+import { getDomData } from '../services';
 
-export const Header = () => {
-	const { pluginInfo, assets } = useData();
+const { pluginInfo, assets } = getDomData();
 
+export const Header = () => {
 	return <PluginHeader {...pluginInfo} assets={assets} />;
 };
diff --git a/plugins/wptelegram-login/js/settings/ui/Instructions.tsx b/plugins/wptelegram-login/js/settings/ui/Instructions.tsx
@@ -1,15 +1,16 @@
 import { __, sprintf } from '@wpsocio/i18n';
 import { Code } from '@wpsocio/shared-ui/components/code';
 import { Instructions as InstructionsUI } from '@wpsocio/shared-ui/components/instructions';
+import { Alert } from '@wpsocio/ui-components/wrappers/alert.js';
 import { Link } from '@wpsocio/ui-components/wrappers/link.js';
 import { createInterpolateElement } from '@wpsocio/utilities/createInterpolateElement.js';
-import { useData } from '../services';
-import { Alert } from '@wpsocio/ui-components/wrappers/alert.js';
+import { getDomData } from '../services';
 
 const { location } = window;
 
+const { wptelegram_active } = getDomData('uiData');
+
 export const Instructions: React.FC = () => {
-	const { wptelegram_active } = useData('uiData');
 	return (
 		<InstructionsUI>
 			{wptelegram_active && (

diff --git a/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx b/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx
@@ -12,7 +12,7 @@ import { RadioGroup } from '@wpsocio/ui-components/wrappers/radio-group';
 import { Select } from '@wpsocio/ui-components/wrappers/select.js';
 import { Switch } from '@wpsocio/ui-components/wrappers/switch.js';
 import { useCallback, useState } from 'react';
-import { type DataShape, getFieldLabel, useData } from '../services';
+import { type DataShape, getDomData, getFieldLabel } from '../services';
 
 const getRedirectOptions = () => [
 	{ value: 'default', label: __('Default') },
@@ -21,11 +21,11 @@ const getRedirectOptions = () => [
 	{ value: 'custom_url', label: __('Custom URL') },
 ];
 
+const { uiData } = getDomData();
+
 export const LoginOptions = () => {
 	const [avatarMetaKeyReadOnly, setAvatarMetaKeyReadOnly] = useState(true);
 
-	const { uiData } = useData();
-
 	const onAvatarMetaDoubleClick = useCallback(
 		() => setAvatarMetaKeyReadOnly(false),
 		[],

diff --git a/plugins/wptelegram-login/js/settings/ui/Sidebar.tsx b/plugins/wptelegram-login/js/settings/ui/Sidebar.tsx
@@ -3,14 +3,15 @@ import { __ } from '@wpsocio/i18n';
 import { PluginInfoCard } from '@wpsocio/shared-ui/components/plugin-info/plugin-info-card.js';
 import { WPTGSocialIcons } from '@wpsocio/shared-ui/components/wptg-social-icons.js';
 import { FormDebug } from '@wpsocio/shared-ui/form/form-debug';
-import { useData } from '../services';
+import { getDomData } from '../services';
 import { WidgetInfoCard } from './WidgetInfoCard';
 
+const {
+	pluginInfo: { title },
+	assets: { tgIconUrl },
+} = getDomData();
+
 export const Sidebar: React.FC = () => {
-	const {
-		pluginInfo: { title },
-		assets: { tgIconUrl },
-	} = useData();
 	const { watch } = useFormContext();
 	return (
 		<div>