changess to settings/app.jsx

app/javascript/packs/src/settings/app.jsx

@@ -1,14 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import { addLocaleData } from "react-intl";
+import { IntlProvider, addLocaleData } from "react-intl";
 import enLocaleData from "react-intl/locale-data/en";
+
 import { flattenMessages } from "../../locales/utils";
 import store from "../../app/store";
 import messages from "../../locales/messages";
 
 import Navigation from "../../shared/navigation";
+import NotFound from "../../shared/404/NotFound";
+import MainNav from "./components/MainNav";
+import SettingsAccount from "./components/SettingsAccount";
+import SettingsTeams from "./components/SettingsTeams";
 
 addLocaleData([...enLocaleData]);
 const locale = "en-US";
@@ -16,7 +21,20 @@ const locale = "en-US";
 const SettingsPage = () =>
   <div>
     <Navigation page="Settings" />
-    ....
+    <div className="container">
+      <MainNav />
+      <Switch>
+        <Route exact path="/" component={SettingsAccount} />
+        <Route
+          exact
+          path="/settings"
+          render={() => <Redirect to="/settings/account/profile" />}
+        />
+        <Route path="/settings/account" component={SettingsAccount} />
+        <Route path="/settings/teams" component={SettingsTeams} />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
   </div>;
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -26,7 +44,11 @@ document.addEventListener("DOMContentLoaded", () => {
         locale={locale}
         messages={flattenMessages(messages[locale])}
       >
-        <SettingsPage />
+        <div>
+          <BrowserRouter>
+            <SettingsPage />
+          </BrowserRouter>
+        </div>
       </IntlProvider>
     </Provider>,
     document.getElementById("root")