From e34e4fae70255ea226d0d8a9f05da7bd68ef6726 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin.piouffle@gmail.com>
Date: Tue, 23 Apr 2019 19:28:09 +0200
Subject: [PATCH] feat(Collective): Add initial page with proper styleguidist
 config

---
 src/components/collective-page/index.js | 28 ++++++++
 src/pages/new-collective-page.js        | 85 +++++++++++++++++++++++++
 src/server/pages.js                     |  3 +
 styleguide.config.js                    | 11 +++-
 4 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 src/components/collective-page/index.js
 create mode 100644 src/pages/new-collective-page.js

diff --git a/src/components/collective-page/index.js b/src/components/collective-page/index.js
new file mode 100644
index 00000000000..e0286dfc981
--- /dev/null
+++ b/src/components/collective-page/index.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@rebass/grid';
+
+/**
+ * This is the collective page main layout, holding different blocks together
+ * and watching scroll to synchronise the view for children properly.
+ *
+ * See design: https://www.figma.com/file/e71tBo0Sr8J7R5n6iMkqI42d/09.-Collectives?node-id=2338%3A36062
+ */
+export default class CollectivePage extends Component {
+  static propTypes = {
+    collective: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      slug: PropTypes.string.isRequired,
+    }).isRequired,
+  };
+
+  render() {
+    const { name } = this.props.collective;
+    return (
+      <Flex justifyContent="center" p={5}>
+        Hello {name} V2!
+      </Flex>
+    );
+  }
+}
diff --git a/src/pages/new-collective-page.js b/src/pages/new-collective-page.js
new file mode 100644
index 00000000000..d9ce2c03318
--- /dev/null
+++ b/src/pages/new-collective-page.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+import { get } from 'lodash';
+
+import withIntl from '../lib/withIntl';
+import { withUser } from '../components/UserProvider';
+import ErrorPage from '../components/ErrorPage';
+import Page from '../components/Page';
+import Loading from '../components/Loading';
+import CollectivePage from '../components/collective-page';
+
+/**
+ * The main page to display collectives. Wrap route parameters and GraphQL query
+ * to render `components/collective-page` with everything needed.
+ */
+class NewCollectivePage extends React.Component {
+  static propTypes = {
+    data: PropTypes.object.isRequired, // from withData
+    slug: PropTypes.string.isRequired,
+  };
+
+  static getInitialProps({ query: { slug } }) {
+    return { slug };
+  }
+
+  // See https://github.com/opencollective/opencollective/issues/1872
+  shouldComponentUpdate(newProps) {
+    if (get(this.props, 'data.Collective') && !get(newProps, 'data.Collective')) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  getPageMetaData(collective) {
+    if (collective) {
+      return {
+        title: collective.name,
+        description: collective.description || collective.longDescription,
+        twitterHandle: collective.twitterHandle || get(collective, 'parentCollective.twitterHandle'),
+        image: collective.image || get(collective, 'parentCollective.image'),
+      };
+    } else {
+      return {
+        title: 'Collective',
+        image: '/static/images/defaultBackgroundImage.png',
+      };
+    }
+  }
+
+  render() {
+    const { data } = this.props;
+
+    return !data || data.error ? (
+      <ErrorPage data={data} />
+    ) : (
+      <Page {...this.getPageMetaData(data.collective)}>
+        {data.loading || !data.Collective ? <Loading /> : <CollectivePage collective={data.Collective} />}
+      </Page>
+    );
+  }
+}
+
+const getCollective = graphql(gql`
+  query NewCollectivePage($slug: String!) {
+    Collective(slug: $slug) {
+      id
+      slug
+      name
+      description
+      image
+      twitterHandle
+      githubHandle
+      parentCollective {
+        id
+        image
+        twitterHandle
+      }
+    }
+  }
+`);
+
+export default withUser(getCollective(withIntl(NewCollectivePage)));
diff --git a/src/server/pages.js b/src/server/pages.js
index ef6bca0ff47..2247ce52e8f 100644
--- a/src/server/pages.js
+++ b/src/server/pages.js
@@ -131,6 +131,9 @@ pages.add(
 // Collective
 // ----------
 
+// New collective page
+pages.add('new-collective-page', '/:slug/v2');
+
 pages.add('collective', '/:slug');
 
 export default pages;
diff --git a/styleguide.config.js b/styleguide.config.js
index 8d72e7a900a..d85740c44f3 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -4,7 +4,9 @@ const fileExistsCaseInsensitive = require('react-styleguidist/lib/scripts/utils/
 module.exports = {
   assetsDir: 'styleguide',
   getExampleFilename(componentPath) {
-    const examplePath = path.join(__dirname, 'styleguide', 'examples', `${path.parse(componentPath).name}.md`);
+    const parsedPath = path.parse(componentPath);
+    const parentDir = parsedPath.dir.split('src/components/')[1] || '';
+    const examplePath = path.join(__dirname, 'styleguide', 'examples', parentDir, `${parsedPath.name}.md`);
     return fileExistsCaseInsensitive(examplePath) || false;
   },
   pagePerSection: true,
@@ -21,7 +23,12 @@ module.exports = {
       name: 'UI',
       content: 'styleguide/pages/UI.md',
       components: 'src/components/*.js',
-      ignore: ['src/components/Contribute*.js', 'src/components/Styled*.js'],
+      ignore: ['src/components/Contribute*.js', 'src/components/Styled*.js', 'src/components/collective-page/*.js'],
+    },
+    {
+      name: 'Collective Page',
+      components: 'src/components/collective-page/*.js',
+      description: 'These components are used on the donate/contribute flow.',
     },
     {
       name: 'Contribution Flow',