add network communication

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,11 +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"
+    "react-dom": "18.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/create_hints.ts

@@ -0,0 +1,9 @@
+import { fetcher } from "./fetch";
+
+
+export default async (word: string) => {
+    const data = await fetcher.post('/autocomplete_schema', {
+        content: word
+    });
+    return data.data;
+}

pages/api/search.ts

@@ -0,0 +1,10 @@
+import * as axios from 'axios'
+import {INode} from '../../store/reducers/nodesInputReducer'
+import { fetcher } from './fetch'
+
+export default async (nodes: INode[]) => {
+    const res = await fetcher.post('/search', {
+        body: nodes
+    });
+    return res.data;
+}

pages/index.tsx

@@ -6,9 +6,37 @@ 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} from '../store/reducers/nodesInputReducer'
 
 const Home: NextPage = () => {
-  const [goods, setGoods] = useState([])
+  const [goods, setGoods] = useState([]);
+  const dispatch = useAppDispatch();
+  const getProducts = useAppSelector(products);
+  const getHints = useAppSelector(hints);
+
+//   if (getHints.length == 0) {
+//     dispatch(
+//         createHints("сап")
+//     )
+//   }
+//   console.log(getHints) - вызов подсказок
+
+//   if (getProducts.length == 0) {
+//     dispatch(
+//         search([
+//             {
+//                 'type': 'Name',
+//                 'value': 'Сапоги'
+//             }
+//         ])
+//       )
+//   }
+//   console.log(getProducts)
+// - вызов поиска
+//
+
   return (
     <div className={styles.container}>
         <Search onData={(data)=>setGoods(data)}></Search>

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,21 @@
+import {createAsyncThunk} from '@reduxjs/toolkit'
+import {INode, IProduct, IHint} 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);
+        //TODO: добавить сеть
+        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,70 @@
+import {createSlice, PayloadAction, createSelector} from '@reduxjs/toolkit';
+import {search, createHints} from './asyncActions';
+
+
+export interface INode{
+    type: "Unknown" | "Category" | "Name" | string;
+    value: string;
+}
+
+export interface IHint{
+    node: INode;
+    coordinate: number;
+}
+
+export interface IProduct{
+    name: string;
+    category: string;
+    characteristics: {
+        name: string;
+        value: string;
+    }[];
+}
+
+interface INodesInput {
+    nodes: INode[],
+    hints: {
+        coordinate: number,
+        node: 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]);
+        }
+    },
+    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} = nodesInputSlice.caseReducers;
+
+
+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 default nodesInputSlice.reducer;