@nyris/nyris-webapp 0.3.9 → 0.3.12

package/src/components/CategoryFilter.tsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React from "react";
 
-
-const CategoryFilter = ({cats}: {cats: string[]}) => {
-    if (cats.length === 0) {
-        return null;
-    }
-    return (
-        <div id="catlist" style={{'textAlign': 'center'}}>
-            {
-                cats.map((s) => <a key={s} href="#top">{s}</a>) // TODO fix link
-            }
-        </div>
-    );
+const CategoryFilter = ({ cats }: { cats: string[] }) => {
+  if (cats.length === 0) {
+    return null;
+  }
+  return (
+    <div id="catlist" style={{ textAlign: "center" }}>
+      {
+        cats.map((s) => (
+          <a key={s} href="#top">
+            {s}
+          </a>
+        )) // TODO fix link
+      }
+    </div>
+  );
 };
 
 export default CategoryFilter;

package/src/components/Codes.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
-import {Code} from '@nyris/nyris-api';
+import React from "react";
+import { Code } from "@nyris/nyris-api";
 
 interface Props {
-    codes: Code[]
+  codes: Code[];
 }
-const Codes = ({codes}: Props) =>
-    <>
-        <div className="codes" style={{textAlign: 'center'}}>
-            {codes.length > 0 && <span style={{fontSize: '0.8em'}}>Codes<br/> </span> }
-            {codes.map((c, i) =>
-                <small key={i} title={c.type}>
-                    {c.value}
-                </small>)}
-        </div>
-    </>
-;
-
-
+const Codes = ({ codes }: Props) => (
+  <>
+    <div className="codes" style={{ textAlign: "center" }}>
+      {codes.length > 0 && (
+        <span style={{ fontSize: "0.8em" }}>
+          Codes
+          <br />{" "}
+        </span>
+      )}
+      {codes.map((c, i) => (
+        <small key={i} title={c.type}>
+          {c.value}
+        </small>
+      ))}
+    </div>
+  </>
+);
 export default Codes;

package/src/components/ExampleImages.tsx

@@ -1,24 +1,34 @@
-import React from 'react';
+import React from "react";
 
 interface ExampleImagesProps {
-    images: string[],
-    onExampleImageClicked: (url: string) => void
+  images: string[];
+  onExampleImageClicked: (url: string) => void;
 }
 
-const ExampleImages : React.FC<ExampleImagesProps> = ({images, onExampleImageClicked}) => {
-    if (images.length === 0) {
-        return null;
-    }
-    return (
-        <section className="useExampleImg">
-            You can also try one of these pictures:
-            <div className="exampleImages">
-                <div className="exImagesWrap">
-                    {images.map((i) => (<img key={i} src={i} alt="" onClick={() => onExampleImageClicked(i)}/>))}
-                </div>
-            </div>
-        </section>
-    );
+const ExampleImages: React.FC<ExampleImagesProps> = ({
+  images,
+  onExampleImageClicked,
+}) => {
+  if (images.length === 0) {
+    return null;
+  }
+  return (
+    <section className="useExampleImg">
+      You can also try one of these pictures:
+      <div className="exampleImages">
+        <div className="exImagesWrap">
+          {images.map((i) => (
+            <img
+              key={i}
+              src={i}
+              alt=""
+              onClick={() => onExampleImageClicked(i)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export default ExampleImages;

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,67 +1,122 @@
-
-import React 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,
-    selectedValues?: string[]
+  filter: Filter;
+  selectedValues?: string[];
 }
 
-
-
-const FiltersList : React.FC<FilterProps> = ({filter, selectedValues})=>{
-    const dispatch = useDispatch();
-
-    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));
-       }
+const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
+  const dispatch = useDispatch();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [message, setMessage] = useState("");
+  const handleToggler = () => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+      return;
     }
-    
-    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) => { 
-                  const checked = selectedValues && selectedValues.includes(item);        
-            return ( 
-              
-                <div key={index}>
-                 
-                <input value={item} checked={checked ? true: false} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />          
-                <label className='itemLabel'>{item}</label>
-               </div>
-               )
-            })}
-       </div>  
-               </div>
-                                 
-            </div>
+    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());
+  };
+  // 👇️ called every time input's value changes
+  const handleChangeOnSearchInputTyped = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setMessage(e.target.value);
+  };
+  const queryFilters = (key: string, value: string) => {
+    dispatch(searchFilters(key, value));
+  };
 
-        );
+  useEffect(() => {
+    if (message === "") {
+      dispatch(searchFilters(filter.key!, ""));
     }
-    else{
-     return (
-       <div>
-        No filter to load
-       </div>
+  }, [message, filter.key, dispatch]);
+  return (
+    <div>
+      <div className="item">
+        {/* <RiLayoutGridLine className="sidebar-icon" /> */}
+        <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={message}
+            onChange={(e) => handleChangeOnSearchInputTyped(e)}
+          />
+          <button
+            id="searchQuerySubmit"
+            type="submit"
+            name="searchQuerySubmit"
+            onClick={() => queryFilters(filter.key!, message)}
+          >
+            <AiOutlineSearch />
+          </button>
+        </div>
+        {filter &&
+          filter.values &&
+          filter.values.length > 0 &&
+          filter.values.slice(0, 6).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;