This commit is contained in:
Firesieht 2022-10-22 19:11:56 +03:00
parent 3c21e865de
commit 81c649d102
11 changed files with 133 additions and 4142 deletions

4108
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1 +1 @@
export const host = "https://373a-5-227-22-7.eu.ngrok.io/api/"
export const host = "https://0c9e-5-227-22-1.eu.ngrok.io/api/"

View File

@ -1,9 +1,12 @@
import { INode } from "../../store/reducers/nodesInputReducer";
import { fetcher } from "./fetch";
export default async (word: string) => {
export default async (word: string, hints:INode[]) => {
const data = await fetcher.post('/autocomplete_schema', {
content: word
content: word,
exclude: []
});
return data.data;
return data.data.nodes;
}

View File

@ -5,7 +5,7 @@ import { host } from "./consts"
export const fetcher = axios.create(
{
baseURL: host,
timeout: 5000,
timeout: 1000,
}
)

View File

@ -3,8 +3,14 @@ import {INode} from '../../store/reducers/nodesInputReducer'
import { fetcher } from './fetch'
export default async (nodes: INode[]) => {
console.log("SEARCH", nodes)
const res = await fetcher.post('/search', {
body: nodes
body: nodes,
limit: 10,
offset: 0
});
console.log("SEARCHRES", res)
return res.data;
}

View File

@ -8,7 +8,8 @@ import { useState } from 'react'
import { TagSearch } from '../сomponents/tagSearch'
import {useAppDispatch, useAppSelector} from '../hooks';
import {search, createHints} from '../store/reducers/asyncActions';
import {products, hints} from '../store/reducers/nodesInputReducer'
import {products, hints, INode} from '../store/reducers/nodesInputReducer'
import { ProductsView } from '../сomponents/ProductsView'
const Home: NextPage = () => {
const [goods, setGoods] = useState([]);
@ -16,32 +17,31 @@ const Home: NextPage = () => {
const getProducts = useAppSelector(products);
const getHints = useAppSelector(hints);
// if (getHints.length == 0) {
// dispatch(
// createHints("сап")
// )
// }
// console.log(getHints) - вызов подсказок
// if (getHints.length == 0) {
// dispatch(
// createHints({word:"сап", hints: [] as INode[]})
// )
// }
// console.log(getHints)
// if (getProducts.length == 0) {
// dispatch(
// search([
// {
// 'type': 'Name',
// 'value': 'Сапоги'
// }
// ])
// )
// }
// console.log(getProducts)
// if (getProducts.length == 0) {
// dispatch(
// search([
// {
// 'type': 'Name',
// 'value': 'Сапоги'
// }
// ])
// )
// }
// console.log(getProducts)
// - вызов поиска
//
return (
<div className={styles.container}>
<Search onData={(data)=>setGoods(data)}></Search>
<div>{goods}</div>
<TagSearch onData={(data)=>setGoods(data)}></TagSearch>
<ProductsView></ProductsView>
</div>
)
}

View File

@ -1,13 +1,15 @@
import {createAsyncThunk} from '@reduxjs/toolkit'
import {INode, IProduct, IHint} from './nodesInputReducer';
import {INode, IProduct, IHint, hints} from './nodesInputReducer';
import search_api from '../../pages/api/search';
import create_hints_api from '../../pages/api/create_hints';
export const createHints = createAsyncThunk(
'nodesInput/createHints',
async (word: string, thunkApi) => {
const response: IHint[] = await create_hints_api(word);
async (data: {word: string, hints: INode[]}, thunkApi) => {
console.log("thunk")
const response: IHint[] = await create_hints_api(data.word,[]);
//TODO: добавить сеть
console.log(response, "RESP")
return response;
}
)
@ -15,7 +17,9 @@ export const createHints = createAsyncThunk(
export const search = createAsyncThunk(
'nodesInput/search',
async (nodes: INode[], thunkApi) => {
const response: IProduct[] = await search_api(nodes) as IProduct[];
return response;
}
)

View File

@ -3,12 +3,12 @@ import {search, createHints} from './asyncActions';
export interface INode{
type: "Unknown" | "Category" | "Name" | string;
type: "All" | "Category" | "Name" | string;
value: string;
}
export interface IHint{
node: INode;
value: INode;
coordinate: number;
}
@ -25,7 +25,7 @@ interface INodesInput {
nodes: INode[],
hints: {
coordinate: number,
node: INode
value: INode
}[],
current_word: string,
products: IProduct[]

View File

@ -0,0 +1,16 @@
import { Card } from "antd";
import React from "react";
import { useAppSelector } from "../../hooks";
import { products } from "../../store/reducers/nodesInputReducer";
export const ProductsView:React.FC = () =>{
const getProducts = useAppSelector(products)
console.log(getProducts)
return(
<div>
<Card title="Card title" bordered={false}>
Card content
</Card>
</div>
);
}

View File

@ -1,20 +1,76 @@
import React, { useState } from "react";
import { Input } from 'antd';
import axios from "axios";
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 { 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 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)})
)
}
setData(text)
}
const addTag = (value:INode) => {
let color = "red"
switch((value as any).type ){
case "Category":
color = "gold"
break
case "Name":
color = "green"
break
case "All":
color = "gray"
break
}
let tag = <Tag
color={color}
closable
style={{ marginRight: 3 }}
>
{value.value.length <13? value.value:value.value.slice(0,10)+"..."}
</Tag>
setTags(tags.concat([tag]))
}
const onSelect = (value:string, type:INode) =>{
addTag(type)
setSearchOptions(searchOptions.concat([type]))
setAutoCompleteValue("")
}
const onEnter = (value:any) => {
fetcher.post("/search", {body:value}).then((response)=>{
console.log(response)
props.onData(response.data)
}
)
dispatch(search(searchOptions))
}
return(
<Input.Search value={data} onSearch={(e)=>onEnter(e)} onChange={(e)=>setData(e.target.value)} size="large" placeholder="Поиск товара" enterButton />
<AutoComplete
options={getHints.map((el)=>el.value)}
onSelect={onSelect as any}
value={autoCompleteValue}
onChange={(e)=>setAutoCompleteValue(e)}
// onSearch={handleSearch}
>
<Input.Search prefix={tags}
onChange={(e)=>onChange(e.target.value)}
value={data}
onSearch={(e) => onEnter(e)}
size="large"
placeholder="Поиск товара"
enterButton />
</AutoComplete>
);
}

View File

@ -29,7 +29,7 @@ const options = [{ value: "мяч", label: "gold" }, {value:"шайба", label:
const handleChange = (value: string) => {
console.log(`selected ${value}`);
console.log(value);
};
export const TagSearch: React.FC<{onData:(data:any)=>void}> = (props) =>{