@nyris/nyris-webapp 0.3.9 → 0.3.14

package/public/js/settings.example.js

@@ -0,0 +1,30 @@
+var settings = {
+    "apiKey": "xxx",
+    "maxWidth": 500,
+    "maxHeight": 500,
+    "jpegQuality": 0.9,
+    "regions": true,
+    "preview": true,
+    "baseUrl": "https://api.nyris.io",
+    "xOptions": "",
+    "exampleImages": [
+      "https://img.nyris.io/demo/everybag/kissen.jpg",
+      "https://img.nyris.io/demo/everybag/aspirin.jpg",
+      "https://img.nyris.io/demo/everybag/lego.jpg",
+      "https://img.nyris.io/demo/everybag/wdr_add_2.jpg",
+      "https://img.nyris.io/demo/everybag/mb-dle-4.jpg",
+      "https://img.nyris.io/demo/everybag/1.jpg",
+      "https://img.nyris.io/demo/everybag/5.jpg",
+      "https://img.nyris.io/demo/everybag/6.jpg"
+    ],
+    "instantRedirectPatterns": [
+      '^https?://(www.)?youtube.com/',
+      '^https?://(www.)?youtu.be/',
+      '^https?://(www.)?vimeo.com/',
+      '^https?://(www.)?dailymotion.com/',
+      '^https?://(www.)?dai.ly/'
+    ]
+  };
+  settings["customSearchRequest"] = null;
+  settings["responseHook"] =  null;
+  

package/src/App.tsx

@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { Animate, NodeGroup } from "react-move";
+import './App.css';
+import React, {useEffect, useState} from 'react';
+import Result from './components/Result';
+import ExampleImages from './components/ExampleImages';
+import Feedback from './components/Feedback';
+import CategoryFilter from "./components/CategoryFilter";
+import PredictedCategories from "./components/PredictedCategories";
+import Codes from "./components/Codes";
+import {Code, CategoryPrediction, RectCoords, Region, cadExtensions, Filter} from "@nyris/nyris-api";
 import { useDropzone} from "react-dropzone";
-import {
-  Box,
-  Snackbar
-} from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
-import classNames from "classnames";
+import classNames from 'classnames';
+import {Animate, NodeGroup} from "react-move";
+import {AppSettings, MDSettings, CanvasWithId} from "./types";
+import {NyrisAppPart, NyrisFeedbackState} from "./actions/nyrisAppActions";
+import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
+import {Box,Snackbar} from "@material-ui/core";
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
+import { useDispatch } from "react-redux";
 import { loadFilters } from "./actions/searchActions";
-import Result from "./components/Result";
 import Sidebar from "./components/Sidebar";
 import Header from "./components/Header";
-import Feedback from "./components/Feedback";
-import CategoryFilter from "./components/CategoryFilter";
-import Codes from "./components/Codes";
-import PredictedCategories from "./components/PredictedCategories";
-import ExampleImages from "./components/ExampleImages";
-import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
-import { RectCoords, cadExtensions, CategoryPrediction, Code, Region, Filter} from "@nyris/nyris-api";
-import { AppSettings, CanvasWithId, MDSettings } from "./types";
-import { NyrisAppPart, NyrisFeedbackState } from "./actions/nyrisAppActions";
+import SelectedFiltersSummary from "./components/SelectedFiltersSummary";
+
 
 export interface AppHandlers {
   onExampleImageClick: (url: string) => void,
@@ -35,210 +35,228 @@ export interface AppHandlers {
   onSelectionChange: (r: RectCoords) => void,
   onPositiveFeedback: () => void,
   onNegativeFeedback: () => void,
-  onCloseFeedback: () => void
+  onCloseFeedback: () => void,
 }
+
+
 export interface AppProps {
-    search: {
-        results: any[],
-        requestId?: string,
-        duration?: number,
-        categoryPredictions: CategoryPrediction[],
-        codes: Code[],
-        filterOptions: string[],
-        errorMessage?: string,
-        regions: Region[],
-        previewSelection: RectCoords,
-        toastErrorMessage?: string,
-        filters: Filter[],
-        selectedFilters: Map<string,string[]>
-    },
-    previewImage?: CanvasWithId,
-    settings: AppSettings,
-    loading: boolean,
-    showPart: NyrisAppPart,
-    feedbackState: NyrisFeedbackState,
-    handlers: AppHandlers,
-    mdSettings: MDSettings
+  search: {
+    results: any[];
+    requestId?: string;
+    duration?: number;
+    categoryPredictions: CategoryPrediction[];
+    codes: Code[];
+    filterOptions: string[];
+    errorMessage?: string;
+    regions: Region[];
+    previewSelection: RectCoords;
+    toastErrorMessage?: string;
+    filters: Filter[];
+    selectedFilters: Map<string, string[]>;
+  };
+  previewImage?: CanvasWithId;
+  settings: AppSettings;
+  loading: boolean;
+  showPart: NyrisAppPart;
+  feedbackState: NyrisFeedbackState;
+  handlers: AppHandlers;
+  mdSettings: MDSettings;
 }
 
-const Demo2: React.FC<AppProps> = ({
-    search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters, selectedFilters},
-    showPart, settings, handlers, loading, previewImage, feedbackState
+
+function Alert(props: AlertProps) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+
+const App: React.FC<AppProps> = ({
+  search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters, selectedFilters},
+  showPart, settings, handlers, loading, previewImage, feedbackState
 }) => {
-    
-    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
-    
-    const minPreviewHeight = 400;
-    const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
-    const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
-    const [toastOpen, setToastOpen] = useState(false);
-    const dispatch = useDispatch();
-
-    const acceptTypes =[ 'image/*' ].concat( settings.cadSearch ? cadExtensions : [] ).join(',');
-
-
-    useEffect(() => {
-        if (toastErrorMessage !== '') {
-            setToastOpen(true);
-        }
-    }, [toastErrorMessage])
- 
-    useEffect(() =>{
+
+  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
+
+  const minPreviewHeight = 400;
+  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+  const acceptTypes =
+      [ 'image/*' ].concat(
+          settings.cadSearch ? cadExtensions : []
+      ).join(',');
+  const [toastOpen, setToastOpen] = useState(false);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (toastErrorMessage !== "") {
+      setToastOpen(true);
+    }
+  }, [toastErrorMessage]);
+
+  useEffect(() => {
     dispatch(loadFilters());
-    }, [showPart, dispatch])
-    
+  }, [showPart, dispatch]);
+
   return (
     <React.Fragment>
-      <Header/>
-      <div className="wrapperBody">    
-      <Sidebar filters={filters} selectedFilters={selectedFilters}/>
-        
-      <div className="mainContent">
-      {showPart === 'camera' &&
-        <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
-                  useAppText='Use default camera app'/>}
-
-              
-        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">           
-            <div   {...getRootProps({
-                onClick: e => {
-                    e.stopPropagation();
-                }
-            })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
-             
-                <div className={classNames('contentWrap')}>
-                <Box display="flex" flexDirection="column"  justifyContent="center" alignItems="center"  minHeight="100vh">
-                <section className="uploadImage">
-                        <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
-                               capture="environment" onClick={handlers.onCameraClick}/>
-                        <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
-                               capture="environment"/>
-                        <input {...getInputProps()} type="file" name="file" id="select_file" className="inputfile"
-                               accept={acceptTypes}
-                               onChange={makeFileHandler(handlers.onSelectFile)}
-                        />
-                        <div className="onDesktop">
-                            Drop an image
-                            <div className="smallText">or</div>
-                        </div>
-                        <div className="onMobile camIcon">
-                            <img src="./images/ic_cam_large.svg" alt="Camera"/>
-                        </div>
-                        <label htmlFor="capture" className="btn primary onMobile"
-                               style={{marginBottom: '2em', width: '12em'}}>
-                            <span className="onMobile">Take a picture</span>
-                        </label>
-                        <br/>
-                        <label htmlFor="select_file" className="btn primary" style={{width: '12em'}}>
-                            <span>Select a file</span>
-                        </label>
-                        <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
-                </section>
-                <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
-                  
+      <Header />
+      <div className="wrapperBody">
+        <Sidebar filters={filters} selectedFilters={selectedFilters} />
+
+        <div className="mainContent">
+        {showPart === 'camera' &&
+            <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                      useAppText='Use default camera app'/>}
+          <SelectedFiltersSummary />
+          <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">
+            <div
+              {...getRootProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
+              <div className={classNames("contentWrap")}>
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  justifyContent="center"
+                  alignItems="center"
+                  minHeight="100vh"
+                >
+                  <section className="uploadImage">
+                  <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
+                                   capture="environment" onClick={handlers.onCameraClick}/>
+                  <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
+                                   capture="environment"/>
+                  <input {...getInputProps()} type="file" name="file" id="select_file" className="inputfile"
+                                   accept={acceptTypes}
+                                   onChange={makeFileHandler(handlers.onSelectFile)}
+                    />
+
+                    <div className="onDesktop">
+                      Drop an image
+                      <div className="smallText">or</div>
+                    </div>
+                    <div className="onMobile camIcon">
+                      <img src="./images/ic_cam_large.svg" alt="Camera" />
+                    </div>
+                    <label
+                      htmlFor="capture"
+                      className="btn primary onMobile"
+                      style={{ marginBottom: "2em", width: "12em" }}
+                    >
+                      <span className="onMobile">Take a picture</span>
+                    </label>
+                    <br />
+                    <label htmlFor="select_file" className="btn primary" style={{width: '22em'}}>
+                                <span>Select a file</span>
+                    </label>
+                    <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
+                  </section>
+                  <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
                 </Box>
-                </div>
+              </div>
             </div>
-            
-            <div className="headerSeparatorTop"/>
-            <div className="headerSeparatorBack"/>
+
+            <div className="headerSeparatorTop" />
+            <div className="headerSeparatorBack" />
             <div className={classNames('tryDifferent', {hidden: showPart !== 'results'})}
-                 onClick={handlers.onShowStart}>
-                <div className="icIcon">
-                </div>
-                <div className="textDesc"> Try a different image</div>
-                <br style={{clear: 'both'}}/>
-            </div>
-        </div>
-        
-         <section className={classNames({hideResults: showPart !== 'results'},'results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
-            {errorMessage &&
-            <div className="errorMsg">
-                {errorMessage}
-                <div style={{textAlign: 'center', fontSize: '0ß.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
-                </div>
+                     onClick={handlers.onShowStart}>
+              <div className="icIcon"></div>
+              <div className="textDesc"> Try a different image</div>
+              <br style={{ clear: "both" }} />
             </div>
-            }
-            <Animate show={loading} start={{opacity: 0.0}} enter={{opacity: [1.0], timing: {duration: 300}}}
-                     leave={{opacity: [0.0], timing: {duration: 300}}}>
-                {s =>
-                    <div className="loadingOverlay" style={{...s}}>
-                        <div className="loading"/>
+          </div>
+
+          <section
+                className={classNames('results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
+                {errorMessage &&
+                <div className="errorMsg">
+                    {errorMessage}
+                    <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
                     </div>
+                </div>
                 }
-            </Animate>
-            {settings.preview && previewImage &&
-            <div className="preview">
-                <Preview key={previewImage.id}
-                         maxWidth={document.body.clientWidth} maxHeight={maxPreviewHeight}
-                         dotColor="#4C8F9F"
-                         onSelectionChange={handlers.onSelectionChange} regions={regions}
-                         selection={previewSelection} image={previewImage.canvas}/>
-            </div>
-            }
-            <div className="predicted-categories">
-                <PredictedCategories cs={categoryPredictions}/>
-            </div>
-            <div className="predicted-categories">
-                <Codes codes={codes}/>
-            </div>
-            <CategoryFilter cats={filterOptions}/>
-
-            <div className="wrapper">
-                <NodeGroup data={results}
-                           keyAccessor={r => r.sku}
-                           start={(r, i) => ({opacity: 0, translateX: -100})}
-                           enter={(r, i) => ({
-                               opacity: [1],
-                               translateX: [0],
-                               timing: {delay: i * 100, duration: 300}
-                           })}
-                >
-                    {rs => <>{rs.map(({key, data, state}) => <Result
-                        key={key}
-                        noImageUrl={settings.noImageUrl}
-                        template={settings.resultTemplate}
-                        onImageClick={handlers.onImageClick}
-                        onLinkClick={handlers.onLinkClick}
-                        result={data}
-                        style={{opacity: state.opacity, transform: `translateX(${state.translateX}%)`}}/>)}</>}
-                </NodeGroup>
+                <Animate show={loading} start={{opacity: 0.0}} enter={{opacity: [1.0], timing: {duration: 300}}}
+                         leave={{opacity: [0.0], timing: {duration: 300}}}>
+                    {s =>
+                        <div className="loadingOverlay" style={{...s}}>
+                            <div className="loading"/>
+                        </div>
+                    }
+                </Animate>
+                {settings.preview && previewImage &&
+                <div className="preview">
+                    <Preview key={previewImage.id}
+                             maxWidth={document.body.clientWidth} maxHeight={maxPreviewHeight}
+                             dotColor="#4C8F9F"
+                             onSelectionChange={handlers.onSelectionChange} regions={regions}
+                             selection={previewSelection} image={previewImage.canvas}/>
+                </div>
+                }
+                <div className="predicted-categories">
+                    <PredictedCategories cs={categoryPredictions}/>
+                </div>
+                <div className="predicted-categories">
+                    <Codes codes={codes}/>
+                </div>
+                <CategoryFilter cats={filterOptions}/>
 
-                {results.length === 0 && showPart === 'results' && !loading && (
+                <div className="wrapper">
+                    <NodeGroup data={results}
+                               keyAccessor={r => r.sku}
+                               start={(r, i) => ({opacity: 0, translateX: -100})}
+                               enter={(r, i) => ({
+                                   opacity: [1],
+                                   translateX: [0],
+                                   timing: {delay: i * 100, duration: 300}
+                               })}
+                    >
+                        {rs => <>{rs.map(({key, data, state}) => <Result
+                            key={key}
+                            noImageUrl={settings.noImageUrl}
+                            template={settings.resultTemplate}
+                            onImageClick={handlers.onImageClick}
+                            onLinkClick={handlers.onLinkClick}
+                            result={data}
+                            style={{opacity: state.opacity, transform: `translateX(${state.translateX}%)`}}/>)}</>}
+                    </NodeGroup>
 
-                    <div className="noResults">We did not find anything <span role="img"
-                                                                              aria-label="sad face">😕</span></div>
-                )}
+                    {results.length === 0 && showPart === 'results' && !loading && (
 
-                <br style={{clear: 'both'}}/>
+                        <div className="noResults">We did not find anything <span role="img"
+                                                                                  aria-label="sad face">😕</span></div>
+                    )}
 
-                {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
-                    took {duration.toFixed(2)} seconds</div>)}
+                    <br style={{clear: 'both'}}/>
 
-                {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
-                    identifier {requestId}</div>}
-            </div>
-        </section>
-
-        <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
-            <Alert onClose={() => setToastOpen(false)} severity="error">
-                {toastErrorMessage}
-            </Alert>
-        </Snackbar> 
-       
+                    {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
+                        took {duration.toFixed(2)} seconds</div>)}
+
+                    {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
+                        identifier {requestId}</div>}
+                </div>
+            </section>
+
+            <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+                <Alert onClose={() => setToastOpen(false)} severity="error">
+                    {toastErrorMessage}
+                </Alert>
+            </Snackbar>
+
+        </div>
       </div>
-        </div> 
-        <section className="footnote">
-            <div className="wrapper">
-                © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
-                href="https://nyris.io/imprint/">Imprint</a>
-            </div>
-        </section>
-        <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
-                  onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
-    
+      <section className="footnote">
+                <div className="wrapper">
+                    © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
+                    href="https://nyris.io/imprint/">Imprint</a>
+                </div>
+            </section>
+            <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
+                      onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
+
     </React.Fragment>
   );
-}
+};
 
-export default Demo2;
+export default App;

package/src/actions/nyrisAppActions.ts

@@ -1,76 +1,80 @@
-import {AppAction} from "../types";
-
-
-export type NyrisAppPart = 'start' | 'camera' | 'results';
-export type NyrisFeedbackState = 'hidden' | 'question' | 'positive' | 'negative';
+import { AppAction } from "../types";
 
+export type NyrisAppPart = "start" | "camera" | "results";
+export type NyrisFeedbackState =
+  | "hidden"
+  | "question"
+  | "positive"
+  | "negative";
 
 export interface NyrisAppState {
-    showPart: NyrisAppPart,
-    feedbackState: NyrisFeedbackState
+  showPart: NyrisAppPart;
+  feedbackState: NyrisFeedbackState;
 }
 
 export type NyrisAction =
-    | { type: 'SHOW_START' }
-    | { type: 'SHOW_CAMERA' }
-    | { type: 'SHOW_RESULTS' }
-    | { type: 'SHOW_FEEDBACK' }
-    | { type: 'HIDE_FEEDBACK' }
-    | { type: 'RESULT_LINK_CLICKED', position: number, url: string}
-    | { type: 'RESULT_IMAGE_CLICKED', position: number, url: string}
-
+  | { type: "SHOW_START" }
+  | { type: "SHOW_CAMERA" }
+  | { type: "SHOW_RESULTS" }
+  | { type: "SHOW_FEEDBACK" }
+  | { type: "HIDE_FEEDBACK" }
+  | { type: "RESULT_LINK_CLICKED"; position: number; url: string }
+  | { type: "RESULT_IMAGE_CLICKED"; position: number; url: string };
 
-export const showCamera = () :NyrisAction => ({type: 'SHOW_CAMERA'});
-export const showStart = () :NyrisAction => ({type: 'SHOW_START'});
-export const showResults = () :NyrisAction => ({type: 'SHOW_RESULTS'});
-export const showFeedback = () :NyrisAction => ({type: 'SHOW_FEEDBACK'});
-export const hideFeedback = () :NyrisAction => ({type: 'HIDE_FEEDBACK'});
+export const showCamera = (): NyrisAction => ({ type: "SHOW_CAMERA" });
+export const showStart = (): NyrisAction => ({ type: "SHOW_START" });
+export const showResults = (): NyrisAction => ({ type: "SHOW_RESULTS" });
+export const showFeedback = (): NyrisAction => ({ type: "SHOW_FEEDBACK" });
+export const hideFeedback = (): NyrisAction => ({ type: "HIDE_FEEDBACK" });
 
-const initialNyrisState : NyrisAppState = {
-    showPart: 'start',
-    feedbackState: 'hidden'
+const initialNyrisState: NyrisAppState = {
+  showPart: "start",
+  feedbackState: "hidden",
 };
 
-export function reducer(state : NyrisAppState = initialNyrisState, action: AppAction) : NyrisAppState {
-    switch (action.type) {
-        case 'SHOW_START':
-            return {
-                ...state,
-                showPart: 'start'
-            };
-        case 'SHOW_CAMERA':
-            return {
-                ...state,
-                showPart: 'camera'
-            };
-        case 'SEARCH_REQUEST_START':
-        case 'REGION_REQUEST_START':
-        case 'SHOW_RESULTS':
-            return {
-                ...state,
-                showPart: 'results'
-            };
-        case 'SHOW_FEEDBACK':
-            return {
-                ...state,
-                feedbackState: 'question'
-            };
-        case 'HIDE_FEEDBACK':
-            return {
-                ...state,
-                feedbackState: 'hidden'
-            };
-        case 'FEEDBACK_SUBMIT_POSITIVE':
-            return {
-                ...state,
-                feedbackState: 'positive'
-            };
-        case 'FEEDBACK_SUBMIT_NEGATIVE':
-            return {
-                ...state,
-                feedbackState: 'negative'
-            };
-        default:
-            return state;
-    }
+export function reducer(
+  state: NyrisAppState = initialNyrisState,
+  action: AppAction
+): NyrisAppState {
+  switch (action.type) {
+    case "SHOW_START":
+      return {
+        ...state,
+        showPart: "start",
+      };
+    case "SHOW_CAMERA":
+      return {
+        ...state,
+        showPart: "camera",
+      };
+    case "SEARCH_REQUEST_START":
+    case "REGION_REQUEST_START":
+    case "SHOW_RESULTS":
+      return {
+        ...state,
+        showPart: "results",
+      };
+    case "SHOW_FEEDBACK":
+      return {
+        ...state,
+        feedbackState: "question",
+      };
+    case "HIDE_FEEDBACK":
+      return {
+        ...state,
+        feedbackState: "hidden",
+      };
+    case "FEEDBACK_SUBMIT_POSITIVE":
+      return {
+        ...state,
+        feedbackState: "positive",
+      };
+    case "FEEDBACK_SUBMIT_NEGATIVE":
+      return {
+        ...state,
+        feedbackState: "negative",
+      };
+    default:
+      return state;
+  }
 }