From 44ac7956e28ecdc1869762c5b52db6ad72b42ff8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 3 Jan 2017 13:35:35 +0000
Subject: [PATCH] empty components

---
 frontend/locales/en-us.json               |  1 +
 frontend/src/components/empty/projects.js | 19 ++++++++++
 frontend/src/components/empty/services.js | 43 +++++++++++++++++++++++
 frontend/src/containers/projects/index.js |  9 ++---
 frontend/src/containers/services/index.js | 41 +--------------------
 5 files changed, 66 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/empty/projects.js
 create mode 100644 frontend/src/components/empty/services.js

diff --git a/frontend/locales/en-us.json b/frontend/locales/en-us.json
index 0efcd962..8262cd3b 100644
--- a/frontend/locales/en-us.json
+++ b/frontend/locales/en-us.json
@@ -9,6 +9,7 @@
   "create-new": "Create a new",
   "add-services": "Add services",
   "no-services": "You don’t have any services. You can either add them by editing a manifest file or by connecting your repo on GitHub or BitBucket.",
+  "no-projects": "You don’t have any projects.",
   "edit-project-manifest": "Edit project manifest",
   "or-bring-in-from": "or bring in from",
   "your-settings": "Your settings",
diff --git a/frontend/src/components/empty/projects.js b/frontend/src/components/empty/projects.js
new file mode 100644
index 00000000..f9bac6ae
--- /dev/null
+++ b/frontend/src/components/empty/projects.js
@@ -0,0 +1,19 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <Row>
+    <Column xs={12}>
+      <p name='empty'>
+        <FormattedMessage id='no-projects' />
+      </p>
+    </Column>
+  </Row>
+);
diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js
new file mode 100644
index 00000000..0ca25851
--- /dev/null
+++ b/frontend/src/components/empty/services.js
@@ -0,0 +1,43 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Button = require('@ui/components/button');
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <div>
+    <Row name='empty-services'>
+      <Column md={6} xs={12}>
+        <h3>
+          <FormattedMessage id='add-services' />
+        </h3>
+        <p>
+          <FormattedMessage id='no-services' />
+        </p>
+      </Column>
+    </Row>
+    <Row>
+      <Button>
+        <FormattedMessage id='edit-project-manifest' />
+      </Button>
+    </Row>
+    <Row>
+      <p>
+        <FormattedMessage id='or-bring-in-from' />
+      </p>
+    </Row>
+    <Row>
+      <Column>
+        <Button secondary>GitHub</Button>
+      </Column>
+      <Column>
+        <Button secondary>BitBucket</Button>
+      </Column>
+    </Row>
+  </div>
+);
diff --git a/frontend/src/containers/projects/index.js b/frontend/src/containers/projects/index.js
index 4e291c41..9af5b747 100644
--- a/frontend/src/containers/projects/index.js
+++ b/frontend/src/containers/projects/index.js
@@ -5,6 +5,7 @@ const ReactRouter = require('react-router');
 
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
+const EmptyProjects = require('@components/empty/projects');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const selectors = require('@state/selectors');
@@ -31,13 +32,7 @@ const Projects = ({
   projects = []
 }) => {
   const empty = projects.length ? null : (
-    <Row>
-      <Column xs={12}>
-        <p name='empty'>
-          <FormattedMessage id='no-personal-projects' />
-        </p>
-      </Column>
-    </Row>
+    <EmptyProjects />
   );
 
   const _projects = projects.map((project) => (
diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js
index f03d507f..244cae8f 100644
--- a/frontend/src/containers/services/index.js
+++ b/frontend/src/containers/services/index.js
@@ -1,10 +1,8 @@
 const React = require('react');
-const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
 const ReactRouter = require('react-router');
 
-const Button = require('@ui/components/button');
-const Column = require('@ui/components/column');
+const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const selectors = require('@state/selectors');
@@ -13,10 +11,6 @@ const {
   connect
 } = ReactRedux;
 
-const {
-  FormattedMessage
-} = ReactIntl;
-
 const {
   orgByIdSelector,
   projectByIdSelector,
@@ -27,39 +21,6 @@ const {
   Link
 } = ReactRouter;
 
-const EmptyServices = () => (
-  <div>
-    <Row name='empty-services'>
-      <Column md={6} xs={12}>
-        <h3>
-          <FormattedMessage id='add-services' />
-        </h3>
-        <p>
-          <FormattedMessage id='no-services' />
-        </p>
-      </Column>
-    </Row>
-    <Row>
-      <Button>
-        <FormattedMessage id='edit-project-manifest' />
-      </Button>
-    </Row>
-    <Row>
-      <p>
-        <FormattedMessage id='or-bring-in-from' />
-      </p>
-    </Row>
-    <Row>
-      <Column>
-        <Button secondary>GitHub</Button>
-      </Column>
-      <Column>
-        <Button secondary>BitBucket</Button>
-      </Column>
-    </Row>
-  </div>
-);
-
 const Services = ({
   org = {},
   project = {},