Update README, add better colours for errors/saving, allow '' for ban…

…g but dont allow saving
psidex · Oct 20, 2021 · 9e1670c · 9e1670c
1 parent 446a28b
commit 9e1670c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -63,7 +63,7 @@ actual search engine as well.
 git clone https://github.com/psidex/CustomBangSearch.git
 cd CustomBangSearch
 yarn install
-yarn buildcode # .ts, tsx -> .js
+yarn buildcode # .ts, .tsx -> .js
 yarn buildext # creates extension .zip file
 # You should now have a directory called "web-ext-artifacts" that contains the built extension
 ```

diff --git a/src/options/components/BangsTableRow.tsx b/src/options/components/BangsTableRow.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { BangInfoType, BangsType, SetBangsType } from '../../lib/bangs';
 
@@ -15,18 +15,22 @@ export default function BangsTableRow(props: PropsType): React.ReactElement {
   const {
     bangs, setBangs, setUnsavedChanges, bang, bangInfo,
   } = props;
-  // const { bangCss, setBangCss } = useState<object>({});
+  const [bangCss, setBangCss] = useState<object>({});
 
   const bangChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const newBang = e.target.value.trim();
 
-    if (newBang in bangs || newBang === '') {
-      // Don't do this now, instead highlight the cell red and then when user tried to save,
-      // tell them that its illegal.
-      toast.error('Can\'t rename bang to a currently used bang or nothing');
+    if (newBang in bangs) {
+      toast.error('Can\'t rename bang to a currently used bang');
       return;
     }
 
+    if (newBang in bangs || newBang === '') {
+      setBangCss({ backgroundColor: 'red' });
+    } else {
+      setBangCss({});
+    }
+
     const newBangs = { ...bangs };
 
     const oldObj = bangs[bang];
@@ -65,7 +69,7 @@ export default function BangsTableRow(props: PropsType): React.ReactElement {
 
   return (
     <tr>
-      <td><input type="text" value={bang} onChange={bangChanged} /></td>
+      <td><input type="text" value={bang} onChange={bangChanged} style={bangCss} /></td>
       <td><input type="text" value={bangInfo.url} onChange={urlChanged} /></td>
       <td><button type="button" title="Trash" onClick={trashBtnlicked}>🗑</button></td>
     </tr>

diff --git a/src/options/components/TopBar.tsx b/src/options/components/TopBar.tsx
@@ -19,6 +19,13 @@ export default function TopBar(props: PropsType): React.ReactElement {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const save = async (): Promise<void> => {
+    for (const [bang] of Object.entries(bangs)) {
+      if (bang.trim() === '') {
+        toast.error('Cannot save empty bang');
+        return;
+      }
+    }
+
     // We don't actually save the bangs here, we just pass them to the bg script which will call saveBangs.
     // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage#examples
     browser.runtime.sendMessage({ bangs }).then(
@@ -94,7 +101,7 @@ export default function TopBar(props: PropsType): React.ReactElement {
     window.open('https://github.com/psidex/CustomBangSearch#options-page');
   };
 
-  const css = unsavedChanges ? { backgroundColor: 'red' } : {};
+  const css = unsavedChanges ? { backgroundColor: 'darkblue' } : {};
 
   return (
     <div>

diff --git a/src/options/options.html b/src/options/options.html
@@ -2,6 +2,8 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <!-- TODO: Vendor the CSS file(s) -->
+        <!-- TODO: Allow user to choose light/dark and adjust red&blue to suit -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
         <link rel="stylesheet" href="options.css">
     </head>