Improve typings

.eslintrc.json

@@ -1,3 +1,6 @@
+// Implements WordPress JS Coding Standards
+// https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/
+
 {
 	"root": true,
 	"parser": "@typescript-eslint/parser",
@@ -10,7 +13,8 @@
 	"extends": [
 		"plugin:react/recommended",
 		"plugin:jsx-a11y/recommended",
-		"plugin:jest/recommended"
+		"plugin:jest/recommended",
+		"plugin:@typescript-eslint/recommended"
 	],
 	"env": {
 		"browser": false,
@@ -142,13 +146,15 @@
 				"message": "Translate function arguments must be string literals."
 			}
 		],
-		"no-shadow": "error",
+		"no-shadow": "off",
+  	"@typescript-eslint/no-shadow": ["error"],
 		"no-undef": "error",
 		"no-undef-init": "error",
 		"no-unreachable": "error",
 		"no-unsafe-negation": "error",
 		"no-unused-expressions": "error",
-		"no-unused-vars": "error",
+		"no-unused-vars": "off",
+  	"@typescript-eslint/no-unused-vars": ["error"],
 		"no-useless-computed-key": "error",
 		"no-useless-constructor": "error",
 		"no-useless-return": "error",

package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"main": "src/blocks.ts",
 	"scripts": {
+		"lint:js": "wp-scripts lint-js 'src/**/*{.js,.jsx,.ts,.tsx}'",
 		"build:js": "webpack --mode=production",
 		"build:sass": "sass src/styles:dist",
 		"build": "npm run build:js && npm run build:sass",

src/components/preview-form.tsx

@@ -9,17 +9,17 @@ import { Spinner } from '@wordpress/components';
 import { baseUrl } from '@/globals';
 import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 
-type PreviewProps = {
+interface IPreviewProps {
 	embedCode: string;
-};
+}
 
-type PreviewState = {
+interface IPreviewState {
 	uniqueId: string;
 	loading: boolean;
-};
+}
 
-class PreviewForm extends React.Component<PreviewProps, PreviewState> {
+class PreviewForm extends React.Component<IPreviewProps, IPreviewState> {
-	constructor( props: any ) {
+	constructor( props: IPreviewProps ) {
 		super( props );
 
 		// Generate a unique identifier, so that the embed script can be identified
@@ -39,7 +39,7 @@ class PreviewForm extends React.Component<PreviewProps, PreviewState> {
 	}
 
 	// Force the embed script to load, which makes Iframes in the editor resize properly.
-	loadEmbedScript( callback?: Function ) {
+	loadEmbedScript( callback?: () => void ) {
 		const existingScript = document.getElementById( `cog-embed-script-${ this.state.uniqueId }` );
 
 		if ( ! existingScript ) {

src/components/select-dialog.tsx

@@ -5,16 +5,14 @@ import * as React from 'react';
 import { Modal, FocusableIframe } from '@wordpress/components';
 
 import { baseUrl } from '@/globals';
+import { IForm } from '@/types';
 
 interface IDialogProps {
-	setOpen: Function;
+	setOpen: ( val: boolean ) => void;
-  onSelectForm: Function;
+  onSelectForm: ( form: IForm ) => void;
 }
 
-interface IDialogState {
+class SelectDialog extends React.Component<IDialogProps> {
-}
-
-class SelectDialog extends React.Component<IDialogProps, IDialogState> {
 	componentDidMount() {
 		window.addEventListener( 'message', this.handlePostMessage, false );
 	}

src/edit.tsx

@@ -15,18 +15,19 @@ import { edit, external } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
-import { BlockAttributes, EmbedMode } from '@/types';
+import { IBlockAttributes, EmbedMode, IForm } from '@/types';
 import { baseUrl } from './globals';
 
 import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 import SelectDialog from '@/components/select-dialog';
 import PreviewForm from '@/components/preview-form';
 
-const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
+const Edit: React.FC<BlockEditProps<IBlockAttributes>> = ( { attributes, setAttributes, className } ) => {
 	const [ selectDialogOpen, setSelectDialogOpen ] = useState( false );
 
-	const handleForm = ( form: { [key: string]: any } ) => {
+	const handleForm = ( form: IForm ) => {
 		setAttributes( {
+			orgId: form.orgId,
 			formId: form.formId,
 			seamlessEmbedCode: form.embedCodes.Seamless,
 			iframeEmbedCode: form.embedCodes.IFrame,

src/index.tsx

@@ -4,7 +4,7 @@
 
 import { registerBlockType } from '@wordpress/blocks';
 
-import { BlockAttributes } from './types';
+import { IBlockAttributes } from './types';
 
 /**
 * Internal dependencies
@@ -14,7 +14,7 @@ import Save from './save';
 
 import { ReactComponent as CogIcon } from './assets/cogicon.svg';
 
-registerBlockType<BlockAttributes>( 'cognito-forms/cognito-embed', {
+registerBlockType<IBlockAttributes>( 'cognito-forms/cognito-embed', {
 	title: 'Cognito Forms',
 	icon: CogIcon,
 	description: 'Easily build powerful forms.',
@@ -24,6 +24,9 @@ registerBlockType<BlockAttributes>( 'cognito-forms/cognito-embed', {
 		html: false,
 	},
 	attributes: {
+		orgId: {
+			type: 'string',
+		},
 		formId: {
 			type: 'string',
 		},

src/save.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { BlockSaveProps } from '@wordpress/blocks';
 
-import { EmbedMode, BlockAttributes } from './types';
+import { EmbedMode, IBlockAttributes } from './types';
 
-const Save: React.FC<BlockSaveProps<BlockAttributes>> = ( { attributes: { formId, embedMode, seamlessEmbedCode, iframeEmbedCode } } ) => {
+const Save: React.FC<BlockSaveProps<IBlockAttributes>> = ( { attributes: { formId, embedMode, seamlessEmbedCode, iframeEmbedCode } } ) => {
 	let embedCode = '';
 
 	switch ( embedMode ) {

src/types.ts

@@ -3,10 +3,21 @@ export enum EmbedMode {
 	IFrame,
 }
 
-export interface BlockAttributes {
+export interface IBlockAttributes {
+	orgId: string;
 	formId: string;
 	iframeEmbedCode: string;
 	seamlessEmbedCode: string;
 	ampEmbedCode: string;
 	embedMode: EmbedMode;
 }
+
+export interface IForm {
+	orgId: string;
+	formId: string;
+	embedCodes: {
+		Seamless: string;
+		IFrame: string;
+		Amp: string;
+	}
+}