Add api endpoint

Author: nicolashemonic

config/webpack.config.client.js

@@ -3,9 +3,7 @@ const { ReactLoadablePlugin } = require("react-loadable/webpack");
 
 module.exports = {
     // The main entry point of the application
-    entry: {
-        main: path.join(__dirname, "..", "source", "client")
-    },
+    entry: ["babel-polyfill", path.join(__dirname, "..", "source", "client")],
 
     // Main entry point plus each dynamic import generate a bundle
     // Ex: import(/* webpackChunkName: "hello" */"../components/hello") generate hello.js

config/webpack.config.server.js

@@ -9,9 +9,7 @@ module.exports = {
     externals: [nodeExternals()],
 
     // The main entry point of the server application
-    entry: {
-        main: path.join(__dirname, "..", "source", "server")
-    },
+    entry: ["babel-polyfill", path.join(__dirname, "..", "source", "server")],
 
     // Generated bundle location
     output: {

package.json

@@ -18,6 +18,8 @@
   "author": "Nicolas Hémonic",
   "license": "MIT",
   "dependencies": {
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
     "express": "^4.16.3",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",

source/client/index.tsx

@@ -1,3 +1,5 @@
+import "babel-polyfill";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import Loadable from "react-loadable";

source/server/index.tsx

@@ -1,3 +1,5 @@
+import "babel-polyfill";
+
 import express, { Request, Response } from "express";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
@@ -6,6 +8,7 @@ import { getBundles, IReactLoadableWebpackBundle } from "react-loadable/webpack"
 import { Provider } from "react-redux";
 import { matchPath, StaticRouter } from "react-router";
 
+import { setApiUrls } from "../universal/actions";
 import App from "../universal/app";
 import { IState } from "../universal/models";
 import { routes } from "../universal/routes";
@@ -15,12 +18,24 @@ const stats = require("./reactLoadable.json");
 const app = express();
 
 app.use("/client", express.static("client"));
+
+app.use("/api/description", function(req, res) {
+    res.setHeader("Content-Type", "application/json");
+    setTimeout(() => res.send(JSON.stringify({ description: "Description response" })), 1000);
+});
+
 app.use(handleRender);
 
 function handleRender(req: Request, res: Response) {
     const promises: Promise<any>[] = [];
     const store = createStore();
 
+    store.dispatch(
+        setApiUrls({
+            descriptionUrl: `${req.protocol}://${req.get("host")}/api/description`
+        })
+    );
+
     routes.some(route => {
         const match = matchPath(req.path, route);
         if (match && route.fetchData) {

source/universal/Routes.ts

@@ -7,7 +7,7 @@ import { fetchDescription } from "./actions";
 import { LoadableAbout, LoadableHome } from "./loadable";
 
 interface IRoute extends RouteProps {
-    fetchData?: () => ThunkAction<Promise<Action>, IState, void>;
+    fetchData?: () => ThunkAction<Promise<void>, IState, void>;
 }
 
 export const routes: IRoute[] = [

source/universal/actions/about.ts

@@ -1,4 +1,5 @@
-import { Action, ActionCreator } from "redux";
+import axios, { AxiosPromise } from "axios";
+import { ActionCreator, Action } from "redux";
 import { ThunkAction } from "redux-thunk";
 
 import { IState } from "../models";
@@ -31,11 +32,15 @@ export type FetchDescriptionRequest = ReturnType<typeof fetchDescriptionRequest>
 export type FetchDescriptionFailure = ReturnType<typeof fetchDescriptionFailure>;
 export type FetchDescriptionSuccess = ReturnType<typeof fetchDescriptionSuccess>;
 
-export const fetchDescription: ActionCreator<ThunkAction<Promise<Action>, IState, void>> = () => {
-    return (dispatch, getState) => {
+export const fetchDescription: ActionCreator<ThunkAction<Promise<void>, IState, void>> = () => {
+    return async (dispatch, getState) => {
         dispatch(fetchDescriptionRequest());
-        return new Promise(resolve => {
-            setTimeout(() => resolve(dispatch(fetchDescriptionSuccess("About Description"))), 1000);
-        });
+        try {
+            const url = getState().api.descriptionUrl;
+            const response = await axios.get<{ description: string }>(url);
+            dispatch(fetchDescriptionSuccess(response.data.description));
+        } catch (e) {
+            console.log(e);
+        }
     };
 };

source/universal/actions/api.ts

@@ -0,0 +1,12 @@
+import { IApi } from "../models";
+
+export type ApiAction = SetApiUrls;
+
+export const SET_API_URLS = "SET_API_URLS";
+
+export const setApiUrls = (api: IApi) => ({
+    type: SET_API_URLS as typeof SET_API_URLS,
+    descriptionUrl: api.descriptionUrl
+});
+
+export type SetApiUrls = ReturnType<typeof setApiUrls>;

source/universal/actions/index.ts

@@ -1,2 +1,3 @@
 export * from "./about";
 export * from "./location";
+export * from "./api";

source/universal/models/api.ts

@@ -0,0 +1,3 @@
+export interface IApi {
+    descriptionUrl: string;
+}

source/universal/models/index.ts

@@ -1,2 +1,3 @@
 export * from "./window";
 export * from "./state";
+export * from "./api";

source/universal/models/state.ts

@@ -1,7 +1,9 @@
 import { AboutState } from "../reducers/about";
+import { ApiState } from "../reducers/api";
 import { LocationState } from "../reducers/location";
 
 export interface IState {
     readonly about: AboutState;
     readonly location: LocationState;
+    readonly api: ApiState;
 }

source/universal/reducers/api.ts

@@ -0,0 +1,19 @@
+import { ApiAction, SET_API_URLS } from "../actions/api";
+
+export type ApiState = ReturnType<typeof initialApiState>;
+
+const initialApiState = () => ({
+    descriptionUrl: ""
+});
+
+export default function api(state = initialApiState(), action: ApiAction): ApiState {
+    switch (action.type) {
+        case SET_API_URLS:
+            return {
+                ...state,
+                descriptionUrl: action.descriptionUrl
+            };
+        default:
+            return state;
+    }
+}

source/universal/reducers/index.ts

@@ -2,9 +2,11 @@ import { combineReducers, Reducer } from "redux";
 
 import { IState } from "../models";
 import about, { AboutState } from "./about";
+import api, { ApiState } from "./api";
 import location, { LocationState } from "./location";
 
 export default combineReducers<IState>({
     about: about as Reducer<AboutState>,
-    location: location as Reducer<LocationState>
+    location: location as Reducer<LocationState>,
+    api: api as Reducer<ApiState>
 });