Migrate list of tribes to React (#1144)

+ introduce styled-components (https://www.styled-components.com/)

modules/tribes/client/components/JoinButton.js

@@ -59,7 +59,7 @@ export default function JoinButton({ tribe, user, onUpdated, ...rest }) {
 
   const [isUpdating, setIsUpdating] = useState(false);
 
-  const isMemberInitial = user && user.memberIds && user.memberIds.indexOf(tribe._id) > -1;
+  const isMemberInitial = (user?.memberIds || []).includes(tribe._id);
   const [isMember, setIsMember] = useState(isMemberInitial);
 
   /**

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

@@ -2,25 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
 import JoinButton from './JoinButton';
 
 import getTribeBackgroundStyle from './helpers/getTribeBackgroundStyle';
 
-/**
- * @TODO maybe rename to Tribe
- */
-export default function TribeItem({ tribe, user, onMembershipUpdated }) {
+const Container = styled.div.attrs({
+  className: 'panel tribe tribe-image',
+})`
+  // the following styles should have high specificity
+  // https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+  &&& {
+    position: relative;
+    ${({ tribe }) => getTribeBackgroundStyle(tribe, { isProgressive: true, dimensions: '742x496' })}
+  }
+`;
+
+export default function Tribe({ 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' })}
-  >
+  return <Container tribe={tribe}>
     <a href={`/tribes/${tribe.slug}`} className="tribe-link">
       {tribe.new && <span className="tribe-new" aria-hidden={true}>
         <span className="label label-primary">
@@ -40,10 +46,10 @@ export default function TribeItem({ tribe, user, onMembershipUpdated }) {
         onUpdated={onMembershipUpdated}
       />}
     </div>
-  </div>;
+  </Container>;
 }
 
-TribeItem.propTypes = {
+Tribe.propTypes = {
   tribe: PropTypes.object.isRequired,
   user: PropTypes.object,
   onMembershipUpdated: PropTypes.func.isRequired,

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+
+import Tribe from './Tribe';
+import SuggestTribe from './SuggestTribe';
+
+const List = styled.ul.attrs({ className: 'list-unstyled tribes-grid' })`
+  margin: -5px -5px 15px -5px;
+`;
+
+const Item = styled.li`
+  padding: 5px;
+  display: inline-block;
+  vertical-align: bottom;
+
+  // on small screens there is just one column of tribes
+  width: 100%;
+
+  @media (min-width: 616px) {
+    // two columns of tribes
+    width: 50%;
+  }
+
+  @media (min-width: 992px) {
+    // three columns of tribes
+    width: 33.3333%;
+  }
+`;
+
+export default function TribesList({ tribes, user, onMembershipUpdated }) {
+  return (
+    <List>
+      {tribes.map(tribe => (
+        <Item key={tribe._id}>
+          <Tribe
+            tribe={tribe}
+            user={user}
+            onMembershipUpdated={onMembershipUpdated}
+          />
+        </Item>
+      ))}
+      <Item>
+        <SuggestTribe />
+      </Item>
+    </List>
+  );
+}
+
+TribesList.propTypes = {
+  tribes: PropTypes.array.isRequired,
+  user: PropTypes.object,
+  onMembershipUpdated: PropTypes.func.isRequired,
+};

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

@@ -8,23 +8,12 @@
 
   <div class="row">
     <div class="col-xs-12">
-
-      <ul class="list-unstyled tribes-grid"
-          angular-grid="tribesList.tribes"
-          ag-grid-width="288"
-          ag-gutter-size="10"
-          ag-refresh-on-img-load="false">
-        <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>
-        </li>
-      </ul>
+      <tribes-list
+        tribes="tribesList.tribes"
+        user="app.user"
+        onMembershipUpdated="tribesList.broadcastChange"
+      ></tribes-list>
+    </div>
   </div>
 
   <tribes-join-trustroots ng-if="!app.user">