mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-10 18:36:33 +03:00
Merge pull request #3 from magnum-opus-tender-hack/remove-bug
Remove bug
This commit is contained in:
commit
07d541107a
28
logo.svg
Normal file
28
logo.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 14 KiB |
|
@ -8,4 +8,3 @@ export const fetcher = axios.create(
|
|||
timeout: 60000
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
|
@ -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" }}
|
||||
|
|
Loading…
Reference in New Issue
Block a user