Add React and an example component (#790)

Co-authored-by: Guaka <[email protected]> * Add an example react component * Auto import all react components * Switch from react2angular to ngreact * Implement volunteering page using react * Remove empty lines -change * Add eval CSP for Webpack This was recently removed when AddThis script was removed with invite-page. * move react component profile-view-basics to be part of the angularjs component, not to replace it * update 'Edit this page' link in Volunteering page
Trustroots · Dec 2, 2018 · b14f46a · b14f46a
1 parent e8f8d38
commit b14f46a
Show file tree

Hide file tree

Showing 16 changed files with 1,632 additions and 359 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,11 @@
 module.exports = {
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  extends: [
+    'plugin:react/recommended'
+  ],
   rules: {
     camelcase: 0,
     'comma-dangle': [2, 'never'],

diff --git a/config/lib/express.js b/config/lib/express.js
@@ -290,6 +290,8 @@ module.exports.initHelmetHeaders = function (app) {
 
       // Defines the origins from which scripts can be loaded.
       scriptSrc: [
+        // For Webpack
+        '\'unsafe-eval\'',
         // IE Edge does not support `nonce`, thus we need `unsafe-inline`. :-(
         // Using sha instead could work.
         '\'unsafe-inline\'',

diff --git a/config/webpack/.eslintrc.js b/config/webpack/.eslintrc.js
diff --git a/config/webpack/entries/main.js b/config/webpack/entries/main.js
@@ -6,7 +6,58 @@
  */
 
 import '@/public/dist/uib-templates';
+import angular from 'angular';
 
 if (process.env.NODE_ENV === 'production') {
   require('@/public/dist/templates');
 }
+
+/*
+ *  Imports all react components from modules/ and register them as angular components
+ *
+ *  So if you defined modules/users/client/components/TrustrootsGreeting.component.js as:
+ *
+ *    export default function TrustrootsGreeting({ name }) {
+ *      return <p>Hello {name}, from Trustroots!</p>;
+ *    };
+ *
+ *  It will be available to use in (any) angular template as:
+ *
+ *    <trustroots-greeting name="'Donald'"></trustroots-greeting>
+ *
+ *  Uses a webpack require context
+ *  See https://webpack.js.org/guides/dependency-management/#require-context
+ */
+importComponents(require.context('../../../modules/', true, /\.component\.js$/));
+
+function importComponents(r) {
+  r.keys().forEach(path => {
+    const Component = r(path).default;
+    const name = extractComponentNameFromPath(path);
+    if (name !== Component.name) {
+      throw new Error(`Component filename and component name do not match: ${name || '<empty>'} vs ${Component.name || '<empty>'}`);
+    }
+    if (!Component.propTypes) {
+      throw new Error(`You must define propTypes on your component, e.g. ${name}.propTypes = {};`);
+    }
+    const propNames = Object.keys(Component.propTypes);
+
+    angular
+      .module('trustroots')
+      .directive(lowercaseFirstLetter(Component.name), createDirective);
+
+    /* @ngInject */
+    function createDirective(reactDirective) {
+      return reactDirective(Component, propNames);
+    }
+  });
+}
+
+function lowercaseFirstLetter(str) {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+function extractComponentNameFromPath(path) {
+  const m = /\/([^/]+)\.component\.js$/.exec(path);
+  if (m) return m[1];
+}
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -22,13 +22,34 @@ module.exports = merge(shims, {
     }
   },
   module: {
-    rules: isProduction ? [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'ng-annotate-loader?ngAnnotate=ng-annotate-patched'
-      }
-    ] : []
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', {
+                useBuiltIns: 'usage',
+                modules: 'commonjs'
+              }],
+              ['@babel/preset-react']
+            ],
+            plugins: [
+              '@babel/plugin-proposal-object-rest-spread'
+            ]
+          }
+        }
+      },
+      ...(isProduction ? [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'ng-annotate-loader?ngAnnotate=ng-annotate-patched'
+        }
+      ] : [])
+    ]
   },
   plugins: [
     new webpack.DefinePlugin({

diff --git a/modules/core/client/app/config.js b/modules/core/client/app/config.js
@@ -1,5 +1,7 @@
 'use strict';
 
+import ngreact from 'ngreact';
+
 // Init the application configuration module for AngularJS application
 // eslint-disable-next-line no-unused-vars
 var AppConfig = (function () {
@@ -10,6 +12,7 @@ var AppConfig = (function () {
 
   var appModuleName = 'trustroots';
   var appModuleVendorDependencies = [
+    ngreact.name,
     'ngAria',
     'ngResource',
     'ngAnimate',

diff --git a/modules/core/client/directives/tr-boards.client.directive.js b/modules/core/client/directives/tr-boards.client.directive.js
@@ -1,3 +1,5 @@
+import photos from '@/modules/core/client/services/photos.service';
+
 (function () {
   'use strict';
 
@@ -36,162 +38,6 @@
         // If requested photo is missing or request is invalid, rely on this photo
         var defaultPhoto = 'bokeh';
 
-        var photos = {
-          'bokeh': {
-            'name': 'Sandra', // "pinkorchid_too"
-            'url': 'https://www.flickr.com/photos/artfullife/3589991695',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-sa/2.0/',
-            'file': 'flickr-bokeh.jpg',
-            'file_mobile': 'flickr-bokeh--mobile.jpg'
-          },
-          'forestpath': {
-            'name': 'Johnson', // Johnson Cameraface
-            'url': 'https://www.flickr.com/photos/54459164@N00/15506455245',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-sa/2.0/',
-            'file': 'flickr-forestpath.jpg'
-          },
-          'forestpath-toned': {
-            'name': 'Johnson', // Johnson Cameraface
-            'url': 'https://www.flickr.com/photos/54459164@N00/15506455245',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-sa/2.0/',
-            'file': 'flickr-forestpath-toned.jpg'
-          },
-          'sierranevada': {
-            'name': 'Simona',
-            'url': 'https://www.wanderlust.lt',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'ss-sierranevada.jpg'
-          },
-          'hitchroad': {
-            // https://www.facebook.com/photo.php?fbid=10152802854942931&set=pcb.10152802854987931&type=1&theater
-            // Permission asked for Trustroots & Hitchwiki by Mikael Korpela
-            'name': 'Andrew W Bugelli',
-            'url': 'http://www.containstraces.blogspot.com/',
-            'file': 'ab-hitchroad-toned.jpg' // ab-hitchroad.jpg
-          },
-          'guitarcamper': {
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Guillaume Ohz',
-            'file': 'go-camper.jpg',
-            'url': 'https://soundcloud.com/feather-drug'
-          },
-          'maroccomap': {
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Guillaume Ohz',
-            'file': 'go-maroccomap.jpg',
-            'url': 'https://soundcloud.com/feather-drug'
-          },
-          'rainbowpeople': {
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Antonio Fulghieri',
-            'url': 'https://aaoutthere.wordpress.com/',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'af-rainbow-people.jpg',
-            'file_mobile': 'af-rainbow-people--mobile.jpg'
-          },
-          'happyhippies': {
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Antonio Fulghieri',
-            'url': 'https://aaoutthere.wordpress.com/',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'af-happyhippies.jpg',
-            'file_mobile': 'af-happyhippies--mobile.jpg'
-          },
-          'desertgirl': {
-            // https://www.facebook.com/agniete.melisa
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Agnietė Melisa',
-            'url': 'https://www.facebook.com/pages/My-Road-Tales/844001355694245',
-            'file': 'am-desertgirl.jpg'
-          },
-          'wavewatching': {
-            // https://www.facebook.com/gala.hyde
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Andrea Nieblas',
-            'url': 'https://www.flickr.com/photos/andreanieblas/',
-            'file': 'an-wavewatching.jpg',
-            'file_mobile': 'an-wavewatching--mobile.jpg'
-          },
-          'hitchgirl1': {
-            // https://www.facebook.com/just.kozmic.blues
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Gytė',
-            'url': 'https://www.facebook.com/upe.pati.teka',
-            'file': 'gh-hitchgirl1.jpg',
-            'file_mobile': 'gh-hitchgirl1--mobile.jpg'
-          },
-          'hitchgirl2': {
-            // https://www.facebook.com/matasirastrauskas
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Matas Astrauskas',
-            'url': 'http://www.matasphoto.com/',
-            'file': 'mr-hitchgirl2.jpg'
-          },
-          'mountainforest': {
-            // https://unsplash.com/photos/VNseEaTt9w4
-            'name': 'Sven Scheuermeier',
-            'url': 'https://unsplash.com/sveninho',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/publicdomain/zero/1.0/', // https://unsplash.com/license
-            'file': 'ss-mountainforest.jpg',
-            'file_mobile': 'ss-mountainforest--mobile.jpg'
-          },
-          'tribes-1': {
-            // Permission granted for Trustroots (asked by Mikael Korpela)
-            'name': 'Antonio Fulghieri',
-            'url': 'https://aaoutthere.wordpress.com/',
-            'license': 'CC',
-            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
-            'file': 'tribes-1.jpg',
-            'file_mobile': 'tribes-1--mobile.jpg'
-          },
-          'woman-bridge': {
-            'name': 'Michael Hull',
-            'url': 'https://unsplash.com/photos/JibIPPrvITE',
-            'license': 'CC',
-            'license_url': 'https://unsplash.com/license',
-            'file': 'mh-woman-bridge.jpg',
-            'file_mobile': 'mh-woman-bridge--mobile.jpg'
-          },
-          'nordiclights': {
-            'name': 'Vincent Guth',
-            'url': 'https://unsplash.com/photos/62V7ntlKgL8',
-            'license': 'CC',
-            'license_url': 'https://unsplash.com/license',
-            'file': 'nordic-lights.jpg',
-            'file_mobile': 'nordic-lights--mobile.jpg'
-          },
-          'jungleroad': {
-            'name': 'Dean Johns',
-            'license': 'CC',
-            'license_url': 'https://unsplash.com/license',
-            'file': 'jungleroad.jpg',
-            'file_mobile': 'jungleroad--mobile.jpg'
-          },
-          'sahara-backpacker': {
-            'name': 'Nova Togatorop',
-            'url': 'http://novatogatorop.com/',
-            'license': 'CC',
-            'license_url': 'https://unsplash.com/license',
-            'file': 'ak-sahara.jpg',
-            'file_mobile': 'ak-sahara--mobile.jpg'
-          },
-          'hitchtruck': {
-            'name': 'Nova Togatorop',
-            'url': 'http://novatogatorop.com/',
-            'license': 'CC',
-            'license_url': 'https://unsplash.com/license',
-            'file': 'nt-hitchtruck.jpg',
-            'file_mobile': 'nt-hitchtruck--mobile.jpg'
-          }
-        };
-
         // scope.trBoards might be an array (therefore just pick one key from it) or a string (thus just use it as is)
         var key = angular.isArray(scope.trBoards) ? scope.trBoards[Math.floor(Math.random() * (scope.trBoards.length))] : scope.trBoards;