* Upgraded context menu

* Fixed contextIsolation warning

Author: CodeDead

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 build
 src/serviceWorker.js
 README.md
+.eslintcache

.gitignore

@@ -33,3 +33,5 @@ dist/*
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+.eslintcache

public/electron.js

@@ -15,6 +15,7 @@ const createWindow = () => {
   mainWindow = new BrowserWindow({
     webPreferences: {
       nodeIntegration: true,
+      contextIsolation: false,
     },
     frame: false,
     title: 'DeadHash',
@@ -26,13 +27,13 @@ const createWindow = () => {
   fileWorkerWindow = new BrowserWindow({
     show: isDev,
     icon: path.join(__dirname, '../build/logo512.png'),
-    webPreferences: { nodeIntegration: true },
+    webPreferences: { nodeIntegration: true, contextIsolation: false },
   });
 
   textWorkerWindow = new BrowserWindow({
     show: isDev,
     icon: path.join(__dirname, '../build/logo512.png'),
-    webPreferences: { nodeIntegration: true },
+    webPreferences: { nodeIntegration: true, contextIsolation: false },
   });
 
   if (isDev) {

src/components/App/index.jsx

@@ -26,20 +26,14 @@ const App = () => {
   const [, dispatch] = useContext(CryptoContext);
 
   const enabled = state.canDragDrop;
-  let { themeIndex } = state;
-
-  let themeType = 'light';
-  if (themeIndex === 8) {
-    themeType = 'dark';
-    themeIndex = 2;
-  }
+  const { themeIndex, themeStyle } = state;
 
   const color = ThemeSelector(themeIndex);
 
   const theme = createMuiTheme({
     palette: {
       primary: color,
-      type: themeType,
+      type: themeStyle,
     },
   });
 

src/components/CopyPasteMenu/index.jsx

@@ -1,28 +1,52 @@
 import React from 'react';
-import { Item, Menu, MenuProvider } from 'react-contexify';
+import { Item, Menu, useContextMenu } from 'react-contexify';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import PasteIcon from '@material-ui/icons/Assignment';
 
 const CopyPasteMenu = ({
   id, children, copyData, pasteData, copy, paste,
-}) => (
-  <>
-    <MenuProvider id={`copyPasteMenu${id}`} style={{ width: '100%' }}>
-      {children}
-    </MenuProvider>
-    <Menu id={`copyPasteMenu${id}`}>
-      <Item onClick={() => copyData()}>
-        <CopyIcon />
-        {' '}
-        {copy}
-      </Item>
-      <Item onClick={() => pasteData()}>
-        <PasteIcon />
-        {' '}
-        {paste}
-      </Item>
-    </Menu>
-  </>
-);
+}) => {
+  const MENU_ID = `copyPasteMenu${id}`;
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  /**
+   * Handle the context menu event
+   * @param event The event argument
+   */
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    show(event, {
+      props: {
+        key: 'value',
+      },
+    });
+  };
+
+  return (
+    <>
+      <div
+        style={{ width: '100%' }}
+        onContextMenu={handleContextMenu}
+      >
+        {children}
+      </div>
+      <Menu id={MENU_ID}>
+        <Item onClick={() => copyData()}>
+          <CopyIcon />
+          {' '}
+          {copy}
+        </Item>
+        <Item onClick={() => pasteData()}>
+          <PasteIcon />
+          {' '}
+          {paste}
+        </Item>
+      </Menu>
+    </>
+  );
+};
 
 export default CopyPasteMenu;

src/components/Hash/index.jsx

@@ -3,7 +3,7 @@ import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import CheckIcon from '@material-ui/icons/Check';
-import { Menu, Item, MenuProvider } from 'react-contexify';
+import { Menu, Item, useContextMenu } from 'react-contexify';
 import 'react-contexify/dist/ReactContexify.min.css';
 import CopyIcon from '@material-ui/icons/FileCopy';
 
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
 const Hash = ({
   hashType, content, compareString, id, copy,
 }) => {
+  const MENU_ID = `hashMenu${id}`;
   const classes = useStyles();
 
   let compareColor = null;
@@ -28,15 +29,32 @@ const Hash = ({
     compareColor = { color: 'green' };
   }
 
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  /**
+   * Handle the context menu event
+   * @param event The event argument
+   */
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    show(event, {
+      props: {
+        key: 'value',
+      },
+    });
+  };
+
   return (
     <Paper className={classes.paper}>
       <Typography variant="subtitle1" color="primary" gutterBottom>
         {hashType}
         {compareIcon}
       </Typography>
-      <MenuProvider id={`hashMenu${id}`}>
+      <div onContextMenu={handleContextMenu}>
         <span style={compareColor}>{content}</span>
-      </MenuProvider>
+      </div>
       <Menu id={`hashMenu${id}`}>
         <Item onClick={() => navigator.clipboard.writeText(content)}>
           <CopyIcon />

src/contexts/MainContextProvider/index.jsx

@@ -22,6 +22,7 @@ import ru_RU from '../../languages/ru_RU';
 import tr_TR from '../../languages/tr_TR';
 
 const languageIndex = localStorage.languageIndex ? parseFloat(localStorage.languageIndex) : 1;
+const themeStyle = localStorage.themeStyle ? localStorage.themeStyle : 'light';
 const themeIndex = localStorage.themeIndex ? parseFloat(localStorage.themeIndex) : 0;
 const autoUpdate = localStorage.autoUpdate && localStorage.autoUpdate === 'true' ? true : !localStorage.autoUpdate;
 const minimizeEnabled = localStorage.minimizeEnabled && localStorage.minimizeEnabled === 'true' ? true : !localStorage.minimizeEnabled;
@@ -45,6 +46,7 @@ const initState = {
   ],
   drawerOpen: false,
   selectedListItem: 0,
+  themeStyle,
   themeIndex,
   autoUpdate,
   checkedForUpdates: false,

src/reducers/MainReducer/Actions/actionTypes.js

@@ -1,6 +1,7 @@
 export const SET_LANGUAGE_INDEX = 'SET_LANGUAGE_INDEX';
 export const SET_ACTIVE_LIST_ITEM = 'SET_ACTIVE_LIST_ITEM';
 export const SET_THEME_INDEX = 'SET_THEME_INDEX';
+export const SET_THEME_STYLE = 'SET_THEME_STYLE';
 export const SET_AUTO_UPDATE = 'SET_AUTO_UPDATE';
 export const SET_UPDATE_CHECKED = 'SET_UPDATE_CHECKED';
 export const RESET_MAIN_REDUCER = 'RESET_MAIN_REDUCER';

src/reducers/MainReducer/Actions/index.js

@@ -1,9 +1,14 @@
 import {
   RESET_MAIN_REDUCER,
   SET_ACTIVE_LIST_ITEM,
-  SET_AUTO_UPDATE, SET_CAN_DRAG_DROP,
-  SET_LANGUAGE_INDEX, SET_LANGUAGE_STATUS, SET_MAXIMIZE_STATUS, SET_MINIMIZE_STATUS,
+  SET_AUTO_UPDATE,
+  SET_CAN_DRAG_DROP,
+  SET_LANGUAGE_INDEX,
+  SET_LANGUAGE_STATUS,
+  SET_MAXIMIZE_STATUS,
+  SET_MINIMIZE_STATUS,
   SET_THEME_INDEX,
+  SET_THEME_STYLE,
   SET_UPDATE_CHECKED,
 } from './actionTypes';
 
@@ -22,6 +27,11 @@ export const setThemeIndex = (index) => ({
   payload: index,
 });
 
+export const setThemeStyle = (style) => ({
+  type: SET_THEME_STYLE,
+  payload: style,
+});
+
 export const setAutoUpdate = (autoUpdate) => ({
   type: SET_AUTO_UPDATE,
   payload: autoUpdate,

src/reducers/MainReducer/index.js

@@ -1,9 +1,14 @@
 import {
   RESET_MAIN_REDUCER,
   SET_ACTIVE_LIST_ITEM,
-  SET_AUTO_UPDATE, SET_CAN_DRAG_DROP,
-  SET_LANGUAGE_INDEX, SET_LANGUAGE_STATUS, SET_MAXIMIZE_STATUS, SET_MINIMIZE_STATUS,
+  SET_AUTO_UPDATE,
+  SET_CAN_DRAG_DROP,
+  SET_LANGUAGE_INDEX,
+  SET_LANGUAGE_STATUS,
+  SET_MAXIMIZE_STATUS,
+  SET_MINIMIZE_STATUS,
   SET_THEME_INDEX,
+  SET_THEME_STYLE,
   SET_UPDATE_CHECKED,
 } from './Actions/actionTypes';
 
@@ -28,6 +33,12 @@ const MainReducer = (state, action) => {
         ...state,
         themeIndex: action.payload,
       };
+    case SET_THEME_STYLE:
+      localStorage.themeStyle = action.payload;
+      return {
+        ...state,
+        themeStyle: action.payload,
+      };
     case SET_AUTO_UPDATE:
       localStorage.autoUpdate = action.payload;
       return {