Adding the ability to Party Up! (#24)

- This PR will allow users to create a shared group leaderboard or 'party' where they can compare multiple grails against each other.
- Each Party can be registered similarly to a Holy Grail sheet by clicking on the register button on the party home page (./party).
- There is a tab to Join the party and (if you are logged in as the owner) a tab to Manage the party.
- When a user Joins the Party, they are put onto a Pending User list and have to be approved by the party owner before they appear on the party scoreboard.
- Once a user is accepted to the party, whenever they save their holy grail a copy will be saved to the Party database for retrieval later.
- There is now a party button (indicated by a 1-2-3 ranking icon) in addition to the home button on the bottom left side of the screen to navigate between the sections of the website.
- This update also includes an ItemScore value, which is a different way to compare grails rather than just items remaining. The ItemScore for any item is relative to its rarity so a rare item (i.e. Tyrael's Might) will have a high ItemScore and a common item will have a very low ItemScore. This is a work in progress, but I wanted to float the idea out there to see if it has any merit. 😄 
- Thanks @Nasicus for the "Party" naming idea. 😃

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2-holy-grail-client",
-  "version": "1.11.0",
+  "version": "2.0.0",
   "scripts": {
     "dev": "react-scripts start",
     "test": "react-scripts test",

client/src/App.tsx

@@ -1,72 +1,66 @@
 import * as React from "react";
+import { FC, useState } from "react";
 import Typography from "@material-ui/core/Typography/Typography";
-import { Route, Switch } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { Home } from "./areas/home/Home";
 import { GithubRibbon } from "./common/components/GithubRibbon";
-import { GrailMode } from "./areas/grail/GrailMode";
 import { GrailArea } from "./areas/grail/GrailArea";
-import { IWithRootPassDownProps, withRoot } from "./withRoot";
-import styled from "styled-components";
+import styled, { ThemeProvider } from "styled-components";
 import { GrailStatistics } from "./areas/GrailStatistics";
+import { Party } from "./areas/party/Party";
+import { PartyHome } from "./areas/party/home/PartyHome";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { MuiThemeProvider } from "@material-ui/core/styles";
 
-export interface IPassDownAppProps {
-  onGrailModeChange: (grailMode: GrailMode) => void;
-}
+import { defaultTheme, IAppTheme, AppThemeContext } from "./AppThemeContext";
 
-interface IAppState {
-  grailMode?: GrailMode;
-}
+export const App: FC = () => {
+  const [appTheme, setAppTheme] = useState<IAppTheme>(defaultTheme);
 
-class AppInternal extends React.Component<IWithRootPassDownProps, IAppState> {
-  public constructor(props: IWithRootPassDownProps) {
-    super(props);
-    this.state = {};
-  }
-
-  private onGrailModeChange = (grailMode: GrailMode) => {
-    if (this.state.grailMode !== grailMode) {
-      this.setState({ grailMode });
-      this.props.onGrailModeChange(grailMode);
-    }
-  };
+  return (
+    <AppThemeContext.Provider value={{ appTheme, setAppTheme: handleSetTheme }}>
+      <MuiThemeProvider theme={appTheme.theme}>
+        <ThemeProvider theme={appTheme.theme}>
+          <>
+            <CssBaseline />
+            <BrowserRouter>
+              <RootContainer>
+                <HeaderContainer>
+                  <Typography variant="h5">{appTheme.title}</Typography>
+                </HeaderContainer>
+                <GithubRibbon url="https://github.com/Nasicus/d2-holy-grail" />
+                <ContentContainer>
+                  <Switch>
+                    <Route exact={true} path="/" component={Home} />
+                    <Route
+                      exact={true}
+                      path="/stats"
+                      component={GrailStatistics}
+                    />
+                    <Route exact={true} path="/party" component={PartyHome} />
+                    <Route
+                      exact={true}
+                      path="/party/:address/:tabType?"
+                      component={Party}
+                    />
+                    <Route
+                      path="/:address/:grailMode?/:tabType?"
+                      component={GrailArea}
+                    />
+                  </Switch>
+                </ContentContainer>
+              </RootContainer>
+            </BrowserRouter>
+          </>
+        </ThemeProvider>
+      </MuiThemeProvider>
+    </AppThemeContext.Provider>
+  );
 
-  private getAppTitle() {
-    switch (this.state.grailMode) {
-      case GrailMode.Eth:
-        return "Diablo II - Eth Grail";
-      case GrailMode.Runeword:
-        return "Diablo II - Runeword Grail";
-      default:
-        return "Diablo II - Holy Grail";
-    }
+  function handleSetTheme(appTheme?: IAppTheme) {
+    setAppTheme(appTheme || defaultTheme);
   }
-
-  public render() {
-    const passDownProps = {
-      onGrailModeChange: this.onGrailModeChange
-    } as IPassDownAppProps;
-    return (
-      <RootContainer>
-        <HeaderContainer>
-          <Typography variant="h5">{this.getAppTitle()}</Typography>
-        </HeaderContainer>
-        <GithubRibbon url="https://github.com/Nasicus/d2-holy-grail" />
-        <ContentContainer>
-          <Switch>
-            <Route exact={true} path="/" component={Home} />
-            <Route exact={true} path="/stats" component={GrailStatistics} />
-            <Route
-              path="/:address/:grailMode?/:tabType?"
-              render={props => (
-                <GrailArea {...(props as any)} {...passDownProps} />
-              )}
-            />
-          </Switch>
-        </ContentContainer>
-      </RootContainer>
-    );
-  }
-}
+};
 
 const RootContainer = styled.div`
   font-family: ${p => p.theme.typography.fontFamily};
@@ -82,5 +76,3 @@ const HeaderContainer = styled.div`
 const ContentContainer = styled.div`
   padding-top: ${p => p.theme.spacing(1) * 6}px;
 `;
-
-export const App = withRoot(AppInternal);

client/src/AppThemeContext.tsx

@@ -0,0 +1,57 @@
+import { createContext } from "react";
+import { Theme, createMuiTheme } from "@material-ui/core";
+import { purple, green, brown, grey, blue } from "@material-ui/core/colors";
+
+export const AppThemeContext = createContext<{
+  appTheme: IAppTheme;
+  setAppTheme: (theme?: IAppTheme) => any;
+}>(null);
+
+export interface IAppTheme {
+  theme: Theme;
+  title: string;
+}
+
+export const defaultTheme: IAppTheme = {
+  theme: createMuiTheme({
+    typography: {},
+    palette: {
+      primary: purple,
+      secondary: green
+    }
+  }),
+  title: "Diablo II - Holy Grail"
+};
+
+export const ethTheme: IAppTheme = {
+  theme: createMuiTheme({
+    typography: {},
+    palette: {
+      primary: brown,
+      secondary: grey
+    }
+  }),
+  title: "Diablo II - Eth Grail"
+};
+
+export const runewordTheme: IAppTheme = {
+  theme: createMuiTheme({
+    typography: {},
+    palette: {
+      primary: grey,
+      secondary: brown
+    }
+  }),
+  title: "Diablo II - Runeword Grail"
+};
+
+export const partyTheme: IAppTheme = {
+  theme: createMuiTheme({
+    typography: {},
+    palette: {
+      primary: blue,
+      secondary: grey
+    }
+  }),
+  title: "Diablo II - Holy Grail Party"
+};

client/src/RouteManager.ts

@@ -1,6 +1,7 @@
 import { parse, stringify } from "query-string";
 import { RouteComponentProps } from "react-router-dom";
 import { TabType } from "./areas/grail/TabType";
+import { PartyTabType } from "./areas/party/PartyTabType";
 import { GrailMode } from "./areas/grail/GrailMode";
 
 export interface IGrailAreaRouterParams {
@@ -9,6 +10,11 @@ export interface IGrailAreaRouterParams {
   tabType?: TabType;
 }
 
+export interface IPartyAreaRouterParams {
+  address: string;
+  tabType?: PartyTabType;
+}
+
 export interface IGrailAreaQueryObject {
   itemName?: string;
   missingOnly?: string;
@@ -44,4 +50,16 @@ export class RouteManager {
       search: newQuery ? stringify(newQuery) : props.location.search
     });
   }
+
+  public static updatePartyTabType(
+    props: RouteComponentProps<IPartyAreaRouterParams>,
+    tabType: PartyTabType
+  ) {
+    const params = props.match.params;
+
+    props.history.push({
+      pathname: `/party/${params.address}/${tabType ||
+        PartyTabType.Leaderboard}`
+    });
+  }
 }