Migrated to TS all servers helpers

src/servers/helpers/ForServerVersion.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { serverType } from '../prop-types';
-import { versionMatch } from '../../utils/helpers/version';
-
-const propTypes = {
-  minVersion: PropTypes.string,
-  maxVersion: PropTypes.string,
-  selectedServer: serverType,
-  children: PropTypes.node.isRequired,
-};
-
-const ForServerVersion = ({ minVersion, maxVersion, selectedServer, children }) => {
-  if (!selectedServer) {
-    return null;
-  }
-
-  const { version } = selectedServer;
-  const matchesVersion = versionMatch(version, { maxVersion, minVersion });
-
-  if (!matchesVersion) {
-    return null;
-  }
-
-  return <React.Fragment>{children}</React.Fragment>;
-};
-
-ForServerVersion.propTypes = propTypes;
-
-export default ForServerVersion;

src/servers/helpers/ForServerVersion.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { versionMatch, Versions } from '../../utils/helpers/version';
+import { isReachableServer, SelectedServer } from '../data';
+
+interface ForServerVersionProps extends Versions {
+  selectedServer: SelectedServer;
+}
+
+const ForServerVersion: FC<ForServerVersionProps> = ({ minVersion, maxVersion, selectedServer, children }) => {
+  if (!isReachableServer(selectedServer)) {
+    return null;
+  }
+
+  const { version } = selectedServer;
+  const matchesVersion = versionMatch(version, { maxVersion, minVersion });
+
+  if (!matchesVersion) {
+    return null;
+  }
+
+  return <React.Fragment>{children}</React.Fragment>;
+};
+
+export default ForServerVersion;

src/servers/helpers/ServerForm.tsx

@@ -1,19 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { FC, useEffect, useState } from 'react';
 import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
 import { handleEventPreventingDefault } from '../../utils/utils';
+import { ServerData } from '../data';
 
-const propTypes = {
-  onSubmit: PropTypes.func.isRequired,
-  initialValues: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    apiKey: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node.isRequired,
-};
+interface ServerFormProps {
+  onSubmit: (server: ServerData) => void;
+  initialValues?: ServerData;
+}
 
-export const ServerForm = ({ onSubmit, initialValues, children }) => {
+export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
   const [ name, setName ] = useState('');
   const [ url, setUrl ] = useState('');
   const [ apiKey, setApiKey ] = useState('');
@@ -35,5 +30,3 @@ export const ServerForm = ({ onSubmit, initialValues, children }) => {
     </form>
   );
 };
-
-ServerForm.propTypes = propTypes;

src/servers/helpers/withSelectedServer.js

@@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Message from '../../utils/Message';
-import { serverType } from '../prop-types';
-
-const propTypes = {
-  selectServer: PropTypes.func,
-  selectedServer: serverType,
-  match: PropTypes.object,
-};
-
-export const withSelectedServer = (WrappedComponent, ServerError) => {
-  const Component = (props) => {
-    const { selectServer, selectedServer, match } = props;
-    const { params: { serverId } } = match;
-
-    useEffect(() => {
-      selectServer(serverId);
-    }, [ serverId ]);
-
-    if (!selectedServer) {
-      return <Message loading />;
-    }
-
-    if (selectedServer.serverNotFound) {
-      return <ServerError />;
-    }
-
-    return <WrappedComponent {...props} />;
-  };
-
-  Component.propTypes = propTypes;
-
-  return Component;
-};

src/servers/helpers/withSelectedServer.tsx

@@ -0,0 +1,29 @@
+import React, { FC, useEffect } from 'react';
+import { RouteChildrenProps } from 'react-router';
+import Message from '../../utils/Message';
+import { isReachableServer, SelectedServer } from '../data';
+
+interface WithSelectedServerProps extends RouteChildrenProps<{ serverId: string }> {
+  selectServer: (serverId: string) => void;
+  selectedServer: SelectedServer;
+}
+
+export const withSelectedServer = (WrappedComponent: FC<WithSelectedServerProps>, ServerError: FC) => (
+  props: WithSelectedServerProps,
+) => {
+  const { selectServer, selectedServer, match } = props;
+
+  useEffect(() => {
+    match?.params?.serverId && selectServer(match?.params.serverId);
+  }, [ match?.params.serverId ]);
+
+  if (!selectedServer) {
+    return <Message loading />;
+  }
+
+  if (!isReachableServer(selectedServer)) {
+    return <ServerError />;
+  }
+
+  return <WrappedComponent {...props} />;
+};