Campaign filter

src/campaign/fetch/containers/AllCampaignsView.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import FetchCampaigns from "../components/FetchCampaigns";
+import * as Formsy from "formsy-react";
+import { FormsySelect } from "formsy-material-ui/lib";
+import { MenuItem } from "material-ui";
+
+interface IAllCampaignsProps {
+    params: any;
+}
+
+const gameTypes = [ "all", "micro20", "dnd35"];
+
+class AllCampaignsView extends React.Component<IAllCampaignsProps, void> {
+    private gameTypeMenu;
+
+    private constructor (props) {
+        super(props);
+        this.props.params.selectedGame = "all";
+        this.gameTypeMenu = this.generateMenuItems(gameTypes);
+    }
+    public render() {
+        let gameDropDown = <section className="gameTypeSection">
+            <Formsy.Form
+                    className="campaignViewForm"
+                >
+                <FormsySelect
+                        key={"gameTypeList"}
+                        className="gameTypeDropDown"
+                        autoComplete="off"
+                        name={"gameType"}
+                        floatingLabelText={"Game Type"}
+                        value={this.props.params.selectedGame}
+                        onChange={this.changeCampaign.bind(this, null)}
+
+                    >
+                        <MenuItem primaryText=" "/>
+                        {this.gameTypeMenu}
+                </FormsySelect>
+            </Formsy.Form>
+        </section>;
+        let gameType = this.props.params.selectedGame;
+        let campaigns;
+        if (gameType === "all") {
+            campaigns = gameTypes.map((game) => {
+                if (game === "all") {
+                    return;
+                }
+                return <FetchCampaigns key={game} gameType={game}/>;
+            });
+        } else {
+            campaigns = <FetchCampaigns key={gameType} gameType={gameType}/>;
+        }
+        return <section className="CampaignViewAll">
+            {gameDropDown}
+            {campaigns}
+        </section>;
+    }
+    private generateMenuItems(menuItems) {
+        return menuItems.map((menuName, index) => {
+            return <MenuItem key={index} value={menuName.toLowerCase()} primaryText={menuName} />;
+        });
+    }
+    private changeCampaign(value: string, event) {
+        this.props.params.selectedGame = event.target.innerHTML;
+        this.forceUpdate();
+    }
+}
+
+export default AllCampaignsView;

src/campaign/routes.tsx

@@ -1,5 +1,6 @@
 import CampaignsView from "./fetch/containers/CampaignsView";
 import CampaignView from "./fetch/containers/CampaignView";
+import AllCampaignsView from "./fetch/containers/AllCampaignsView";
 import CampaignCreator from "./create/containers/CampaignCreator";
 import { simpleAuth } from "../auth/authMethods";
 
@@ -20,5 +21,10 @@ export default {
             onEnter: simpleAuth,
             path: "/campaign/create",
         },
+        {
+            component: AllCampaignsView,
+            onEnter: simpleAuth,
+            path: "/campaigns",
+        },
     ],
 };

src/character/fetch/containers/AllCharactersView.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import FetchCharacters from "../components/FetchCharacters";
+import * as Formsy from "formsy-react";
+import { FormsySelect } from "formsy-material-ui/lib";
+import { MenuItem } from "material-ui";
+
+interface IAllCharactersViewProps {
+    params: any;
+}
+const gameTypes = [ "all", "micro20", "dnd35"];
+class AllCharactersView extends React.Component<IAllCharactersViewProps, void> {
+    private gameTypeMenu;
+
+    private constructor (props) {
+        super(props);
+        this.props.params.selectedGame = "all";
+        this.gameTypeMenu = this.generateMenuItems(gameTypes);
+    }
+    public render() {
+        let gameDropDown = <section className="gameTypeSection">
+            <Formsy.Form
+                    className="campaignViewForm"
+                >
+                <FormsySelect
+                        key={"gameTypeList"}
+                        className="gameTypeDropDown"
+                        autoComplete="off"
+                        name={"gameType"}
+                        floatingLabelText={"Game Type"}
+                        value={this.props.params.selectedGame}
+                        onChange={this.changeGameType.bind(this, null)}
+
+                    >
+                        <MenuItem primaryText=" "/>
+                        {this.gameTypeMenu}
+                </FormsySelect>
+            </Formsy.Form>
+        </section>;
+        let gameType = this.props.params.selectedGame;
+        let characters;
+        if (gameType === "all") {
+            characters = gameTypes.map((game) => {
+                if (game === "all") {
+                    return;
+                }
+                return <FetchCharacters key={game} gameType={game}/>;
+            });
+        } else {
+            characters = <FetchCharacters key={gameType} gameType={gameType}/>;
+        }
+        return <section className="CharacterViewAll">
+            {gameDropDown}
+            {characters}
+        </section>;
+    }
+    private generateMenuItems(menuItems) {
+        return menuItems.map((menuName, index) => {
+            return <MenuItem key={index} value={menuName.toLowerCase()} primaryText={menuName} />;
+        });
+    }
+    private changeGameType(value: string, event) {
+        this.props.params.selectedGame = event.target.innerHTML;
+        this.forceUpdate();
+    }
+}
+
+export default AllCharactersView;

src/character/routes.tsx

@@ -2,6 +2,7 @@ import CharacterCreator from "./creator/containers/CharacterCreator";
 import { simpleAuth } from "../auth/authMethods";
 import CharacterView from "./fetch/containers/CharacterView";
 import CharactersView from "./fetch/containers/CharactersView";
+import AllCharactersView from "./fetch/containers/AllCharactersView";
 
 export default {
     childRoutes: [
@@ -20,5 +21,10 @@ export default {
             onEnter: simpleAuth,
             path: "/:gameType/characters",
         },
+        {
+            component: AllCharactersView,
+            onEnter: simpleAuth,
+            path: "/characters",
+        },
     ],
 };

src/layout/components/Sidebar.tsx

@@ -33,12 +33,12 @@ class Sidebar extends React.Component<ISidebarProps, void> {
                 {icon: <FontIcon className="material-icons">add_circle</FontIcon>,
                     route: "/campaign/create", text: "Campaign Creator"},
                 {icon: <FontIcon className="material-icons">assignment</FontIcon>,
-                    route: "/micro20/campaigns", text: "All Campaigns"},
+                    route: "/campaigns", text: "All Campaigns"},
                 {icon: null, route: null, text: null},
                 {icon: <FontIcon className="material-icons">add_circle</FontIcon>,
                     route: "/character/create", text: "Character Creator"},
                 {icon: <FontIcon className="material-icons">assignment_ind</FontIcon>,
-                    route: "/micro20/characters", text: "All Characters"},
+                    route: "/characters", text: "All Characters"},
                 {icon: null, route: null, text: null},
                 {icon: <FontIcon className="material-icons">settings</FontIcon>,
                     route: "/settings", text: "Settings"},