From f08b738441b874ce991ac50cabba44b1a7c08bfa Mon Sep 17 00:00:00 2001 From: Ryan Dsouza Date: Thu, 11 Jun 2020 19:41:49 +0530 Subject: [PATCH] convert component utils and couple of components --- console/.eslintrc | 3 +- .../{InputChecker.js => InputChecker.tsx} | 46 +++---- .../InputChecker/{utils.js => utils.ts} | 18 ++- .../{KnowMoreLink.js => KnowMoreLink.tsx} | 10 +- ...alStorageUtils.js => localStorageUtils.ts} | 4 +- .../utils/{routesUtils.js => routesUtils.ts} | 123 ++++++++++++------ .../Common/utils/{urlUtils.js => urlUtils.ts} | 5 +- 7 files changed, 137 insertions(+), 72 deletions(-) rename console/src/components/Common/InputChecker/{InputChecker.js => InputChecker.tsx} (67%) rename console/src/components/Common/InputChecker/{utils.js => utils.ts} (64%) rename console/src/components/Common/KnowMoreLink/{KnowMoreLink.js => KnowMoreLink.tsx} (58%) rename console/src/components/Common/utils/{localStorageUtils.js => localStorageUtils.ts} (62%) rename console/src/components/Common/utils/{routesUtils.js => routesUtils.ts} (50%) rename console/src/components/Common/utils/{urlUtils.js => urlUtils.ts} (53%) diff --git a/console/.eslintrc b/console/.eslintrc index d6ed425d3a120..7c40eced73a1a 100644 --- a/console/.eslintrc +++ b/console/.eslintrc @@ -171,7 +171,8 @@ "no-restricted-properties": "off", "react/no-danger": "off", "react/no-array-index-key": "off", - "no-case-declarations": 0 + "no-case-declarations": 0, + "spaced-comment": "off" } } ] diff --git a/console/src/components/Common/InputChecker/InputChecker.js b/console/src/components/Common/InputChecker/InputChecker.tsx similarity index 67% rename from console/src/components/Common/InputChecker/InputChecker.js rename to console/src/components/Common/InputChecker/InputChecker.tsx index 48d7a2228ae05..7b19bd00731e2 100644 --- a/console/src/components/Common/InputChecker/InputChecker.js +++ b/console/src/components/Common/InputChecker/InputChecker.tsx @@ -1,19 +1,30 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { inputChecker } from './utils'; -class InputChecker extends Component { - constructor() { - super(); - this.state = { - isError: false, - errorMessage: '', - }; +type Props = { + type: string; + value: string; + placeholder: string; + disabled: boolean; + title: string; + onBlur?: (e: React.FocusEvent) => void; + onChange: (e: React.ChangeEvent) => void; + 'data-test': string; +}; - this.onBlur = this.onBlur.bind(this); - } - onBlur(e) { +type State = { + isError: boolean; + errorMessage: string; +}; + +class InputChecker extends Component { + state = { + isError: false, + errorMessage: '', + }; + + onBlur = (e: React.FocusEvent) => { const val = e.target.value; if (!val) { this.setState({ @@ -35,7 +46,7 @@ class InputChecker extends Component { errorMessage: r.message, }); }); - } + }; render() { const { value, onChange, placeholder, disabled, title } = this.props; @@ -46,7 +57,7 @@ class InputChecker extends Component { return ( { +const intChecker = (val: string) => { const rVal = parseInt(val, 10); if (!rVal) { @@ -6,11 +6,12 @@ const intChecker = val => { } return rVal; }; -const boolChecker = val => { - let rVal = ''; + +const boolChecker = (val: string) => { + let rVal: boolean | null; if (val === 'true') { rVal = true; - } else if (rVal === 'false') { + } else if (val === 'false') { rVal = false; } else { rVal = null; @@ -22,7 +23,7 @@ const boolChecker = val => { return rVal; }; -const jsonChecker = val => { +const jsonChecker = (val: string) => { try { JSON.parse(val); } catch (e) { @@ -40,13 +41,16 @@ const typeChecker = { jsonb: jsonChecker, }; -const inputChecker = (type, value) => { +type InputType = keyof typeof typeChecker; +const inputChecker = (type: string, value: string) => { // Checks the input against the intended type // and returns the value or error return new Promise((resolve, reject) => { try { if (type in typeChecker) { - resolve(typeChecker[type](value)); + // as it's available in the object, the type can be added here explicitly without issues + const inputType = type as InputType; + resolve(typeChecker[inputType](value)); return; } resolve(value); diff --git a/console/src/components/Common/KnowMoreLink/KnowMoreLink.js b/console/src/components/Common/KnowMoreLink/KnowMoreLink.tsx similarity index 58% rename from console/src/components/Common/KnowMoreLink/KnowMoreLink.js rename to console/src/components/Common/KnowMoreLink/KnowMoreLink.tsx index 68c882cd06b03..9d8e3983dc736 100644 --- a/console/src/components/Common/KnowMoreLink/KnowMoreLink.js +++ b/console/src/components/Common/KnowMoreLink/KnowMoreLink.tsx @@ -1,7 +1,15 @@ import React from 'react'; // import styles from './KnowMoreLink.scss'; -const KnowMoreLink = ({ href, text = 'Know more' }) => ( +type KnowMoreLinkProps = { + href: string; + text?: string; +}; + +const KnowMoreLink: React.FC = ({ + href, + text = 'Know more', +}) => ( ({text}) diff --git a/console/src/components/Common/utils/localStorageUtils.js b/console/src/components/Common/utils/localStorageUtils.ts similarity index 62% rename from console/src/components/Common/utils/localStorageUtils.js rename to console/src/components/Common/utils/localStorageUtils.ts index 637171a24ebe7..6b4d1b953e1f7 100644 --- a/console/src/components/Common/utils/localStorageUtils.js +++ b/console/src/components/Common/utils/localStorageUtils.ts @@ -1,8 +1,8 @@ -export const getLocalStorageItem = key => { +export const getLocalStorageItem = (key: string) => { return window.localStorage.getItem(key); }; -export const setLocalStorageItem = (key, value) => { +export const setLocalStorageItem = (key: string, value: string) => { window.localStorage.setItem(key, value); }; diff --git a/console/src/components/Common/utils/routesUtils.js b/console/src/components/Common/utils/routesUtils.ts similarity index 50% rename from console/src/components/Common/utils/routesUtils.js rename to console/src/components/Common/utils/routesUtils.ts index f5c0ee97f9c4f..5d24ac5a19cd1 100644 --- a/console/src/components/Common/utils/routesUtils.js +++ b/console/src/components/Common/utils/routesUtils.ts @@ -2,60 +2,97 @@ /*** DATA ROUTES ***/ -export const getSchemaBaseRoute = schemaName => { +export const getSchemaBaseRoute = (schemaName: string) => { // return `${globals.urlPrefix}/data/schema/${schemaName}`; return `/data/schema/${encodeURIComponent(schemaName)}`; }; -export const getSchemaAddTableRoute = schemaName => { +export const getSchemaAddTableRoute = (schemaName: string) => { return `${getSchemaBaseRoute(schemaName)}/table/add`; }; -export const getSchemaPermissionsRoute = schemaName => { +export const getSchemaPermissionsRoute = (schemaName: string) => { return `${getSchemaBaseRoute(schemaName)}/permissions`; }; -const getTableBaseRoute = (schemaName, tableName, isTable) => { +const getTableBaseRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getSchemaBaseRoute(schemaName)}/${ isTable ? 'tables' : 'views' }/${encodeURIComponent(tableName)}`; }; -export const getTableBrowseRoute = (schemaName, tableName, isTable) => { +export const getTableBrowseRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/browse`; }; -export const getTableInsertRowRoute = (schemaName, tableName, isTable) => { +export const getTableInsertRowRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/insert`; }; -export const getTableEditRowRoute = (schemaName, tableName, isTable) => { +export const getTableEditRowRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/edit`; }; -export const getTableModifyRoute = (schemaName, tableName, isTable) => { +export const getTableModifyRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/modify`; }; -export const getTableRelationshipsRoute = (schemaName, tableName, isTable) => { +export const getTableRelationshipsRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/relationships`; }; -export const getTablePermissionsRoute = (schemaName, tableName, isTable) => { +export const getTablePermissionsRoute = ( + schemaName: string, + tableName: string, + isTable: boolean +) => { return `${getTableBaseRoute(schemaName, tableName, isTable)}/permissions`; }; -export const getFunctionBaseRoute = (schemaName, functionName) => { +export const getFunctionBaseRoute = ( + schemaName: string, + functionName: string +) => { return `${getSchemaBaseRoute(schemaName)}/functions/${encodeURIComponent( functionName )}`; }; -export const getFunctionModifyRoute = (schemaName, functionName) => { +export const getFunctionModifyRoute = ( + schemaName: string, + functionName: string +) => { return `${getFunctionBaseRoute(schemaName, functionName)}/modify`; }; -export const getFunctionPermissionsRoute = (schemaName, functionName) => { +export const getFunctionPermissionsRoute = ( + schemaName: string, + functionName: string +) => { return `${getFunctionBaseRoute(schemaName, functionName)}/permissions`; }; @@ -75,84 +112,96 @@ export const eventsPrefix = 'events'; export const scheduledEventsPrefix = 'cron'; export const adhocEventsPrefix = 'one-off-scheduled-events'; export const dataEventsPrefix = 'data'; -export const routeType = 'absolute' | 'relative'; +export type RouteType = 'absolute' | 'relative'; -export const getSTRoute = (type, relativeRoute) => { +export const getSTRoute = ( + type: RouteType = 'absolute', + relativeRoute: string +) => { if (type === 'relative') { return `${relativeRoute}`; } return `/${eventsPrefix}/${scheduledEventsPrefix}/${relativeRoute}`; }; -export const getETRoute = (type, relativeRoute) => { +export const getETRoute = ( + type: RouteType = 'absolute', + relativeRoute: string +) => { if (type === 'relative') { return `${relativeRoute}`; } return `/${eventsPrefix}/${dataEventsPrefix}/${relativeRoute}`; }; -export const getAdhocEventsRoute = (type, relativeRoute) => { +export const getAdhocEventsRoute = ( + type: RouteType = 'absolute', + relativeRoute = '' +) => { if (type === 'relative') { return `${relativeRoute}`; } return `/${eventsPrefix}/${adhocEventsPrefix}/${relativeRoute}`; }; -export const isDataEventsRoute = route => { +export const isDataEventsRoute = (route: string) => { return route.includes(`/${eventsPrefix}/${dataEventsPrefix}`); }; -export const isScheduledEventsRoute = route => { +export const isScheduledEventsRoute = (route: string) => { return route.includes(`/${eventsPrefix}/${scheduledEventsPrefix}`); }; -export const isAdhocScheduledEventRoute = route => { +export const isAdhocScheduledEventRoute = (route: string) => { return route.includes(`/${eventsPrefix}/${adhocEventsPrefix}`); }; -export const getAddSTRoute = type => { + +export const getAddSTRoute = (type?: RouteType) => { return getSTRoute(type, 'add'); }; -export const getScheduledEventsLandingRoute = type => { +export const getScheduledEventsLandingRoute = (type?: RouteType) => { return getSTRoute(type, 'manage'); }; -export const getSTModifyRoute = (stName, type) => { +export const getSTModifyRoute = (stName: string, type?: RouteType) => { return getSTRoute(type, `${stName}/modify`); }; -export const getSTPendingEventsRoute = (stName, type) => { +export const getSTPendingEventsRoute = (stName: string, type?: RouteType) => { return getSTRoute(type, `${stName}/pending`); }; -export const getSTProcessedEventsRoute = (stName, type) => { +export const getSTProcessedEventsRoute = (stName: string, type?: RouteType) => { return getSTRoute(type, `${stName}/processed`); }; -export const getSTInvocationLogsRoute = (stName, type) => { +export const getSTInvocationLogsRoute = (stName: string, type?: RouteType) => { return getSTRoute(type, `${stName}/logs`); }; -export const getAddETRoute = type => { +export const getAddETRoute = (type?: any) => { return getETRoute(type, 'add'); }; -export const getDataEventsLandingRoute = type => { + +export const getDataEventsLandingRoute = (type?: RouteType) => { return getETRoute(type, 'manage'); }; -export const getETModifyRoute = (etName, type) => { +export const getETModifyRoute = (etName: string, type?: RouteType) => { return getETRoute(type, `${etName}/modify`); }; -export const getETPendingEventsRoute = (etName, type) => { +export const getETPendingEventsRoute = (etName: string, type?: RouteType) => { return getETRoute(type, `${etName}/pending`); }; -export const getETProcessedEventsRoute = (etName, type) => { +export const getETProcessedEventsRoute = (etName: string, type?: RouteType) => { return getETRoute(type, `${etName}/processed`); }; -export const getETInvocationLogsRoute = (etName, type) => { +export const getETInvocationLogsRoute = (etName: string, type?: RouteType) => { return getETRoute(type, `${etName}/logs`); }; -export const getAddAdhocEventRoute = type => { + +export const getAddAdhocEventRoute = (type: RouteType) => { return getAdhocEventsRoute(type, 'add'); }; -export const getAdhocEventsLogsRoute = type => { +export const getAdhocEventsLogsRoute = (type: RouteType) => { return getAdhocEventsRoute(type, 'logs'); }; -export const getAdhocPendingEventsRoute = type => { +export const getAdhocPendingEventsRoute = (type: RouteType) => { return getAdhocEventsRoute(type, 'pending'); }; -export const getAdhocProcessedEventsRoute = type => { +export const getAdhocProcessedEventsRoute = (type: RouteType) => { return getAdhocEventsRoute(type, 'processed'); }; -export const getAdhocEventsInfoRoute = type => { +export const getAdhocEventsInfoRoute = (type: RouteType) => { return getAdhocEventsRoute(type, 'info'); }; diff --git a/console/src/components/Common/utils/urlUtils.js b/console/src/components/Common/utils/urlUtils.ts similarity index 53% rename from console/src/components/Common/utils/urlUtils.js rename to console/src/components/Common/utils/urlUtils.ts index 31729f2b98a00..f6ef008882b39 100644 --- a/console/src/components/Common/utils/urlUtils.js +++ b/console/src/components/Common/utils/urlUtils.ts @@ -1,7 +1,8 @@ -export const getPathRoot = path => { +export const getPathRoot = (path: string) => { return path.split('/')[1]; }; -export const stripTrailingSlash = url => { + +export const stripTrailingSlash = (url: string) => { if (url && url.endsWith('/')) { return url.slice(0, -1); }