-
Notifications
You must be signed in to change notification settings - Fork 11
/
routesForNonChunking.js
121 lines (108 loc) · 3.69 KB
/
routesForNonChunking.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* @module routesForNonChunking This modules builds up the page without the concept of sending the
* HTML back in chunks
*/
import React from "react";
import { renderToString } from "react-dom/server";
import { Head } from "./app/components/Head.jsx";
import { Header } from "./app/components/Header.jsx";
import { TopPerformers } from "./app/components/TopPerformers.jsx";
import { Footer } from "./app/components/Footer.jsx";
import { NewUsers } from "./app/components/NewUsers.jsx";
import request from "superagent";
let globalData = {};
/**
* @function getHead This function makes the head part of the HTML. It internally
* complies the react component of the same as well.
* @returns {string} Returns the HTML string
*/
const getHead = () => {
return `<!DOCTYPE html>
<html>${renderToString(<Head />)}`;
};
/**
* @function getHeader This function makes the header part of the HTML. It internally
* complies the react component of the same as well.
* @returns {string} Returns the HTML string
*/
const getHeader = () => {
return `<body><div id="root">${renderToString(<Header />)}`;
};
/**
* @function getNewUsers This function makes the new users part of the HTML. It internally
* complies the react component of the same as well.
* @returns {string} Returns the HTML string
*/
const getNewUsers = () => {
return `${renderToString(<NewUsers users={globalData.newUsers} />)}`;
};
/**
* @function getTopPerformers This function makes the main content part of the HTML. It internally
* complies the react component of the same as well.
* @returns {string} Returns the HTML string
*/
const getTopPerformers = () => {
return `${renderToString(<TopPerformers data={globalData.topPerformers} />)}`;
};
/**
* @function getFooter This function makes the footer part of the HTML. It internally
* complies the react component of the same as well. Additionally this set the data
* on a window object.
* @returns {string} Returns the HTML string
*/
const getFooter = () => {
return `${renderToString(<Footer />)}</div>
</body>
<script>window.dataLayer=${JSON.stringify(globalData)}</script>
<script src="../../bundle.js"></script>
</html>`;
};
/**
* @function getNewUsersData This function fetches the new avenger recruits.
* @param {Object} req request object
* @param {Object} res response object
* @param {Object} next middleware
*/
const getNewUsersData = async (req, res, next) => {
try {
const response = await request.get(`https://reqres.in/api/users`);
req.users = response.body.data;
globalData.newUsers = response.body.data;
} catch (error) {
req.users = [];
globalData.newUsers = [];
}
next();
};
/**
* @function getTopPerformersData This function fetches the top performing avengers.
* @param {Object} req request object
* @param {Object} res response object
* @param {Object} next middleware
*/
const getTopPerformersData = async (req, res, next) => {
try {
const response = await request.get(`https://reqres.in/api/users?delay=2`);
req.topPerformers = response.body.data;
globalData.topPerformers = response.body.data;
} catch (error) {
req.topPerformers = [];
globalData.topPerformers = [];
}
next();
};
/**
* @function generateHtml Ths function generates the complete HTML of the page.
*/
const generateHtml = (req, res, next) => {
res.send(
`${getHead()}${getHeader()}${getNewUsers()}${getTopPerformers()}${getFooter()}`
);
};
/**
* @function routesForNonChunking This function builds up the eniter HTML and sends back to the browsers
* once all of it is done.
*/
export const routesForNonChunking = () => {
return [getNewUsersData, getTopPerformersData, generateHtml];
};