Migrate Tribe to React (#1134)

A tribe panel on /tribes page.

config/client/i18n.js

@@ -44,6 +44,10 @@ function format(value, format, languageCode) {
     return moment(value).format(format);
   }
 
+  if (typeof value === 'number' && format === 'number') {
+    return value.toLocaleString(languageCode);
+  }
+
   return value;
 }
 

modules/tribes/client/components/TribeItem.component.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import JoinButton from './JoinButton';
+
+import getTribeBackgroundStyle from './helpers/getTribeBackgroundStyle';
+
+/**
+ * @TODO maybe rename to Tribe
+ */
+export default function TribeItem({ tribe, user, onMembershipUpdated }) {
+  const { t } = useTranslation('tribes');
+
+  const countInfo = (tribe.count === 0)
+    ? t('No members yet')
+    : t('{{count, number}} members', { count: tribe.count });
+
+  return <div
+    className="panel tribe tribe-image"
+    style={getTribeBackgroundStyle(tribe, { isProgressive: true, dimensions: '742x496' })}
+  >
+    <a href={`/tribes/${tribe.slug}`} className="tribe-link">
+      {tribe.new && <span className="tribe-new" aria-hidden={true}>
+        <span className="label label-primary">
+          {t('New tribe!')}
+        </span>
+      </span>}
+      <div className={classnames('tribe-content', tribe.image_UUID ? 'is-image' : '')}>
+        <h3 className="font-brand-light tribe-label">{tribe.label}</h3>
+        <span className="tribe-meta">{countInfo}</span>
+      </div>
+    </a>
+    <div className="tribe-actions">
+      {tribe && <JoinButton
+        tribe={tribe}
+        user={user}
+        icon={true}
+        onUpdated={onMembershipUpdated}
+      />}
+    </div>
+  </div>;
+}
+
+TribeItem.propTypes = {
+  tribe: PropTypes.object.isRequired,
+  user: PropTypes.object,
+  onMembershipUpdated: PropTypes.func.isRequired,
+};

modules/tribes/client/components/helpers/getTribeBackgroundStyle.js

@@ -0,0 +1,44 @@
+/**
+ * Generate background color + image styles for tribe panel
+ *
+ * usage in React: <div style={getTribeBackgroundStyle(tribe, { quality: 'normal', dimensions: '742x496', isProgressive: true })}>...</div>
+ *
+ * @param {object} tribe - the tribe data
+ *
+ * @param {string} [dimensions=1024x768] - Set background image dimensions (width x height)
+ *   See https://uploadcare.com/documentation/cdn/#operation-scale-crop
+ *
+ * @param {string} [quality=lighter] - Set background image quality
+ *   Options: normal, better, best, lighter (default), lightest
+ *   See https://uploadcare.com/documentation/cdn/#operation-quality
+ *
+ * @param {boolean} [isProgressive=false] - Set progressive image loading
+ *   See https://uploadcare.com/documentation/cdn/#operation-progressive
+ *
+ * @returns {object}
+ */
+export default function getTribeBackgroundStyle(tribe, { quality='lighter', dimensions='1024x768', isProgressive=false }={}) {
+  const style = {};
+
+  // Set background image
+  // Uses Uploadcare.com to resize and deliver images
+  if (tribe.image_UUID) {
+    const progressive = isProgressive ? 'yes' : 'no';
+
+    const imgParams = [
+      `progressive/${progressive}`,
+      `scale_crop/${dimensions}/center`,
+      `quality/${quality}`,
+      'format/jpeg',
+    ];
+
+    const imageUrl = `https://ucarecdn.com/${tribe.image_UUID}/-/${imgParams.join('/-/')}/`;
+    style.backgroundImage = `url(${imageUrl})`;
+  }
+
+  if (tribe.color) {
+    style.backgroundColor = `#${tribe.color}`;
+  }
+
+  return style;
+}

modules/tribes/client/less/tribes-grid.less

@@ -9,7 +9,7 @@
     background-color: @brand-primary;
     background-size: cover;
     height: 250px;
-    width: 288px;
+    width: 100%;
     margin: 0;
     padding: 0;
     color: #fff;

modules/tribes/client/views/tribes-list.client.view.html

@@ -14,38 +14,12 @@
           ag-grid-width="288"
           ag-gutter-size="10"
           ag-refresh-on-img-load="false">
-        <li class="panel tribe tribe-image"
-            ng-repeat="tribe in tribesList.tribes track by tribe._id"
-            tr-tribe-styles="{{::tribe}}"
-            tr-tribe-styles-dimensions="742x496"
-            tr-tribe-styles-progressive="yes">
-          <a ng-click="tribesList.openTribe(tribe)" class="tribe-link">
-            <span ng-if="::tribe.new" class="tribe-new" aria-hidden="true">
-              <span class="label label-primary">
-                New tribe!
-              </span>
-            </span>
-            <div class="tribe-content" ng-class="{'is-image': tribe.image_UUID}">
-              <h3 class="font-brand-light tribe-label" ng-bind="::tribe.label"></h3>
-              <ng-pluralize
-                class="tribe-meta"
-                count="tribe.count"
-                when="{
-                  '0': 'No members yet',
-                  '1': 'One member',
-                  'other': '{{tribe.count|number}} members'
-                }"></ng-pluralize>
-            </div>
-          </a>
-          <div class="tribe-actions">
-            <join-button
-              ng-if="tribe"
-              tribe="tribe"
-              user="app.user"
-              icon="true"
-              onUpdated="tribesList.broadcastChange"
-            ></join-button>
-          </div>
+        <li ng-repeat="tribe in tribesList.tribes track by tribe._id">
+          <tribe-item
+            tribe="tribe"
+            user="app.user"
+            onMembershipUpdated="tribesList.broadcastChange"
+          ></tribe-item>
         </li>
         <li>
           <suggest-tribe></suggest-tribe>

public/locales/en/tribes.json

@@ -0,0 +1,5 @@
+{
+  "No members yet": "No members yet",
+  "{{count, number}} members": "One member",
+  "{{count, number}} members_plural": "{{count, number}} members"
+}