fix spinner

This commit is contained in:
Firesieht 2022-10-23 00:17:15 +03:00
parent 3fbc0580f5
commit e49b629d99
4 changed files with 19 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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