mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-21 15:56:35 +03:00
bigs
This commit is contained in:
parent
3c21e865de
commit
81c649d102
4108
package-lock.json
generated
4108
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -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/"
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@ import { host } from "./consts"
|
|||
export const fetcher = axios.create(
|
||||
{
|
||||
baseURL: host,
|
||||
timeout: 5000,
|
||||
timeout: 1000,
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
)
|
|
@ -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[]
|
||||
|
|
16
сomponents/ProductsView/index.tsx
Normal file
16
сomponents/ProductsView/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
|
||||
);
|
||||
}
|
|
@ -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) =>{
|
||||
|
|
Loading…
Reference in New Issue
Block a user