mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-22 00:06:35 +03:00
resolve confs
This commit is contained in:
commit
d44202eed4
6
hooks/index.ts
Normal file
6
hooks/index.ts
Normal 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
28
logo.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 14 KiB |
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
12
pages/api/create_hints.ts
Normal 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;
|
||||
}
|
|
@ -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
16
pages/api/search.ts
Normal 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;
|
||||
}
|
|
@ -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
16
store/index.ts
Normal 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
|
25
store/reducers/asyncActions.ts
Normal file
25
store/reducers/asyncActions.ts
Normal 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;
|
||||
}
|
||||
)
|
76
store/reducers/nodesInputReducer.ts
Normal file
76
store/reducers/nodesInputReducer.ts
Normal 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
9
styles/Home.module.css
Normal file
|
@ -0,0 +1,9 @@
|
|||
.container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap:100px;
|
||||
padding:100px;
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
19
сomponents/ProductsView/index.tsx
Normal file
19
сomponents/ProductsView/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
114
сomponents/card/card.module.css
Normal file
114
сomponents/card/card.module.css
Normal 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;
|
||||
|
||||
}
|
45
сomponents/card/index.tsx
Normal file
45
сomponents/card/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
|
||||
);
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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