From 6f435c0a51a4a7faa60dcb80f91bfa1c794f0ecc Mon Sep 17 00:00:00 2001 From: Mohan Raj Date: Thu, 23 Mar 2023 18:18:37 +0000 Subject: [PATCH 1/2] adds prop annotations for all componnets --- src/components/DeleteModal.tsx | 13 ++++++-- src/components/Header.tsx | 2 +- src/components/Layout.tsx | 3 +- src/components/SdkModal.tsx | 9 ++++-- src/components/Snippet.tsx | 3 +- src/components/SubmitControls.tsx | 54 ++++++++++++++++++------------- src/utils/index.ts | 7 ++-- types/index.ts | 5 --- 8 files changed, 56 insertions(+), 40 deletions(-) diff --git a/src/components/DeleteModal.tsx b/src/components/DeleteModal.tsx index 72033b5..0d17605 100644 --- a/src/components/DeleteModal.tsx +++ b/src/components/DeleteModal.tsx @@ -1,6 +1,15 @@ import { Modal, Button } from '@wordpress/components'; -const DeleteModal = (props: any): JSX.Element => { - const { closeModal, item, handleDeleteFlag } = props; +import { Flag } from '../../types'; +interface DeleteModalProps { + closeModal: () => void; + item: Flag; + handleDeleteFlag: (id: number) => void; +} +const DeleteModal = ({ + closeModal, + item, + handleDeleteFlag, +}: DeleteModalProps): JSX.Element => { return (

diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6a75094..bf8208c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -8,7 +8,7 @@ export default function (): JSX.Element {

Status

- +

SDK Settings

 diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 9e61a9b..dea5988 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -7,7 +7,7 @@ import { getFlags } from '../utils'; import Header from './Header'; const Layout = (): JSX.Element => { - const [flags, setFlags] = useState(undefined); + const [flags, setFlags] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { @@ -55,7 +55,6 @@ const Layout = (): JSX.Element => { diff --git a/src/components/SdkModal.tsx b/src/components/SdkModal.tsx index bf1fc1f..698b6bf 100644 --- a/src/components/SdkModal.tsx +++ b/src/components/SdkModal.tsx @@ -2,9 +2,14 @@ import { Modal, Button } from '@wordpress/components'; import Snippet from './Snippet'; import { useMemo, useState, useEffect } from '@wordpress/element'; import { useCopyToClipboard } from '@wordpress/compose'; +import { Flag } from '../../types'; -const SdkModal = (props: any): JSX.Element => { - const { item, closeSdkModal } = props; +interface SdkModalProps { + item: Flag; + closeSdkModal: () => void; +} + +const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => { const [hasJsCopied, setHasJsCopied] = useState(false); const [hasPhpCopied, setHasPhpCopied] = useState(false); diff --git a/src/components/Snippet.tsx b/src/components/Snippet.tsx index 6af55ae..ccb8dbe 100644 --- a/src/components/Snippet.tsx +++ b/src/components/Snippet.tsx @@ -1,8 +1,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; -const Snippet = (props: any) => { - const { data } = props; +const Snippet = ({ data }: { data: string }): JSX.Element => { return ( {data} diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx index 838beaf..eed1a7b 100644 --- a/src/components/SubmitControls.tsx +++ b/src/components/SubmitControls.tsx @@ -5,8 +5,19 @@ import { useState } from '@wordpress/element'; import Notices from './Snackbar'; import { dispatch } from '@wordpress/data'; -const SubmitControls = (props: any): JSX.Element => { - const { isNew, flags, setFlags, lastFlag, disableSave } = props; +interface SubmitControlsProps { + flags: Flag[]; + setFlags: (flags: Flag[]) => void; + lastFlag: number; + disableSave: boolean; +} + +const SubmitControls = ({ + flags, + setFlags, + lastFlag, + disableSave, +}: SubmitControlsProps): JSX.Element => { const [isSaving, setIsSaving] = useState(false); const handleNewFlag = () => { @@ -54,27 +65,24 @@ const SubmitControls = (props: any): JSX.Element => { Add Flag - {!isNew && ( - <> - - - - - - - - )} + + + + + + + diff --git a/src/utils/index.ts b/src/utils/index.ts index f478286..f74615d 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,8 +1,9 @@ import apiFetch from '@wordpress/api-fetch'; +import { Flag } from '../../types'; import { FEATURE_FLAG_NAMESPACE, FEATURE_FLAG_ROUTE } from '../constants'; -export const getFlags = async (): Promise => { - const result: any = await apiFetch({ +export const getFlags = async (): Promise => { + const result: Flag[] = await apiFetch({ method: 'GET', path: `${FEATURE_FLAG_NAMESPACE}/${FEATURE_FLAG_ROUTE}`, }); @@ -10,7 +11,7 @@ export const getFlags = async (): Promise => { }; export const updateFlags = async ( - flags: any + flags: Flag[] ): Promise<{ status: number; success: boolean } | Error> => { const result: { status: number; success: boolean } | Error = await apiFetch( { diff --git a/types/index.ts b/types/index.ts index c97faa3..be233d0 100644 --- a/types/index.ts +++ b/types/index.ts @@ -4,8 +4,3 @@ export interface Flag { enabled: boolean; preProdEnabled?: boolean; } - -export interface FlagProps { - env: string; - flags: Flag[]; -} From 9a8acdea4b3c7e93c292ea23494064e0af4b1791 Mon Sep 17 00:00:00 2001 From: Mohan Raj Date: Thu, 23 Mar 2023 18:29:03 +0000 Subject: [PATCH 2/2] fix jsx return type lint --- .eslintrc | 9 ++++++++- package.json | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/.eslintrc b/.eslintrc index 4b64267..0ea0308 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,6 +14,13 @@ "@typescript-eslint/ban-ts-comment": "off", "camelcase": "off" }, + "overrides": + [{ + "files": ["*.jsx"], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": ["off"] + } + }], "settings": { "import/resolver": { "alias": { @@ -26,4 +33,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 1e1f5fb..d45a79d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "Allows developers to enable / disable features based on flags.", "scripts": { "start": "wp-scripts start", - "build": "wp-scripts build" + "build": "wp-scripts build", + "lint:js": "wp-scripts lint-js" }, "devDependencies": { "@wordpress/eslint-plugin": "^12.0.1",