Merge branch 'develop' of github.com:pistom/hohser

pistom · Jan 23, 2020 · fe4b6be · fe4b6be
2 parents 6a1aa04 + 1f3a2a1
commit fe4b6be
Show file tree

Hide file tree

Showing 20 changed files with 2,100 additions and 1,770 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-angle-bracket-type-assertion": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/explicit-function-return-type": "off"
+  },
+  "extends": ["plugin:@typescript-eslint/recommended"]
+}
diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
     "@types/react": "16.8.23",
     "@types/react-dom": "16.8.4",
     "@types/react-redux": "^6.0.9",
-    "@typescript-eslint/eslint-plugin": "1.6.0",
-    "@typescript-eslint/parser": "1.6.0",
+    "@typescript-eslint/eslint-plugin": "^2.16.0",
+    "@typescript-eslint/parser": "^2.16.0",
     "autoprefixer": "7.1.6",
     "babel-eslint": "10.0.1",
     "babel-jest": "^24.8.0",
@@ -81,7 +81,7 @@
     "tslint": "^5.7.0",
     "tslint-config-prettier": "^1.10.0",
     "tslint-react": "^3.2.0",
-    "typescript": "3.5.3",
+    "typescript": "^3.7.5",
     "uglifyjs-webpack-plugin": "1.2.5",
     "url-loader": "1.1.2",
     "web-ext": "^3.1.1",

diff --git a/public/manifests/chrome.json b/public/manifests/chrome.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Highlight or Hide Search Engine Results",
   "short_name": "HoHSER",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Filter search engine results. Block unwanted results and highlight the favorite ones. For Google and other popular search engines.",
   "icons": {
     "19": "images/hohser-19.png",
@@ -231,7 +231,8 @@
         "*://*.bing.com/*",
         "*://*.startpage.com/*",
         "*://*.ecosia.org/*",
-        "*://*.yandex.ru/*"
+        "*://*.yandex.ru/*",
+        "*://*.yandex.com/*"
       ],
       "js": ["static/js/content.js"],
       "css": ["static/css/content.css"]

diff --git a/public/manifests/firefox.json b/public/manifests/firefox.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Highlight or Hide Search Engine Results",
   "short_name": "HoHSER",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "developer": {
     "name": "Tomasz Pisarek",
     "url": "https://github.com/pistom"
@@ -237,7 +237,8 @@
         "*://*.bing.com/*",
         "*://*.startpage.com/*",
         "*://*.ecosia.org/*",
-        "*://*.yandex.ru/*"
+        "*://*.yandex.ru/*",
+        "*://*.yandex.com/*"
       ],
       "js": ["static/js/content.js"],
       "css": ["static/css/content.css"]

diff --git a/src/actions/options.ts b/src/actions/options.ts
@@ -1,4 +1,4 @@
-import { FETCH_OPTIONS_PENDING, FETCH_OPTIONS_FULFILLED, FETCH_OPTIONS_REJECTED, FETCH_OPTIONS, TOGGLE_SHOW_ALL, TOGGLE_SHOW_COUNTER, CHROME, TOGGLE_LOCAL_STORAGE, GET_CURRENT_URL_FULFILLED, GET_CURRENT_URL } from '../constants';
+import { FETCH_OPTIONS_PENDING, FETCH_OPTIONS_FULFILLED, FETCH_OPTIONS_REJECTED, FETCH_OPTIONS, TOGGLE_SHOW_ALL, TOGGLE_SHOW_COUNTER, CHROME, TOGGLE_LOCAL_STORAGE, GET_CURRENT_URL_FULFILLED, GET_CURRENT_URL, UPDATE_HIGHLIGHT_CUSTOM_COLORS } from '../constants';
 import { browserStorageSync, browserName } from '../popup';
 
 export interface FetchOptions {
@@ -22,14 +22,19 @@ export interface ToggleLocalStorage {
   type: TOGGLE_LOCAL_STORAGE;
 }
 
+export interface UpdateHighlightCustomColors {
+  type: UPDATE_HIGHLIGHT_CUSTOM_COLORS;
+  payload: string[];
+}
+
 export interface GetCurrentUrl {
   type:
   | GET_CURRENT_URL
   | GET_CURRENT_URL_FULFILLED;
   payload: any;
 }
 
-export type OptionAction = FetchOptions | ToggleShowAll | ToggleShowCounter | ToggleLocalStorage | GetCurrentUrl;
+export type OptionAction = FetchOptions | ToggleShowAll | ToggleShowCounter | ToggleLocalStorage | GetCurrentUrl | UpdateHighlightCustomColors;
 
 export const fetchOptions = (): FetchOptions => {
 
@@ -66,20 +71,27 @@ export const toggleLocalStorage = (): ToggleLocalStorage => {
   };
 };
 
+export const updateHighlightCustomColors = (colors: string[]): UpdateHighlightCustomColors => {
+  return {
+    type: UPDATE_HIGHLIGHT_CUSTOM_COLORS,
+    payload: colors
+  };
+};
+
 export const getCurrentUrl = (): GetCurrentUrl => {
 
   let payload: any;
 
   if (browserName === CHROME) {
 
     payload = new Promise((resolve, reject) => {
-      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
-          let err = chrome.runtime.lastError;
-          if (err) {
-              reject(err);
-          } else {
-              resolve(tabs);
-          }
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        const err = chrome.runtime.lastError;
+        if (err) {
+          reject(err);
+        } else {
+          resolve(tabs);
+        }
       });
     });
 

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -28,6 +28,7 @@ export interface Props {
   toggleShowCounter: () => void;
   toggleLocalStorage: () => void;
   importFromOldVersion: () => void;
+  updateHighlightCustomColors: (colors: string[]) => void;
 }
 
 interface State {
@@ -82,25 +83,29 @@ class App extends React.Component<Props, State> {
     });
   }
 
-  public toggleSearch (): void {
+  toggleSearch (): void {
     this.setState({
       searchIsOpen: !this.state.searchIsOpen
     });
   }
 
-  public toggleShowAll (): void {
+  toggleShowAll (): void {
     this.props.toggleShowAll();
   }
 
-  public toggleShowCounter (): void {
+  toggleShowCounter (): void {
     this.props.toggleShowCounter();
   }
 
-  public toggleLocalStorage (): void {
+  toggleLocalStorage (): void {
     this.props.toggleLocalStorage();
   }
 
-  public handleOnChangeSearchTextField (e: any): void {
+  updateHighlightCustomColors (colors: string[]): void {
+    this.props.updateHighlightCustomColors(colors);
+  }
+
+  handleOnChangeSearchTextField (e: any): void {
     this.setState({searchedPhrase: e.target.value});
   }
 
@@ -120,6 +125,7 @@ class App extends React.Component<Props, State> {
         toggle={() => this.toggleDrawer()}
         toggleShowAll={() => this.toggleShowAll()}
         toggleShowCounter={() => this.toggleShowCounter()}
+        updateHighlightCustomColors={(colors: string[]) => this.updateHighlightCustomColors(colors)}
         toggleLocalStorage={this.toggleLocalStorage}
         options={this.props.options}
         addDomain={this.props.addDomain}
@@ -135,6 +141,7 @@ class App extends React.Component<Props, State> {
       />,
       <DomainsList
         domainsList={this.props.domainsList}
+        highlightColors={this.props.options.highlightColors}
         removeDomainHandle={(domainName: string) => this.handleRemoveDomain(domainName)}
         editDomainHandle={(i: any) => this.editDomainHandle(i)}
         searchedPhrase={this.state.searchedPhrase}
@@ -145,9 +152,11 @@ class App extends React.Component<Props, State> {
         closeEditionHandle={() => this.closeEditionHandle()}
         domain={this.state.editedDomain !== null ? this.props.domainsList[this.state.editedDomain] : null}
         editDomain={(index: number, domainName: string, display: DisplayStyle, color?: Color) => this.props.editDomain(index, domainName, display, color)}
+        options={this.props.options}
       />,
       <BottomBar
         addDomain={this.props.addDomain}
+        options={this.props.options}
         currentTabUrl={this.props.currentTabUrl} />
     ];
   }

diff --git a/src/components/BottomBar/BottomBar.tsx b/src/components/BottomBar/BottomBar.tsx
@@ -5,12 +5,13 @@ import NoColorIcon from '@material-ui/icons/InvertColorsOff';
 import AddIcon from '@material-ui/icons/Add';
 import AddLocationIcon from '@material-ui/icons/AddLocation';
 import { DisplayStyle, Color } from '../../types';
-import { HIGHLIGHT, FULL_HIDE, PARTIAL_HIDE, COLOR_1, COLOR_2, COLOR_3 } from '../..//constants';
+import { HIGHLIGHT, FULL_HIDE, PARTIAL_HIDE, COLOR_1 } from '../..//constants';
 
 interface Props {
   classes: any;
   addDomain: (domainName: string, display: DisplayStyle, color?: Color) => void;
   currentTabUrl: string | null;
+  options: any;
 }
 
 interface State {
@@ -62,7 +63,7 @@ class BottomBar extends React.Component<Props, State> {
 
   componentDidMount () {
     addEventListener("keyup", (e: KeyboardEvent) => {
-      const input = this.domainNameTextInputRef && 
+      const input = this.domainNameTextInputRef &&
                     this.domainNameTextInputRef.current &&
                     this.domainNameTextInputRef.current.firstChild as HTMLElement;
       const activeElementTagName = document.activeElement && document.activeElement.tagName;
@@ -87,7 +88,7 @@ class BottomBar extends React.Component<Props, State> {
         }
         input.focus();
       }
-    })
+    });
   }
 
   handleDomainNameChange (event: any) {
@@ -130,12 +131,7 @@ class BottomBar extends React.Component<Props, State> {
       case 3: display = FULL_HIDE; break;
     }
 
-    let color: Color = COLOR_1;
-    switch (this.state.color) {
-      case 1: color = COLOR_1; break;
-      case 2: color = COLOR_2; break;
-      case 3: color = COLOR_3; break;
-    }
+    const color: Color = this.state.color ? 'COLOR_' + this.state.color : COLOR_1;
 
     // Check if domain field is not empty
     if (this.state.domainName.length !== 0) {
@@ -158,8 +154,8 @@ class BottomBar extends React.Component<Props, State> {
     if (this.props.currentTabUrl) {
       this.setState({
         domainName: this.props.currentTabUrl
-      })
-    };
+      });
+    }
   }
 
   render () {
@@ -211,6 +207,9 @@ class BottomBar extends React.Component<Props, State> {
                     <MenuItem value="1"><ColorIcon className={classes.colorIcon} style={{color: '#f50057'}} /></MenuItem>
                     <MenuItem value="2"><ColorIcon className={classes.colorIcon} style={{color: '#8BC34A'}} /></MenuItem>
                     <MenuItem value="3"><ColorIcon className={classes.colorIcon} style={{color: '#03A9F4'}} /></MenuItem>
+                    { this.props.options.highlightColors.map((color: string, i: number) => (
+                      <MenuItem value={i+4}><ColorIcon className={classes.colorIcon} style={{color: `#${color}`}} /></MenuItem>
+                      ))}
                   </Select>
                 </FormControl>
               </Grid>

diff --git a/src/components/Content/ResultManagement.tsx b/src/components/Content/ResultManagement.tsx
@@ -11,7 +11,7 @@ interface Props {
   url: string;
 }
 
-export const getShortUrl = (u: string) => {
+export const getShortUrl = (u: string): string | null => {
   let url = u.split(" ")[0];
   let domainName: string | null = `¯\\_(ツ)_/¯`;
   if (!/^https?:\/\//i.test(url)) {
@@ -24,9 +24,9 @@ export const getShortUrl = (u: string) => {
   return domainName;
 };
 
-export const ResultManagement = (props: Props) => {
+export const ResultManagement = (props: Props): JSX.Element => {
 
-  let domainName: string | null = getShortUrl(props.url);
+  const domainName: string | null = getShortUrl(props.url);
 
   return (
     <div>

diff --git a/src/components/DomainsList/DomainsList.tsx b/src/components/DomainsList/DomainsList.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { List, withStyles, Button, Typography, Badge } from '@material-ui/core';
+import { List, withStyles, Button, Typography, Badge, Tooltip } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FavoriteBorderIcon from '@material-ui/icons/Favorite';
+import WarningIcon from '@material-ui/icons/Warning';
 import OffIcon from '@material-ui/icons/VisibilityOff';
 import BlockIcon from '@material-ui/icons/Opacity';
 import { Domain } from '../../types';
 import { HIGHLIGHT, PARTIAL_HIDE, FULL_HIDE } from '../../constants';
 
 interface Props {
   domainsList: Array<Domain>;
+  highlightColors: Array<string>;
   removeDomainHandle: (domainName: string) => void;
   editDomainHandle: (index: number) => void;
   openSearch: () => void;
@@ -63,7 +65,7 @@ class DomainsList extends React.Component<Props, State> {
 
   // TODO Make colors as variables
   domainColors = {
-    COLOR_0 :"#ffffff",
+    COLOR_0 :"#aaaaaa",
     COLOR_1 :"#f50057",
     COLOR_2 :"#8BC34A",
     COLOR_3 :"#03A9F4",
@@ -76,10 +78,24 @@ class DomainsList extends React.Component<Props, State> {
     };
   }
 
-  public handleShowList () {
+  handleShowList () {
     this.setState({showList: true});
   }
 
+  componentDidMount (): void {
+    this.props.highlightColors.forEach( (color, i) => {
+      this.domainColors['COLOR_' + (i+4)] = `#${color}`;
+    });
+  }
+
+  componentWillReceiveProps (nextProps: any): void {
+    if (this.props.highlightColors.length !== nextProps.highlightColors.length) {
+      nextProps.highlightColors.forEach( (color: string, i: number) => {
+        this.domainColors['COLOR_' + (i+4)] = `#${color}`;
+      });
+    }
+  }
+
   render () {
     const classes = this.props.classes;
     return (
@@ -95,7 +111,12 @@ class DomainsList extends React.Component<Props, State> {
               {arr.length < 100 ? // Remplace icon with spans if list too long
                 <span className={classes.icons} >
                   {this.props.domainsList[item].display === HIGHLIGHT ?
-                    <FavoriteBorderIcon style={{color: `${this.domainColors[this.props.domainsList[item].color] || this.domainColors.COLOR_0}`}} /> : null
+                    (this.domainColors[this.props.domainsList[item]?.color] ?
+                      <FavoriteBorderIcon style={{color: `${this.domainColors[this.props.domainsList[item].color]}`}} /> :
+                      <Tooltip title={`${this.props.domainsList[item].color} is not defined. Go to Settings: Edit custom colors.`}>
+                        <WarningIcon style={{color: `this.domainColors.COLOR_0}`}} />
+                      </Tooltip>
+                      ) : null
                   }
                   {this.props.domainsList[item].display === PARTIAL_HIDE ?
                     <BlockIcon /> : null