Merge pull request #16 from andela/create-user-dropdown-menu-167690864

#167690864 Create user dropdown menu

.eslintrc.js

@@ -21,7 +21,13 @@ module.exports = {
   plugins: ['react', 'prettier'],
   globals: {
     Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly'
+    SharedArrayBuffer: 'readonly',
+    SharedArrayBuffer: 'readonly',
+    shallow: true,
+    mount: true,
+    expect: true,
+    render: true,
+    toJson: true
   },
   parserOptions: {
     ecmaFeatures: {
@@ -43,6 +49,7 @@ module.exports = {
     'comma-dangle': 0,
     curly: ['error', 'multi-line'],
     'import/no-unresolved': [2, { commonjs: true }],
-    'no-shadow': ['error', { allow: ['req', 'res', 'err'] }]
+    'no-shadow': ['error', { allow: ['req', 'res', 'err'] }],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
   }
 };

package.json

@@ -86,6 +86,7 @@
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-hot-loader": "^4.12.10",

src/assets/icons/facebook.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const facebook = () => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z" />
+  </svg>
+);
+
+export default facebook;

src/assets/icons/index.js

@@ -1,7 +1,7 @@
-import YoutubeIcon from './youtube.svg';
-import FacebookIcon from './facebook.svg';
-import LinkedInIcon from './linkedin.svg';
-import InstagramIcon from './instagram.svg';
-import TwitterIcon from './twitter.svg';
+// import YoutubeIcon from './youtube.svg';
+// import FacebookIcon from './facebook.svg';
+// import LinkedInIcon from './linkedin.svg';
+// import InstagramIcon from './instagram.svg';
+// import TwitterIcon from './twitter.svg';
 
-export { YoutubeIcon, FacebookIcon, LinkedInIcon, InstagramIcon, TwitterIcon };
+// export { YoutubeIcon, FacebookIcon, LinkedInIcon, InstagramIcon, TwitterIcon };

src/assets/icons/instagram.svg → src/assets/icons/instagram.js

@@ -1,4 +1,7 @@
-	  <svg
+import React from 'react';
+
+const instagram = () => (
+  <svg
     width="15"
     height="15"
     viewBox="0 0 26 26"
@@ -9,4 +12,7 @@
       d="M20.8671 0.306152H5.53183C2.86742 0.306152 0.701416 2.47353 0.701416 5.13657V20.4734C0.701416 23.1378 2.86879 25.3038 5.53183 25.3038H20.8686C23.533 25.3038 25.699 23.1364 25.699 20.4734V5.13657C25.6989 2.47353 23.5315 0.306152 20.8671 0.306152ZM22.3889 3.10112L22.9359 3.09975V7.24843L18.7568 7.26231L18.7429 3.11363L22.3889 3.10112ZM13.2002 8.62288C16.6672 8.62288 17.3822 11.8774 17.3822 12.8062C17.3822 15.1096 15.505 16.9867 13.2002 16.9867C10.8941 16.9867 9.0183 15.1096 9.0183 12.8062C9.01677 11.8774 9.73328 8.62288 13.2002 8.62288ZM22.9596 20.1706C22.9596 21.4911 21.8863 22.5657 20.5631 22.5657H5.79004C4.4682 22.5657 3.39359 21.4925 3.39359 20.1706V10.0225H6.86465C6.54254 10.8153 6.36059 11.8983 6.36059 12.8063C6.36059 16.5746 9.42627 19.6417 13.196 19.6417C16.9656 19.6417 20.0298 16.5746 20.0298 12.8063C20.0298 11.8983 19.8478 10.8153 19.5271 10.0225H22.9565V20.1706H22.9596Z"
       fill="#313131"
     />
-  </svg>
+  </svg>
+);
+
+export default instagram;

src/assets/icons/linkedin.svg → src/assets/icons/linkedin.js

@@ -1,4 +1,7 @@
-	  <svg
+import React from 'react';
+
+const linkedin = () => (
+  <svg
     width="15"
     height="15"
     viewBox="0 0 28 27"
@@ -9,4 +12,7 @@
       d="M27.6046 16.2218V26.4121H21.6969V16.9043C21.6969 14.5158 20.8424 12.8858 18.704 12.8858C17.0716 12.8858 16.1002 13.9843 15.6728 15.0469C15.5169 15.4268 15.4768 15.9556 15.4768 16.4873V26.4121H9.56713C9.56713 26.4121 9.64672 10.3089 9.56713 8.64053H15.4763V11.1596C15.4643 11.1784 15.4487 11.1987 15.4374 11.217H15.4763V11.1596C16.2613 9.95039 17.6634 8.22302 20.8017 8.22302C24.6898 8.22296 27.6046 10.763 27.6046 16.2218ZM3.38532 0.0737305C1.36362 0.0737305 0.0412598 1.39981 0.0412598 3.14365C0.0412598 4.84948 1.32536 6.2158 3.30689 6.2158H3.34636C5.40722 6.2158 6.68889 4.84974 6.68889 3.14365C6.65005 1.39981 5.40722 0.0737305 3.38532 0.0737305ZM0.392245 26.4121H6.29971V8.64053H0.392245V26.4121Z"
       fill="#313131"
     />
-  </svg>
+  </svg>
+);
+
+export default linkedin;

src/assets/icons/twitter.svg → src/assets/icons/twitter.js

@@ -1,3 +1,14 @@
-  <svg width="15" height="15" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+import React from 'react';
+
+const twitter = () => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z" />
-  </svg>
+  </svg>
+);
+
+export default twitter;

src/assets/icons/youtube.svg → src/assets/icons/youtube.js

@@ -1,3 +1,6 @@
+import React from 'react';
+
+const youtube = () => (
   <svg
     width="20"
     height="15"
@@ -9,4 +12,7 @@
       d="M29.8849 2.4329C29.0475 0.943372 28.1387 0.669393 26.2884 0.565203C24.44 0.43979 19.792 0.387695 15.7653 0.387695C11.7308 0.387695 7.08088 0.43979 5.23441 0.563274C3.38794 0.669393 2.47725 0.941443 1.63216 2.4329C0.769698 3.92049 0.325928 6.48278 0.325928 10.9938C0.325928 10.9977 0.325928 10.9996 0.325928 10.9996C0.325928 11.0034 0.325928 11.0054 0.325928 11.0054V11.0092C0.325928 15.501 0.769698 18.0825 1.63216 19.5547C2.47725 21.0442 3.38601 21.3143 5.23248 21.4398C7.08088 21.5478 11.7308 21.6115 15.7653 21.6115C19.792 21.6115 24.44 21.5478 26.2903 21.4417C28.1407 21.3163 29.0494 21.0462 29.8868 19.5566C30.757 18.0845 31.1969 15.5029 31.1969 11.0112C31.1969 11.0112 31.1969 11.0054 31.1969 11.0015V10.9957C31.1969 6.48278 30.757 3.92049 29.8849 2.4329ZM11.9025 16.7879V5.21128L21.5497 10.9996L11.9025 16.7879Z"
       fill="#313131"
     />
-  </svg>
+  </svg>
+);
+
+export default youtube;

src/components/Footer/Footer.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import './Footer.css';
-
-import {
-  YoutubeIcon,
-  FacebookIcon,
-  LinkedInIcon,
-  InstagramIcon,
-  TwitterIcon
-} from '../../assets/icons';
+import YoutubeIcon from '../../assets/icons/youtube';
+import FacebookIcon from '../../assets/icons/facebook';
+import LinkedInIcon from '../../assets/icons/linkedin';
+import InstagramIcon from '../../assets/icons/instagram';
+import TwitterIcon from '../../assets/icons/twitter';
 
 const Footer = () => {
   return (

src/components/userMenu/Menu.css

@@ -0,0 +1,11 @@
+@media only screen and (max-width: 640px) {
+  .menu {
+    width: 100%;
+  }
+  .menu li {
+    text-align: center;
+    font-size: 1.1em;
+    color: #000;
+    border-bottom: 1px dotted #efefef;
+  }
+}

src/components/userMenu/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import './Menu.css';
+
+const Menu = () => (
+  <ul className="absolute right-0 top-0 mt-10 p-5  shadow-lg bg-white z-10 block text-left w-100 menu">
+    <li className="p-3 whitespace-no-wrap text-sm md:text-base text-black-600 hover:text-gray-800 hover:bg-gray-100">
+      <a className="px-2 py-1" href="/">
+        <span>Create Article</span>
+      </a>
+    </li>
+    <li className="p-3 whitespace-no-wrap text-sm md:text-base text-black hover:text-gray-800 hover:bg-gray-100">
+      <a className="px-2 py-1" href="/">
+        <span>My Profile</span>
+      </a>
+    </li>
+    <li className="p-3 whitespace-no-wrap text-sm md:text-base text-black hover:text-gray-800 hover:bg-gray-100">
+      <a className="px-2 py-1" href="/">
+        <span>Admin Management</span>
+      </a>
+    </li>
+    <li className="p-3 whitespace-no-wrap text-sm md:text-base text-black  hover:text-gray-800 hover:bg-gray-100">
+      <a className="px-2 py-1" href="/">
+        <span>Logout</span>
+      </a>
+    </li>
+  </ul>
+);
+
+export default Menu;

src/pages/hompage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/images/logo.png';
 import Footer from '../components/Footer/Footer';
+import Menu from '../components/userMenu';
 
 const Homepage = () => {
   return (
@@ -19,6 +20,7 @@ const Homepage = () => {
         </button>
       </Link>
       <Footer />
+      <Menu />
     </div>
   );
 };

src/pages/loginPage.js

@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-
-class LoginPage extends Component {
-  state = {};
-  style = {
-    backgroundColor: 'sky-blue',
-    color: 'black',
-    padding: '7px 9px',
-    marginLeft: '80%',
-    border: 'none'
-  };
-  input = {
-    width: '100%',
-    border: '1px solid #333',
-    height: '2em'
-  };
-  label = {
-    width: '50%',
-    height: '2em'
-  };
-  render() {
-    return (
-      <>
-        <Link to="/">
-          <button type="button" style={this.style}>
-            Home
-          </button>
-        </Link>
-        <form>
-          <label style={this.label}>Email</label>
-          <input
-            type="email"
-            placeholder="example@email.com"
-            style={this.input}
-          />
-          <label style={this.label}>Password</label>
-          <input type="password" placeholder="......." style={this.input} />
-          <input type="submit" value="login" style={this.style} />
-        </form>
-      </>
-    );
-  }
-}
-
-export default LoginPage;

src/routes/AppRouter.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import LandingPage from '../pages/loginPage';
 import Homepage from '../pages/hompage';
 
 const Routes = () => (
   <Switch>
     <Route path="/" exact component={Homepage} />
-    <Route path="/login" exact component={LandingPage} />
   </Switch>
 );
 

tests/App.spec.js

@@ -1,23 +1,18 @@
 import React from 'react';
-import Jest from 'jest';
 import toJson from 'enzyme-to-json';
 import App from '../src/components/App';
-import { shallow } from './enzyme';
-import LoginPage from '../src/pages/loginPage';
+import { shallow, mount } from './enzyme';
 import HomePage from '../src/pages/hompage';
 import Routes from '../src/routes/AppRouter';
+import Menu from '../src/components/userMenu';
+import Footer from '../src/components/Footer/Footer';
 
 describe('Application test', () => {
   it('should work fine on App', () => {
     const wrapper = shallow(<App />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
-  it('should work fine on Login Page', () => {
-    const wrapper = shallow(<LoginPage />);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
-  });
   it('should work fine Home Page', () => {
     const wrapper = shallow(<HomePage />);
 
@@ -26,6 +21,20 @@ describe('Application test', () => {
   it('should work fine on Routes', () => {
     const wrapper = shallow(<Routes />);
 
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+  it('should render without crashing', () => {
+    const wrapper = mount(<Menu />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.find('[href="/"]')).toHaveLength(4);
+    expect(wrapper.find('a').length).toBeGreaterThan(1);
+    expect(wrapper.find('ul')).toHaveLength(1);
+    expect(wrapper.find('li').length).toBeGreaterThan(1);
+  });
+  it('should render without crashing', () => {
+    const wrapper = shallow(<Footer />);
+
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 });