Merge pull request #4 from magnum-opus-tender-hack/add-network

Add network

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

@@ -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: 60000
     }
 )
 

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([]);
@@ -16,32 +17,34 @@ const Home: NextPage = () => {
   const getProducts = useAppSelector(products);
   const getHints = useAppSelector(hints);
 
-//   if (getHints.length == 0) {
+  // if (getHints.length == 0) {
-//     dispatch(
+  //   dispatch(
-//         createHints("сап")
+  //       createHints({word:"сап", hints: [] as INode[]})
-//     )
+  //   )
-//   }
+  // }
-//   console.log(getHints) - вызов подсказок
+  // console.log(getHints) 
 
-//   if (getProducts.length == 0) {
+  // if (getProducts.length == 0) {
-//     dispatch(
+  //   dispatch(
-//         search([
+  //       search([
-//             {
+  //           {
-//                 'type': 'Name',
+  //               'type': 'Name',
-//                 'value': 'Сапоги'
+  //               'value': 'Сапоги'
-//             }
+  //           }
-//         ])
+  //       ])
-//       )
+  //     )
-//   }
+  // }
-//   console.log(getProducts)
+  // 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/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,19 +3,20 @@ 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;
 }
 
 export interface IProduct{
     name: string;
-    category: string;
+    id:number,
-    characteristics: {
+    score:number,
+    characteristic: {
         name: string;
         value: string;
     }[];
@@ -25,7 +26,7 @@ interface INodesInput {
     nodes: INode[],
     hints: {
         coordinate: number,
-        node: INode
+        value: INode
     }[],
     current_word: string,
     products: IProduct[]

styles/Home.module.css

@@ -1,129 +1,9 @@
-.container {
+.container{
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  gap:100px;
+  padding:100px;
+
 }
 
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
-}

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,
@@ -20,7 +21,8 @@ a {
     color-scheme: dark;
   }
   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,80 @@
 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";
+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 onEnter = (value:any) => {
+    const [searchOptions, setSearchOptions] = useState(new Array<INode>())
-        fetcher.post("/search", {body:value}).then((response)=>{
+    const dispatch = useAppDispatch();
-            console.log(response)
+    const getHints = useAppSelector(hints);
-            props.onData(response.data)
+    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) => {
+        dispatch(search(searchOptions))
+    }
     return(
-        <Input.Search value={data} onSearch={(e)=>onEnter(e)} onChange={(e)=>setData(e.target.value)} size="large" placeholder="Поиск товара" enterButton />
+        <AutoComplete
+            dropdownMatchSelectWidth={252}
+            options={getHints.map((el)=>el.value)}
+            onSelect={onSelect as any}
+            value={autoCompleteValue}
+            onChange={(e)=>setAutoCompleteValue(e)}
+        >
+            <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) =>{