Migrated to TS all servers helpers

src/container/store.ts

@@ -4,7 +4,7 @@ import { save, load, RLSOptions } from 'redux-localstorage-simple';
 import reducers from '../reducers';
 
 const isProduction = process.env.NODE_ENV !== 'production';
-const composeEnhancers: Function = !isProduction && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers: Function = !isProduction && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const localStorageConfig: RLSOptions = {
   states: [ 'settings', 'servers' ],

src/mercure/helpers/index.js

@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
-
-export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => {
-  const { mercureHubUrl, token, loading, error } = mercureInfo;
-
-  if (loading || error) {
-    return undefined;
-  }
-
-  const hubUrl = new URL(mercureHubUrl);
-
-  hubUrl.searchParams.append('topic', topic);
-  const es = new EventSource(hubUrl, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-
-  es.onmessage = ({ data }) => onMessage(JSON.parse(data));
-  es.onerror = ({ status }) => status === 401 && onTokenExpired();
-
-  return () => es.close();
-};
-
-export const useMercureTopicBinding = (mercureInfo, topic, onMessage, onTokenExpired) => {
-  useEffect(bindToMercureTopic(mercureInfo, topic, onMessage, onTokenExpired), [ mercureInfo ]);
-};

src/mercure/helpers/index.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
+import { MercureInfo } from '../reducers/mercureInfo';
+
+export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topic: string, onMessage: (message: T) => void, onTokenExpired: Function) => () => { // eslint-disable-line max-len
+  const { mercureHubUrl, token, loading, error } = mercureInfo;
+
+  if (loading || error || !mercureHubUrl) {
+    return undefined;
+  }
+
+  const hubUrl = new URL(mercureHubUrl);
+
+  hubUrl.searchParams.append('topic', topic);
+  const es = new EventSource(hubUrl, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  es.onmessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
+  es.onerror = ({ status }: { status: number }) => status === 401 && onTokenExpired();
+
+  return () => es.close();
+};
+
+export const useMercureTopicBinding = <T>(
+  mercureInfo: MercureInfo,
+  topic: string,
+  onMessage: (message: T) => void,
+  onTokenExpired: Function,
+) => {
+  useEffect(bindToMercureTopic(mercureInfo, topic, onMessage, onTokenExpired), [ mercureInfo ]);
+};

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} />;
+};