Transform; global app context, navigation, app reducer, to use typesc…

…ript, switch from JSX.Element to ReactElement,

src/app-context.jsx → src/app-context.tsx

@@ -1,15 +1,16 @@
-import React, {createContext, useContext, useReducer} from 'react';
+import React, { createContext, useContext, useReducer, ReactElement } from "react";
 import {appInitialState, appReducer} from './reducers/app-reducer';
 import PropTypes from 'prop-types';
+import AppContextProps from './types/store/app-context-types';
 
-const AppStateContext = createContext(null);
-const AppDispatchContext = createContext(null);
+const AppStateContext = createContext({});
+const AppDispatchContext = createContext({});
 
-const lazyInitState = () => {
-  return appInitialState;
-};
+const lazyInitState = () => (
+  appInitialState
+);
 
-const AppContext = ({children}) => {
+const AppContext = ({ children } : AppContextProps) : ReactElement => {
   const [appState, appDispatch] = useReducer(
     appReducer,
     appInitialState,
@@ -33,10 +34,6 @@ function useAppStateContext() {
   return appContext;
 }
 
-/**
- * Context useAppDispatchContext
- * @function AppContext
- *  */
 function useAppDispatchContext() {
   const appDispatch = useContext(AppDispatchContext);
   if (appDispatch === undefined) {

src/app.tsx

@@ -1,12 +1,12 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, ReactElement} from 'react';
 import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
 
 import Nav from './components/shared/nav.jsx';
-import Footer from './components/shared/footer.jsx';
+import Footer from './components/shared/footer';
 import Home from './containers/home';
 import HeroPage from './containers/hero-page';
 
-const App: FunctionComponent = (): JSX.Element => (
+const App: FunctionComponent = (): ReactElement => (
   <Router>
     <div className="app">
       <Nav />

src/components/home-page/home-page-content.tsx

@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 
-const HomePageContent : FunctionComponent = () : JSX.Element => {
+const HomePageContent : FunctionComponent = () : ReactElement => {
   return (
     <div className="home-page page">
       <h1 className="mt-4 mb-3">Home page</h1>

src/components/shared/footer.jsx → src/components/shared/footer.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ReactElement } from "react";
 
-const Footer = () => (
+const Footer = () : ReactElement => (
   <footer className="footer">
     <div className="footer-box">
       <p>Some footer txt</p>

src/components/shared/nav.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {NavLink} from 'react-router-dom';
 
-import {useAppStateContext} from 'app-context.jsx';
+import {useAppStateContext} from 'app-context.tsx';
 
 const Nav = () => {
   const {userAuthenticated} = useAppStateContext();

src/containers/container-wrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {Helmet} from 'react-helmet';
 
 /**
@@ -8,25 +8,25 @@ import {Helmet} from 'react-helmet';
  *      AppStateContext.Provider      - provider for app context
  *      AppDispatchContext.Provider   - provider for dispatch methods
  *
- * @param children        {JSX.Element}  container, view level component
+ * @param children        {ReactElement}  container, view level component
  * @param pageTitle       {String}       page title, meta attribute
  * @param pageDescription {String}       page description, meta attribute
  * @param pageName        {String}       page name, used for page class selector
  *  */
 
-type ContainerWrapperProps = {
-  children: JSX.Element;
+interface ContainerWrapperProps {
+  children: ReactElement;
   pageTitle: string;
   pageDescription: string;
   pageName: string;
-};
+}
 
 const ContainerWrapper = ({
   children,
   pageTitle,
   pageDescription,
   pageName,
-}: ContainerWrapperProps) : JSX.Element => {
+}: ContainerWrapperProps) : ReactElement => {
   return (
     <>
       <Helmet>

src/containers/hero-page.tsx

@@ -1,16 +1,16 @@
-import React, { FunctionComponent, useEffect } from "react";
+import React, { FunctionComponent, useEffect, ReactElement} from "react";
 import {getHeroes, setError} from '../actions/heros';
-import {useAppDispatchContext} from '../app-context.jsx';
+import {useAppDispatchContext} from '../app-context';
 import 'styles/hero-page.scss';
 import ContainerWrapper from "./container-wrapper";
 import HeroPageContent from "../components/hero-page/hero-page-content";
 
 /**
  * Hero Page container
  * @module app-container/hero-page
- * @return {JSX.Element} <Example />
+ * @return {ReactElement} <Example />
  */
-const HeroPage : FunctionComponent = () : JSX.Element => {
+const HeroPage : FunctionComponent = () : ReactElement => {
   const appDispatch = useAppDispatchContext();
 
   useEffect(() => {

src/containers/home.tsx

@@ -1,13 +1,13 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, ReactElement} from 'react';
 import ContainerWrapper from './container-wrapper';
 import HomePageContent from "../components/home-page/home-page-content";
 
 /**
  * Home Page container
  * @module app-container/home-page
- * @return {JSX.Element}
+ * @return {ReactElement}
  */
-const Home : FunctionComponent = () : JSX.Element => (
+const Home : FunctionComponent = () : ReactElement => (
   <ContainerWrapper
     pageTitle="Home Page"
     pageDescription="Home Page"

src/reducers/app-reducer.ts

@@ -0,0 +1,40 @@
+import AppStoreType from '../types/store/app-store-type';
+
+const SET_HEROES = (state: any, { heroData } : any) => ({
+  ...state,
+  heroData,
+});
+
+const SET_LOADING = (state: any, { isLoading, loadingID }: any) => ({
+  ...state,
+  isLoading,
+  loadingID,
+});
+
+const SET_ERROR = (state: any, { error }: any) => ({
+  ...state,
+  error,
+});
+
+export const appInitialState : AppStoreType = {
+  heroData: [],
+  authToken: '',
+  error: null,
+  isLoading: false,
+  loadingID: '',
+  userAuthenticated: false,
+};
+
+export const appReducer = (state: any, action: { type: (arg0: any, arg1: any) => any; }) => {
+  if (typeof action.type === 'function') {
+    return action.type(state, action);
+  }
+
+  return state;
+};
+
+export default {
+  SET_HEROES,
+  SET_LOADING,
+  SET_ERROR,
+};

src/types/store/app-context-types.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+
+interface AppContextProps {
+  children: ReactElement
+}
+
+export default AppContextProps;

src/types/store/app-store-type.ts

@@ -0,0 +1,10 @@
+ interface AppStoreType {
+  heroData: object | null,
+  authToken: string | null,
+  error: object | null,
+  isLoading: boolean,
+  loadingID: string,
+  userAuthenticated: boolean,
+}
+
+export default AppStoreType;