adding swipe feature - updated dropdown feature to match bootstrap theme with log in page

client/package.json

@@ -21,11 +21,12 @@
     "node-sass": "^4.5.3",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
+    "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
-    "react-menu": "0.0.10",
     "react-redux": "^5.0.6",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
+    "react-swipe-card": "^0.1.4",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",

client/src/App.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import injectTapEventPlugin from 'react-tap-event-plugin';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import io from 'socket.io-client';
+import Main from './Main.jsx';
 import SignupPage from './SignupPage.jsx';
 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 import Greetings from './Greetings.jsx';
@@ -32,6 +34,13 @@ class App extends Component {
     const { isAuthenticated } = this.props.auth;
 
     return (
+      <div>
+        <div className="container">
+          <NavigationBar />
+        </div>
+        <h1><strong>Here are your matches:</strong></h1>
+        <Main />
+
       <div className="container">
         <NavigationBar />
         <Route exact path="/" component={Greetings} />

client/src/Dropdown.jsx

@@ -1,34 +1,16 @@
 import React, { Component } from 'react';
-import Menu from 'react-menu'
-
-const MenuTrigger = Menu.MenuTrigger;
-const MenuOptions = Menu.MenuOptions;
-const MenuOption = Menu.MenuOption;
+import { DropdownButton } from 'react-bootstrap';
+import { MenuItem } from 'react-bootstrap';
 
 class Dropdown extends Component {
-  render (){
+  render () {
     return (
-      <Menu>
-        <MenuTrigger>
-          <p className="dropdown">
-            &#9776; 
-          </p>
-        </MenuTrigger>
-        <MenuOptions>
-          <MenuOption>
-            Profile
-          </MenuOption>
-          <MenuOption>
-            Log In
-          </MenuOption>
-          <MenuOption>
-            Log Out
-          </MenuOption>
-          <MenuOption>
-            Quit
-          </MenuOption>
-        </MenuOptions>
-      </Menu>
+      <DropdownButton title="&#9776;">
+        <MenuItem href="#">Profile</MenuItem>
+        <MenuItem href="/signup">Sign Up</MenuItem>
+        <MenuItem href="/login">Log In</MenuItem>
+        <MenuItem href="#">Log Out </MenuItem>
+      </DropdownButton>
     )
   }
 }

client/src/Main.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Cards, { Card } from 'react-swipe-card';
+
+export default class Main extends Component {
+  render() {
+    // data will be an array of objects(most probably JSON), which each objects will contain the information from a user: username, text description, avatar, etc
+    // Each card should have an output for showing username, avatar, text description, and a button to send an invite
+    const data = ['Match #1', 'Match #2', 'Match #3', 'Match #4', 'Match #5', 'Match #6'];
+    return (
+      <div>
+        <Cards onEnd={() => console.log('end')} className='master-root'>
+          {data.map(item =>
+          //make card and card border bigger
+          //make sure it's mobile responsive
+          <Card
+            onSwipeLeft={() => console.log('swipe left')}
+            onSwipeRight={() => console.log('swipe right')}>
+            <h2>{item}</h2>
+            <img className="avatar" src="" alt="avatar image"/> 
+            <p>Username</p>
+            <p className="card-text-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae risus risus.</p>
+            <button className="btn-poke">Poke!</button>     
+          </Card>
+          )}
+        </Cards>
+      </div>
+    )
+  }
+}

client/src/NavigationBar.jsx

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
+import Dropdown from './Dropdown.jsx';
 import { connect } from 'react-redux';
 import { logout } from '../actions/loginActions.jsx'
 
+
 class NavigationBar extends Component {
 
   logout(e) {
@@ -29,6 +31,12 @@ class NavigationBar extends Component {
       </ul>
     );
 
+
+        <div className="collapse navbar-collapse">
+          <ul className="nav navbar-nav navbar-right">
+            <Dropdown className="navbar-brand" />
+          </ul>
+
     return (
       <nav className="navbar navbar-default">
         <div className="container-fluid">

client/src/index.jsx

@@ -1,7 +1,7 @@
 require('../styles/main.scss');
 
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import ReactDOM from 'react-dom'
 import App from './App.jsx';
@@ -29,9 +29,9 @@ if (localStorage.jwtToken) {
 setAuthorizationToken(localStorage.jwtToken);
 
 ReactDOM.render((
-                  <Provider store={store}>
-                    <Router>
-                      <Route path="/" component={App}>
-                    </Route>
-                    </Router>
-                  </Provider> ), document.getElementById('react-root'));
+  <Provider store={store}>
+    <Router>
+      <Route path="/" component={ App }>
+    </Route>
+    </Router>
+  </Provider> ), document.getElementById('react-root'));

client/styles/main.scss

@@ -1,5 +1,126 @@
 $brand-color: tomato;
 
-h1 {
+body{
+  background: white;
+  margin: 0;
+}
+h1, h2 {
   color: $brand-color;
+  display: flex;
+  justify-content: center;
+}
+nav {
+  background: peachpuff;
+  display: flex;
+  justify-content: space-between; 
+  padding: 10px;
+}
+  .title {
+    margin: 0;
+  }
+  .dropdown {
+    margin: 0;
+  }
+
+  .navbar, .navbar-default{
+    display: block;
+  }
+
+  .caret {
+    display: none;
+  }
+
+.master-root {
+  margin: 20px auto;
+  height: 50px;
+  position: relative;
+  min-height: 400px;
+  max-height: 100px;
+  width: 300px;
+  overflow: hidden;
+  border: 1px solid grey;
+  padding: 0px 0px 10px 0px;
+
+}
+
+  .card {
+  background: peachpuff;
+  background-size: cover;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  cursor: pointer;
+  height: 300px;
+  text-align: center;
+  margin: 0 auto;
+  position: absolute;
+  transition: box-shadow .3s;
+  width: 180px;
+}
+
+.card:hover {
+  background: khaki; 
+}
+
+.card-text-description {
+  font-size: small;
+  overflow-wrap: break-word;
+}
+.btn-poke{
+  margin: 50px;
+
 }
+.animate {
+  transition: transform .3s;
+  box-shadow: none;
+}
+
+.inactive {
+  box-shadow: none;
+}
+
+.alert {
+  width: 45%;
+  min-height: 10%;
+  position: absolute;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity .5s;
+  color: white;
+  vertical-align: middle;
+  line-height: 3rem;
+}
+
+.alert-visible {
+  opacity: 1;
+}
+
+.alert-right {
+  top: 0;
+  right: 0;
+  background: green;
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+}
+
+.alert-left {
+  top: 0;
+  left: 0;
+  background: red;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+
+.alert-top {
+  background: purple;
+  border-radius: 50px;
+  transform: translate(-50%, 0);
+  margin-left: 50%;
+  }
+
+  .alert-bottom {
+  bottom: 0;
+  background: blue;
+  border-top-left-radius: 50px;
+  border-radius: 50px;
+  transform: translate(-50%, 0);
+  margin-left: 50%;
+  }

server/views/index.ejs

@@ -4,13 +4,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
-
-
+
   <title>Hello React</title>
 </head>
-<body>
-  <div id="react-root"></div>
-  <script src="/socket.io/socket.io.js"></script>
-  <script src='http://localhost:<%=process.env.WEBPACK_DEV_PORT%>/bundle.js'></script>
-</body>
+  <body>
+    <div id="react-root"></div>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src='http://localhost:<%=process.env.WEBPACK_DEV_PORT%>/bundle.js'></script>
+  </body>
 </html>