Finished migrating servers module to TS

src/common/MenuLayout.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { Route, RouteChildrenProps, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { EventData, Swipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,15 +7,11 @@ import classNames from 'classnames';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { useToggle } from '../utils/helpers/hooks';
 import { versionMatch } from '../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
 import NotFound from './NotFound';
 import { AsideMenuProps } from './AsideMenu';
 import './MenuLayout.scss';
 
-interface MenuLayoutProps extends RouteChildrenProps {
-  selectedServer: SelectedServer;
-}
-
 const MenuLayout = (
   TagsList: FC,
   ShortUrls: FC,
@@ -25,7 +21,7 @@ const MenuLayout = (
   TagVisits: FC,
   ShlinkVersions: FC,
   ServerError: FC,
-) => withSelectedServer(({ location, selectedServer }: MenuLayoutProps) => {
+) => withSelectedServer(({ location, selectedServer }) => {
   const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
 
   useEffect(() => hideSidebar(), [ location ]);

src/servers/EditServer.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import NoMenuLayout from '../common/NoMenuLayout';
-import { ServerForm } from './helpers/ServerForm';
-import { withSelectedServer } from './helpers/withSelectedServer';
-import { serverType } from './prop-types';
-
-const propTypes = {
-  editServer: PropTypes.func,
-  selectedServer: serverType,
-  history: PropTypes.shape({
-    push: PropTypes.func,
-    goBack: PropTypes.func,
-  }),
-};
-
-export const EditServer = (ServerError) => {
-  const EditServerComp = ({ editServer, selectedServer, history: { push, goBack } }) => {
-    const handleSubmit = (serverData) => {
-      editServer(selectedServer.id, serverData);
-      push(`/server/${selectedServer.id}/list-short-urls/1`);
-    };
-
-    return (
-      <NoMenuLayout>
-        <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
-          <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
-          <Button outline color="primary">Save</Button>
-        </ServerForm>
-      </NoMenuLayout>
-    );
-  };
-
-  EditServerComp.propTypes = propTypes;
-
-  return withSelectedServer(EditServerComp, ServerError);
-};

src/servers/EditServer.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Button } from 'reactstrap';
+import NoMenuLayout from '../common/NoMenuLayout';
+import { ServerForm } from './helpers/ServerForm';
+import { withSelectedServer } from './helpers/withSelectedServer';
+import { isServerWithId, ServerData } from './data';
+
+interface EditServerProps {
+  editServer: (serverId: string, serverData: ServerData) => void;
+}
+
+export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>((
+  { editServer, selectedServer, history: { push, goBack } },
+) => {
+  if (!isServerWithId(selectedServer)) {
+    return null;
+  }
+
+  const handleSubmit = (serverData: ServerData) => {
+    editServer(selectedServer.id, serverData);
+    push(`/server/${selectedServer.id}/list-short-urls/1`);
+  };
+
+  return (
+    <NoMenuLayout>
+      <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
+        <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
+        <Button outline color="primary">Save</Button>
+      </ServerForm>
+    </NoMenuLayout>
+  );
+}, ServerError);

src/servers/ServersDropdown.js

@@ -1,55 +0,0 @@
-import { isEmpty, values } from 'ramda';
-import React from 'react';
-import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { serverType } from './prop-types';
-
-const propTypes = {
-  servers: PropTypes.object,
-  selectedServer: serverType,
-};
-
-const ServersDropdown = (serversExporter) => {
-  const ServersDropdownComp = ({ servers, selectedServer }) => {
-    const serversList = values(servers);
-
-    const renderServers = () => {
-      if (isEmpty(serversList)) {
-        return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
-      }
-
-      return (
-        <React.Fragment>
-          {serversList.map(({ name, id }) => (
-            <DropdownItem
-              key={id}
-              tag={Link}
-              to={`/server/${id}/list-short-urls/1`}
-              active={selectedServer && selectedServer.id === id}
-            >
-              {name}
-            </DropdownItem>
-          ))}
-          <DropdownItem divider />
-          <DropdownItem className="servers-dropdown__export-item" onClick={() => serversExporter.exportServers()}>
-            Export servers
-          </DropdownItem>
-        </React.Fragment>
-      );
-    };
-
-    return (
-      <UncontrolledDropdown nav inNavbar>
-        <DropdownToggle nav caret>Servers</DropdownToggle>
-        <DropdownMenu right>{renderServers()}</DropdownMenu>
-      </UncontrolledDropdown>
-    );
-  };
-
-  ServersDropdownComp.propTypes = propTypes;
-
-  return ServersDropdownComp;
-};
-
-export default ServersDropdown;

src/servers/ServersDropdown.tsx

@@ -0,0 +1,49 @@
+import { isEmpty, values } from 'ramda';
+import React from 'react';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import ServersExporter from './services/ServersExporter';
+import { isServerWithId, SelectedServer, ServersMap } from './data';
+
+export interface ServersDropdownProps {
+  servers: ServersMap;
+  selectedServer: SelectedServer;
+}
+
+const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, selectedServer }: ServersDropdownProps) => {
+  const serversList = values(servers);
+
+  const renderServers = () => {
+    if (isEmpty(serversList)) {
+      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
+    }
+
+    return (
+      <React.Fragment>
+        {serversList.map(({ name, id }) => (
+          <DropdownItem
+            key={id}
+            tag={Link}
+            to={`/server/${id}/list-short-urls/1`}
+            active={isServerWithId(selectedServer) && selectedServer.id === id}
+          >
+            {name}
+          </DropdownItem>
+        ))}
+        <DropdownItem divider />
+        <DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
+          Export servers
+        </DropdownItem>
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <UncontrolledDropdown nav inNavbar>
+      <DropdownToggle nav caret>Servers</DropdownToggle>
+      <DropdownMenu right>{renderServers()}</DropdownMenu>
+    </UncontrolledDropdown>
+  );
+};
+
+export default ServersDropdown;

src/servers/helpers/withSelectedServer.tsx

@@ -8,22 +8,22 @@ interface WithSelectedServerProps extends RouteChildrenProps<{ serverId: string
   selectedServer: SelectedServer;
 }
 
-export const withSelectedServer = (WrappedComponent: FC<WithSelectedServerProps>, ServerError: FC) => (
-  props: WithSelectedServerProps,
-) => {
-  const { selectServer, selectedServer, match } = props;
+export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServerProps & T>, ServerError: FC) {
+  return (props: WithSelectedServerProps & T) => {
+    const { selectServer, selectedServer, match } = props;
 
-  useEffect(() => {
-    match?.params?.serverId && selectServer(match?.params.serverId);
-  }, [ match?.params.serverId ]);
+    useEffect(() => {
+      match?.params?.serverId && selectServer(match?.params.serverId);
+    }, [ match?.params.serverId ]);
 
-  if (!selectedServer) {
-    return <Message loading />;
-  }
+    if (!selectedServer) {
+      return <Message loading />;
+    }
 
-  if (isNotFoundServer(selectedServer)) {
-    return <ServerError />;
-  }
+    if (isNotFoundServer(selectedServer)) {
+      return <ServerError />;
+    }
 
-  return <WrappedComponent {...props} />;
-};
+    return <WrappedComponent {...props} />;
+  };
+}