Migrated first component and test to typescript

src/App.js

@@ -1,44 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Route, Switch } from 'react-router-dom';
-import NotFound from './common/NotFound';
-import './App.scss';
-
-const propTypes = {
-  fetchServers: PropTypes.func,
-  servers: PropTypes.object,
-};
-
-const App = (MainHeader, Home, MenuLayout, CreateServer, EditServer, Settings) => {
-  const AppComp = ({ fetchServers, servers }) => {
-    // On first load, try to fetch the remote servers if the list is empty
-    useEffect(() => {
-      if (Object.keys(servers).length === 0) {
-        fetchServers();
-      }
-    }, []);
-
-    return (
-      <div className="container-fluid app-container">
-        <MainHeader />
-
-        <div className="app">
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/settings" component={Settings} />
-            <Route exact path="/server/create" component={CreateServer} />
-            <Route exact path="/server/:serverId/edit" component={EditServer} />
-            <Route path="/server/:serverId" component={MenuLayout} />
-            <Route component={NotFound} />
-          </Switch>
-        </div>
-      </div>
-    );
-  };
-
-  AppComp.propTypes = propTypes;
-
-  return AppComp;
-};
-
-export default App;

src/App.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, FC } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import NotFound from './common/NotFound';
+import './App.scss';
+
+interface AppProps {
+  fetchServers: Function;
+  servers: Record<string, object>;
+}
+
+const App = (MainHeader: FC, Home: FC, MenuLayout: FC, CreateServer: FC, EditServer: FC, Settings: FC) => (
+  { fetchServers, servers }: AppProps,
+) => {
+  // On first load, try to fetch the remote servers if the list is empty
+  useEffect(() => {
+    if (Object.keys(servers).length === 0) {
+      fetchServers();
+    }
+  }, []);
+
+  return (
+    <div className="container-fluid app-container">
+      <MainHeader />
+
+      <div className="app">
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route exact path="/settings" component={Settings} />
+          <Route exact path="/server/create" component={CreateServer} />
+          <Route exact path="/server/:serverId/edit" component={EditServer} />
+          <Route path="/server/:serverId" component={MenuLayout} />
+          <Route component={NotFound} />
+        </Switch>
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/container/index.ts

@@ -1,4 +1,4 @@
-import Bottle from 'bottlejs';
+import Bottle, { IContainer } from 'bottlejs';
 import { withRouter } from 'react-router-dom';
 import { connect as reduxConnect } from 'react-redux';
 import { pick } from 'ramda';
@@ -12,17 +12,19 @@ import provideUtilsServices from '../utils/services/provideServices';
 import provideMercureServices from '../mercure/services/provideServices';
 import provideSettingsServices from '../settings/services/provideServices';
 
+type ActionMap = Record<string, any>;
+
 const bottle = new Bottle();
 const { container } = bottle;
 
-const lazyService = (container, serviceName) => (...args) => container[serviceName](...args);
-const mapActionService = (map, actionName) => ({
+const lazyService = (container: IContainer, serviceName: string) => (...args: any[]) => container[serviceName](...args);
+const mapActionService = (map: ActionMap, actionName: string): ActionMap => ({
   ...map,
 
   // Wrap actual action service in a function so that it is lazily created the first time it is called
   [actionName]: lazyService(container, actionName),
 });
-const connect = (propsFromState, actionServiceNames = []) =>
+const connect = (propsFromState: string[], actionServiceNames: string[] = []) =>
   reduxConnect(
     propsFromState ? pick(propsFromState) : null,
     actionServiceNames.reduce(mapActionService, {}),

src/visits/helpers/OpenMapModalBtn.scss

@@ -1,4 +1,4 @@
-.open-map-modal-btn__btn {
+.open-map-modal-btn__btn.open-map-modal-btn__btn {
   padding: 0;
   margin-right: 1rem;
 }