Merge pull request #292 from surpassinggoogle/feature/ulog-subtags

add create community page

.gitignore

@@ -2,6 +2,7 @@
 .save
 *.css.map
 *.css
+*.DS_Store
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template

src/client/community/CreateCommunity.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { message, Collapse, Button, List, Input } from 'antd';
+import * as community from '../helpers/community';
+
+class CreateCommunity extends React.Component {
+  constructor(props) {
+    super(props);
+    // bind the component's methods so that it can be called within render() using this.displayComingSoon()
+    this.displayComingSoon = this.displayComingSoon.bind(this);
+  }
+
+  /*
+   * Display a coming soon message when user clicks on any "Click Here" button
+   */
+  displayComingSoon = () => {
+    message.success('Coming soon!', 3);
+  };
+
+  render() {
+    // for the 'About Ulog' style
+    const customPanelStyle = {
+      marginBottom: 5,
+      overflow: 'hidden',
+    };
+
+    // style for the different grow sections
+    const customCardStyle = {
+      marginBottom: '10px',
+      marginTop: '10px',
+    };
+
+    return (
+      <div className="shifted">
+        <div className="container">
+          <div className="center" style={{ marginBottom: '50px' }}>
+            <h2 style={{ color: 'purple', textAlign: 'center' }}>Create A Ulog-Community</h2>
+            <Collapse defaultActiveKey={['1']}>
+              <Collapse.Panel header="About Communities" key="1" style={customPanelStyle}>
+                <p>
+                  <ReactMarkdown source={community.aboutCommunities} />
+                </p>
+              </Collapse.Panel>
+            </Collapse>
+
+            <Collapse defaultActiveKey={['1']}>
+              <Collapse.Panel showArrow={false} key="1">
+                <List itemLayout="vertical" size="large">
+                  <List.Item
+                    key="Create A Ulog-Community"
+                  >
+                    <h3>Create A Ulog-Community</h3>
+                    <div style={customCardStyle}>
+                      <ReactMarkdown source={community.createCommunity} />
+                    </div>
+                    <Input type="text" placeholder="Names should be a maximum of 19 characters, only alphabets, no special characters." allowClear />
+                    <Button
+                      type="primary"
+                      onClick={this.displayComingSoon}
+                      style={{ marginTop: '10px' }}
+                    >
+                      Create Now
+                    </Button>
+                  </List.Item>
+
+                </List>
+              </Collapse.Panel>
+            </Collapse>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CreateCommunity;

src/client/helpers/community.js

@@ -0,0 +1,17 @@
+export const aboutCommunities = `
+"Communities" is a core aspect of the ulogs.org ecosystem. A ulog-community is a community born around the art of ulogging.    
+   
+A ulog-subtag however, is a simple fusion between #ulog and a hashtag. Ulog-subtags simplifies the art of ulogging while maintaining its essence, by allowing users to ulog about niche-based topics. It also further incites users to be inventive with content-creation, unites existing STEEM communities by drawing "true fans" towards these communities and enhances content creation/curation.    
+   
+Each ulog-subtag has the potential of emanating a ulog-community. You can take a step towards creating a ulog-community, if you are a "certified ulogger".    
+ 
+
+Visit https://ulogs.org/discover to see if you are "certified". To become a "certified ulogger", contact us.
+
+ 
+ 
+
+Read more about ulog-subtags & ulog-communities here!
+`;
+
+export const createCommunity = `Ulog-Community Name (Whatever name you chose will be prefixed by "#ulog-")`;

src/common/routes.js

@@ -29,6 +29,7 @@ import Discover from '../client/discover/Discover';
 import Search from '../client/search/Search';
 import Ulogging from '../client/ulogging/Ulogging';
 import Grow from '../client/grow/Grow';
+import CreateCommunity from '../client/community/CreateCommunity';
 import Notifications from '../client/notifications/Notifications';
 import Error404 from '../client/statics/Error404';
 import ExitPage from '../client/statics/ExitPage';
@@ -169,6 +170,10 @@ const routes = [
         path: '/grow',
         component: Grow,
       },
+      {
+        path: '/create-community',
+        component: CreateCommunity,
+      },
       {
         path: '/bropro',
         component: Bropro,