diff --git a/pages/api/consts.ts b/pages/api/consts.ts index 70bb223..f84d548 100644 --- a/pages/api/consts.ts +++ b/pages/api/consts.ts @@ -1 +1 @@ -export const host = "https://0c9e-5-227-22-1.eu.ngrok.io/api/" \ No newline at end of file +export const host = "https://7ee1-5-227-22-5.eu.ngrok.io/api/" \ No newline at end of file diff --git a/store/reducers/nodesInputReducer.ts b/store/reducers/nodesInputReducer.ts index aacfc54..50fc511 100644 --- a/store/reducers/nodesInputReducer.ts +++ b/store/reducers/nodesInputReducer.ts @@ -47,7 +47,11 @@ const nodesInputSlice = createSlice({ }, createNode(state, action: PayloadAction) { state.nodes = state.nodes.concat([action.payload]); - } + }, + deleteNode(state, action: PayloadAction) { + 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; \ No newline at end of file diff --git a/сomponents/search/index.tsx b/сomponents/search/index.tsx index a9fa95c..e4c91f8 100644 --- a/сomponents/search/index.tsx +++ b/с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()) - const [searchOptions, setSearchOptions] = useState(new Array()) 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)+"..."} @@ -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( 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:
+ {pre_str} + {bold_str.toLocaleLowerCase () == autoCompleteValue.toLowerCase() ? {bold_str} : {bold_str}} + {after_str} +
, + value: e.value.value + } + })} onSelect={onSelect as any} value={autoCompleteValue} onChange={(e: any)=>setAutoCompleteValue(e)}