Fixed whitelist and banlist not showing up, added in flags to player.…

… Bumped version number to 3.0.2

TODO.md

@@ -1,13 +1,8 @@
 # TODO List
+* Confirmation dialog for ban/kick
 * Add more info about player:
     * VAC Bans
         * https://api.steampowered.com/ISteamUser/GetPlayerBans/v1/
-    * Region
-        * geo ip
-    * Average Ping
-        * probably require a ping reducer that references a player steamid
-        * Something like`{id: STEAMID, ping: NUMBER, time: DATE, server: SERVERID}`
-* Right Click Server Menu for ServerBar Edit Server does not bring up edit server dialog
 * Auto updater For Application (update-electron-app)
 * Self Hosted
   * Plot Players on Map from self Hosted server

package.json

@@ -1,7 +1,7 @@
 {
   "name": "misrcon",
   "productName": "MisRCON",
-  "version": "3.0.1-rc-8",
+  "version": "3.0.2",
   "description": "RCON Tool and Map for Miscreated game.",
   "repository": {
     "url": "https://github.com/csprance/misrcon.git"
@@ -143,8 +143,8 @@
     "electron-prebuilt-compile": "4.0.0",
     "jest": "^24.8.0",
     "ts-jest": "^24.0.2",
-    "tslint": "latest",
+    "tslint": "^5.20.0",
     "tslint-config-prettier": "latest",
-    "typescript": "latest"
+    "typescript": "^3.6.3"
   }
 }

src/@types/global.d.ts

@@ -1,2 +1,7 @@
+interface Window {
+  store: any;
+  NodeMisrcon: any;
+}
+
 declare module 'react-chartkick';
 declare module 'electron-find';

src/app.tsx

@@ -1,21 +1,51 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import { NodeMisrcon } from 'node-misrcon';
 import * as React from 'react';
+import { Provider } from 'react-redux';
 import { MemoryRouter, Redirect, Route, Switch } from 'react-router';
+import { PersistGate } from 'redux-persist/integration/react';
+
 import Layout from './components/Layout';
+import { configureStore } from './redux/store';
+import routes, { homepage } from './routes';
+import { GlobalStyles } from './styles/global-styles';
+import ScrollbarStyles from './styles/scrollbar-styles';
+import { theme } from './styles/theme';
 
-import routes from './routes';
+window.NodeMisrcon = NodeMisrcon;
+const { store, persistor } = configureStore();
+window.store = store;
 
-type Props = {};
+interface Props {}
 export const App: React.FunctionComponent<Props> = () => {
   return (
-    <MemoryRouter>
-      <Layout>
-        <Switch>
-          <Route exact path="/" render={() => <Redirect to="/console" />} />
-          {routes.map((route, idx) => (
-            <Route key={idx} path={route.path} component={route.component} />
-          ))}
-        </Switch>
-      </Layout>
-    </MemoryRouter>
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          <GlobalStyles />
+          <ScrollbarStyles />
+          <MemoryRouter>
+            <Layout>
+              <Switch>
+                <Route
+                  exact
+                  path="/"
+                  render={() => <Redirect to={homepage} />}
+                />
+                {routes.map((route, idx) => (
+                  <Route
+                    key={idx}
+                    path={route.path}
+                    component={route.component}
+                  />
+                ))}
+              </Switch>
+            </Layout>
+          </MemoryRouter>
+        </MuiThemeProvider>
+      </PersistGate>
+    </Provider>
   );
 };

src/components/FrameworkRenderers/BanControlsRenderer.tsx

@@ -0,0 +1,44 @@
+import Button from '@material-ui/core/Button';
+import { ICellRendererParams } from 'ag-grid-community';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {
+  banSteamIDThunk,
+  removeBanSteamIDThunk
+} from '../../redux/players/actions';
+import { isBannedOnActiveServerBySteamIDSelector } from '../../redux/players/selectors';
+import { getGetStateFunc } from '../../redux/selectors';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BanControlsRenderer: React.FunctionComponent<ICellRendererParams> = ({
+  data
+}) => {
+  const { steam } = data;
+  const dispatch = (window as any).store.dispatch;
+  const getState = getGetStateFunc(dispatch);
+  const isBanned = isBannedOnActiveServerBySteamIDSelector(getState(), {
+    steam
+  });
+
+  const handleClick = () => {
+    if (isBanned) {
+      dispatch(removeBanSteamIDThunk(steam));
+    } else {
+      dispatch(banSteamIDThunk(steam));
+    }
+  };
+  return (
+    <Wrapper>
+      <Button onClick={handleClick}>{isBanned ? 'UnBan' : 'Ban'}</Button>
+    </Wrapper>
+  );
+};
+export default BanControlsRenderer;

src/components/FrameworkRenderers/KickControlsRenderer.tsx

@@ -0,0 +1,32 @@
+import Button from '@material-ui/core/Button';
+import { ICellRendererParams } from 'ag-grid-community';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { kickSteamIDThunk } from '../../redux/players/actions';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const KickControlsRenderer: React.FunctionComponent<ICellRendererParams> = ({
+  data
+}) => {
+  const { steam, active } = data;
+  const dispatch = (window as any).store.dispatch;
+  const handleClick = () => {
+    dispatch(kickSteamIDThunk(steam));
+  };
+  return (
+    <Wrapper>
+      <Button onClick={handleClick} disabled={!active}>
+        Kick
+      </Button>
+    </Wrapper>
+  );
+};
+export default KickControlsRenderer;

src/components/FrameworkRenderers/WhitelistControlsRenderer.tsx

@@ -0,0 +1,50 @@
+import Button from '@material-ui/core/Button';
+import { ICellRendererParams } from 'ag-grid-community';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {
+  removeWhitelistSteamIDThunk,
+  whitelistSteamIDThunk
+} from '../../redux/players/actions';
+import { isWhitelistedOnActiveServerBySteamIDSelector } from '../../redux/players/selectors';
+import { getGetStateFunc } from '../../redux/selectors';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const WhitelistControlsRenderer: React.FunctionComponent<
+  ICellRendererParams
+> = ({ data }) => {
+  const { steam } = data;
+  const dispatch = (window as any).store.dispatch;
+  const getState = getGetStateFunc(dispatch);
+  const isWhitelisted = isWhitelistedOnActiveServerBySteamIDSelector(
+    getState(),
+    {
+      steam
+    }
+  );
+
+  const handleClick = () => {
+    if (isWhitelisted) {
+      dispatch(removeWhitelistSteamIDThunk(steam));
+    } else {
+      dispatch(whitelistSteamIDThunk(steam));
+    }
+  };
+  return (
+    <Wrapper>
+      <Button onClick={handleClick}>
+        {' '}
+        {isWhitelisted ? 'UnWhitelist' : 'Whitelist'}
+      </Button>
+    </Wrapper>
+  );
+};
+export default WhitelistControlsRenderer;

src/components/ServerPropertiesListItem.tsx

@@ -50,7 +50,7 @@ const ServerPropertiesListItem: React.FunctionComponent<Props> = ({
       >
         <ListItemText primary={activeServer.name} />
         <ListItemIcon>
-          <KeyboardArrowDownIcon color={'secondary'} />
+          <KeyboardArrowDownIcon />
         </ListItemIcon>
       </ListItem>
       <ServerPropertiesMenu

src/components/SettingsDialogSettingBoxToggle.tsx

@@ -0,0 +1,57 @@
+import Divider from '@material-ui/core/Divider';
+import * as React from 'react';
+import styled from 'styled-components';
+import { text } from '../styles/colors';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 10px;
+  padding: 10px;
+`;
+
+const SettingName = styled.div`
+  font-size: 1em;
+  font-weight: 600;
+  color: ${text.primary};
+  justify-content: left;
+  width: 100%;
+  margin-bottom: 20px;
+`;
+const SettingDescription = styled.div`
+  width: 100%;
+  color: ${text.secondary};
+  margin-bottom: 30px;
+`;
+const ActionWrapper = styled.div`
+  width: 100%;
+`;
+
+interface Props {
+  name: string;
+  description: string | React.ReactElement;
+}
+const SettingsDialogSettingBoxToggle: React.FunctionComponent<Props> = ({
+  children,
+  name,
+  description
+}) => {
+  return (
+    <>
+      <Wrapper>
+        <SettingName>{name}</SettingName>
+        <SettingDescription>{description}</SettingDescription>
+        <ActionWrapper>{children}</ActionWrapper>
+      </Wrapper>
+      <Divider
+        style={{ marginTop: 50, width: '100%' }}
+        light
+        variant={'fullWidth'}
+      />
+    </>
+  );
+};
+
+export default SettingsDialogSettingBoxToggle;

src/constants/grid-constants.tsx

@@ -1,13 +1,20 @@
 import * as AgGrid from 'ag-grid-community';
+import BanControlsRenderer from '../components/FrameworkRenderers/BanControlsRenderer';
 import BooleanRenderer from '../components/FrameworkRenderers/BooleanRenderer';
+
 import FlagRenderer from '../components/FrameworkRenderers/FlagRenderer';
+import KickControlsRenderer from '../components/FrameworkRenderers/KickControlsRenderer';
 import NameRenderer from '../components/FrameworkRenderers/NameRenderer';
 import TaskControlsRenderer from '../components/FrameworkRenderers/TaskControlsRenderer';
 import TaskDeleteRenderer from '../components/FrameworkRenderers/TaskDeleteRenderer';
+import WhitelistControlsRenderer from '../components/FrameworkRenderers/WhitelistControlsRenderer';
 
 export const gridOptions: AgGrid.GridOptions = {
   deltaRowDataMode: true, // For redux
   frameworkComponents: {
+    BanControlsRenderer,
+    KickControlsRenderer,
+    WhitelistControlsRenderer,
     BooleanRenderer,
     FlagRenderer,
     NameRenderer,

src/containers/Dialogs/PlayerProfileDialog.tsx

@@ -25,8 +25,8 @@ import {
 } from '../../redux/app/selectors';
 import { pingByPlayerSelector } from '../../redux/ping/selectors';
 import {
-  banPlayerThunk,
-  kickPlayerThunk,
+  banSteamIDThunk,
+  kickSteamIDThunk,
   setPlayerColor,
   setPlayerNote
 } from '../../redux/players/actions';
@@ -92,8 +92,9 @@ const PlayerProfileDialog: React.FunctionComponent<Props> = ({}) => {
     {}
   );
   const closeDialog = () => dispatch(hidePlayerProfileDialog());
-  const handleKickPlayerClicked = () => dispatch(kickPlayerThunk(player));
-  const handleBanPlayerClicked = () => dispatch(banPlayerThunk(player));
+  const handleKickPlayerClicked = () =>
+    dispatch(kickSteamIDThunk(player.steam));
+  const handleBanPlayerClicked = () => dispatch(banSteamIDThunk(player.steam));
   const handleColorButtonClick = (color: string) =>
     dispatch(setPlayerColor(player.steam, color));
   const updatePlayerNote = (steam: string, notes: string) =>

src/containers/Dialogs/SettingsDialog/StateSettingsSection.tsx

@@ -32,9 +32,26 @@ const StateSettingsSection: React.FunctionComponent<Props> = ({}) => {
         name={'Clear Players'}
         description={
           <p>
-            Delete all internal Players application state. This is
-            helpful for when player are not showing up correctly or missing
-            avatars.
+            Delete all internal Players application state. This is helpful for
+            when player are not showing up correctly or missing avatars.
+          </p>
+        }
+      >
+        <Button
+          onClick={deletePlayers}
+          color={'secondary'}
+          variant={'contained'}
+        >
+          Clear Players
+        </Button>
+      </SettingsDialogSettingBox>
+      <SettingsDialogSettingBox
+        name={'Fetch on Server Select'}
+        description={
+          <p>
+            Should the application fetch the data from the server upon selecting
+            a Server Avatar or should we only fetch data when the user asks for
+            it.
           </p>
         }
       >