@nyris/nyris-webapp 0.3.6 → 0.3.13

package/src/components/Feedback.tsx

@@ -1,55 +1,85 @@
-import React from 'react';
-import {NyrisFeedbackState} from "../actions/nyrisAppActions";
-import {Animate} from "react-move";
+import React from "react";
+import { NyrisFeedbackState } from "../actions/nyrisAppActions";
+import { Animate } from "react-move";
 
 interface FeedbackProps {
-    feedbackState: NyrisFeedbackState,
-    onPositiveFeedback?: () => void,
-    onNegativeFeedback?: () => void,
-    onClose?: () => void
+  feedbackState: NyrisFeedbackState;
+  onPositiveFeedback?: () => void;
+  onNegativeFeedback?: () => void;
+  onClose?: () => void;
 }
 
-const Feedback: React.FC<FeedbackProps> = ({feedbackState, onPositiveFeedback, onNegativeFeedback, onClose}) => {
-    let inner : any = null;
-    switch (feedbackState) {
-        case 'question':
-            inner =
-                <div className="feedbackForm">
-                    <p>Did you find what you were looking for?</p>
-                    <div className="btn primary positiveFeedback" onClick={onPositiveFeedback}>Yes</div>
-                    <div className="btn secondary negativeFeedback" onClick={onNegativeFeedback}>No</div>
-                </div>;
-            break;
-        case 'positive':
-            inner = <div className="feedbackMessage positive">Great, thank you for your feedback!</div>
-            break;
-        case 'negative':
-            inner =
-                <div className="feedbackMessage negative">We saved your request so we can track down the
-                    issue and improve the search experience. Your Feedback helps us to make our service
-                    better for everyone,
-                    thank you!<br/>
-                    <div className="btn dismiss" onClick={onClose}>Dismiss</div>
-                </div>;
-            break;
-        default:
-            inner = null;
-            break;
-    }
-    return (
-        <Animate show={feedbackState !== 'hidden'} start={{y: 100, opacity: 0}} enter={{y: [0], opacity: [1]}} leave={{y: [100], opacity: [0] }}>
-            {({y, opacity}) =>
-                <section className="feedback" style={{transform: `translateY(${y}%)`, opacity }}>
-                    <div className="wrapper">
-                        {inner}
-                    </div>
-                    <div className="closeFeedbackContainer">
-                        <div className="closeFeedback" onClick={onClose}/>
-                    </div>
-                </section>
-            }
-        </Animate>
-    );
+const Feedback: React.FC<FeedbackProps> = ({
+  feedbackState,
+  onPositiveFeedback,
+  onNegativeFeedback,
+  onClose,
+}) => {
+  let inner: any = null;
+  switch (feedbackState) {
+    case "question":
+      inner = (
+        <div className="feedbackForm">
+          <p>Did you find what you were looking for?</p>
+          <div
+            className="btn primary positiveFeedback"
+            onClick={onPositiveFeedback}
+          >
+            Yes
+          </div>
+          <div
+            className="btn secondary negativeFeedback"
+            onClick={onNegativeFeedback}
+          >
+            No
+          </div>
+        </div>
+      );
+      break;
+    case "positive":
+      inner = (
+        <div className="feedbackMessage positive">
+          Great, thank you for your feedback!
+        </div>
+      );
+      break;
+    case "negative":
+      inner = (
+        <div className="feedbackMessage negative">
+          We saved your request so we can track down the issue and improve the
+          search experience. Your Feedback helps us to make our service better
+          for everyone, thank you!
+          <br />
+          <div className="btn dismiss" onClick={onClose}>
+            Dismiss
+          </div>
+        </div>
+      );
+      break;
+    default:
+      inner = null;
+      break;
+  }
+  return (
+    <Animate
+      show={feedbackState !== "hidden"}
+      start={{ y: 100, opacity: 0 }}
+      enter={{ y: [0], opacity: [1] }}
+      leave={{ y: [100], opacity: [0] }}
+    >
+      {({ y, opacity }) => (
+        <section
+          className="feedback"
+          style={{ transform: `translateY(${y}%)`, opacity }}
+        >
+          <div className="wrapper">{inner}</div>
+          <div className="closeFeedbackContainer">
+            <div className="closeFeedback" onClick={onClose} />
+          </div>
+        </section>
+      )}
+    </Animate>
+  );
 };
 
 export default Feedback;

package/src/components/FiltersList.tsx

@@ -1,69 +1,116 @@
-
-import React, { useState } from 'react';
-import {Filter} from '../../../nyris-api/index';
-import { addToSelectedFilters, removeFromSelectedFilters } from '../actions/searchActions';
-import {  useDispatch } from 'react-redux';
-import { RiLayoutGridLine} from 'react-icons/ri';
+import React, { useEffect, useState } from "react";
+import { Filter } from "@nyris/nyris-api";
+import {
+  addToSelectedFilters,
+  removeFromSelectedFilters,
+  filterChanged,
+  searchFilters,
+} from "../actions/searchActions";
+import { useDispatch } from "react-redux";
+import { RiArrowDropUpLine, RiArrowDropDownLine } from "react-icons/ri";
+import { capitalizeFirstLetter } from "../utils";
+import { AiOutlineSearch } from "react-icons/ai";
 
 interface FilterProps {
-    filter : Filter
+  filter: Filter;
+  selectedValues?: string[];
 }
 
+const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
+  const dispatch = useDispatch();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [searchInp, setSearchInp] = useState("");
+  const handleToggler = () => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+      return;
+    }
+    setIsCollapsed(true);
+  };
+  const onFilterChanged = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    if (e.target.checked) {
+      if (filter.key) dispatch(addToSelectedFilters(filter.key, value));
+    } else {
+      if (filter.key) dispatch(removeFromSelectedFilters(filter.key, value));
+    }
+    dispatch(filterChanged());
+  };
 
+  const handleChangeOnSearchInputTyped = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setSearchInp(e.target.value);
+  };
 
-const FiltersList : React.FC<FilterProps> = ({filter})=>{
-    const [checked, setChecked] = useState<string[]>([]);
-    const dispatch = useDispatch();
-
-    const onFilterChanged=(e: React.ChangeEvent<HTMLInputElement>,value:string) =>{
-       var updatedList = [...checked];
-       console.log(e.target.checked);
-       if (e.target.checked) {
-        if(filter.key)
-         dispatch(addToSelectedFilters(filter.key , value));
-          updatedList = [...checked, value];
-        } else {
-            if(filter.key)
-            dispatch(removeFromSelectedFilters(filter.key, value));
-        updatedList.splice(checked.indexOf(value), 1);
-       }
-       setChecked(updatedList);
-       console.log(updatedList);
+  useEffect(() => {
+    if (searchInp === "") {
+      dispatch(searchFilters(filter.key!, ""));
     }
-    
-    if(filter && filter.values && filter.key && filter.values.length > 0){   
-          
-        return (
-            <div>
-                <div className='item'>
-                <RiLayoutGridLine className="sidebar-icon" />
-                 <span className="sidebar-text"> {filter.key}</span>
-                </div>
-                
-               <div className='item'>
-               <div className="list-container">
-       
-             {filter.values.slice(0, 6).map((item, index) => (
-            <div key={index}>
-            <input value={item} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />
-            
-            <label className='itemLabel'>{item}</label>
-           </div>
-           ))}
-       </div>  
-               </div>
-                                 
-            </div>
-
-        );
+    if (searchInp.length > 3) {
+      dispatch(searchFilters(filter.key!, searchInp));
     }
-    else{
-     return (
-       <div>
-        No filter to load
-       </div>
+  }, [searchInp, filter.key, dispatch]);
+
+  return (
+    <div>
+      <div className="item">
+        <span className="sidebar-text">
+          {capitalizeFirstLetter(filter.key!)}
+        </span>
+        <RiArrowDropUpLine
+          className={
+            isCollapsed ? "sidebar-icon" : "sidebar-icon collapsedHide"
+          }
+          onClick={() => handleToggler()}
+        />
+        <RiArrowDropDownLine
+          className={
+            isCollapsed ? "sidebar-icon collapsedHide" : "sidebar-icon"
+          }
+          onClick={() => handleToggler()}
+        />
+      </div>
+
+      <div
+        className={
+          isCollapsed ? "list-container" : "list-container collapsedHide"
+        }
+      >
+        <div className="searchBar">
+          <input
+            id="searchQueryInput"
+            name="searchQueryInput"
+            placeholder="Search"
+            value={searchInp}
+            onChange={(e) => handleChangeOnSearchInputTyped(e)}
+          />
+          <button id="searchQuerySubmit" type="submit" name="searchQuerySubmit">
+            <AiOutlineSearch />
+          </button>
+        </div>
+        {filter &&
+          filter.values &&
+          filter.values.length > 0 &&
+          filter.values.map((item, index) => {
+            const checked = selectedValues && selectedValues.includes(item);
+            return (
+              <div key={index}>
+                <input
+                  value={item}
+                  checked={checked ? true : false}
+                  type="checkbox"
+                  onChange={(e) => onFilterChanged(e, item)}
+                />
+                <span className="itemLabel">{item}</span>
+              </div>
+            );
+          })}
+      </div>
+    </div>
   );
- } 
-}
+};
 
-export default FiltersList;
+export default FiltersList;

package/src/components/Header.tsx

@@ -1,20 +1,32 @@
 import React from "react";
 
-const Header = () =>{
-return (
+const Header = () => {
+  return (
     <div id="header">
-     
-    <section id="branding"></section>
-              <div id="menu" className="menuWrap" role="navigation" >
-                  <ul>
-                      <li><a href="https://nyris.io/imprint/#privacy" target="_blank"
-                             rel="noopener noreferrer">Privacy Policy</a></li>
-                      <li><a href="https://nyris.io/" target="_blank" rel="noopener noreferrer">Visit our
-                          Website</a></li>
-                  </ul>
-              </div>
-</div>
-);
-
-}
-export default Header;
+      <section id="branding"></section>
+      <div id="menu" className="menuWrap" role="navigation">
+        <ul>
+          <li>
+            <a
+              href="https://nyris.io/imprint/#privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Privacy Policy
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://nyris.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Visit our Website
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+export default Header;

package/src/components/PredictedCategories.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
-
-const PredictedCategories = ({cs}: {cs: {name: string, score: number}[]}) =>
-    <>
-        {cs.map((c) =>
-            <small key={c.name}>
-                {c.name === "" ? "No category" : c.name.split(" > ").slice(-1)[0]}:
-                {(c.score * 100).toFixed(0)}%
-            </small>)}
-    </>
-;
-
+import React from "react";
 
+const PredictedCategories = ({
+  cs,
+}: {
+  cs: { name: string; score: number }[];
+}) => (
+  <>
+    {cs.map((c) => (
+      <small key={c.name}>
+        {c.name === "" ? "No category" : c.name.split(" > ").slice(-1)[0]}:
+        {(c.score * 100).toFixed(0)}%
+      </small>
+    ))}
+  </>
+);
 export default PredictedCategories;