From 2575e54ba06c4ee093bdd931be39675cf60544e9 Mon Sep 17 00:00:00 2001
From: HF
Date: Wed, 29 Jun 2022 22:02:02 +0200
Subject: [PATCH] stop using React for server-side-rendering
---
src/routes/api/auth/index.js | 2 +-
src/routes/api/auth/verify.js | 2 +-
src/routes/index.js | 4 +-
src/routes/reset_password.js | 2 +-
src/ssr-components/Globe.jsx | 62 -------------------
src/ssr-components/Html.jsx | 70 ----------------------
src/ssr-components/Main.jsx | 82 --------------------------
src/ssr-components/PasswordReset.jsx | 62 -------------------
src/ssr-components/RedirectionPage.jsx | 37 ------------
src/ssr/Globe.jsx | 58 ++++++++++++++++++
src/ssr/Main.jsx | 80 +++++++++++++++++++++++++
src/ssr/PasswordReset.jsx | 72 ++++++++++++++++++++++
src/ssr/RedirectionPage.jsx | 38 ++++++++++++
13 files changed, 253 insertions(+), 318 deletions(-)
delete mode 100644 src/ssr-components/Globe.jsx
delete mode 100644 src/ssr-components/Html.jsx
delete mode 100644 src/ssr-components/Main.jsx
delete mode 100644 src/ssr-components/PasswordReset.jsx
delete mode 100644 src/ssr-components/RedirectionPage.jsx
create mode 100644 src/ssr/Globe.jsx
create mode 100644 src/ssr/Main.jsx
create mode 100644 src/ssr/PasswordReset.jsx
create mode 100644 src/ssr/RedirectionPage.jsx
diff --git a/src/routes/api/auth/index.js b/src/routes/api/auth/index.js
index ccf6a79..9c5f47d 100644
--- a/src/routes/api/auth/index.js
+++ b/src/routes/api/auth/index.js
@@ -25,7 +25,7 @@ import change_mail from './change_mail';
// eslint-disable-next-line camelcase
import restore_password from './restore_password';
-import getHtml from '../../../ssr-components/RedirectionPage';
+import getHtml from '../../../ssr/RedirectionPage';
import getMe from '../../../core/me';
diff --git a/src/routes/api/auth/verify.js b/src/routes/api/auth/verify.js
index 32bf47e..0339b4b 100644
--- a/src/routes/api/auth/verify.js
+++ b/src/routes/api/auth/verify.js
@@ -3,7 +3,7 @@
*/
import socketEvents from '../../../socket/SocketEvents';
-import getHtml from '../../../ssr-components/RedirectionPage';
+import getHtml from '../../../ssr/RedirectionPage';
import { getHostFromRequest } from '../../../utils/ip';
import mailProvider from '../../../core/mail';
diff --git a/src/routes/index.js b/src/routes/index.js
index 3477380..67628eb 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -17,8 +17,8 @@ import api from './api';
import assets from './assets.json'; // eslint-disable-line import/no-unresolved
import { expressTTag } from '../core/ttag';
-import generateGlobePage from '../ssr-components/Globe';
-import generateMainPage from '../ssr-components/Main';
+import generateGlobePage from '../ssr/Globe';
+import generateMainPage from '../ssr/Main';
import { MONTH } from '../core/constants';
import { GUILDED_INVITE } from '../core/config';
diff --git a/src/routes/reset_password.js b/src/routes/reset_password.js
index a63e51d..6c61e17 100644
--- a/src/routes/reset_password.js
+++ b/src/routes/reset_password.js
@@ -9,7 +9,7 @@ import express from 'express';
import type { Request, Response } from 'express';
import logger from '../core/logger';
-import getPasswordResetHtml from '../ssr-components/PasswordReset';
+import getPasswordResetHtml from '../ssr/PasswordReset';
import mailProvider from '../core/mail';
import { RegUser } from '../data/sql';
diff --git a/src/ssr-components/Globe.jsx b/src/ssr-components/Globe.jsx
deleted file mode 100644
index 53222b0..0000000
--- a/src/ssr-components/Globe.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * react html for 3D globe page
- *
- * @flow
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-
-import { getTTag } from '../core/ttag';
-
-import Html from './Html';
-/* this will be set by webpack */
-// eslint-disable-next-line import/no-unresolved
-import assets from './assets.json';
-import { ASSET_SERVER } from '../core/config';
-
-import globeCss from '../styles/globe.css';
-
-const styles = [{
- id: 'globe',
- cssText: globeCss,
-}];
-
-const defaultScripts = assets.globe.js.map(
- (s) => ASSET_SERVER + s,
-);
-
-/*
- * generates string with html of globe page
- * @param lang language code
- * @return html of mainpage
- */
-function generateGlobePage(lang: string): string {
- const scripts = (assets[`globe-${lang}`])
- ? assets[`globe-${lang}`].js.map((s) => ASSET_SERVER + s)
- : defaultScripts;
-
- const { t } = getTTag(lang);
- const Globe = () => (
-
-
-
(0, 0)
-
{t`Double click on globe to go back.`}
-
{t`Loading...`}
-
- );
-
- const html = ReactDOM.renderToStaticMarkup(
- }
- styles={styles}
- />,
- );
-
- return `${html}`;
-}
-
-export default generateGlobePage;
diff --git a/src/ssr-components/Html.jsx b/src/ssr-components/Html.jsx
deleted file mode 100644
index ca8a8b6..0000000
--- a/src/ssr-components/Html.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/* @flow */
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-/* eslint-disable max-len */
-
-import React from 'react';
-
-const Html = ({
- title,
- description,
- body,
- // array of css stylesheet urls
- css,
- // array of script urls
- scripts,
- // style as string
- styles,
- // code as string
- code,
-}) => (
-
-
-
-
-
-
- {title}
-
-
-
-
- {styles && styles.map((style) => (
-
- ))}
- {code && (
-
- )}
- {css && css.map((stylesheet) => (
-
- ))}
-
-
-
- {body}
-
- {scripts && scripts.map((script) => )}
-
-
-);
-
-
-export default Html;
diff --git a/src/ssr-components/Main.jsx b/src/ssr-components/Main.jsx
deleted file mode 100644
index 5367042..0000000
--- a/src/ssr-components/Main.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * Html for mainpage
- *
- * @flow
- */
-
-
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-
-import { langCodeToCC } from '../utils/location';
-import ttags, { getTTag } from '../core/ttag';
-import Html from './Html';
-/* this one is set by webpack */
-// eslint-disable-next-line import/no-unresolved
-import assets from './assets.json';
-// eslint-disable-next-line import/no-unresolved
-import styleassets from './styleassets.json';
-
-import { ASSET_SERVER, BACKUP_URL } from '../core/config';
-
-/*
- * generate language list
- */
-const langs = Object.keys(ttags)
- .map((l) => (l === 'default' ? 'en' : l))
- .map((l) => [l, langCodeToCC(l)]);
-
-/*
- * values that we pass to client scripts
- */
-const ssv = {
- assetserver: ASSET_SERVER,
- availableStyles: styleassets,
- langs,
-};
-if (BACKUP_URL) {
- ssv.backupurl = BACKUP_URL;
-}
-
-const defaultScripts = assets.client.js.map(
- (s) => ASSET_SERVER + s,
-);
-const css = [
- {
- id: 'globcss',
- uri: styleassets.default,
- },
-];
-
-/*
- * Generates string with html of main page
- * @param countryCoords Cell with coordinates of client country
- * @param lang language code
- * @return html of mainpage
- */
-function generateMainPage(lang: string): string {
- const ssvR = {
- ...ssv,
- lang: lang === 'default' ? 'en' : lang,
- };
- const scripts = (assets[`client-${lang}`])
- ? assets[`client-${lang}`].js.map((s) => ASSET_SERVER + s)
- : defaultScripts;
- const { t } = getTTag(lang);
- // eslint-disable-next-line
- const html = ReactDOM.renderToStaticMarkup(
-
+
+ (0, 0)
+ ${t`Double click on globe to go back.`}
+ ${t`Loading...`}
+ ${scripts.map((script) => ``).join('')}
+
+
+ `;
+
+ return html;
+}
+
+export default generateGlobePage;
diff --git a/src/ssr/Main.jsx b/src/ssr/Main.jsx
new file mode 100644
index 0000000..cc44938
--- /dev/null
+++ b/src/ssr/Main.jsx
@@ -0,0 +1,80 @@
+/*
+ * Html for mainpage
+ */
+
+/* eslint-disable max-len */
+
+
+import { langCodeToCC } from '../utils/location';
+import ttags, { getTTag } from '../core/ttag';
+/* this one is set by webpack */
+// eslint-disable-next-line import/no-unresolved
+import assets from './assets.json';
+// eslint-disable-next-line import/no-unresolved
+import styleassets from './styleassets.json';
+
+import { ASSET_SERVER, BACKUP_URL } from '../core/config';
+
+/*
+ * generate language list
+ */
+const langs = Object.keys(ttags)
+ .map((l) => (l === 'default' ? 'en' : l))
+ .map((l) => [l, langCodeToCC(l)]);
+
+/*
+ * values that we pass to client scripts
+ */
+const ssv = {
+ assetserver: ASSET_SERVER,
+ availableStyles: styleassets,
+ langs,
+};
+if (BACKUP_URL) {
+ ssv.backupurl = BACKUP_URL;
+}
+
+/*
+ * Generates string with html of main page
+ * @param countryCoords Cell with coordinates of client country
+ * @param lang language code
+ * @return html of mainpage
+ */
+function generateMainPage(lang) {
+ const ssvR = {
+ ...ssv,
+ lang: lang === 'default' ? 'en' : lang,
+ };
+ const scripts = (assets[`client-${lang}`])
+ ? assets[`client-${lang}`].js
+ : assets.client.js;
+ const { t } = getTTag(lang);
+
+ const html = `
+
+
+
+
+ ${t`PixelPlanet.Fun`}
+
+
+
+
+
+
+
+
+
+
+
+
+ ${scripts.map((script) => ``).join('')}
+
+
+ `;
+ return html;
+}
+
+export default generateMainPage;
diff --git a/src/ssr/PasswordReset.jsx b/src/ssr/PasswordReset.jsx
new file mode 100644
index 0000000..b48effc
--- /dev/null
+++ b/src/ssr/PasswordReset.jsx
@@ -0,0 +1,72 @@
+/*
+ * Make basic reset_password forms
+ */
+
+/* eslint-disable max-len */
+
+import { getTTag } from '../core/ttag';
+
+export default function getPasswordResetHtml(name, code, lang, message = null) {
+ const { t } = getTTag(lang);
+
+ let html = '';
+
+ if (message) {
+ html = `
+
+
+
+
+ ${t`PixelPlanet.fun Password Reset`}
+
+
+
+
+
+
+
+ ${t`Reset Password`}
+ ${message}
+ ${t`Click here`} ${t`to go back to pixelplanet`}
+
+
+ `;
+ } else {
+ html = `
+
+
+
+
+ ${t`PixelPlanet.fun Password Reset`}
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+
+ return html;
+}
diff --git a/src/ssr/RedirectionPage.jsx b/src/ssr/RedirectionPage.jsx
new file mode 100644
index 0000000..8162e35
--- /dev/null
+++ b/src/ssr/RedirectionPage.jsx
@@ -0,0 +1,38 @@
+/*
+ * Make basic redirection page
+ */
+
+/* eslint-disable max-len */
+
+import { getTTag } from '../core/ttag';
+
+function getHtml(description, text, host, lang) {
+ const { jt, t } = getTTag(lang);
+
+ const clickHere = `${t`Click here`}`;
+
+ const html = `
+
+
+
+
+ ${t`PixelPlanet.fun Accounts`}
+
+
+
+
+
+
+
+
+ ${text}
+ ${t`You will be automatically redirected after 15s`}
+ ${jt`Or ${clickHere} to go back to pixelplanet`}
+
+
+ `;
+
+ return html;
+}
+
+export default getHtml;
,
- );
-
- return `${html}`;
-}
-
-export default generateMainPage;
diff --git a/src/ssr-components/PasswordReset.jsx b/src/ssr-components/PasswordReset.jsx
deleted file mode 100644
index 9ae8753..0000000
--- a/src/ssr-components/PasswordReset.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Make basic reset_password forms
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-import Html from './Html';
-
-import { getTTag } from '../core/ttag';
-
-export default function getPasswordResetHtml(name, code, lang, message = null) {
- const { t } = getTTag(lang);
-
- let body = '';
-
- if (message) {
- body = (
-
-
{t`Reset Password`}
-
{message}
-
{t`Click here`}
- {t`to go back to pixelplanet`}
-
- );
- } else {
- body = (
-
- );
- }
-
- const title = t`PixelPlanet.fun Password Reset`;
- const description = t`Reset your password here`;
-
- const index = `${
- ReactDOM.renderToStaticMarkup(
)}`;
- return index;
-}
diff --git a/src/ssr-components/RedirectionPage.jsx b/src/ssr-components/RedirectionPage.jsx
deleted file mode 100644
index 391b436..0000000
--- a/src/ssr-components/RedirectionPage.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Make basic redirection page
- * @flow
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-import Html from './Html';
-
-import { getTTag } from '../core/ttag';
-
-function getHtml(description, text, host, lang) {
- const { jt, t } = getTTag(lang);
-
- const clickHere = {t`Click here`};
-
- const body = (
-
-
{text}
-
{t`You will be automatically redirected after 15s`}
-
{jt`Or ${clickHere} to go back to pixelplanet`}
-
- );
-
- const title = t`PixelPlanet.fun Accounts`;
- // eslint-disable-next-line max-len
- const code = `window.setTimeout(function(){window.location.href="${host}";},15000)`;
-
- const index = `${
- ReactDOM.renderToStaticMarkup(
-
,
- )
- }`;
- return index;
-}
-
-export default getHtml;
diff --git a/src/ssr/Globe.jsx b/src/ssr/Globe.jsx
new file mode 100644
index 0000000..e305086
--- /dev/null
+++ b/src/ssr/Globe.jsx
@@ -0,0 +1,58 @@
+/*
+ * react html for 3D globe page
+ *
+ */
+
+/* eslint-disable max-len */
+
+import { getTTag } from '../core/ttag';
+
+/* this will be set by webpack */
+// eslint-disable-next-line import/no-unresolved
+import assets from './assets.json';
+import { ASSET_SERVER } from '../core/config';
+
+import globeCss from '../styles/globe.css';
+
+/*
+ * generates string with html of globe page
+ * @param lang language code
+ * @return html of mainpage
+ */
+function generateGlobePage(lang) {
+ const scripts = (assets[`globe-${lang}`])
+ ? assets[`globe-${lang}`].js
+ : assets.globe.js;
+
+ const { t } = getTTag(lang);
+
+ const html = `
+
+
+
+
+
${t`PixelPlanet.Fun 3DGlobe`}
+
+
+
+
+
+
+
+
+