resolve confs

This commit is contained in:
ilia 2022-10-22 22:49:05 +03:00
commit d44202eed4
21 changed files with 550 additions and 2322 deletions

6
hooks/index.ts Normal file
View File

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

28
logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View File

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

View File

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

View File

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

12
pages/api/create_hints.ts Normal file
View File

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

View File

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

16
pages/api/search.ts Normal file
View File

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

View File

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

16
store/index.ts Normal file
View File

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

View File

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

View File

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

9
styles/Home.module.css Normal file
View File

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

View File

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

2301
yarn.lock

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

@ -1,20 +1,125 @@
import React, { useState } from "react";
import { Input } from 'antd';
import axios from "axios";
import { fetcher } from "../../pages/api/fetch";
import { AutoComplete, Input, Tag } from 'antd';
import { useAppDispatch, useAppSelector } from "../../hooks";
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)=>{
console.log(response)
props.onData(response.data)
}
dispatch(
search(
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>
);
}

View File

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

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