Merge pull request #3 from magnum-opus-tender-hack/remove-bug

Remove bug

pages/api/fetch.ts

@@ -8,4 +8,3 @@ export const fetcher = axios.create(
         timeout: 60000
     }
 )
-

pages/index.tsx

@@ -17,12 +17,6 @@ const Home: NextPage = () => {
   const getProducts = useAppSelector(products);
   const getHints = useAppSelector(hints);
 
-  // if (getHints.length == 0) {
-  //   dispatch(
-  //       createHints({word:"сап", hints: [] as INode[]})
-  //   )
-  // }
-  // console.log(getHints) 
 
   // if (getProducts.length == 0) {
   //   dispatch(

store/reducers/nodesInputReducer.ts

@@ -48,7 +48,11 @@ const nodesInputSlice = createSlice({
         },
         createNode(state, action: PayloadAction<INode>) {
             state.nodes = state.nodes.concat([action.payload]);
-        }
+        },
+        deleteNode(state, action: PayloadAction<string>) {
+            state.nodes = state.nodes.filter((e) => e.value != action.payload)
+        },
+        
     },
     extraReducers: (builder) => {
         builder.addCase(search.fulfilled, (state, action) => {
@@ -60,12 +64,13 @@ const nodesInputSlice = createSlice({
     }
 })
 
-export const {setCurrentWord, createNode} = nodesInputSlice.caseReducers;
+export const {setCurrentWord, createNode, deleteNode} = nodesInputSlice.actions;
 
 
 export const hints = createSelector((state: INodesInput) => state.hints, hints => hints)
 export const currentWord = createSelector((state: INodesInput) => state.current_word, word => word)
 export const products = createSelector((state: INodesInput) => state.products, products => products)
+export const nodes = createSelector((state: INodesInput) => state.nodes, nodes => nodes)
 
 
 export default nodesInputSlice.reducer;

сomponents/search/index.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from "react";
 import { AutoComplete, Input, Tag } from 'antd';
-import { fetcher } from "../../pages/api/fetch";
 import { useAppDispatch, useAppSelector } from "../../hooks";
-import { hints, INode, products } from "../../store/reducers/nodesInputReducer";
+import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer";
 import { createHints, search } from "../../store/reducers/asyncActions";
 import styles from "./search.module.css"
 
 
+
 export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     const [data, setData] = useState("")
     const [tags, setTags] = useState(new Array<JSX.Element>())
-    const [searchOptions, setSearchOptions] = useState(new Array<INode>())
     const dispatch = useAppDispatch();
+    const getNodes = useAppSelector(nodes);
     const getHints = useAppSelector(hints);
     const [autoCompleteValue, setAutoCompleteValue] = useState("")
     const onChange = (text:string) =>{
@@ -40,6 +40,11 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
                         color={color}
                         closable
                         style={{ marginRight: 3 }}
+                        onClose={() => {
+                            dispatch(
+                                deleteNode(value.value)
+                            )
+                        }}
                         >
                             {value.value.length <13? value.value:value.value.slice(0,10)+"..."}
                         </Tag>
@@ -48,21 +53,61 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
 
     const onSelect = (value:string, type:INode) =>{
         addTag(type)
-        setSearchOptions(searchOptions.concat([type]))
+        dispatch(createNode(type));
         setAutoCompleteValue("")
 
     }
 
     const onEnter = (value:any) => {
-        dispatch(search(searchOptions))
+        dispatch(
+            search(
+                getNodes.concat(
+                    autoCompleteValue.length ?
+                    [
+                        {
+                            'type': 'All',
+                            'value': autoCompleteValue
+                
+                        }
+                    ] : []
+                )
+            )
+        )
+    }
+
+    if (autoCompleteValue.endsWith('  ')) {
+        dispatch(
+            createNode({
+                type: "All",
+                value: autoCompleteValue.slice(0, autoCompleteValue.length-2)
+            })
+        )
+        addTag({
+            type: "All",
+            value: autoCompleteValue.slice(0, autoCompleteValue.length-2)
+        })
+        setAutoCompleteValue('');
     }
     return(
         <AutoComplete
-            dropdownMatchSelectWidth={252}
-            options={getHints.map((el)=>el.value)}
+            options={getHints.map((e) => {
+                const pre_str = e.value.value.slice(0, e.coordinate)
+                const after_str = e.value.value.slice(e.coordinate+autoCompleteValue.length, e.value.value.length)
+                const bold_str = e.value.value.slice(e.coordinate, e.coordinate+autoCompleteValue.length)
+                return {
+                    label: <div>
+                        <span>{pre_str}</span>
+                        {bold_str.toLocaleLowerCase () == autoCompleteValue.toLowerCase() ? <strong>{bold_str}</strong> : <span>{bold_str}</span>}
+                        <span>{after_str}</span>
+                    </div>,
+                    value: e.value.value
+                }
+            })}
             onSelect={onSelect as any}
             value={autoCompleteValue}
-            onChange={(e)=>setAutoCompleteValue(e)}
+            onChange={(e: any)=>setAutoCompleteValue(e)}
+            // onSearch={handleSearch}
+            dropdownMatchSelectWidth={252}
         >
             <Input.Search  prefix={tags}
             style={{ width: "50vw" }}