add logic

pages/api/consts.ts

@@ -1 +1 @@
-export const host = "https://0c9e-5-227-22-1.eu.ngrok.io/api/"
+export const host = "https://7ee1-5-227-22-5.eu.ngrok.io/api/"

store/reducers/nodesInputReducer.ts

@@ -47,7 +47,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) => {
@@ -59,12 +63,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,20 +1,19 @@
 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";
 
+
 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) =>{
         if (text.length >= 3 && text.length%3 == 0){
-            
             dispatch(
                 createHints({word:text, hints:getHints.length == 0? []: getHints.map((el)=>el.value)})
             )
@@ -39,6 +38,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>
@@ -47,7 +51,7 @@ 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("")
 
     }
@@ -55,7 +59,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     const onEnter = (value:any) => {
         dispatch(
             search(
-                searchOptions.concat(
+                getNodes.concat(
                     autoCompleteValue.length ?
                     [
                         {
@@ -68,9 +72,35 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
             )
         )
     }
+
+    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
-            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: any)=>setAutoCompleteValue(e)}