Add filters by site for facebook, linked, & twitter

Handy dandy checkboxes to scope your search to one or more of these
sites.

Closes #13

src/App.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import TagsEditor from './TagsEditor';
+import SiteFilters from './SiteFilters';
+
+function constructGoogleQuery(names, sites) {
+  const nameQuery = names.map((name) => `\"${name}\"`).join(" OR ");
+
+  if (sites.length) {
+    const siteFilter = sites.map((site) => `site:${site}`).join(" OR ");
+    return `${nameQuery} (${siteFilter})`;
+  } else {
+    return nameQuery;
+  }
+}
+
+const App = () => {
+  const [names, setNames] = useState([]);
+  const [sites, setSites] = useState([]);
+
+  const searchInput = document.querySelector('input.gsc-input');
+  if (searchInput)  {
+    searchInput.value = constructGoogleQuery(names, sites);
+    const searchButton = document.querySelector('button.gsc-search-button');
+    searchButton.click();
+  }
+
+  const searchResults = document.querySelector('#searchResults');
+  if (searchResults) {
+    if (names.length > 0) {
+      searchResults.className = '';
+    } else {
+      searchResults.className = 'hide';
+    }
+  }
+
+  return (
+    <>
+      <div className='left'>
+        <TagsEditor onChange={setNames} />
+        { names.length > 0 ? <SiteFilters onChange={setSites} /> : null }
+      </div>
+    </>
+  );
+};
+
+export default App;

src/SiteFilters.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+const SiteFilters = (props) => {
+  const SITES = [
+    {name: "facebook", url: "facebook.com"},
+    {name: "linkedin", url: "linkedin.com"},
+    {name: "twitter", url: "twitter.com"},
+  ];
+
+  const [selected, setSelected] = useState([]);
+
+  function onChangeHandler(e) {
+    let value = e.currentTarget.value;
+    let checked = e.currentTarget.checked;
+    let newSelected = [...selected];
+    if (checked) {
+      if (selected.indexOf(value) == -1) {
+        newSelected = [...selected, value];
+      }
+    } else {
+      newSelected = selected.filter((site) => site != value);
+    }
+    setSelected(newSelected);
+    props.onChange(newSelected);
+  }
+
+  const siteCheckbox = function(site) {
+    return <div className="sitefilters_sites_site">
+      <input name={site.name} type="checkbox" value={site.url} onChange={onChangeHandler} />
+      <label for={site.name}>{site.name}</label>
+    </div>;
+  }
+
+  return (
+    <div className="sitefilters">
+      <h3>Sites</h3>
+      <p>Filter by website:</p>
+      <div className="sitefilters_sites">
+        {SITES.map(siteCheckbox)}
+      </div>
+    </div>
+  );
+};
+
+export default SiteFilters;

src/TagsEditor.js

@@ -48,28 +48,16 @@ function ddg(query) {
   return `https://duckduckgo.com/?q=${query}`;
 }
 
-const TagsEditor = () => {
+const TagsEditor = (props) => {
   const [selected, setSelected] = useState([]);
   const [suggested, setSuggested] = useState(new Set());
 
-  function constructGoogleQuery(names) {
-      return names.map(function(name) {
-        return `\"${name}\"` // make the name quoted search term
-      }).join(" OR ");
-  }
-
   function onChangeHandler(newSelected) {
     newSelected = newSelected.map(function(name) {
       return name.toLowerCase();
     })
     setSelected(newSelected);
-
-    const searchInput = document.querySelector('input.gsc-input');
-    if (searchInput)  {
-      searchInput.value = constructGoogleQuery(newSelected);
-      const searchButton = document.querySelector('button.gsc-search-button');
-      searchButton.click();
-    }
+    props.onChange(newSelected);
 
     newSelected.forEach(function(name) {
       let newSuggested = new Set(suggested);
@@ -90,14 +78,9 @@ const TagsEditor = () => {
     }
   }
 
-  const rightPane = document.querySelector('#right');
   if (selected.length <= 0) {
-    rightPane.className = 'hide';
     suggested.clear();
-  } else {
-    rightPane.className = '';
   }
-
   return (
     <div className="results">
       <Toaster />

src/index.html

@@ -12,11 +12,9 @@ <h1>Name Variant Search</h1>
     <script async src="https://cse.google.com/cse.js?cx=a05feb2897fb94d24">
     </script>
     <div class='container'>
-      <div class='left'>
-        <div id="output">
-        </div>
+      <div id="output">
       </div>
-      <div id='right'>
+      <div id="searchResults">
         <div class="gcse-searchresults-only"></div>
       </div>
     </div>

src/index.js

@@ -1,9 +1,9 @@
 import './index.css';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import TagsEditor from './TagsEditor';
+import App from './App';
 
 let output = document.querySelector("#output");
 const root = createRoot(output);
-root.render( <TagsEditor />);
+root.render( <App />);