Merge branch 'section-filter' into main

src/App.css

@@ -288,3 +288,29 @@ footer {
   width: 15.4em;
 
 }
+
+.section-results {
+  display:inline;
+  padding: 10px 40px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  /* padding-left: 1em;
+  padding-right: 1em;
+  justify-content: center;
+  align-items: flex-start;
+  display: flex; */
+}
+
+.section-results button {
+  border-radius: 0;
+  box-shadow: none;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #222222;
+}
+
+.sect-drop {
+  box-sizing: border-box;
+  width: 10rem;
+  align-self: center;
+}

src/App.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import Fuse from "fuse.js";
 
 import LangDropdown from "./components/LangDropdown";
+import SectDropdown from "./components/SectDropdown";
 import SearchBar from "./components/SearchBar";
 import SearchResult from "./components/SearchResult";
 import LightSwitch from "./components/LightSwitch";
@@ -133,6 +134,7 @@ function App() {
         );
         setData(result.data);
         let { arr, sections } = jsonToArray(result.data);
+        console.log(arr);
         setDataArray(arr);
         setIndex(sections);
       } catch (e) {
@@ -158,7 +160,7 @@ function App() {
         shouldSort: true,
         includeScore: true,
         threshold: 0.2,
-        keys: ["title", "lang.code"],
+        keys: ["title", "lang.code", "section"],
       };
 
       let fuse = new Fuse(dataArray, fuseOptions);
@@ -169,6 +171,10 @@ function App() {
           query.push({ "lang.code": `^${value}` });
           continue;
         }
+        if (key === "section"){
+          query.push({"section": `^${value}`});
+          continue;
+        }
         query.push({ [key]: value });
       }
       let result = fuse.search({
@@ -203,7 +209,7 @@ function App() {
     sectionResultsList =
       sectionResults &&
       sectionResults.map((section) => {
-        return <li>{section}</li>;
+        return <button onClick={() => {changeParameter("section", section); }}>{section}</button>;
       });
   }
   return (
@@ -262,9 +268,10 @@ function App() {
             Report an error on GitHub
           </a>
         </p>
-        {/* <h2>Section Results</h2>
-        {sectionResultsList && <p>This feature is not complete!</p>}
-        <div className="section-results">{sectionResultsList}</div> */}
+        <SectDropdown className="sect-drop" changeParameter={changeParameter} data={data} value={searchParams['section'] || "allSects"}/>
+        <div className="search-results section-results">{sectionResultsList}</div>
+        <h2>Top Results</h2>
+        <div className="search-results">{resultsList}</div>
       </header>
 
       <section className="search-results">
@@ -295,6 +302,8 @@ function App() {
           </small>
         </p>
       </footer>
+      )}
+
     </div>
   );
 }

src/components/SectDropdown.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+
+function SectDropdown({ changeParameter, data, value}) {
+  const [sections, setSections] = useState([]);
+  let options = null;
+
+  const handleChange = (e) => {
+    changeParameter("section", e.target.value);
+  };
+
+  useEffect(
+    // run whenever data changes
+    () => {
+      if (data) {
+        let sectArray = [];
+        data.children[0].children.forEach((document) => {
+            // console.log(document)
+          if (
+            Array.isArray(document.sections) &&
+            document.sections.length > 0
+          ); {
+            //   console.log(document.sections.length);
+            //   console.log(Array.isArray(document.sections));
+            for (let i = 0; i < document.sections.length; i++) {
+                // console.log("h")
+                // console.log(document.sections[i]);
+                if(sectArray.indexOf(document.sections[i].section) == -1){
+                    sectArray.push(document.sections[i].section.trim());
+                }
+                // sectArray.push(document.sections[i].section);
+            }
+          }
+        })
+        sectArray.sort((a, b) => a.localeCompare(b));
+        setSections(sectArray);
+      }
+    },
+    [data]
+  );
+// key={section} value={section}
+  const createOption = (section) => {
+    return (
+      <option className="sect-drop" key={section} value={section}>
+        {section}
+      </option>
+    );
+  };
+
+  options =
+    sections &&
+    sections.map((section) => {
+      return createOption(section);
+    });
+  // console.log(options);
+  return (
+    <select value={value} className="sect-drop" onChange={handleChange} name="sections" id="sections">
+      <option key="allSects" value="">
+        Section Results
+      </option>
+      {options}
+    </select>
+  );
+}
+
+export default SectDropdown;