fix typing

hamworks · May 13, 2022 · 603814d · 603814d
1 parent 1404f1d
commit 603814d
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 69 deletions.
diff --git a/src/admin/index.ts b/src/admin/index.ts
@@ -1,14 +1,18 @@
-document.addEventListener('click', function (e) {
+document.addEventListener( 'click', function ( e ) {
 	const target = e.target as HTMLElement;
-	if (target.classList.contains('editinline')) {
-		const tr = target.closest('tr');
-		const id = tr.id;
-		const checked = !!document
-			.getElementById(id)
-			?.querySelector('[data-schedule-terms-active]');
-		const checkbox = document.querySelector(
-			'.inline-edit-row input[name=term-use_schedule]'
-		) as HTMLInputElement;
-		checkbox.checked = checked;
+	if ( target.classList.contains( 'editinline' ) ) {
+		const tr = target.closest( 'tr' );
+		const id = tr?.id;
+		if ( id ) {
+			const checked = !!document
+			.getElementById( id )
+			?.querySelector( '[data-schedule-terms-active]' );
+			const checkbox = document.querySelector(
+				'.inline-edit-row input[name=term-use_schedule]'
+			) as HTMLInputElement;
+			checkbox.checked = checked;
+		}
 	}
-});
+} );
+
+export {};
diff --git a/src/editor/components/DatetimeControl.tsx b/src/editor/components/DatetimeControl.tsx
@@ -21,21 +21,40 @@ interface DatetimeControlProps {
 	type: 'attach' | 'detach';
 }
 
+interface ScheduleTermsMeta {
+	type: 'attach' | 'detach';
+	datetime: string;
+	term: string;
+	taxonomy: string;
+}
+
+interface PostMeta {
+	[ key: string ]: any;
+
+	schedule_terms: ScheduleTermsMeta[];
+}
+
 export const DatetimeControl = ( {
 	term,
 	taxonomy,
 	label,
 	postType,
 	type,
 }: DatetimeControlProps ) => {
-	const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
+	const [ meta, setMeta ]: [ PostMeta, ( meta: PostMeta ) => void ] = useEntityProp(
+		'postType',
+		postType,
+		'meta'
+	);
 	const anchorRef = useRef();
 
 	const getTimezoneOffsetString = () => {
 		// @ts-ignore
 		const { timezone } = getSettings();
 		const [ hour, time ] = timezone.offset.toString().split( '.' );
-		return `${ Number( hour ) > 0 ? '+' : '-' }${ String( Math.abs( hour ) ).padStart( 2, '0' ) }:${ String(
+		return `${ Number( hour ) > 0 ? '+' : '-' }${ String(
+			Math.abs( hour )
+		).padStart( 2, '0' ) }:${ String(
 			Math.floor( Number( `0.${ time || 0 }` ) * 60 )
 		).padStart( 2, '0' ) }`;
 	};
@@ -50,14 +69,20 @@ export const DatetimeControl = ( {
 			...meta,
 			schedule_terms: [
 				...otherItems,
-				datetime && {
-					term,
-					taxonomy,
-					type,
-					// convert to UTC.
-					datetime: moment(`${ datetime }${ getTimezoneOffsetString() }`).utc().format(),
-				},
-			].filter( ( e ) => e ),
+				datetime
+					? {
+						term,
+						taxonomy,
+						type,
+						// convert to UTC.
+						datetime: moment(
+							`${ datetime }${ getTimezoneOffsetString() }`
+						)
+						.utc()
+						.format(),
+					}
+					: null,
+			].filter( ( e ): e is ScheduleTermsMeta => e !== null ),
 		} );
 	};
 
@@ -67,7 +92,9 @@ export const DatetimeControl = ( {
 		} );
 
 		if ( val?.datetime ) {
-			return moment(val.datetime).utcOffset( getTimezoneOffsetString() ).format( TIMEZONELESS_FORMAT );
+			return moment( val.datetime )
+			.utcOffset( getTimezoneOffsetString() )
+			.format( TIMEZONELESS_FORMAT );
 		}
 
 		return undefined;

diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -5,7 +5,7 @@ import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 // @ts-ignore
 import { store as editorStore } from '@wordpress/editor';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
-import { WP_Taxonomy_Name } from 'wp-types';
+import type { WP_Taxonomy_Name } from 'wp-types';
 import { DatetimeControl } from './components/DatetimeControl';
 
 interface Term {
@@ -19,70 +19,83 @@ interface Term {
 	parent: number;
 	count: number;
 }
+
+interface Taxonomy {
+	slug: string;
+}
+
 interface Props {
 	currentPostType: string;
-	taxonomies: Term[];
+	taxonomies: Taxonomy[];
 	terms: Record<string, Term[]>;
 }
 
-const ControlUI = ({ taxonomies, terms, currentPostType }: Props) => {
+const ControlUI = ( { taxonomies, terms, currentPostType }: Props ) => {
 	return (
 		<div>
-			{taxonomies?.map((taxonomy) => (
-				<div key={taxonomy.slug}>
-					{terms[taxonomy.slug] &&
-						terms[taxonomy.slug].length > 0 &&
-						terms[taxonomy.slug]?.map((term) => (
-							<div key={term.id}>
-								<h4>
-									{taxonomy.slug}: {term.name}
-								</h4>
-								<DatetimeControl
-									label="Attach"
-									term={term.slug}
-									taxonomy={taxonomy.slug}
-									type="attach"
-									postType={currentPostType}
-								/>
-								<DatetimeControl
-									label="Detach"
-									term={term.slug}
-									taxonomy={taxonomy.slug}
-									type="detach"
-									postType={currentPostType}
-								/>
-							</div>
-						))}
+			{ taxonomies?.map( ( taxonomy ) => (
+				<div key={ taxonomy.slug }>
+					{ terms[ taxonomy.slug ] &&
+					  terms[ taxonomy.slug ].length > 0 &&
+					  terms[ taxonomy.slug ]?.map( ( term ) => (
+						  <div key={ term.id }>
+							  <h4>
+								  { taxonomy.slug }: { term.name }
+							  </h4>
+							  <DatetimeControl
+								  label="Attach"
+								  term={ term.slug }
+								  taxonomy={ taxonomy.slug }
+								  type="attach"
+								  postType={ currentPostType }
+							  />
+							  <DatetimeControl
+								  label="Detach"
+								  term={ term.slug }
+								  taxonomy={ taxonomy.slug }
+								  type="detach"
+								  postType={ currentPostType }
+							  />
+						  </div>
+					  ) ) }
 				</div>
-			))}
+			) ) }
 		</div>
 	);
 };
 
 const PluginDocumentSetting = () => {
-	const { postType, taxonomies, terms } = useSelect((select) => {
+	const { postType, taxonomies, terms } = useSelect( ( select ) => {
 		// @ts-ignore
-		const { getTaxonomies, getEntityRecords } = select(coreStore);
+		const { getTaxonomies, getEntityRecords } = select( coreStore );
 		// @ts-ignore
-		const _postType = select(editorStore).getCurrentPostType();
-		const _taxonomies = (getTaxonomies({ per_page: -1 }) || []).filter(
-			(taxonomy) => taxonomy.types.includes(_postType)
-		);
+		const _postType = select( editorStore ).getCurrentPostType() as string;
+		const _taxonomies = (
+			getTaxonomies( { per_page: -1 } ) || []
+		).filter(
+			// @ts-ignore
+			( taxonomy ) => taxonomy.types.includes( _postType )
+		) as Taxonomy[];
 		const _terms = Object.fromEntries(
-			_taxonomies.map((taxonomy) => {
-				const terms = getEntityRecords('taxonomy', taxonomy.slug, {
+			_taxonomies.map( ( taxonomy ) => {
+				const terms = getEntityRecords( 'taxonomy', taxonomy.slug, {
 					per_page: -1,
-				})?.filter(({ meta: { schedule_terms_active } }) => schedule_terms_active);
-				return [taxonomy.slug, terms];
-			})
+				} )?.filter(
+					(
+						// @ts-ignore
+						{ meta: { schedule_terms_active } }
+					) => schedule_terms_active
+				);
+				return [ taxonomy.slug, terms as Term[] ];
+			} )
 		);
 
 		return {
 			postType: _postType,
 			taxonomies: _taxonomies,
 			terms: _terms,
 		};
-	});
+	} );
 
 	return (
 		<PluginDocumentSettingPanel
@@ -91,15 +104,15 @@ const PluginDocumentSetting = () => {
 			className="schedule-terms"
 		>
 			<ControlUI
-				currentPostType={postType}
-				taxonomies={taxonomies}
-				terms={terms}
+				currentPostType={ postType }
+				taxonomies={ taxonomies }
+				terms={ terms }
 			/>
 		</PluginDocumentSettingPanel>
 	);
 };
 
-registerPlugin('schedule-terms', {
+registerPlugin( 'schedule-terms', {
 	render: PluginDocumentSetting,
 	icon: 'clock',
-});
+} );