magnum-opus-tender-hack/frontend
1
0
Fork 0
mirror of https://github.com/magnum-opus-tender-hack/frontend.git synced 2024-11-21 15:56:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

add logic

Browse Source
This commit is contained in:
ilia 2022-10-22 22:44:45 +03:00
parent e03d7f2969
commit c52391d963
3 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/api/consts.ts
View File

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

9
store/reducers/nodesInputReducer.ts
View File

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

44
сomponents/search/index.tsx
View File

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