feat(FJS-4): created typed state-manager Redux

examples/react-uikit/package.json

@@ -10,15 +10,18 @@
     "@rematch/core": "^2.1.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.11",
+    "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.2",
     "axios": "^0.21.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
-    "redux": "^4.1.1",
+    "redux": "^4.1.2",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.0",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

examples/react-uikit/src/assets/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useTypedSelector } from './useTypedSelector';
+export { useActions } from './useActions';

examples/react-uikit/src/assets/hooks/useActions.ts

@@ -0,0 +1,8 @@
+import { useDispatch } from "react-redux";
+import { bindActionCreators } from "redux";
+import * as ActionCreators from '../../store/ActionCreators'
+
+export const useActions = ()=>{
+    const dispatch = useDispatch();
+    return bindActionCreators(ActionCreators, dispatch);
+};

examples/react-uikit/src/assets/hooks/useTypedSelector.ts

@@ -0,0 +1,4 @@
+import { TypedUseSelectorHook, useSelector } from "react-redux";
+import { TRootState } from "../../store/reducers/rootReducer";
+
+export const useTypedSelector: TypedUseSelectorHook<TRootState> = useSelector;

examples/react-uikit/src/definitions/TCSSobjProps.ts

@@ -1,16 +1,10 @@
-import { StandardProperties } from "csstype";
+import { CSSObject } from "@emotion/react";
 import { TSize } from "./TElementProps";
 
 export type TSectionName = 'core' | TSize;
 
-export type NestedSelector = {
-    [index: string]: StandardProperties | NestedSelector;
-}
-
-export type Properties = StandardProperties | NestedSelector;
-
 export type TCSSObjProps = {
-    [key in TSectionName]: Properties;
+    [key in TSectionName]: CSSObject;
  };
 
  export default TCSSObjProps;

examples/react-uikit/src/definitions/TNavbarVisibilityReducer.ts

@@ -0,0 +1,20 @@
+export interface INavbarVisibility {
+    visibility: boolean,
+}
+
+export enum TVisibilityActions {
+    HIDE_NAVBAR = 'HIDE_NAVBAR',
+    DISPLAY_NAVBAR = 'DISPLAY_NAVBAR',
+}
+
+interface IHideNavbarAction {
+    type: TVisibilityActions.HIDE_NAVBAR,
+    visibility: false,
+}
+
+interface IDisplayNavbarAction {
+    type: TVisibilityActions.DISPLAY_NAVBAR,
+    visibility: true,
+}
+
+export type TNavbarActions = IHideNavbarAction | IDisplayNavbarAction;

examples/react-uikit/src/definitions/index.ts

@@ -1,3 +1,5 @@
 export type { TElementProps } from "./TElementProps";
 
-export type { TCSSObjProps } from './TCSSobjProps'
+export type { TCSSObjProps } from './TCSSobjProps';
+
+export * from './TNavbarVisibilityReducer'

examples/react-uikit/src/epics/About/About.tsx

@@ -1,9 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { TElementProps } from '../../definitions';
 import { CWrap } from './About.styles';
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const About: React.FC<IProps> = (props): JSX.Element => {
     //@ts-ignore

examples/react-uikit/src/epics/App/App.tsx

@@ -1,5 +1,7 @@
 import { useTheme } from '@emotion/react';
 import React from 'react';
+import { useTypedSelector } from '../../assets/hooks';
+import { useActions } from '../../assets/hooks/';
 import { TElementProps } from '../../definitions';
 import Footer from '../../features/Footer';
 import Header from '../../features/Header';
@@ -9,12 +11,21 @@ import { CWrap } from './App.styles';
 export type IProps = TElementProps;
 
 export const App: React.FC<IProps> = (props): JSX.Element => {
+    const navbarVisibility = useTypedSelector(state => state.navbarVisibility);
+    const { hideNavbar } = useActions();
+
     //@ts-ignore
     const theme = { ...useTheme().App };
     return (
-        <CWrap sizeId={'desktop'} theme={theme.cwrap}>
+        <CWrap
+            sizeId={'desktop'}
+            theme={theme.cwrap}
+            onClick={(e) => { navbarVisibility.visibility && hideNavbar() }}
+        >
             <Header sizeId={'desktop'} />
-            <AppRouter sizeId={'desktop'} />
+            <AppRouter
+                sizeId={'desktop'}
+            />
             <Footer sizeId={'desktop'} />
         </CWrap>
     );

examples/react-uikit/src/epics/Contacts/Contacts.tsx

@@ -1,9 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { TElementProps } from '../../definitions';
 import { CWrap } from './Contacts.styles'
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const Contacts: React.FC<IProps> = (): JSX.Element => {
     //@ts-ignore

examples/react-uikit/src/epics/FAQ/FAQ.tsx

@@ -1,9 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { TElementProps } from '../../definitions';
 import { CWrap } from './FAQ.styles';
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 export const FAQ: React.FC<IProps> = (props): JSX.Element => {
     //@ts-ignore
     const theme = {...useTheme().FAQ};

examples/react-uikit/src/epics/Gallery/Gallery.tsx

@@ -1,9 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { TElementProps } from '../../definitions';
 import { CWrap } from './Gallery.styles';
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const Gallery: React.FC<IProps> = (props): JSX.Element => {
     //@ts-ignore

examples/react-uikit/src/epics/Promo/Promo.tsx

@@ -1,10 +1,12 @@
 import { useTheme } from '@emotion/react';
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { TElementProps } from '../../definitions';
 import { CWrap } from './Promo.styles';
 
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const Promo: React.FC<IProps> = (props): JSX.Element => {
     //@ts-ignore

examples/react-uikit/src/epics/Welcome/Welcome.tsx

@@ -1,10 +1,12 @@
 import { useTheme } from '@emotion/react';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { TElementProps } from '../../definitions';
 import Section from '../../features/Section';
 import { CWrap } from './Welcome.styles';
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const Welcome: React.FC<IProps> = (props): JSX.Element => {
     //@ts-ignore

examples/react-uikit/src/features/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import React, { MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler } from 'react';
 import { Link } from 'react-router-dom';
 import { TElementProps } from '../../definitions';
 import MenuBtn from '../MenuBtn';
@@ -11,7 +11,6 @@ export type IProps = TElementProps & {
 };
 
 export const Header: React.FC<IProps> = (props): JSX.Element => {
-    const [navBarVisibility, setNavBarVisibility] = useState(false);
     //@ts-ignore
     const theme = { ...useTheme().Header };
 
@@ -21,13 +20,9 @@ export const Header: React.FC<IProps> = (props): JSX.Element => {
             <MenuWrap sizeId={'desktop'} theme={theme.menuwrap} >
                 <MenuBtn
                     sizeId={'desktop'}
-                    setNavBarVisibility={setNavBarVisibility}
-                    navBarVisibility={navBarVisibility}
                 />
                 <NavBar
                     sizeId={'desktop'}
-                    visibility={navBarVisibility}
-                    onClick={(e) => e.stopPropagation()}
                 />
             </MenuWrap>
 

examples/react-uikit/src/features/MenuBtn/MenuBtn.tsx

@@ -1,22 +1,29 @@
 import { useTheme } from '@emotion/react'
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
+import { useTypedSelector } from '../../assets/hooks';
+import { useActions } from '../../assets/hooks/useActions';
 import { TElementProps } from '../../definitions';
 import { CWrap, Line } from './MenuBtn.styles'
 
 export type IProps = TElementProps & React.HTMLAttributes<HTMLDivElement> & {
-    setNavBarVisibility: any;
-    navBarVisibility: boolean;
+    onClick?: MouseEventHandler;
+    onMouseOver?: MouseEventHandler;
 };
 
 export const MenuBtn: React.FC<IProps> = (props): JSX.Element => {
-    const {navBarVisibility, setNavBarVisibility} = props;
+    const navbarVisibility = useTypedSelector(state => state.navbarVisibility);
+    const { hideNavbar, displayNavbar } = useActions();
+
+    const setNavbarVisibility = (visibility: boolean) => {
+        visibility ? hideNavbar() : displayNavbar();
+    };
     //@ts-ignore
-    const theme = {...useTheme().MenuBtn};
+    const theme = { ...useTheme().MenuBtn };
     return (
-        <CWrap sizeId={'desktop'} theme={theme.cwrap} onClick={()=>{setNavBarVisibility(!navBarVisibility)}}>
-            <Line sizeId={'desktop'} theme={theme.line}/>
-            <Line sizeId={'desktop'} theme={theme.line}/>
-            <Line sizeId={'desktop'} theme={theme.line}/>
+        <CWrap sizeId={'desktop'} theme={theme.cwrap} onClick={()=>setNavbarVisibility(navbarVisibility.visibility)} >
+            <Line sizeId={'desktop'} theme={theme.line} />
+            <Line sizeId={'desktop'} theme={theme.line} />
+            <Line sizeId={'desktop'} theme={theme.line} />
         </CWrap>
     )
 }

examples/react-uikit/src/features/NavBar/NavBar.tsx

@@ -1,29 +1,55 @@
 import { useTheme } from '@emotion/react';
 import React, { MouseEventHandler } from 'react';
 import { Link } from 'react-router-dom';
+import { useTypedSelector } from '../../assets/hooks';
 import { TElementProps } from '../../definitions';
 import { CWrap, Line } from './NavBar.styles';
 
 export type IProps = TElementProps & {
-    visibility: boolean;
     onClick?: MouseEventHandler;
 };
 
 export const NavBar: React.FC<IProps> = (props): JSX.Element => {
-    const visibility = props.visibility;
+    const navbarVisibility = useTypedSelector(state => state.navbarVisibility);
+
     //@ts-ignore
     const theme = { ...useTheme().NavBar };
     return (
-        <CWrap sizeId={'desktop'} theme={visibility ? theme.cwrap : theme.hidden }>
-            <Link to={'/about'}>About us</Link>
-            <Line sizeId={'desktop'} theme={theme.line} />
-            <Link to={'/gallery'}>Gallery</Link>
-            <Line sizeId={'desktop'} theme={theme.line} />
-            <Link to={'/promo'}>Promo</Link>
-            <Line sizeId={'desktop'} theme={theme.line} />
-            <Link to={'/contacts'}>Contacts</Link>
-            <Line sizeId={'desktop'} theme={theme.line} />
-            <Link to={'/faq'}>FAQ</Link>
+        <CWrap
+            sizeId={'desktop'}
+            onClick={(e) => e.stopPropagation()}
+            theme={navbarVisibility.visibility ? theme.cwrap : theme.hidden}
+        >
+            <Link to={'/about'}>
+                About us
+            </Link>
+            <Line
+                sizeId={'desktop'}
+                theme={theme.line}
+            />
+            <Link to={'/gallery'}>
+                Gallery
+            </Link>
+            <Line
+                sizeId={'desktop'}
+                theme={theme.line}
+            />
+            <Link to={'/promo'}>
+                Promo
+            </Link>
+            <Line
+                sizeId={'desktop'}
+                theme={theme.line} />
+            <Link to={'/contacts'}>
+                Contacts
+            </Link>
+            <Line
+                sizeId={'desktop'}
+                theme={theme.line}
+            />
+            <Link to={'/faq'}>
+                FAQ
+            </Link>
         </CWrap>
     )
 };

examples/react-uikit/src/index.tsx

@@ -1,18 +1,22 @@
 import { css, Global, ThemeProvider } from '@emotion/react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import resets from './assets';
 import App from './epics/App/index';
 import reportWebVitals from './reportWebVitals';
+import { store } from './store';
 import theme from './theme';
 
 ReactDOM.render(
-  <BrowserRouter>
-    <ThemeProvider theme={theme}>
-      <App sizeId={'desktop'} />
-      <Global styles={resets || css``} />
-    </ThemeProvider>
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+      <ThemeProvider theme={theme}>
+        <App sizeId={'desktop'} />
+        <Global styles={resets || css``} />
+      </ThemeProvider>
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );
 

examples/react-uikit/src/routes/AppRouter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { TElementProps } from '../definitions';
 import About from '../epics/About';
@@ -8,7 +8,9 @@ import Gallery from '../epics/Gallery';
 import Promo from '../epics/Promo';
 import Welcome from '../epics/Welcome';
 
-export type IProps = TElementProps;
+export type IProps = TElementProps & {
+    onClick?: MouseEventHandler,
+};
 
 export const AppRouter: React.FC<IProps> = (props): JSX.Element => {
     return (

examples/react-uikit/src/store/ActionCreators/index.ts

@@ -0,0 +1 @@
+export * from './navbarVisibility';