resolve confs

hooks/index.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootType, AppDispatch } from '../store'
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootType> = useSelector

package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.6",
     "antd": "^4.23.6",
     "axios": "^1.1.3",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "redux": "^4.2.0"
+    "react-redux": "^8.0.4",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.1"
   },
   "devDependencies": {
     "@types/node": "18.11.3",

pages/_app.tsx

@@ -1,8 +1,12 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import {Provider} from 'react-redux';
+import store from '../store'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Provider store={store}>
+    <Component {...pageProps} />
+  </Provider> 
 }
 
 export default MyApp

pages/api/consts.ts

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

pages/api/create_hints.ts

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

pages/api/fetch.ts

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

pages/api/search.ts

@@ -0,0 +1,16 @@
+import * as axios from 'axios'
+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,
+        limit: 10,
+        offset: 0
+    });
+    console.log("SEARCHRES", res)
+
+    return res.data;
+}

pages/index.tsx

@@ -6,14 +6,39 @@ import { Search } from '../сomponents/search'
 import 'antd/dist/antd.css';
 import { useState } from 'react'
 import { TagSearch } from '../сomponents/tagSearch'
+import {useAppDispatch, useAppSelector} from '../hooks';
+import {search, createHints} from '../store/reducers/asyncActions';
+import {products, hints, INode} from '../store/reducers/nodesInputReducer'
+import { ProductsView } from '../сomponents/ProductsView'
 
 const Home: NextPage = () => {
-  const [goods, setGoods] = useState([])
+  const [goods, setGoods] = useState([]);
+  const dispatch = useAppDispatch();
+  const getProducts = useAppSelector(products);
+  const getHints = useAppSelector(hints);
+
+
+  // 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>
+          getProducts.length == 0? null:<ProductsView></ProductsView>
+        }
+        
     </div>
   )
 }

store/index.ts

@@ -0,0 +1,16 @@
+import {configureStore} from '@reduxjs/toolkit'
+import nodesInputReducer from './reducers/nodesInputReducer';
+import thunk from 'redux-thunk'
+
+
+const store = configureStore({reducer: nodesInputReducer, middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      thunk: {
+        extraArgument: nodesInputReducer
+      }
+    })})
+
+export default store;
+
+export type RootType = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch

store/reducers/asyncActions.ts

@@ -0,0 +1,25 @@
+import {createAsyncThunk} from '@reduxjs/toolkit'
+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 (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;
+    }
+)
+
+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

@@ -0,0 +1,76 @@
+import {createSlice, PayloadAction, createSelector} from '@reduxjs/toolkit';
+import {search, createHints} from './asyncActions';
+
+
+export interface INode{
+    type: "All" | "Category" | "Name" | string;
+    value: string;
+}
+
+export interface IHint{
+    value: INode;
+    coordinate: number;
+}
+
+export interface IProduct{
+    name: string;
+    id:number,
+    score:number,
+    characteristic: {
+        name: string;
+        value: string;
+    }[];
+}
+
+interface INodesInput {
+    nodes: INode[],
+    hints: {
+        coordinate: number,
+        value: INode
+    }[],
+    current_word: string,
+    products: IProduct[]
+}
+
+const initialState: INodesInput = {
+    nodes: [],
+    hints: [],
+    current_word: "",
+    products: []
+}
+
+const nodesInputSlice = createSlice({
+    name: 'nodesInput',
+    initialState,
+    reducers: {
+        setCurrentWord(state, action: PayloadAction<string>) {
+            state.current_word = action.payload;
+        },
+        createNode(state, action: PayloadAction<INode>) {
+            state.nodes = state.nodes.concat([action.payload]);
+        },
+        deleteNode(state, action: PayloadAction<string>) {
+            state.nodes = state.nodes.filter((e) => e.value != action.payload)
+        },
+        
+    },
+    extraReducers: (builder) => {
+        builder.addCase(search.fulfilled, (state, action) => {
+            state.products = action.payload;
+        })
+        builder.addCase(createHints.fulfilled, (state, action) => {
+            state.hints = action.payload;
+        })
+    }
+})
+
+export const {setCurrentWord, createNode, deleteNode} = 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 default nodesInputSlice.reducer;

styles/Home.module.css

@@ -0,0 +1,9 @@
+.container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap:100px;
+  padding:100px;
+
+}
+

styles/globals.css

@@ -1,5 +1,6 @@
 html,
 body {
+  transition: 0.3s;
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@@ -19,8 +20,9 @@ a {
   html {
     color-scheme: dark;
   }
-  body {
+  body {    
+    transition: 0.3s;
+
     color: white;
-    background: black;
+      }
-  }
 }

сomponents/ProductsView/index.tsx

@@ -0,0 +1,19 @@
+import { Card } from "antd";
+import React from "react";
+import { useAppSelector } from "../../hooks";
+import { fetcher } from "../../pages/api/fetch";
+import { products } from "../../store/reducers/nodesInputReducer";
+import { ProductCard } from "../card";
+import styles from "../card/card.module.css"
+
+export const ProductsView:React.FC = () =>{
+    const getProducts =  useAppSelector(products)
+    return(
+        <div className={styles.productWrapper}>
+            {
+                getProducts.map(el=> <ProductCard {...el}></ProductCard>)
+            }
+
+        </div>
+    );
+}

сomponents/card/card.module.css

@@ -0,0 +1,114 @@
+.card{
+    display: flex;
+    flex-direction: column;
+    gap:15px;
+    font-size: 14px;
+    border: 1px solid #BDBDBD;
+    background: #FBFBFB;
+    padding: 25px;
+    border-radius: 17px;
+    width: 280px;
+    height: 300px;
+    justify-content: space-between;
+    transition: 0.3s;
+
+}
+
+.name{
+    font-size: 16px;
+    font-weight: 500;
+
+}
+.red{
+    font-weight: 500;
+    color: #DB2B21;
+}
+
+.blue{
+    font-weight: 500;
+    color: #2566ec;
+}
+.id{
+    color:#BDBDBD
+}
+.prWrap{
+    display: flex;
+    gap: 15px;
+    flex-direction: row;
+}
+
+.aboutBtn{
+    font-weight: 500;
+    color:#FBFBFB;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 17px;
+    background-color: #DB2B21;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.aboutBtn:hover{
+    transition: 0.3s;
+    opacity: 0.6;
+}
+.productWrapper{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap:50px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+.filter{
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top:0px;
+    left:0px;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.popup{
+    display: flex;
+    flex-direction: column;
+    gap:15px;
+    font-size: 14px;
+    border: 1px solid #BDBDBD;
+    background: #FBFBFB;
+    padding: 35px 50px;
+    border-radius: 17px;
+    width: 60%;
+    height: 60vh;
+    transition: 0.3s;
+    align-items: center;
+    position: relative;
+}
+.cross{
+    font-size: 40px;
+    cursor: pointer;
+    transform: rotate(45deg);
+    position: absolute;
+    top:0px;
+    right: 15px;
+}
+.h1{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.charWrap{
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap:15px;
+    font-size: 16px;
+
+}

сomponents/card/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { fetcher } from "../../pages/api/fetch";
+import { IProduct } from "../../store/reducers/nodesInputReducer";
+import styles from "./card.module.css"
+
+
+export const ProductCard: React.FC<IProduct> = (props) =>{
+    const [opened, setOpened] = useState(false)
+
+    const onClick = () =>{
+        setOpened(true)
+        fetcher.post("/score/" + props.id)
+    }
+    return(
+        props.characteristic == undefined? null:
+        <div  className={styles.card}>
+            <div className={styles.name}>{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>
+            </div>
+            <div className={styles.id}>ID:{props.id}</div>
+            <div onClick={()=>onClick()} className={styles.aboutBtn}>Подробнее</div>
+            {opened?
+                <div className={styles.filter}>
+                    <div  className={styles.popup}>
+                        <div className={styles.cross} onClick={()=>setOpened(false)}>+</div>
+                        <div className={styles.h1}>{props.name}</div>
+                        <div className={styles.charWrap}>
+                            <div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
+                            <div className={styles.id}>ID:{props.id}</div>
+                            <div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>
+                            {
+                                props.characteristic.map(el=><div className={styles.prWrap}> 
+                                    <div className={styles.name}>{el.name}:</div>
+                                    <div>{el.value}</div>
+                                </div>)
+                            }
+                        </div>
+                    </div>
+                </div> : null
+            }
+        </div>
+    );
+}

сomponents/search/index.tsx

@@ -1,20 +1,125 @@
 import React, { useState } from "react";
-import { Input } from 'antd';
+import { AutoComplete, Input, Tag } from 'antd';
-import axios from "axios";
+import { useAppDispatch, useAppSelector } from "../../hooks";
-import { fetcher } from "../../pages/api/fetch";
+import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer";
+import { createHints, search } from "../../store/reducers/asyncActions";
+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 dispatch = useAppDispatch();
+    const getNodes = useAppSelector(nodes);
+    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 }}
+                        onClose={() => {
+                            dispatch(
+                                deleteNode(value.value)
+                            )
+                        }}
+                        >
+                            {value.value.length <13? value.value:value.value.slice(0,10)+"..."}
+                        </Tag>
+        setTags(tags.concat([tag]))
+    }
+
+    const onSelect = (value:string, type:INode) =>{
+        addTag(type)
+        dispatch(createNode(type));
+        setAutoCompleteValue("")
+
+    }
 
     const onEnter = (value:any) => {
-        fetcher.post("/search", {body:value}).then((response)=>{
+        dispatch(
-            console.log(response)
+            search(
-            props.onData(response.data)
+                getNodes.concat(
-            }
+                    autoCompleteValue.length ?
+                    [
+                        {
+                            'type': 'All',
+                            'value': autoCompleteValue
+                
+                        }
+                    ] : []
+                )
+            )
         )
     }
+
+    if (autoCompleteValue.endsWith('  ')) {
+        dispatch(
+            createNode({
+                type: "All",
+                value: autoCompleteValue.slice(0, autoCompleteValue.length-2)
+            })
+        )
+        addTag({
+            type: "All",
+            value: autoCompleteValue.slice(0, autoCompleteValue.length-2)
+        })
+        setAutoCompleteValue('');
+    }
     return(
-        <Input.Search value={data} onSearch={(e)=>onEnter(e)} onChange={(e)=>setData(e.target.value)} size="large" placeholder="Поиск товара" enterButton />
+        <AutoComplete
+            options={getHints.map((e) => {
+                const pre_str = e.value.value.slice(0, e.coordinate)
+                const after_str = e.value.value.slice(e.coordinate+autoCompleteValue.length, e.value.value.length)
+                const bold_str = e.value.value.slice(e.coordinate, e.coordinate+autoCompleteValue.length)
+                return {
+                    label: <div>
+                        <span>{pre_str}</span>
+                        {bold_str.toLocaleLowerCase () == autoCompleteValue.toLowerCase() ? <strong>{bold_str}</strong> : <span>{bold_str}</span>}
+                        <span>{after_str}</span>
+                    </div>,
+                    value: e.value.value
+                }
+            })}
+            onSelect={onSelect as any}
+            value={autoCompleteValue}
+            onChange={(e: any)=>setAutoCompleteValue(e)}
+            // onSearch={handleSearch}
+            dropdownMatchSelectWidth={252}
+        >
+            <Input.Search  prefix={tags}
+            style={{ width: "50vw" }}
+            color="red-6"
+            className={styles.search}
+            onChange={(e)=>onChange(e.target.value)} 
+            value={data}
+            onSearch={(e) => onEnter(e)}
+            size="large"
+            placeholder="Поиск товара"
+            enterButton />
+        </AutoComplete>
 
     );
 }

сomponents/search/search.module.css

@@ -0,0 +1,26 @@
+
+
+.search button{
+    border: 1px solid #BDBDBD;
+    border-radius: 0px 17px 17px 0px !important;
+    background-color: #DB2B21;
+}
+
+.search button:hover{
+    border: 1px solid #BDBDBD;
+    border-radius: 0px 17px 17px 0px !important;
+    background-color: #DB2B21;
+}
+
+.search.ant-input-group-addonn{
+    background-color: #e7eef7 !important;
+
+}
+
+.search input{
+}
+
+.search.ant-input-affix-wrapper-lg{
+    background-color: #FBFBFB !important;
+    border-radius: 17px !important;
+}

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