colouring-montreal/app/src/frontendRoute.tsx

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import serialize from 'serialize-javascript';

import {
    getBuildingById,
    getBuildingUPRNsById,
    getBuildingPlanningDataById,
    getLatestRevisionId,
    getUserVerifiedAttributes
} from './api/services/building/base';
import { getUserById } from './api/services/user';
import { App } from './frontend/app';
import { parseBuildingURL } from './parse';
import asyncController from './api/routes/asyncController';

import { CCConfig } from './cc-config';
let config: CCConfig = require('./cc-config.json')


// reference packed assets
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);


const frontendRoute = asyncController(async (req: express.Request, res: express.Response) => {
    const context: any = {}; // TODO: remove any
    const data: any = {}; // TODO: remove any
    context.status = 200;

    const userId = req.session.user_id;
    const buildingId = parseBuildingURL(req.url);
    const isBuilding = (typeof (buildingId) !== 'undefined');
    if (isBuilding && isNaN(buildingId)) {
        context.status = 404;
    }

    try {
        let [user, building, uprns, planningData, userVerified, latestRevisionId] = await Promise.all([
            userId ? getUserById(userId) : undefined,
            isBuilding ? getBuildingById(
                buildingId,
                { userDataOptions: userId ? { userId, userAttributes: true } : null }
            ) : undefined,
            isBuilding ? getBuildingUPRNsById(buildingId) : undefined,
            isBuilding ? getBuildingPlanningDataById(buildingId) : undefined,
            (isBuilding && userId) ? getUserVerifiedAttributes(buildingId, userId) : {},
            getLatestRevisionId()
        ]);

        if (isBuilding && typeof (building) === 'undefined') {
            context.status = 404;
        }
        data.user = user;
        data.building = building;
        data.user_verified = userVerified;
        if (data.building != null) {
            data.building.uprns = uprns;
        }
        if (data.building != null) {
            data.building.planning_data = planningData;
        }
        data.latestRevisionId = latestRevisionId;
        renderHTML(context, data, req, res);
    } catch(error) {
        console.error(error);
        data.user = undefined;
        data.building = undefined;
        data.user_verified = {}
        data.latestRevisionId = 0;
        context.status = 500;
        renderHTML(context, data, req, res);
    }
});

function renderHTML(context, data, req, res) {
    const markup = renderToString(
        <StaticRouter context={context} location={req.url}>
            <App
                user={data.user}
                building={data.building}
                revisionId={data.latestRevisionId}
                user_verified={data.userVerified}
            />
        </StaticRouter>
    );

    if (context.url) {
        res.redirect(context.url);
    } else {
        res.status(context.status).send(
            `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />

        <meta name="twitter:card"              content="summary" />
        <meta name="twitter:site"              content="@colouringlondon" />

        <meta property="og:url"                content="https://colouring.london" />
        <meta property="og:type"               content="website" />
        <meta property="og:title"              content="Colouring ${config.cityName}" />
        <meta property="og:description"        content="Colouring ${config.cityName} is a knowledge exchange platform collecting information on every building in London, to help make the city more sustainable. We’re building it at The Bartlett Centre for Advanced Spatial Analysis, University College London." />
        <meta property="og:locale"             content="en_GB" />
        <meta property="og:image"              content="https://colouring.london/images/logo-cl-square.png" />

        <link rel="manifest" href="site.webmanifest">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Colouring ${config.cityName}">
        <link rel="apple-touch-icon" href="icon-192x192.png">

        <meta name="mobile-web-app-capable" content="yes">
        <link rel="icon" sizes="192x192" href="icon-192x192.png">

        <title>Colouring ${config.cityName}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <style>
          @font-face {
            font-family: 'glacial_cl';
            src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
            url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
          }
        </style>
        ${
            assets.client.css
                ? `<link rel="stylesheet" href="${assets.client.css}">`
                : ''
            }
        ${
            process.env.NODE_ENV === 'production'
                ? `<script src="${assets.client.js}" defer></script>`
                : `<script src="${assets.client.js}" defer crossorigin></script>`
            }
        
    </head>
    <body>
        <div id="root">${markup}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(data)}
        </script>
    </body>
</html>`
        );
    }
}

export default frontendRoute;
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								import express from 'express';
 								import React from 'react';
 								import { renderToString } from 'react-dom/server';
-												Organise imports in frontend and API

											
										
										
											2019-11-07 02:39:26 -05:00
+								import { StaticRouter } from 'react-router-dom';
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								import serialize from 'serialize-javascript';
 								import {
 								    getBuildingById,
-												Load max revision ID on start (#485)

* Load max revision ID on start

* Update revision ID upon mounting MapApp

											
										
										
											2019-10-29 12:56:49 -04:00
+								    getBuildingUPRNsById,
-												Display official planning data.

											
										
										
											2022-10-05 13:52:14 -04:00
+								    getBuildingPlanningDataById,
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								    getLatestRevisionId,
 								    getUserVerifiedAttributes
-												Refactor API building service into multiple files

											
										
										
											2021-01-20 21:27:14 -05:00
+								} from './api/services/building/base';
-												Organise imports in frontend and API

											
										
										
											2019-11-07 02:39:26 -05:00
+								import { getUserById } from './api/services/user';
-												Move user authentication to context and hooks

											
										
										
											2021-02-08 11:03:30 -05:00
+								import { App } from './frontend/app';
-												Organise imports in frontend and API

											
										
										
											2019-11-07 02:39:26 -05:00
+								import { parseBuildingURL } from './parse';
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								import asyncController from './api/routes/asyncController';
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
-												Another pass at removing references to Colouring London

											
										
										
											2022-12-06 11:55:10 -05:00
+								import { CCConfig } from './cc-config';
-												Crash Fix

											
										
										
											2022-12-06 12:05:22 -05:00
+								let config: CCConfig = require('./cc-config.json')
-												Another pass at removing references to Colouring London

											
										
										
											2022-12-06 11:55:10 -05:00
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
 								// reference packed assets
 								const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								const frontendRoute = asyncController(async (req: express.Request, res: express.Response) => {
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								    const context: any = {}; // TODO: remove any
 								    const data: any = {}; // TODO: remove any
 								    context.status = 200;
 								    const userId = req.session.user_id;
 								    const buildingId = parseBuildingURL(req.url);
 								    const isBuilding = (typeof (buildingId) !== 'undefined');
 								    if (isBuilding && isNaN(buildingId)) {
 								        context.status = 404;
 								    }
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								    try {
-												Display official planning data.

											
										
										
											2022-10-05 13:52:14 -04:00
+								        let [user, building, uprns, planningData, userVerified, latestRevisionId] = await Promise.all([
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								            userId ? getUserById(userId) : undefined,
-												Replace likes with generic building-user attribs

											
										
										
											2021-08-22 21:26:58 -04:00
+								            isBuilding ? getBuildingById(
 								                buildingId,
 								                { userDataOptions: userId ? { userId, userAttributes: true } : null }
 								            ) : undefined,
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								            isBuilding ? getBuildingUPRNsById(buildingId) : undefined,
-												Display official planning data.

											
										
										
											2022-10-05 13:52:14 -04:00
+								            isBuilding ? getBuildingPlanningDataById(buildingId) : undefined,
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								            (isBuilding && userId) ? getUserVerifiedAttributes(buildingId, userId) : {},
 								            getLatestRevisionId()
 								        ]);
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        if (isBuilding && typeof (building) === 'undefined') {
 								            context.status = 404;
 								        }
 								        data.user = user;
 								        data.building = building;
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								        data.user_verified = userVerified;
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        if (data.building != null) {
 								            data.building.uprns = uprns;
 								        }
-												Display official planning data.

											
										
										
											2022-10-05 13:52:14 -04:00
+								        if (data.building != null) {
 								            data.building.planning_data = planningData;
 								        }
-												Load max revision ID on start (#485)

* Load max revision ID on start

* Update revision ID upon mounting MapApp

											
										
										
											2019-10-29 12:56:49 -04:00
+								        data.latestRevisionId = latestRevisionId;
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        renderHTML(context, data, req, res);
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								    } catch(error) {
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        console.error(error);
 								        data.user = undefined;
 								        data.building = undefined;
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								        data.user_verified = {}
-												Load max revision ID on start (#485)

* Load max revision ID on start

* Update revision ID upon mounting MapApp

											
										
										
											2019-10-29 12:56:49 -04:00
+								        data.latestRevisionId = 0;
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        context.status = 500;
 								        renderHTML(context, data, req, res);
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
+								    }
 								});
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
 								function renderHTML(context, data, req, res) {
 								    const markup = renderToString(
 								        <StaticRouter context={context} location={req.url}>
-												Load max revision ID on start (#485)

* Load max revision ID on start

* Update revision ID upon mounting MapApp

											
										
										
											2019-10-29 12:56:49 -04:00
+								            <App
 								                user={data.user}
 								                building={data.building}
 								                revisionId={data.latestRevisionId}
-												Refactor map app with hooks and separated config

											
										
										
											2021-02-22 01:59:24 -05:00
+								                user_verified={data.userVerified}
-												Load max revision ID on start (#485)

* Load max revision ID on start

* Update revision ID upon mounting MapApp

											
										
										
											2019-10-29 12:56:49 -04:00
+								            />
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        </StaticRouter>
 								    );
 								    if (context.url) {
 								        res.redirect(context.url);
 								    } else {
 								        res.status(context.status).send(
 								            `<!doctype html>
 								    <html lang="">
 								    <head>
 								        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 								        <meta charset="utf-8" />
-												Add Facebook and Twitter metadata

											
										
										
											2019-09-10 07:23:41 -04:00
 								        <meta name="twitter:card"              content="summary" />
 								        <meta name="twitter:site"              content="@colouringlondon" />
 								        <meta property="og:url"                content="https://colouring.london" />
 								        <meta property="og:type"               content="website" />
-												Another pass at removing references to Colouring London

											
										
										
											2022-12-06 11:55:10 -05:00
+								        <meta property="og:title"              content="Colouring ${config.cityName}" />
 								        <meta property="og:description"        content="Colouring ${config.cityName} is a knowledge exchange platform collecting information on every building in London, to help make the city more sustainable. We’re building it at The Bartlett Centre for Advanced Spatial Analysis, University College London." />
-												Add Facebook and Twitter metadata

											
										
										
											2019-09-10 07:23:41 -04:00
+								        <meta property="og:locale"             content="en_GB" />
-												Add square logo for social sharing image

											
										
										
											2019-10-03 08:19:44 -04:00
+								        <meta property="og:image"              content="https://colouring.london/images/logo-cl-square.png" />
-												Add Facebook and Twitter metadata

											
										
										
											2019-09-10 07:23:41 -04:00
-												Add web app manifest and icons

											
										
										
											2019-09-18 13:43:21 -04:00
+								        <link rel="manifest" href="site.webmanifest">
-												Add verification for Facade Data, thread info through frontend

											
										
										
											2020-08-04 10:54:49 -04:00
-												Add web app manifest and icons

											
										
										
											2019-09-18 13:43:21 -04:00
+								        <meta name="apple-mobile-web-app-capable" content="yes">
 								        <meta name="apple-mobile-web-app-status-bar-style" content="black">
-												Another pass at removing references to Colouring London

											
										
										
											2022-12-06 11:55:10 -05:00
+								        <meta name="apple-mobile-web-app-title" content="Colouring ${config.cityName}">
-												Add web app manifest and icons

											
										
										
											2019-09-18 13:43:21 -04:00
+								        <link rel="apple-touch-icon" href="icon-192x192.png">
 								        <meta name="mobile-web-app-capable" content="yes">
 								        <link rel="icon" sizes="192x192" href="icon-192x192.png">
-												Another pass at removing references to Colouring London

											
										
										
											2022-12-06 11:55:10 -05:00
+								        <title>Colouring ${config.cityName}</title>
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 								        <style>
 								          @font-face {
 								            font-family: 'glacial_cl';
 								            src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
 								            url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
 								            font-weight: normal;
 								            font-style: normal;
 								          }
 								        </style>
 								        ${
 								            assets.client.css
 								                ? `<link rel="stylesheet" href="${assets.client.css}">`
 								                : ''
 								            }
 								        ${
 								            process.env.NODE_ENV === 'production'
 								                ? `<script src="${assets.client.js}" defer></script>`
 								                : `<script src="${assets.client.js}" defer crossorigin></script>`
 								            }
-												Put the css & JS again with double quotation-2

											
										
										
											2023-10-19 12:53:44 -04:00
-												Split server from frontend route

											
										
										
											2019-09-06 14:13:45 -04:00
+								    </head>
 								    <body>
 								        <div id="root">${markup}</div>
 								        <script>
 								          window.__PRELOADED_STATE__ = ${serialize(data)}
 								        </script>
 								    </body>
 								</html>`
 								        );
 								    }
 								}
 								export default frontendRoute;