From 8b836fd45be1019252f04116fed67b0428f50cf7 Mon Sep 17 00:00:00 2001
From: Surendran <surendran@hasura.io>
Date: Thu, 16 May 2019 15:01:22 +0530
Subject: [PATCH] Common nav bar uodate

---
 .../homepage/src/components/CommonNavBar.js   |  60 +++++++
 .../homepage/src/components/Header.js         | 149 +++---------------
 2 files changed, 82 insertions(+), 127 deletions(-)
 create mode 100644 community/learn/graphql-tutorials/backend-services/homepage/src/components/CommonNavBar.js

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/CommonNavBar.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/CommonNavBar.js
new file mode 100644
index 0000000000000..140156304377a
--- /dev/null
+++ b/community/learn/graphql-tutorials/backend-services/homepage/src/components/CommonNavBar.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles/styles.scss';
+class CommonNavBar extends React.Component {
+  render() {
+    const dropPath = 'https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/dropdown-path.svg';
+    return (
+      <li className="dropdown">
+        <div className={'upArrow'}>
+        </div>
+        {/* eslint-disable-next-line */}
+        <a id={this.props.id} className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{this.props.navTitle}</a>
+        <div aria-labelledby="frontend" className="dropdown-menu dropdownMenu">
+          <div className={'dropdownMenuBgImg'}>
+            <img className={'img-responsive'} src={dropPath} alt={'dropPath'} />
+          </div>
+          <div className={'col-md-6 col-sm-6 col-xs-12'}>
+            <div className={'menuTitle'}>
+              {this.props.title}
+            </div>
+            <div className={'purpleLineSeperator'}>
+            </div>
+            <div className={'sectionDescription'}>
+              {this.props.description}
+            </div>
+          </div>
+          <div className={'col-md-6 col-sm-6 col-xs-12'}>
+            <ul className={'dropdownUl'}>
+              {this.props.commonTutorial.map((item, key) => {
+                if(!item.comingSoon) {
+                  return (
+                    <a href={item.url} target={'_blank'}>
+                      <li key={this.props.id + key} className={item.bgClassName}>
+                          {item.name}
+                      </li>
+                    </a>
+                  );
+                } else {
+                  return (
+                    <li key={this.props.id + key} className={item.disableBgClassName + ' displayFlex comingSoonHover'}>
+                      {item.name} <div className={'circle'}></div> <span>Coming soon</span>
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          </div>
+        </div>
+      </li>
+    );
+  }
+}
+CommonNavBar.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  navTitle: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  commonTutorial: PropTypes.array.isRequired,
+}
+export default CommonNavBar;
diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
index 83e01d0947e9a..615e6d8d83298 100644
--- a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
+++ b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import '../styles/styles.scss';
+import CommonNavBar from './CommonNavBar';
 import {frontendTutorial, backendTutorial, mobileTutorial} from './AllState.js'
 class TopBanner extends React.Component {
   render() {
     const logo = 'https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/logo.svg';
-    const dropPath = 'https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/dropdown-path.svg';
     return (
       <div className={'headerWrapper blueBgColor'}>
         <nav className="navbar navbar-default navbarDefault">
@@ -22,132 +22,27 @@ class TopBanner extends React.Component {
             </div>
             <div id="navbar" className="navbar-collapse collapse">
               <ul className="nav navbar-nav navbar-right navBarWrapper">
-                <li className="dropdown">
-                  <div className={'upArrow'}>
-                  </div>
-                  {/* eslint-disable-next-line */}
-                  <a id="frontend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FRONTEND</a>
-                  <div aria-labelledby="frontend" className="dropdown-menu dropdownMenu">
-                    <div className={'dropdownMenuBgImg'}>
-                      <img className={'img-responsive'} src={dropPath} alt={'dropPath'} />
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <div className={'menuTitle'}>
-                        Frontend Tutorials
-                      </div>
-                      <div className={'purpleLineSeperator'}>
-                      </div>
-                      <div className={'sectionDescription'}>
-                        2 hour Frontend GraphQL Tutorial Series to teach you your favourite framework.
-                      </div>
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <ul className={'dropdownUl'}>
-                        {frontendTutorial.map((item, key) => {
-                          if(!item.comingSoon) {
-                            return (
-                              <a href={item.url} target={'_blank'}>
-                                <li key={'frontend'+key} className={item.bgClassName}>
-                                    {item.name}
-                                </li>
-                              </a>
-                            );
-                          } else {
-                            return (
-                              <li key={'frontend'+key} className={item.disableBgClassName + ' displayFlex comingSoonHover'}>
-                                {item.name} <div className={'circle'}></div> <span>Coming soon</span>
-                              </li>
-                            );
-                          }
-                        })}
-                      </ul>
-                    </div>
-                  </div>
-                </li>
-                <li className="dropdown">
-                  <div className={'upArrow'}>
-                  </div>
-                  {/* eslint-disable-next-line */}
-                  <a id="mobile" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MOBILE</a>
-                  <div aria-labelledby="mobile" className="dropdown-menu dropdownMenu">
-                    <div className={'dropdownMenuBgImg'}>
-                      <img className={'img-responsive'} src={dropPath} alt={'dropPath'} />
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <div className={'menuTitle'}>
-                        Mobile Tutorials
-                      </div>
-                      <div className={'purpleLineSeperator'}>
-                      </div>
-                      <div className={'sectionDescription'}>
-                        2 hour mobile GraphQL Tutorial Series to teach you your favourite framework.
-                      </div>
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <ul className={'dropdownUl'}>
-                        {mobileTutorial.map((item, key) => {
-                          if(!item.comingSoon) {
-                            return (
-                              <a href={item.url} target={'_blank'}>
-                                <li key={'mobile'+ key} className={item.bgClassName}>
-                                    {item.name}
-                                </li>
-                              </a>
-                            );
-                          } else {
-                            return (
-                              <li key={'mobile'+key} className={item.disableBgClassName + ' displayFlex comingSoonHover'}>
-                                {item.name} <div className={'circle'}></div> <span>Coming soon</span>
-                              </li>
-                            );
-                          }
-                        })}
-                      </ul>
-                    </div>
-                  </div>
-                </li>
-                <li className="dropdown">
-                  <div className={'upArrow'}>
-                  </div>
-                  {/* eslint-disable-next-line */}
-                  <a id="backend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BACKEND</a>
-                  <div aria-labelledby="backend" className="dropdown-menu dropdownMenu">
-                    <div className={'dropdownMenuBgImg'}>
-                      <img className={'img-responsive'} src={dropPath} alt={'dropPath'} />
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <div className={'menuTitle'}>
-                        Backend Tutorials
-                      </div>
-                      <div className={'purpleLineSeperator'}>
-                      </div>
-                      <div className={'sectionDescription'}>
-                        2 hour backend GraphQL Tutorial Series to teach you your favourite framework.
-                      </div>
-                    </div>
-                    <div className={'col-md-6 col-sm-6 col-xs-12'}>
-                      <ul className={'dropdownUl'}>
-                        {backendTutorial.map((item, key) => {
-                          if(!item.comingSoon) {
-                            return (
-                              <a href={item.url} target={'_blank'}>
-                                <li key={'backend'+key} className={item.bgClassName}>
-                                    {item.name}
-                                </li>
-                              </a>
-                            );
-                          } else {
-                            return (
-                              <li key={'backend'+key} className={item.disableBgClassName + ' displayFlex comingSoonHover'}>
-                                {item.name} <div className={'circle'}></div> <span>Coming soon</span>
-                              </li>
-                            );
-                          }
-                        })}
-                      </ul>
-                    </div>
-                  </div>
-                </li>
+                <CommonNavBar
+                id="frontend"
+                navTitle="FRONTEND"
+                title="Frontend Tutorials"
+                description="2 hour Frontend GraphQL Tutorial Series to teach you your favourite framework."
+                commonTutorial = {frontendTutorial}
+                />
+                <CommonNavBar
+                id="mobile"
+                navTitle="MOBILE"
+                title="Mobile Tutorials"
+                description="2 hour mobile GraphQL Tutorial Series to teach you your favourite framework."
+                commonTutorial={mobileTutorial}
+                />
+                <CommonNavBar
+                id="backend"
+                navTitle="BACKEND"
+                title="Backend Tutorials"
+                description="2 hour backend GraphQL Tutorial Series to teach you your favourite framework."
+                commonTutorial={backendTutorial}
+                />
               </ul>
             </div>
           </div>