bigs

pages/api/consts.ts

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

pages/api/create_hints.ts

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

pages/api/fetch.ts

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

pages/api/search.ts

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

pages/index.tsx

@@ -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([]);
@@ -18,10 +19,10 @@ const Home: NextPage = () => {
 
   // if (getHints.length == 0) {
   //   dispatch(
-//         createHints("сап")
+  //       createHints({word:"сап", hints: [] as INode[]})
   //   )
   // }
-//   console.log(getHints) - вызов подсказок
+  // console.log(getHints) 
 
   // if (getProducts.length == 0) {
   //   dispatch(
@@ -40,8 +41,7 @@ const Home: NextPage = () => {
   return (
     <div className={styles.container}>
         <Search onData={(data)=>setGoods(data)}></Search>
-        <div>{goods}</div>
+        <ProductsView></ProductsView>
-        <TagSearch  onData={(data)=>setGoods(data)}></TagSearch>
     </div>
   )
 }

store/reducers/asyncActions.ts

@@ -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) => {
+    async (data: {word: string, hints: INode[]}, thunkApi) => {
-        const response: IHint[] = await create_hints_api(word);
+        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;
     }
 )

store/reducers/nodesInputReducer.ts

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

сomponents/ProductsView/index.tsx

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

сomponents/search/index.tsx

@@ -1,20 +1,76 @@
 import React, { useState } from "react";
-import { Input } from 'antd';
+import { AutoComplete, Input, Tag } from 'antd';
-import axios from "axios";
 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){
             
-    const onEnter = (value:any) => {
+            dispatch(
-        fetcher.post("/search", {body:value}).then((response)=>{
+                createHints({word:text, hints:getHints.length == 0? []: getHints.map((el)=>el.value)})
-            console.log(response)
-            props.onData(response.data)
-            }
             )
         }
+        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) => {
+        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>
 
     );
 }

сomponents/tagSearch/index.tsx

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