mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-21 15:56:35 +03:00
fix spinner
This commit is contained in:
parent
3fbc0580f5
commit
e49b629d99
|
@ -29,14 +29,16 @@ interface INodesInput {
|
|||
value: INode
|
||||
}[],
|
||||
current_word: string,
|
||||
products: IProduct[]
|
||||
products: IProduct[],
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
const initialState: INodesInput = {
|
||||
nodes: [],
|
||||
hints: [],
|
||||
current_word: "",
|
||||
products: []
|
||||
products: [],
|
||||
loading:false
|
||||
}
|
||||
|
||||
const nodesInputSlice = createSlice({
|
||||
|
@ -52,11 +54,15 @@ const nodesInputSlice = createSlice({
|
|||
deleteNode(state, action: PayloadAction<string>) {
|
||||
state.nodes = state.nodes.filter((e) => e.value != action.payload)
|
||||
},
|
||||
setLoading(state, action: PayloadAction<boolean>){
|
||||
state.loading = action.payload
|
||||
}
|
||||
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder.addCase(search.fulfilled, (state, action) => {
|
||||
state.products = action.payload;
|
||||
state.loading = false
|
||||
})
|
||||
builder.addCase(createHints.fulfilled, (state, action) => {
|
||||
state.hints = action.payload;
|
||||
|
@ -64,13 +70,15 @@ const nodesInputSlice = createSlice({
|
|||
}
|
||||
})
|
||||
|
||||
export const {setCurrentWord, createNode, deleteNode} = nodesInputSlice.actions;
|
||||
export const {setCurrentWord, createNode, deleteNode, setLoading} = 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 const loading = createSelector((state: INodesInput) => state.loading, loading => loading)
|
||||
|
||||
|
||||
|
||||
export default nodesInputSlice.reducer;
|
|
@ -14,7 +14,7 @@ export const ProductCard: React.FC<IProduct> = (props) =>{
|
|||
return(
|
||||
props.characteristic == undefined? null:
|
||||
<div className={styles.card}>
|
||||
<div className={styles.name}>{props.name}</div>
|
||||
<div className={styles.name}>{props.name.length > 100? props.name.slice(0,100) + "...":props.name}</div>
|
||||
<div className={styles.prWrap}>
|
||||
<div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
|
||||
<div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import { AutoComplete, Input, Tag } from 'antd';
|
||||
import { useAppDispatch, useAppSelector } from "../../hooks";
|
||||
import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer";
|
||||
import { createNode, deleteNode, hints, INode, loading, nodes, products, setLoading } from "../../store/reducers/nodesInputReducer";
|
||||
import { createHints, search } from "../../store/reducers/asyncActions";
|
||||
import styles from "./search.module.css"
|
||||
|
||||
|
@ -10,14 +10,14 @@ 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 [loading, setLoading] = useState(false)
|
||||
const dispatch = useAppDispatch();
|
||||
const getNodes = useAppSelector(nodes);
|
||||
const getProducts = useAppSelector(products);
|
||||
const getHints = useAppSelector(hints);
|
||||
const getLoading = useAppSelector(loading)
|
||||
const [autoCompleteValue, setAutoCompleteValue] = useState("")
|
||||
const onChange = (text:string) =>{
|
||||
if (text.length >= 3 && text.length%3 == 0){
|
||||
if (text.length >= 3 && text.length%2 == 0){
|
||||
dispatch(
|
||||
createHints({word:text, hints:getHints.length == 0? []: getHints.map((el)=>el.value)})
|
||||
)
|
||||
|
@ -69,8 +69,8 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
|
|||
}
|
||||
|
||||
const onEnter = (value:any) => {
|
||||
setLoading(true)
|
||||
console.log(getNodes);
|
||||
dispatch(setLoading(true))
|
||||
dispatch(
|
||||
search(
|
||||
getNodes.concat(
|
||||
|
@ -130,7 +130,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
|
|||
onSearch={(e) => onEnter(e)}
|
||||
size="large"
|
||||
placeholder="Поиск товара"
|
||||
loading={loading && getProducts.length == 0}
|
||||
loading={getLoading}
|
||||
enterButton />
|
||||
</AutoComplete>
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
border: 1px solid #BDBDBD;
|
||||
border-radius: 0px 17px 17px 0px !important;
|
||||
background-color: #DB2B21;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.search button:hover{
|
||||
|
@ -14,7 +15,7 @@
|
|||
|
||||
.search.ant-input-group-addonn{
|
||||
background-color: #e7eef7 !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.search input{
|
||||
|
|
Loading…
Reference in New Issue
Block a user