Webatrice P.O.C. (#3854)

* port webclient POC into react shell

* Abstract websocket messaging behind redux store

* refactor architecture

* add rooms store

* introduce application service layer and login form

* display room messages

* implement roomSay

* improve Room view styling

* display room games

* improve gameList update logic

* hide protected games

* improve game update logic

* move mapping to earlier lifecycle hook

* add autoscroll to bottom

* tabs to spaces, refresh guard

* implement server joins/leaves

* show users in room

* add material-ui to build

* refactor, add room joins/leaves to store and render

* begin using Material UI components

* fix spectatorsCount

* remove unused package

* improve Server and Room styling

* fix scroll context

* route on room join

* refactor room path

* add auth guard

* refactor authGuard export

* add missing files

* clear store on disconnect, add logout button to Account view

* fix disconnect handling

* Safari fixes

* organize current todos

* improve login page and server status tracking

* improve login page

* introduce sorting arch, refine reducers, begin viewLogHistory

* audit fix for handlebars

* implement moderator log view

* comply with code style rules

* remove original POC from codebase

* add missing semi

* minor improvements, begin registration functionality

* retry as ws when wss fails

additionally, dont mutate the default options when connecting

* retain user/pass in WebClient.options for login

* take protocol off of options, make it a connect param that defaults to wss

* cleanup server page styling

* match wss logic with desktop client

* add virtual scroll component, add context menu to UserDisplay

* revert VirtualTable on messages

* improve styling for Room view

* add routing to Player view

* increase tooltip delay

* begin implementing Account view

* disable app level contextMenu

* implement buddy/ignore list management

* fix gitignore

Co-authored-by: Jay Letto <jeremy.letto@merrillcorp.com>
Co-authored-by: skwerlman <skwerlman@users.noreply.github.com>
Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/store/common/SortUtil.tsx

@@ -0,0 +1,147 @@
+import { SortBy, SortDirection, User } from "types";
+
+export class SortUtil {
+  static sortByField(arr:  any[], sortBy: SortBy): void {
+    if (arr.length) {
+      const field = SortUtil.resolveFieldChain(arr[0], sortBy.field);
+      const fieldType = typeof field;
+
+      if (fieldType === "string") {
+        SortUtil.sortByString(arr, sortBy);
+        return;
+      }
+
+      if (fieldType === "number") {
+        SortUtil.sortByNumber(arr, sortBy);
+        return;
+      }
+
+      throw new Error("SortField must resolve to either a string or number");
+    }
+  }
+
+  static sortByFields(arr: any[], sorts: SortBy[]) {
+    if (arr.length) {
+      arr.sort((a, b) => {
+        for (let i = 0; i < sorts.length; i++) {
+          const sortBy = sorts[i];
+          const field = SortUtil.resolveFieldChain(arr[0], sortBy.field);
+          
+          const fieldType = typeof field;
+
+          if (fieldType === "string") {
+            const result = SortUtil.stringComparator(a, b, sortBy);
+
+            if (result) {
+              return result;
+            }
+          }
+
+          if (fieldType === "number") {
+            const result = SortUtil.numberComparator(a, b, sortBy);
+
+            if (result) {
+              return result;
+            }
+          }
+
+          throw new Error("SortField must resolve to either a string or number");
+        }
+
+        return 0;
+      })
+    }
+  }
+
+  static sortUsersByField(users: User[], sortBy: SortBy) {
+    if (users.length) {
+      users.sort((a, b) => SortUtil.userComparator(a, b, sortBy))
+    }
+  }
+
+  static toggleSortBy(field: string, sortBy: SortBy) {
+    const sameField = field === sortBy.field;
+    const isASC = sortBy.order === SortDirection.ASC;
+
+    return {
+      field,
+      order: sameField && isASC ? SortDirection.DESC : SortDirection.ASC
+    }
+  }
+
+  private static sortByNumber(arr: any[], sortBy: SortBy): void {
+    arr.sort((a, b) => SortUtil.numberComparator(a, b, sortBy));
+  }
+
+  private static sortByString(arr: any[], sortBy: SortBy): void {
+    arr.sort((a, b) => SortUtil.stringComparator(a, b, sortBy));
+  }
+
+  private static userComparator(a, b, sortBy, sortByUserLevel = true) {
+    if (sortByUserLevel) {
+      const adminSortBy = {
+        field: "userLevel",
+        order: SortDirection.DESC
+      };
+
+      const adminSorted = SortUtil.numberComparator(a, b, adminSortBy);
+
+      if (adminSorted) {
+        return adminSorted;
+      }
+    }
+
+    const sorted = SortUtil.stringComparator(a, b, sortBy);
+
+    if (sorted) {
+      return sorted;
+    }
+
+    return 0;
+  }
+
+  private static numberComparator(a, b, { field, order }: SortBy) {
+    const aResolved = SortUtil.resolveFieldChain(a, field);
+    const bResolved = SortUtil.resolveFieldChain(b, field);
+
+    if (order === SortDirection.ASC) {
+      return aResolved - bResolved;
+    } else {
+      return bResolved - aResolved;
+    }
+  }
+
+  private static stringComparator(a, b, { field, order }: SortBy) {
+    const aResolved = SortUtil.resolveFieldChain(a, field);
+    const bResolved = SortUtil.resolveFieldChain(b, field);
+
+    // Force empty strings to sort to bottom
+    if (!aResolved && !bResolved) { return 0; }
+    if (!aResolved) { return 1; }
+    if (!bResolved) { return -1; }
+
+    if (order === SortDirection.ASC) {
+      return aResolved.localeCompare(bResolved);
+    } else {
+      return bResolved.localeCompare(aResolved);
+    }
+  }
+
+  private static resolveFieldChain(obj: object, field: string) {
+    const links = field.split(".");
+
+    if (links.length > 1) {
+      return links.reduce((obj, link) => {
+        const parsed = parseInt(link, 10);
+
+        if (parsed.toLocaleString() === "NaN") {
+          return obj[link];
+        } else {
+          return obj[parsed];
+        }
+      }, obj) || null;
+    } else {
+      return obj[field];
+    }
+  }
+}

webclient/src/store/common/index.ts

@@ -0,0 +1 @@
+export * from "./SortUtil";

webclient/src/store/index.ts

@@ -0,0 +1 @@
+export * from "./store";

webclient/src/store/rooms/index.ts

@@ -0,0 +1,6 @@
+export * from "./rooms.actions";
+export * from "./rooms.dispatch";
+export * from "./rooms.interfaces";
+export * from "./rooms.reducer";
+export * from "./rooms.selectors";
+export * from "./rooms.types";

webclient/src/store/rooms/rooms.actions.tsx

@@ -0,0 +1,53 @@
+import { Types } from "./rooms.types";
+
+export const Actions = {
+  clearStore: () => ({
+    type: Types.CLEAR_STORE
+  }),
+  
+  updateRooms: rooms => ({
+    type: Types.UPDATE_ROOMS,
+    rooms
+  }),
+
+  joinRoom: roomInfo => ({
+    type: Types.JOIN_ROOM,
+    roomInfo
+  }),
+
+  leaveRoom: roomId => ({
+    type: Types.LEAVE_ROOM,
+    roomId
+  }),
+
+  addMessage: (roomId, message) => ({
+    type: Types.ADD_MESSAGE,
+    roomId,
+    message
+  }),
+
+  updateGames: (roomId, games) => ({
+    type: Types.UPDATE_GAMES,
+    roomId,
+    games
+  }),
+
+  userJoined: (roomId, user) => ({
+    type: Types.USER_JOINED,
+    roomId,
+    user
+  }),
+
+  userLeft: (roomId, name) => ({
+    type: Types.USER_LEFT,
+    roomId,
+    name
+  }),
+
+  sortGames: (roomId, field, order) => ({
+    type: Types.SORT_GAMES,
+    roomId,
+    field,
+    order
+  })
+}

webclient/src/store/rooms/rooms.dispatch.tsx

@@ -0,0 +1,48 @@
+import { reset } from 'redux-form';
+import { Actions } from "./rooms.actions";
+import { store } from "../store";
+
+// const history = useHistory();
+
+export const Dispatch = {
+  clearStore: () => {
+    store.dispatch(Actions.clearStore());
+  },
+  
+  updateRooms: rooms => {
+    store.dispatch(Actions.updateRooms(rooms));
+  },
+
+  joinRoom: roomInfo => {
+    store.dispatch(Actions.joinRoom(roomInfo));
+
+  },
+
+  leaveRoom: roomId => {
+    store.dispatch(Actions.leaveRoom(roomId));
+  },
+
+  addMessage: (roomId, message) => {
+    if (message.name) {
+      store.dispatch(reset('sayMessage'));
+    }
+    
+    store.dispatch(Actions.addMessage(roomId, message));
+  },
+
+  updateGames: (roomId, games) => {
+    store.dispatch(Actions.updateGames(roomId, games));
+  },
+
+  userJoined: (roomId, user) => {
+    store.dispatch(Actions.userJoined(roomId, user));
+  },
+
+  userLeft: (roomId, name) => {
+    store.dispatch(Actions.userLeft(roomId, name));
+  },
+
+  sortGames: (roomId, field, order) => {
+    store.dispatch(Actions.sortGames(roomId, field, order));
+  }
+}

webclient/src/store/rooms/rooms.interfaces.tsx

@@ -0,0 +1,36 @@
+import { GameSortField, Room, SortBy, UserSortField } from "types";
+
+export interface RoomsState {
+  rooms: RoomsStateRooms;
+  joined: JoinedRooms;
+  messages: RoomsStateMessages;
+  sortGamesBy: RoomsStateSortGamesBy;
+  sortUsersBy: RoomsStateSortUsersBy;
+}
+
+export interface RoomsStateRooms {
+  [roomId: number]: Room;
+}
+
+export interface JoinedRooms {
+  [roomId: number]: boolean;
+}
+
+export interface RoomsStateMessages {
+  [roomId: number]: Message[];
+}
+
+export interface RoomsStateSortGamesBy extends SortBy {
+  field: GameSortField
+}
+
+export interface RoomsStateSortUsersBy extends SortBy {
+  field: UserSortField
+}
+
+export interface Message {
+  message: string;
+  messageType: number;
+  timeReceived: number;
+  timeOf?: number;
+}

webclient/src/store/rooms/rooms.reducer.tsx

@@ -0,0 +1,270 @@
+import * as _ from "lodash";
+
+import { GameSortField, UserSortField, SortDirection } from "types";
+
+import { SortUtil } from "../common";
+
+import { RoomsState } from "./rooms.interfaces"
+import { MAX_ROOM_MESSAGES, Types } from "./rooms.types";
+
+const initialState: RoomsState = {
+  rooms: {},
+  joined: {},
+  messages: {},
+  sortGamesBy: {
+    field: GameSortField.START_TIME,
+    order: SortDirection.DESC
+  },
+  sortUsersBy: {
+    field: UserSortField.NAME,
+    order: SortDirection.ASC
+  }
+};
+
+export const roomsReducer = (state = initialState, action: any) => {
+  switch(action.type) {
+    case Types.CLEAR_STORE: {
+      return {
+        ...initialState
+      };
+    }
+    case Types.UPDATE_ROOMS: {
+      const rooms = {
+        ...state.rooms
+      };
+
+      // Server does not send everything on updates
+      _.each(action.rooms, (room, order) => {
+        const { roomId } = room;
+        const existing = rooms[roomId] || {};
+        
+        const update = { ...room };
+        delete update.gameList;
+        delete update.gametypeList;
+        delete update.userList;
+
+        rooms[roomId] = {
+          ...existing,
+          ...update,
+          order
+        };
+      });
+
+      return { ...state, rooms };
+    }
+    case Types.JOIN_ROOM: {
+      const { roomInfo } = action;
+      const { joined, rooms, sortGamesBy, sortUsersBy } = state;
+
+      const { roomId } = roomInfo;
+
+      const gameList = [
+        ...roomInfo.gameList
+      ];
+
+      const userList = [
+        ...roomInfo.userList
+      ];
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+      SortUtil.sortUsersByField(userList, sortUsersBy);
+
+      return {
+        ...state,
+
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...roomInfo,
+            gameList,
+            userList
+          }
+        },
+
+        joined: {
+          ...joined,
+          [roomId]: true
+        },
+      }
+    }
+    case Types.LEAVE_ROOM: {
+      const { roomId } = action;
+      const { joined, messages } = state;
+
+      const _joined = {
+        ...joined
+      };
+
+      const _messages = {
+        ...messages
+      };
+
+      delete _joined[roomId];
+      delete _messages[roomId];
+
+      return {
+        ...state,
+
+        joined: _joined,
+        messages: _messages,
+      }
+    }
+    case Types.ADD_MESSAGE: {
+      const { roomId, message } = action;
+      const { messages } = state;
+
+      let roomMessages = [ ...(messages[roomId] || []) ];
+
+      if (roomMessages.length === MAX_ROOM_MESSAGES) {
+        roomMessages.shift();
+      }
+
+      message.timeReceived = new Date().getTime();
+      roomMessages.push(message);
+
+      return {
+        ...state,
+        messages: {
+          ...messages,
+
+          [roomId]: [
+            ...roomMessages
+          ]
+        }
+      }
+    }
+    // @TODO improve this reducer, likely by improving the store model
+    case Types.UPDATE_GAMES: {
+      const { roomId, games } = action;
+      const { rooms, sortGamesBy } = state;
+      const room = rooms[roomId];
+
+      if (!room) {
+        return { ...state };
+      }
+
+      // Create map of games with update objects
+      const toUpdate = games.reduce((map, game) => {
+        map[game.gameId] = game;
+        return map;
+      }, {});
+
+      const gameUpdates = room.gameList
+        // filter out closed games and remove from update map
+        .filter(game => {
+          const gameUpdate = toUpdate[game.gameId];
+          const closedGame = gameUpdate && gameUpdate.closed;
+
+          if (closedGame) {
+            delete toUpdate[game.gameId];
+          }
+
+          return !closedGame;
+        })
+        .map(game => {
+          const gameUpdate = toUpdate[game.gameId];
+
+          if (gameUpdate) {
+            delete toUpdate[game.gameId];
+
+            return {
+              ...game,
+              ...gameUpdate
+            };
+          }
+
+          return game;
+        });
+
+      // Push new games to end of list
+      if (_.size(toUpdate)) {
+        _.each(toUpdate, game => gameUpdates.push(game));
+      }
+
+      const gameList = [ ...gameUpdates ];
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            gameList
+          }
+        }
+      }
+    }
+    case Types.USER_JOINED: {
+      const { roomId, user } = action;
+      const { rooms, sortUsersBy } = state;
+
+      const room = { ...rooms[roomId] };
+
+      const userList = [
+        ...room.userList,
+        user
+      ];
+
+      SortUtil.sortUsersByField(userList, sortUsersBy);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            userList
+          } 
+        }
+      };
+    }
+    case Types.USER_LEFT: {
+      const { roomId, name } = action;
+      const { rooms } = state;
+
+      const room = { ...rooms[roomId] };
+      const userList = room.userList.filter(user =>  user.name !== name);
+
+      return {
+        ...state,
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...room,
+            userList
+          } 
+        }
+      };
+    }
+    case Types.SORT_GAMES: {
+      const { field, order, roomId } = action;
+      const { rooms } = state;
+
+      const gameList = [ ...rooms[roomId].gameList ];
+
+      const sortGamesBy = {
+        field, order
+      };
+
+      SortUtil.sortByField(gameList, sortGamesBy);
+
+      return {
+        ...state,
+
+        rooms: {
+          ...rooms,
+          [roomId]: {
+            ...rooms[roomId],
+            gameList
+          }
+        },
+
+        sortGamesBy
+      }
+    }
+    default:
+      return state;
+  }
+}

webclient/src/store/rooms/rooms.selectors.tsx

@@ -0,0 +1,26 @@
+import * as _ from "lodash";
+import { RoomsState } from "./rooms.interfaces";
+
+interface State {
+  rooms: RoomsState
+}
+
+export const Selectors = {
+  getRooms: ({ rooms }: State) => rooms.rooms,
+  getRoom: ({ rooms }: State, id: number) =>
+    _.find(rooms.rooms, ({roomId}) => roomId === id),
+  getJoined: ({ rooms }: State) => rooms.joined,
+  getMessages: ({ rooms }: State) => rooms.messages,
+  getSortGamesBy: ({ rooms: { sortGamesBy } }: State) => sortGamesBy,
+  getSortUsersBy: ({ rooms: { sortUsersBy } }: State) => sortUsersBy,
+
+  getJoinedRooms: (state: State) => {
+    const joined = Selectors.getJoined(state);
+    return _.filter(Selectors.getRooms(state), room => joined[room.roomId]);
+  },
+  getRoomMessages: (state: State, roomId: number) => Selectors.getMessages(state)[roomId],
+  getRoomGames: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].gameList,
+  getRoomUsers: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].userList
+
+}
+

webclient/src/store/rooms/rooms.types.tsx

@@ -0,0 +1,13 @@
+export const Types = {
+  CLEAR_STORE: "[Rooms] Clear Store",
+  UPDATE_ROOMS: "[Rooms] Update Rooms",
+  JOIN_ROOM: "[Rooms] Join Room",
+  LEAVE_ROOM: "[Rooms] Leave Room",
+  ADD_MESSAGE: "[Rooms] Add Message",
+  UPDATE_GAMES: "[Rooms] Update Games",
+  USER_JOINED: "[Rooms] User Joined",
+  USER_LEFT: "[Rooms] User Left",
+  SORT_GAMES: "[Rooms] Sort Games"
+};
+
+export const MAX_ROOM_MESSAGES = 1000;

webclient/src/store/rootReducer.tsx

@@ -0,0 +1,12 @@
+import { combineReducers } from "redux";
+
+import { roomsReducer } from "./rooms";
+import { serverReducer } from "./server";
+import { reducer as formReducer } from "redux-form"
+
+export default combineReducers({
+  rooms: roomsReducer,
+  server: serverReducer,
+  
+  form: formReducer
+});

webclient/src/store/server/index.ts

@@ -0,0 +1,6 @@
+export * from "./server.actions";
+export * from "./server.dispatch";
+export * from "./server.interfaces";
+export * from "./server.reducer";
+export * from "./server.selectors";
+export * from "./server.types";

webclient/src/store/server/server.actions.tsx

@@ -0,0 +1,73 @@
+import { Types } from "./server.types";
+
+export const Actions = {
+  clearStore: () => ({
+    type: Types.CLEAR_STORE
+  }),
+  connectServer: () => ({
+    type: Types.CONNECT_SERVER
+  }),
+  connectionClosed: reason => ({
+    type: Types.CONNECTION_CLOSED,
+    reason
+  }),
+  serverMessage: message => ({
+    type: Types.SERVER_MESSAGE,
+    message
+  }),
+  updateBuddyList: buddyList => ({
+    type: Types.UPDATE_BUDDY_LIST,
+    buddyList
+  }),
+  addToBuddyList: user => ({
+    type: Types.ADD_TO_BUDDY_LIST,
+    user
+  }),
+  removeFromBuddyList: userName => ({
+    type: Types.REMOVE_FROM_BUDDY_LIST,
+    userName
+  }),
+  updateIgnoreList: ignoreList => ({
+    type: Types.UPDATE_IGNORE_LIST,
+    ignoreList
+  }),
+  addToIgnoreList: user => ({
+    type: Types.ADD_TO_IGNORE_LIST,
+    user
+  }),
+  removeFromIgnoreList: userName => ({
+    type: Types.REMOVE_FROM_IGNORE_LIST,
+    userName
+  }),
+  updateInfo: info => ({
+    type: Types.UPDATE_INFO,
+    info
+  }),
+  updateStatus: status => ({
+    type: Types.UPDATE_STATUS,
+    status
+  }),
+  updateUser: user => ({
+    type: Types.UPDATE_USER,
+    user
+  }),
+  updateUsers: users => ({
+    type: Types.UPDATE_USERS,
+    users
+  }),
+  userJoined: user => ({
+    type: Types.USER_JOINED,
+    user
+  }),
+  userLeft: name => ({
+    type: Types.USER_LEFT,
+    name
+  }),
+  viewLogs: logs => ({
+    type: Types.VIEW_LOGS,
+    logs
+  }),
+  clearLogs: () => ({
+    type: Types.CLEAR_LOGS
+  })
+}

webclient/src/store/server/server.dispatch.tsx

@@ -0,0 +1,68 @@
+import { reset } from 'redux-form';
+import { Actions } from "./server.actions";
+import { store } from "../store";
+
+export const Dispatch = {
+  clearStore: () => {
+    store.dispatch(Actions.clearStore());
+  },
+  connectServer: () => {
+    store.dispatch(Actions.connectServer());
+  },
+  connectionClosed: reason => {
+    store.dispatch(Actions.connectionClosed(reason));
+  },
+  updateBuddyList: buddyList => {
+    store.dispatch(Actions.updateBuddyList(buddyList));
+  },
+  addToBuddyList: user => {
+    store.dispatch(reset('addToBuddies'));
+    store.dispatch(Actions.addToBuddyList(user));
+  },
+  removeFromBuddyList: userName => {
+    store.dispatch(Actions.removeFromBuddyList(userName));
+  },
+  updateIgnoreList: ignoreList => {
+    store.dispatch(Actions.updateIgnoreList(ignoreList));
+  },
+  addToIgnoreList: user => {
+    store.dispatch(reset('addToIgnore'));
+    store.dispatch(Actions.addToIgnoreList(user));
+  },
+  removeFromIgnoreList: userName => {
+    store.dispatch(Actions.removeFromIgnoreList(userName));
+  },
+  updateInfo: (name, version) => {
+    store.dispatch(Actions.updateInfo({
+      name,
+      version
+    }));
+  },
+  updateStatus: (state, description) => {
+    store.dispatch(Actions.updateStatus({
+      state,
+      description
+    }));
+  },
+  updateUser: user => {
+    store.dispatch(Actions.updateUser(user));
+  },
+  updateUsers: users => {
+    store.dispatch(Actions.updateUsers(users));
+  },
+  userJoined: user => {
+    store.dispatch(Actions.userJoined(user));
+  },
+  userLeft: name => {
+    store.dispatch(Actions.userLeft(name));
+  },
+  viewLogs: name => {
+    store.dispatch(Actions.viewLogs(name));
+  },
+  clearLogs: () => {
+    store.dispatch(Actions.clearLogs());
+  },
+  serverMessage: message => {
+    store.dispatch(Actions.serverMessage(message));
+  }
+}

webclient/src/store/server/server.interfaces.tsx

@@ -0,0 +1,40 @@
+import { Log, SortBy, User, UserSortField } from "types";
+
+export interface ServerConnectParams {
+  host: string;
+  port: string;
+  user: string;
+  pass: string;
+}
+
+export interface ServerState {
+  buddyList: User[];
+  ignoreList: User[];
+  info: ServerStateInfo;
+  status: ServerStateStatus;
+  logs: ServerStateLogs;
+  user: User;
+  users: User[];
+  sortUsersBy: ServerStateSortUsersBy;
+}
+
+export interface ServerStateStatus {
+  description: string;
+  state: number;
+}
+
+export interface ServerStateInfo {
+  message: string;
+  name: string;
+  version: string;
+}
+
+export interface ServerStateLogs {
+  room: Log[];
+  game: Log[];
+  chat: Log[];
+}
+
+export interface ServerStateSortUsersBy extends SortBy {
+  field: UserSortField
+}

webclient/src/store/server/server.reducer.tsx

@@ -0,0 +1,210 @@
+import { SortDirection, StatusEnum, UserSortField } from "types";
+
+import { SortUtil } from "../common";
+
+import { ServerState } from "./server.interfaces"
+import { Types } from "./server.types";
+
+const initialState: ServerState = {
+  buddyList: [],
+  ignoreList: [],
+
+  status: {
+    state: StatusEnum.DISCONNECTED,
+    description: null
+  },
+  info: {
+    message: null,
+    name: null,
+    version: null
+  },
+  logs: {
+    room: [],
+    game: [],
+    chat: []
+  },
+  user: null,
+  users: [],
+  sortUsersBy: {
+    field: UserSortField.NAME,
+    order: SortDirection.ASC
+  }
+};
+
+export const serverReducer = (state = initialState, action: any) => {
+  switch(action.type) {
+    case Types.CLEAR_STORE: {
+      return {
+        ...initialState,
+        status: {
+          ...state.status
+        }
+      }
+    }
+    case Types.SERVER_MESSAGE: {
+      const { message } = action;
+      const { info } = state;
+
+      return {
+        ...state,
+        info: { ...info, message }
+      }
+    }
+    case Types.UPDATE_BUDDY_LIST: {
+      const { buddyList } = action;
+      const { sortUsersBy } = state;
+
+      SortUtil.sortUsersByField(buddyList, sortUsersBy);
+
+      return {
+        ...state,
+        buddyList: [
+          ...buddyList
+        ]
+      };
+    }
+    case Types.ADD_TO_BUDDY_LIST: {
+      const { user } = action;
+      const { sortUsersBy } = state;
+
+      const buddyList = [ ...state.buddyList ];
+
+      buddyList.push(user);
+      SortUtil.sortUsersByField(buddyList, sortUsersBy);
+
+      return {
+        ...state,
+        buddyList
+      };
+    }
+    case Types.REMOVE_FROM_BUDDY_LIST: {
+      const { userName } = action;
+      const buddyList = state.buddyList.filter(user => user.name !== userName);
+
+      return {
+        ...state,
+        buddyList
+      };
+    }
+    case Types.UPDATE_IGNORE_LIST: {
+      const { ignoreList } = action;
+      const { sortUsersBy } = state;
+
+      SortUtil.sortUsersByField(ignoreList, sortUsersBy);
+
+      return {
+        ...state,
+        ignoreList: [
+          ...ignoreList
+        ]
+      };
+    }
+    case Types.ADD_TO_IGNORE_LIST: {
+      const { user } = action;
+      const { sortUsersBy } = state;
+
+      const ignoreList = [ ...state.ignoreList ];
+
+      ignoreList.push(user);
+      SortUtil.sortUsersByField(ignoreList, sortUsersBy);
+
+      return {
+        ...state,
+        ignoreList
+      };
+    }
+    case Types.REMOVE_FROM_IGNORE_LIST: {
+      const { userName } = action;
+      const ignoreList = state.ignoreList.filter(user => user.name !== userName);
+      
+      return {
+        ...state,
+        ignoreList
+      };
+    }
+    case Types.UPDATE_INFO: {
+      const { name, version } = action.info;
+      const { info } = state;
+      
+      return {
+        ...state,
+        info: { ...info, name, version }
+      }
+    }
+    case Types.UPDATE_STATUS: {
+      const { status } = action;
+
+      return {
+        ...state,
+        status: { ...status }
+      }
+    }
+    case Types.UPDATE_USER: {
+      const { user } = action;
+
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          ...user
+        }
+      }
+    }
+    case Types.UPDATE_USERS: {
+      const users = [ ...action.users ];
+      const { sortUsersBy } = state;
+
+
+      SortUtil.sortUsersByField(users, sortUsersBy);
+
+      return {
+        ...state,
+        users
+      };
+    }
+    case Types.USER_JOINED: {
+      const { sortUsersBy } = state;
+
+      const users = [
+        ...state.users,
+        { ...action.user }
+      ];
+
+      SortUtil.sortUsersByField(users, sortUsersBy);
+
+      return {
+        ...state,
+        users 
+      };
+    }
+    case Types.USER_LEFT: {
+      const { name } = action;
+      const users = state.users.filter(user => user.name !== name);
+
+      return {
+        ...state,
+        users
+      };
+    }
+    case Types.VIEW_LOGS: {
+      const { logs } = action;
+
+      return {
+        ...state,
+        logs: {
+          ...logs
+        }
+      };
+    }
+    case Types.CLEAR_LOGS: {
+      return {
+        ...state,
+        logs: {
+          ...initialState.logs
+        }
+      }
+    }
+    default:
+      return state;
+  }
+}

webclient/src/store/server/server.selectors.tsx

@@ -0,0 +1,18 @@
+import { ServerState } from "./server.interfaces";
+
+interface State {
+  server: ServerState
+}
+
+export const Selectors = {
+  getMessage: ({ server }: State) => server.info.message,
+  getName: ({ server }: State) => server.info.name,
+  getVersion: ({ server }: State) => server.info.version,
+  getDescription: ({ server }: State) => server.status.description,
+  getState: ({ server }: State) => server.status.state,
+  getUser: ({ server }: State) => server.user,
+  getUsers: ({ server }: State) => server.users,
+  getLogs: ({ server }: State) => server.logs,
+  getBuddyList: ({ server }: State) => server.buddyList,
+  getIgnoreList: ({ server }: State) => server.ignoreList
+}

webclient/src/store/server/server.types.tsx

@@ -0,0 +1,20 @@
+export const Types = {
+  CLEAR_STORE: "[Server] Clear Store",
+  CONNECT_SERVER: "[Server] Connect Server",
+  CONNECTION_CLOSED: "[Server] Connection Closed",
+  SERVER_MESSAGE: "[Server] Server Message",
+  UPDATE_BUDDY_LIST: "[Server] Update Buddy List",
+  ADD_TO_BUDDY_LIST: "[Server] Add to Buddy List",
+  REMOVE_FROM_BUDDY_LIST: "[Server] Remove from Buddy List",
+  UPDATE_IGNORE_LIST: "[Server] Update Ignore List",
+  ADD_TO_IGNORE_LIST: "[Server] Add to Ignore List",
+  REMOVE_FROM_IGNORE_LIST: "[Server] Remove from Ignore List",
+  UPDATE_INFO: "[Server] Update Info",
+  UPDATE_STATUS: "[Server] Update Status",
+  UPDATE_USER: "[Server] Update User",
+  UPDATE_USERS: "[Server] Update Users",
+  USER_JOINED: "[Server] User Joined",
+  USER_LEFT: "[Server] User Left",
+  VIEW_LOGS: "[Server] View Logs",
+  CLEAR_LOGS: "[Server] Clear Logs"
+};

webclient/src/store/store.tsx

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import rootReducer from "./rootReducer";
+
+const initialState = {};
+
+const middleware: any = [thunk];
+
+export const store = createStore(rootReducer, initialState, applyMiddleware(...middleware));