Refactor existing components for containers and react router

Author: Thomas Roger Lux

src/common/App.tsx

@@ -1,61 +1,18 @@
 import * as React from "react";
-import { connect } from "react-redux";
+import { Switch, Route } from "react-router-dom";
 
-import { Store } from "common/redux/store"
-import { changeTitle } from "common/redux/action"
-import { Title } from "common/component/Title"
-import { Button } from "common/component/Button"
-
-interface AppProps {
-    title: string;
-    updateTitle: any;
-}
-
-class App extends React.Component<AppProps> {
-    titleList: string[] = [
-        "Hello World!",
-        "High five from React",
-        "Wow. Much skills."
-    ];
-
-    constructor(props: AppProps) {
-        super(props);
-
-        this.setRandomTitle= this.setRandomTitle.bind(this);
-    }
-
-    public setRandomTitle() {
-        let titleIndex = this.titleList.indexOf(this.props.title) + 1;
-        if (titleIndex >= this.titleList.length) {
-            titleIndex = 0;
-        }
-
-        const newTitle = this.titleList[titleIndex];
-        this.props.updateTitle(newTitle);
-    }
+import Home from "common/container/Home";
+import Test from "common/container/Test";
 
+export default class App extends React.Component {
     public render() {
         return (
-            <div className="App">
-                <Title>
-                    {this.props.title}
-                </Title>
-                <Button onClick={this.setRandomTitle}>
-                    Update
-                </Button>
-            </div>
+            <main>
+                <Switch>
+                    <Route exact path="/" component={Home} />
+                    <Route path="/test" component={Test} />
+                </Switch>
+            </main>
         );
     }
 }
-
-const mapStateToProps = (state: Store) => {
-    return {
-        title: state.title
-    }
-}
-
-const mapDispatchToProps = {
-    updateTitle: changeTitle
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(App)

src/common/component/Button.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 
 interface ButtonProps {
-    onClick: any;
-    children: string;
+    children?: any;
+    onClick?: any;
     primary?: boolean;
 }
 

src/common/component/Title.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import styled from "styled-components";
 
 interface TitleProps {
-    children: string;
+    children?: any;
 }
 
 export const Title = (props: TitleProps) => {