From 0a653aaba7abf81ded6c5244de0c89dc8e553d95 Mon Sep 17 00:00:00 2001 From: Dhanu Saputra <35093673+dhanusaputra@users.noreply.github.com> Date: Thu, 23 Feb 2023 00:21:00 +0700 Subject: [PATCH] Remove usage of the PropTypes dependency (#2723) * Remove usage of the PropTypes dependency * Prettified Code! --------- Co-authored-by: dhanusaputra --- .../stories-category-doc-pages/colors/Color.tsx | 17 ++++++----------- web/components/admin/MainLayout.tsx | 5 ----- web/pages/admin/config-federation.tsx | 15 +++++++-------- web/utils/alert-message-context.tsx | 13 ++++++------- web/utils/server-status-context.tsx | 13 ++++++------- 5 files changed, 25 insertions(+), 38 deletions(-) diff --git a/web/.storybook/stories-category-doc-pages/colors/Color.tsx b/web/.storybook/stories-category-doc-pages/colors/Color.tsx index e0c259520..9da91ebf0 100644 --- a/web/.storybook/stories-category-doc-pages/colors/Color.tsx +++ b/web/.storybook/stories-category-doc-pages/colors/Color.tsx @@ -1,9 +1,8 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { FC } from 'react'; export type ColorProps = { - color: any; // TODO specify better type + color: string; }; export const Color: FC = ({ color }) => { @@ -55,10 +54,6 @@ export const Color: FC = ({ color }) => { ); }; -Color.propTypes = { - color: PropTypes.string.isRequired, -}; - const rowStyle = { display: 'flex', flexDirection: 'row' as 'row', @@ -66,7 +61,11 @@ const rowStyle = { alignItems: 'center', }; -export const ColorRow = props => { +export type ColorRowProps = { + colors: string[]; +}; + +export const ColorRow: FC = (props: ColorRowProps) => { const { colors } = props; return ( @@ -78,10 +77,6 @@ export const ColorRow = props => { ); }; -ColorRow.propTypes = { - colors: PropTypes.arrayOf(PropTypes.string).isRequired, -}; - export const getColor = color => { const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`); return { [color]: colorValue }; diff --git a/web/components/admin/MainLayout.tsx b/web/components/admin/MainLayout.tsx index 28dbe2c2e..367974f56 100644 --- a/web/components/admin/MainLayout.tsx +++ b/web/components/admin/MainLayout.tsx @@ -1,5 +1,4 @@ import React, { FC, ReactNode, useContext, useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; import Link from 'next/link'; import Head from 'next/head'; import { differenceInSeconds } from 'date-fns'; @@ -338,7 +337,3 @@ export const MainLayout: FC = ({ children }) => { ); }; - -MainLayout.propTypes = { - children: PropTypes.element.isRequired, -}; diff --git a/web/pages/admin/config-federation.tsx b/web/pages/admin/config-federation.tsx index 25779400b..b70cab647 100644 --- a/web/pages/admin/config-federation.tsx +++ b/web/pages/admin/config-federation.tsx @@ -1,7 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ import { Typography, Modal, Button, Row, Col, Alert } from 'antd'; -import React, { ReactElement, useContext, useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; +import React, { ReactElement, useContext, useEffect, useState, FC } from 'react'; import { TEXTFIELD_TYPE_TEXT, TEXTFIELD_TYPE_TEXTAREA, @@ -29,7 +28,12 @@ import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/inp import { AdminLayout } from '../../components/layouts/AdminLayout'; -const FederationInfoModal = ({ cancelPressed, okPressed }) => ( +export type FederationInfoModalProps = { + cancelPressed: () => void; + okPressed: () => void; +}; + +const FederationInfoModal: FC = ({ cancelPressed, okPressed }) => ( ( ); -FederationInfoModal.propTypes = { - cancelPressed: PropTypes.func.isRequired, - okPressed: PropTypes.func.isRequired, -}; - const ConfigFederation = () => { const { Title } = Typography; const [formDataValues, setFormDataValues] = useState(null); diff --git a/web/utils/alert-message-context.tsx b/web/utils/alert-message-context.tsx index 114699017..4ffb55884 100644 --- a/web/utils/alert-message-context.tsx +++ b/web/utils/alert-message-context.tsx @@ -1,5 +1,4 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; +import React, { useState, FC, ReactElement } from 'react'; export const AlertMessageContext = React.createContext({ message: null, @@ -7,7 +6,11 @@ export const AlertMessageContext = React.createContext({ setMessage: (text?: string) => null, }); -const AlertMessageProvider = ({ children }) => { +export type AlertMessageProviderProps = { + children: ReactElement; +}; + +const AlertMessageProvider: FC = ({ children }) => { const [message, setMessage] = useState(''); const providerValue = { @@ -19,8 +22,4 @@ const AlertMessageProvider = ({ children }) => { ); }; -AlertMessageProvider.propTypes = { - children: PropTypes.element.isRequired, -}; - export default AlertMessageProvider; diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx index f2028195a..06b30849a 100644 --- a/web/utils/server-status-context.tsx +++ b/web/utils/server-status-context.tsx @@ -1,7 +1,6 @@ // TODO: add a notication after updating info that changes will take place either on a new stream or server restart. may be different for each field. -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; +import React, { useState, useEffect, FC, ReactElement } from 'react'; import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis'; import { ConfigDetails, UpdateArgs } from '../types/config-section'; @@ -101,7 +100,11 @@ export const ServerStatusContext = React.createContext({ setFieldInConfigState: (args: UpdateArgs) => null, }); -const ServerStatusProvider = ({ children }) => { +export type ServerStatusProviderProps = { + children: ReactElement; +}; + +const ServerStatusProvider: FC = ({ children }) => { const [status, setStatus] = useState(initialServerStatusState); const [config, setConfig] = useState(initialServerConfigState); @@ -164,8 +167,4 @@ const ServerStatusProvider = ({ children }) => { ); }; -ServerStatusProvider.propTypes = { - children: PropTypes.element.isRequired, -}; - export default ServerStatusProvider;