Update verification page to dynamically create new routes based on src/data/pages/verification.js

Author: DzhideX

gatsby-node.esm.js

@@ -0,0 +1,53 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/node-apis/
+ */
+
+// You can delete this file if you're not using it
+
+import path from 'path';
+// const data = require('./src/data/pages/verification.js');
+import { verifiedMembers } from './src/data/pages/verification.js';
+
+exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
+  let rules = [
+    {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    },
+  ];
+  if (stage === 'build-html') {
+    rules.push({
+      test: /openpgp/,
+      use: loaders.null(),
+    });
+  }
+
+  actions.setWebpackConfig({
+    resolve: {
+      extensions: ['*', '.mjs', '.jsx', '.js', '.json'],
+    },
+    module: {
+      rules: [...rules],
+    },
+  });
+};
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  const verificationTemplate = path.resolve(`src/templates/verification.js`);
+
+  verifiedMembers.forEach(user => {
+    const { substituteUserRoute, memberHandle } = user;
+    createPage({
+      path: `/${substituteUserRoute === undefined ? memberHandle : substituteUserRoute}`,
+      component: verificationTemplate,
+      context: {
+        user,
+        otherMembers: verifiedMembers.filter(member => member.memberHandle !== user.memberHandle),
+      },
+    });
+  });
+};

gatsby-node.js

@@ -6,29 +6,5 @@
 
 // You can delete this file if you're not using it
 
-exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  let rules = [
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: 'javascript/auto',
-      },
-  ];
-  if(stage === 'build-html'){
-    rules.push({
-      test: /openpgp/,
-      use: loaders.null(),
-    });
-  }
-
-  actions.setWebpackConfig({
-    resolve: {
-      extensions: ['*', '.mjs', '.jsx', '.js', '.json'],
-    },
-    module: {
-      rules: [
-        ...rules,
-      ],
-    },
-  });
-};
+require = require('esm')(module);
+module.exports = require('./gatsby-node.esm.js');

package.json

@@ -20,6 +20,7 @@
     "css-loader": "^3.0.0",
     "dotenv": "^16.0.0",
     "eslint-plugin-import": "^2.18.2",
+    "esm": "^3.2.25",
     "gatsby": "^2.31.1",
     "gatsby-image": "^2.2.1",
     "gatsby-plugin-anchor-links": "^1.1.1",

src/components/verification-page/index.js

@@ -17,6 +17,14 @@ import { ReactComponent as DownIcon } from '../../assets/svg/down.svg';
 
 import './style.scss';
 
+const parseComponents = components => {
+  return components.map((component, index) => {
+    if (component?.link) {
+      return <a href={component.link}>{component.text}</a>;
+    }
+  });
+};
+
 const MemberCard = ({ img, name, title, t }) => {
   return (
     <div className="VerificationPage__member-card">
@@ -96,8 +104,10 @@ const SafetyCardListContainer = ({ name, isAllowed, items }) => {
 };
 
 const SafetyCard = ({ name, safetyItems, t }) => {
-  const allowedItems = safetyItems.allowed.map(item => item?.components ? <Trans i18nKey={item.text} components={item.components} /> : t(item.text));
-  const notAllowedItems = safetyItems.notAllowed.map(item => item?.components ? <Trans i18nKey={item.text} components={item.components} /> : t(item.text));
+  const allowedItems = safetyItems.allowed.map(item =>
+    item?.components ? <Trans i18nKey={item.text} components={parseComponents(item.components)} /> : t(item.text));
+  const notAllowedItems = safetyItems.notAllowed.map(item =>
+    item?.components ? <Trans i18nKey={item.text} components={parseComponents(item.components)} /> : t(item.text));
 
   return (
     <div className="VerificationPage__safety-card">
@@ -111,7 +121,10 @@ const SafetyCard = ({ name, safetyItems, t }) => {
         </a>
       </div>
       <div className="VerificationPage__safety-card__subtitle">{t('verification.safety.subtitle')}</div>
-      <a href="mailto:[email protected]" className="VerificationPage__safety-card__top__report-button VerificationPage__safety-card__top__report-button--mobile">
+      <a
+        href="mailto:[email protected]"
+        className="VerificationPage__safety-card__top__report-button VerificationPage__safety-card__top__report-button--mobile"
+      >
         <FlagIcon />
         <p className="VerificationPage__safety-card__top__report-button__text">
           {t('verification.safety.reportButton', { name })}
@@ -137,7 +150,10 @@ const OtherMembers = ({ otherMembers, t }) => {
       <div className="VerificationPage__other-members-card__subtitle">{t('verification.otherMembers.subtitle')}</div>
       <div className="VerificationPage__other-members-card__members">
         {membersToRender.map((member, index) => (
-          <Link to={`/${member?.substituteUserRoute ? member.substituteUserRoute : member.memberHandle}`}>
+          <Link
+            key={`${member.memberHandle}-${index}`}
+            to={`/${member?.substituteUserRoute ? member.substituteUserRoute : member.memberHandle}`}
+          >
             <div className="VerificationPage__other-members-card__member">
               <img className="VerificationPage__other-members-card__member__icon" src={member.avatarUrl} alt="" />
               <div className="VerificationPage__other-members-card__member__name">@{member.memberHandle}</div>

src/data/pages/verification.js

@@ -18,7 +18,7 @@ export const verifiedMembers = [
         { text: 'verification.safety.willNever.items.sendAnythingDangerous' },
         {
           text: 'verification.safety.willNever.items.askToVisitLinks',
-          components: [<a href="https://www.joystream.org">Joystream.org</a>],
+          components: [{ link: 'https://www.joystream.org', text: 'Joystream.org' }],
         },
       ],
       allowed: [{ text: 'verification.safety.can.items.inviteToYpp' }],
@@ -42,7 +42,7 @@ export const verifiedMembers = [
         { text: 'verification.safety.willNever.items.sendAnythingDangerous' },
         {
           text: 'verification.safety.willNever.items.askToVisitLinks',
-          components: [<a href="https://www.joystream.org">Joystream.org</a>],
+          components: [{ link: 'https://www.joystream.org', text: 'Joystream.org' }],
         },
       ],
       allowed: [{ text: 'verification.safety.can.items.inviteToYpp' }],

src/pages/leet_joy/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import { useTranslation, useI18next } from 'gatsby-plugin-react-i18next';
+
+import SiteMetadata from '../components/SiteMetadata';
+import Verification from '../components/verification-page';
+
+const VerificationTemplate = ({ pageContext }) => {
+  const { t } = useTranslation();
+  const { language } = useI18next();
+
+  const { user, otherMembers } = pageContext;
+
+  return (
+    <main>
+      <SiteMetadata
+        lang={language}
+        title={t('verification.siteMetadata.title', { name: user.memberHandle })}
+        description={t('verification.siteMetadata.description')}
+      />
+      <Verification user={user} otherMembers={otherMembers} t={t} />
+    </main>
+  );
+};
+
+export default VerificationTemplate;
+
+export const query = graphql`
+  query($language: String!) {
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      ...LanguageQueryFields
+    }
+  }
+`;

src/pages/vikan/index.js

@@ -7803,6 +7803,11 @@ eslint@^6.8.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
+esm@^3.2.25:
+  version "3.2.25"
+  resolved "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
 espree@^6.1.2:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"