Update docs route

TylerShin · Nov 8, 2017 · 16c1ace · 16c1ace
1 parent 1df1c4c
commit 16c1ace
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 46 deletions.
diff --git a/app/components/_variables.scss b/app/components/_variables.scss
@@ -1 +1 @@
-$container-width: 1200px;
+$container-width: 1080px;
diff --git a/app/components/documentation/beforeStart.tsx b/app/components/documentation/beforeStart.tsx
@@ -7,11 +7,11 @@ const content = require("./beforeStart.md");
 
 interface IBeforeStartDocumentationComponentProps {}
 
-export default class BeforeStartDocumentationComponent
-  extends React.PureComponent <IBeforeStartDocumentationComponentProps, {}> {
-    public render() {
-      return (
-        <ContentHighComponent rawHTML={content} />
-      );
-    }
+export default class BeforeStartDocumentationComponent extends React.PureComponent<
+  IBeforeStartDocumentationComponentProps,
+  {}
+> {
+  public render() {
+    return <ContentHighComponent rawHTML={content} />;
+  }
 }
diff --git a/app/components/documentation/documentation.scss b/app/components/documentation/documentation.scss
@@ -1,5 +1,8 @@
+@import "../variables";
+
 .documentContainerWrapper {
-  margin-top: 50px;
+  width: $container-width;
+  margin: 50px auto;
 }
 
 .contentWrapper {

diff --git a/app/components/documentation/index.tsx b/app/components/documentation/index.tsx
@@ -1,15 +1,23 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { withRouter, Route, Switch, Link, RouteComponentProps } from "react-router-dom";
+import IntroDocumentationComponent from "../../components/documentation/intro";
+import AdvancedSettingsDocumentationComponent from "../../components//documentation/advanced";
+import InstallationDocumentationComponent from "../../components/documentation/installation";
+import BeforeStartDocumentationComponent from "../../components/documentation/beforeStart";
+import BasicSettingsDocumentationComponent from "../../components/documentation/basicSettings";
 // styles
 import { withStyles } from "../../helpers/withStylesHelper";
 
 const styles = require("./documentation.scss");
 
-interface IDocumentationComponentProps {}
+interface IDocumentationComponentProps extends RouteComponentProps<null> {}
 
+@withRouter
 @withStyles<typeof DocumentationComponent>(styles)
 export default class DocumentationComponent extends React.PureComponent<IDocumentationComponentProps, {}> {
   public render() {
+    const { match } = this.props;
+
     return (
       <div className={styles.documentContainerWrapper}>
         <div className={`container ${styles.contentWrapper}`}>
@@ -32,7 +40,15 @@ export default class DocumentationComponent extends React.PureComponent<IDocumen
               </li>
             </ul>
           </div>
-          <div className={styles.rightContainer}>{this.props.children}</div>
+          <div className={styles.rightContainer}>
+            <Switch>
+              <Route exact path={match.url} component={IntroDocumentationComponent} />
+              <Route exact path={`${match.url}/beforestart`} component={BeforeStartDocumentationComponent} />
+              <Route exact path={`${match.url}/installation`} component={InstallationDocumentationComponent} />
+              <Route exact path={`${match.url}/basicsettings`} component={BasicSettingsDocumentationComponent} />
+              <Route exact path={`${match.url}/advancedsettings`} component={AdvancedSettingsDocumentationComponent} />
+            </Switch>
+          </div>
         </div>
       </div>
     );

diff --git a/app/routes.tsx b/app/routes.tsx
@@ -4,10 +4,6 @@ import { Route, Switch } from "react-router-dom";
 // containers
 import Root from "./components/root";
 import DocumentationComponent from "./components/documentation";
-import AdvancedSettingsDocumentationComponent from "./components//documentation/advanced";
-import InstallationDocumentationComponent from "./components/documentation/installation";
-import BeforeStartDocumentationComponent from "./components/documentation/beforeStart";
-import BasicSettingsDocumentationComponent from "./components/documentation/basicSettings";
 import HomeComponent from "./components/home";
 import GithubUserContainer from "./components/user";
 // import IntroDocumentationComponent from "./components/documentation/intro";
@@ -24,34 +20,9 @@ interface IServerRoutesMap {
 export const serverRootRoutes: IServerRoutesMap[] = [
   {
     path: "/docs",
-    exact: true,
     component: DocumentationComponent,
     loadData: null,
   },
-  {
-    path: "/beforestart",
-    exact: true,
-    component: BeforeStartDocumentationComponent,
-    loadData: null,
-  },
-  {
-    path: "/installation",
-    exact: true,
-    component: InstallationDocumentationComponent,
-    loadData: null,
-  },
-  {
-    path: "/basicsettings",
-    exact: true,
-    component: BasicSettingsDocumentationComponent,
-    loadData: null,
-  },
-  {
-    path: "/advancedsettings",
-    exact: true,
-    component: AdvancedSettingsDocumentationComponent,
-    loadData: null,
-  },
   {
     path: "/users/:username",
     component: GithubUserContainer,
@@ -66,11 +37,7 @@ export const RootRoutes = () => (
     <Root>
       <Switch>
         <Route exact path="/" component={HomeComponent} />
-        <Route exact path="/docs" component={DocumentationComponent} />
-        <Route exact path="/beforestart" component={BeforeStartDocumentationComponent} />
-        <Route exact path="/installation" component={InstallationDocumentationComponent} />
-        <Route exact path="/basicsettings" component={BasicSettingsDocumentationComponent} />
-        <Route exact path="/advancedsettings" component={AdvancedSettingsDocumentationComponent} />
+        <Route path="/docs" component={DocumentationComponent} />
         <Route path="/users/:username" component={GithubUserContainer} />
       </Switch>
     </Root>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		$container-width: 1200px;
		$container-width: 1080px;