Only one notifications will close at a time now, You can now use Find IN page on the Help Section (Some issues with leftover Search Results still)

Author: csprance

package.json

@@ -76,6 +76,7 @@
     "cron": "^1.7.1",
     "electron-compile": "^6.4.4",
     "electron-devtools-installer": "^2.2.4",
+    "electron-find": "^1.0.6",
     "electron-is-dev": "^1.1.0",
     "electron-squirrel-startup": "^1.0.0",
     "formik": "^2.0.1-rc.13",

src/@types/global.d.ts

@@ -1 +1,2 @@
 declare module 'react-chartkick';
+declare module 'electron-find';

src/app.tsx

@@ -10,7 +10,7 @@ export const App: React.FunctionComponent<Props> = () => {
     <MemoryRouter>
       <Layout>
         <Switch>
-          <Route exact path="/" render={() => <Redirect to="/console" />} />
+          <Route exact path="/" render={() => <Redirect to="/help" />} />
           {routes.map((route, idx) => (
             <Route key={idx} path={route.path} component={route.component} />
           ))}

src/components/PopupSearchBar.tsx

@@ -0,0 +1,43 @@
+import { TextField } from '@material-ui/core';
+import {remote} from 'electron';
+import searchInPage from 'electron-in-page-search';
+import * as mousetrap from 'mousetrap';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { bg0 } from '../styles/colors';
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  width: 250px;
+  height: 45px;
+  background: ${bg0};
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+`;
+
+interface Props {}
+const PopupSearchBar: React.FunctionComponent<Props> = () => {
+
+
+
+
+  return searchOpen ? (
+    <Wrapper>
+      <TextField
+        inputRef={inputRef}
+        placeholder={'Find On Page'}
+        fullWidth
+        name={'search-term'}
+      />
+    </Wrapper>
+  ) : (
+    <></>
+  );
+};
+
+export default PopupSearchBar;

src/containers/Dialogs/SettingsDialog/index.tsx

@@ -1,5 +1,4 @@
 import Dialog from '@material-ui/core/Dialog';
-// import Divider from '@material-ui/core/Divider';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';

src/containers/Map.tsx

@@ -52,7 +52,7 @@ interface State {
 }
 const Map: React.FunctionComponent<Props> = ({}) => {
   // /////////////
-  // Refs
+  // * Refs
   // /////////////
   const mapRef = React.useRef<any>(null);
   const anchorDiv = React.useRef<any>(null);
@@ -65,7 +65,7 @@ const Map: React.FunctionComponent<Props> = ({}) => {
   const activeServer = useSelector(activeServerSelector);
 
   // /////////////
-  // Component State
+  // * Component State
   // /////////////
   const [state, setState] = React.useState<State>({
     map: {
@@ -117,7 +117,7 @@ const Map: React.FunctionComponent<Props> = ({}) => {
   };
 
   // /////////////
-  // Redux Actions
+  // * Redux Actions
   // /////////////
   const dispatch = useDispatch();
   const deleteMarker = (id: number) =>
@@ -143,7 +143,7 @@ const Map: React.FunctionComponent<Props> = ({}) => {
   };
 
   // /////////////
-  // Effects
+  // * Effects
   // /////////////
   // componentDidMount
   React.useEffect(() => {

src/containers/Notifications.tsx

@@ -2,23 +2,19 @@ import IconButton from '@material-ui/core/IconButton';
 import Snackbar from '@material-ui/core/Snackbar';
 import CloseIcon from '@material-ui/icons/Close';
 import * as React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { closeNotification } from '../redux/notifications/actions';
-import { notificationsSelector } from '../redux/notifications/selectors';
-import { NotificationsState } from '../redux/notifications/types';
-import { Dispatch, RootState } from '../redux/redux-types';
+import { showingNotificationsSelectors } from '../redux/notifications/selectors';
 import { bg5 } from '../styles/colors';
 
 interface Props {}
-interface ReduxProps {
-  notifications: NotificationsState;
-  handleCloseNotification: (id: number) => void;
-}
-const Notifications: React.FunctionComponent<Props & ReduxProps> = ({
-  notifications,
-  handleCloseNotification
-}) => {
+const Notifications: React.FunctionComponent<Props> = () => {
+  const dispatch = useDispatch();
+  const notifications = useSelector(showingNotificationsSelectors);
+  const handleCloseNotification = (id: number) =>
+    dispatch(closeNotification(id));
+
   const colors = {
     error: '#ff5544',
     info: bg5,
@@ -67,10 +63,4 @@ const Notifications: React.FunctionComponent<Props & ReduxProps> = ({
   );
 };
 
-const mapStateToProps = (state: RootState) => ({
-  notifications: notificationsSelector(state)
-});
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  handleCloseNotification: (id: number) => dispatch(closeNotification(id))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(Notifications);
+export default Notifications;

src/containers/ServerHelp.tsx

@@ -1,3 +1,6 @@
+import { remote } from 'electron';
+import { FindInPage } from 'electron-find';
+import * as mousetrap from 'mousetrap';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
@@ -7,6 +10,7 @@ import { serverHelpMarkdownSelector } from '../redux/app/selectors';
 import { bg3, text } from '../styles/colors';
 
 const Wrapper = styled.div`
+  position: relative;
   padding: 10px;
   display: flex;
   color: ${text.primary};
@@ -22,7 +26,24 @@ interface Props {}
 
 const ServerHelp: React.FunctionComponent<Props> = ({}) => {
   const markdown = useSelector(serverHelpMarkdownSelector);
-
+  React.useEffect(() => {
+    const inPageSearch = new FindInPage(remote.getCurrentWebContents(), {
+      preload: true,
+      offsetTop: 85,
+      offsetRight: 270
+    });
+    mousetrap.bind('ctrl+f', async () => {
+      inPageSearch.openFindWindow();
+    });
+    mousetrap.bind('esc', () => {
+      inPageSearch.closeFindWindow();
+    });
+    return () => {
+      inPageSearch.destroy();
+      mousetrap.unbind('ctrl+f');
+      mousetrap.unbind('esc');
+    };
+  });
   return (
     <Wrapper>
       <ReactMarkdown className={'markdown-body'} source={markdown} />

src/index.ts

@@ -27,7 +27,7 @@ if (isDev) {
 const createWindow = async () => {
   logger.info('MisRCON Starting');
 
-  // ! This is here to deal with Server Avatars not showing up in production
+  // ! This is here to deal with The Default Server Avatars not showing up in production
   const { addBypassChecker } = require('electron-compile');
   addBypassChecker(
     (filePath: string) =>
@@ -113,11 +113,14 @@ app.on('activate', () => {
   }
 });
 
-process.on('uncaughtException', err => {
-  logger.info('uncaughtException', err);
-  app.quit();
-});
+if (isDev){
+  process.on('uncaughtException', err => {
+    logger.info('uncaughtException', err);
+    // app.quit();
+  });
+
+  process.on('unhandledRejection', err => {
+    logger.info('unhandledRejection', err);
+  });
+}
 
-process.on('unhandledRejection', err => {
-  logger.info('unhandledRejection', err);
-});

src/redux/notifications/reducer.ts

@@ -1,53 +1,39 @@
-import { getType } from 'typesafe-actions';
+import { createReducer } from 'typesafe-actions';
 
-import { actions, defaultNotificationsState, Types } from './index';
-import { defaultNotification } from './state';
+import { actions } from './index';
+import { defaultNotification, defaultNotificationsState } from './state';
 
-export default (
-  state: Types.NotificationsState = defaultNotificationsState,
-  action: Types.NotificationsActions
-): Types.NotificationsState => {
-  switch (action.type) {
-    // Info
-    case getType(actions.addInfo):
-      return [
-        ...state,
-        {
-          ...defaultNotification,
-          content: action.payload,
-          variant: 'info',
-          id: Date.now()
-        }
-      ];
-
-    // Error
-    case getType(actions.addError):
-      return [
-        ...state,
-        {
-          ...defaultNotification,
-          content: action.payload,
-          variant: 'error',
-          id: Date.now()
-        }
-      ];
-
-    // Success
-    case getType(actions.addSuccess):
-      return [
-        ...state,
-        {
-          ...defaultNotification,
-          content: action.payload,
-          variant: 'success',
-          id: Date.now()
-        }
-      ];
-
-    case getType(actions.closeNotification):
-      return state.map(notification => ({ ...notification, open: false }));
-
-    default:
-      return state;
-  }
-};
+export default createReducer(defaultNotificationsState)
+  .handleAction(actions.addInfo, (state, action) => [
+    ...state,
+    {
+      ...defaultNotification,
+      content: action.payload,
+      variant: 'info',
+      id: Date.now()
+    }
+  ])
+  .handleAction(actions.addError, (state, action) => [
+    ...state,
+    {
+      ...defaultNotification,
+      content: action.payload,
+      variant: 'error',
+      id: Date.now()
+    }
+  ])
+  .handleAction(actions.addSuccess, (state, action) => [
+    ...state,
+    {
+      ...defaultNotification,
+      content: action.payload,
+      variant: 'success',
+      id: Date.now()
+    }
+  ])
+  .handleAction(actions.closeNotification, (state, action) =>
+    state.map(notification => ({
+      ...notification,
+      open: action.payload === notification.id ? false : notification.open
+    }))
+  );