2019-09-06 14:13:45 -04:00
import express from 'express' ;
import React from 'react' ;
import { renderToString } from 'react-dom/server' ;
2019-11-07 02:39:26 -05:00
import { StaticRouter } from 'react-router-dom' ;
2019-09-06 14:13:45 -04:00
import serialize from 'serialize-javascript' ;
import {
getBuildingById ,
2019-10-29 12:56:49 -04:00
getBuildingUPRNsById ,
2020-08-04 10:54:49 -04:00
getLatestRevisionId ,
getUserVerifiedAttributes
2021-01-20 21:27:14 -05:00
} from './api/services/building/base' ;
2019-11-07 02:39:26 -05:00
import { getUserById } from './api/services/user' ;
2021-02-08 11:03:30 -05:00
import { App } from './frontend/app' ;
2019-11-07 02:39:26 -05:00
import { parseBuildingURL } from './parse' ;
2020-08-04 10:54:49 -04:00
import asyncController from './api/routes/asyncController' ;
2019-09-06 14:13:45 -04:00
// reference packed assets
const assets = require ( process . env . RAZZLE_ASSETS_MANIFEST ) ;
2020-08-04 10:54:49 -04:00
const frontendRoute = asyncController ( async ( req : express.Request , res : express.Response ) = > {
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 ;
}
2020-08-04 10:54:49 -04:00
try {
2021-08-22 21:26:58 -04:00
let [ user , building , uprns , userVerified , latestRevisionId ] = await Promise . all ( [
2020-08-04 10:54:49 -04:00
userId ? getUserById ( userId ) : undefined ,
2021-08-22 21:26:58 -04:00
isBuilding ? getBuildingById (
buildingId ,
{ userDataOptions : userId ? { userId , userAttributes : true } : null }
) : undefined ,
2020-08-04 10:54:49 -04:00
isBuilding ? getBuildingUPRNsById ( buildingId ) : undefined ,
( isBuilding && userId ) ? getUserVerifiedAttributes ( buildingId , userId ) : { } ,
getLatestRevisionId ( )
] ) ;
2019-09-06 14:13:45 -04:00
if ( isBuilding && typeof ( building ) === 'undefined' ) {
context . status = 404 ;
}
data . user = user ;
data . building = building ;
2020-08-04 10:54:49 -04:00
data . user_verified = userVerified ;
2019-09-06 14:13:45 -04:00
if ( data . building != null ) {
data . building . uprns = uprns ;
}
2019-10-29 12:56:49 -04:00
data . latestRevisionId = latestRevisionId ;
2019-09-06 14:13:45 -04:00
renderHTML ( context , data , req , res ) ;
2020-08-04 10:54:49 -04:00
} catch ( error ) {
2019-09-06 14:13:45 -04:00
console . error ( error ) ;
data . user = undefined ;
data . building = undefined ;
2020-08-04 10:54:49 -04:00
data . user_verified = { }
2019-10-29 12:56:49 -04:00
data . latestRevisionId = 0 ;
2019-09-06 14:13:45 -04:00
context . status = 500 ;
renderHTML ( context , data , req , res ) ;
2020-08-04 10:54:49 -04:00
}
} ) ;
2019-09-06 14:13:45 -04:00
function renderHTML ( context , data , req , res ) {
const markup = renderToString (
< StaticRouter context = { context } location = { req . url } >
2019-10-29 12:56:49 -04:00
< App
user = { data . user }
building = { data . building }
revisionId = { data . latestRevisionId }
2021-02-22 01:59:24 -05:00
user_verified = { data . userVerified }
2019-10-29 12:56:49 -04:00
/ >
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" / >
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" / >
< meta property = "og:title" content = "Colouring London" / >
2019-10-03 08:24:48 -04:00
< meta property = "og:description" content = "Colouring London is a knowledge exchange platform collecting information on every building in London, to help make the city more sustainable. We’ / >
2019-09-10 07:23:41 -04:00
< meta property = "og:locale" content = "en_GB" / >
2019-10-03 08:19:44 -04:00
< meta property = "og:image" content = "https://colouring.london/images/logo-cl-square.png" / >
2019-09-10 07:23:41 -04:00
2019-09-18 13:43:21 -04:00
< link rel = "manifest" href = "site.webmanifest" >
2020-08-04 10:54:49 -04:00
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" >
< meta name = "apple-mobile-web-app-title" content = "Colouring London" >
< 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" >
2019-09-06 14:13:45 -04:00
< title > Colouring London < / 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 ;
