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

Remove bug
This commit is contained in:
Ilia vasilenko 2022-10-22 22:46:05 +03:00 committed by GitHub
commit 07d541107a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 17 deletions

28
logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

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

View File

@ -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(

View File

@ -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;

View File

@ -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" }}