diff --git a/src/app/components/pages/Home/Home.tsx b/src/app/components/pages/Home/Home.tsx index ab0c3782..ae2f2d1c 100644 --- a/src/app/components/pages/Home/Home.tsx +++ b/src/app/components/pages/Home/Home.tsx @@ -2,46 +2,30 @@ import React, { useEffect, ReactElement } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useAlien } from '~/store/config/alienStore'; +import { AlienResult } from '~/store/config/alienStore/useAlien'; -// import Spinner from '~/components/base/Spinner'; -// import ProductCard from '~/components/common/ProductCard'; -// -// import { fetchProducts } from '~/store/modules/products/actions'; -// import { getProducts } from '~/store/modules/products/selectors'; -// -// import { ProductsStateType } from '~/store/modules/products/types'; +import Spinner from '~/components/base/Spinner'; +import ProductCard from '~/components/common/ProductCard'; + +import { ProductsStateType } from '~/store/modules/products/types'; import './Home.scss'; -const Home = (): ReactElement => { - const dispatch = useDispatch(); - // const { isLoading, products, error }: ProductsStateType = useSelector(getProducts); +type PropsType = AlienResult; - // useEffect(() => { - // dispatch(fetchProducts(`/products`)); - // }, [dispatch]); - const result = useAlien({ - getModule: () => import('~/store/modules/products'), - }); +const Home = (props: PropsType): ReactElement => { + const dispatch = useDispatch(); + const { isLoading, products, error }: ProductsStateType = useSelector(props.selectors.getProducts); - // const selector = result ? result.selectors.getProducts : (): {} => ({}); - - // const { isLoading, products, error } = useSelector(selector); - useEffect(() => { - if (result) { - dispatch(result.actions.fetchProducts(`/products`)); - } - }, [dispatch, result]); - - console.log('result', result); + dispatch(props.actions.fetchProducts(`/products`)); + }, [dispatch, props.actions]); return (

Shop

- {/* {error ? {error.message} : null} + {error ? {error.message} : null} {isLoading ? ( @@ -58,7 +42,7 @@ const Home = (): ReactElement => {
)) - : null} */} + : null}
); diff --git a/src/app/components/routing/Routing.tsx b/src/app/components/routing/Routing.tsx index dd42d47f..1eb01051 100755 --- a/src/app/components/routing/Routing.tsx +++ b/src/app/components/routing/Routing.tsx @@ -1,14 +1,20 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ import React, { ReactElement } from 'react'; import { Route } from 'react-router-dom'; import Layout from '~/components/core/Layout'; +import withAlien from '~/store/config/alienStore/withAlien'; import Home from '~/components/pages/Home'; const Routing = (): ReactElement => (
- + withAlien(Home, () => import('~/store/modules/products'))} + />
); diff --git a/src/app/store/config/alienStore/useAlien.tsx b/src/app/store/config/alienStore/useAlien.tsx index 60e28395..fcf6d097 100644 --- a/src/app/store/config/alienStore/useAlien.tsx +++ b/src/app/store/config/alienStore/useAlien.tsx @@ -11,6 +11,9 @@ export interface ReduxModule { actions: { [K: string]: ActionCreator; }; + selectors?: { + [K: string]: (state: S) => T; + }; } export type AlienResult = Omit; @@ -41,14 +44,14 @@ function useAlien(alienModule: AlienModule): AlienResult | null { useEffect(() => { (async (): Promise => { try { - const { reducers, actions } = await alienModule.getModule(); + const { reducers, actions, selectors } = await alienModule.getModule(); const key = Object.keys(reducers).shift(); if (key) { injectReducers(key, reducers[key]); store.replaceReducer(rootReducer); } - setAlien({ actions }); + setAlien({ actions, selectors }); } catch (err) { setAlien(err); } diff --git a/src/app/store/config/alienStore/withAlien.test.tsx b/src/app/store/config/alienStore/withAlien.test.tsx index ac976ecc..26ddee00 100644 --- a/src/app/store/config/alienStore/withAlien.test.tsx +++ b/src/app/store/config/alienStore/withAlien.test.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, ReactNode, ComponentType } from 'react'; +import React, { ReactElement, ReactNode, FunctionComponent } from 'react'; import { Store, AnyAction } from 'redux'; import { Provider } from 'react-redux'; import { renderHook } from '@testing-library/react-hooks'; @@ -18,7 +18,7 @@ type WrapperProps = { }; // eslint-disable-next-line react/prop-types -const wrapper: ComponentType = ({ children }) => ( +const wrapper: FunctionComponent = ({ children }) => ( {children} ); @@ -54,8 +54,6 @@ describe('test "withAlien"', () => { wrapper, }); - expect(result.current.props).toStrictEqual({}); - await waitForNextUpdate(); expect(result.current.props.actions).toStrictEqual(reduxModule.actions); diff --git a/src/app/store/config/alienStore/withAlien.tsx b/src/app/store/config/alienStore/withAlien.tsx index fb49c6e9..b65e8d1e 100644 --- a/src/app/store/config/alienStore/withAlien.tsx +++ b/src/app/store/config/alienStore/withAlien.tsx @@ -1,12 +1,13 @@ -import React, { ReactElement, ComponentType } from 'react'; +import React, { ReactElement, ComponentType, ReactNode } from 'react'; import useAlien, { ReduxModule, AlienResult } from './useAlien'; interface WithAlienProps { + children?: ReactNode; actions: AlienResult['actions']; } -function withAlien

( +function WithAlien

( Component: ComponentType

, getModule: () => Promise, ): ReactElement

| null { @@ -17,7 +18,13 @@ function withAlien

( getModule, }); - return ; + if (alienResult) { + return ; + } + + return null; + // return ; + // return typeof props.children === 'function' ? props.children() : props.children; } -export default withAlien; +export default WithAlien;