demo ready

client/actions/actions.js

@@ -1,80 +1,87 @@
-import * as types from '../constants/actionTypes';
+import * as types from "../constants/actionTypes";
 
-export const createApp = (app) => {
-  return (dispatch) => {
-    fetch ('http://localhost:3000/createApp'), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8'
-      },
-      body: JSON.stringify({
-
-      })
-    }
-  .then(res => res.json())
-  .then((app) => {
-    dispatch({
-      type: types.CREATE_APP,
-    })
-  })
-  }
-}
+export const createApp = app => {
+  return dispatch => {
+    fetch("http://localhost:3000/createApp"),
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8"
+        },
+        body: JSON.stringify({})
+      }
+        .then(res => res.json())
+        .then(app => {
+          dispatch({
+            type: types.CREATE_APP
+          });
+        });
+  };
+};
 
-export const getApps = () => {
-  return (dispatch) => {
-    fetch('/getApps')
-    .then(res => res.json())
-    .then((res) => {
+export const getApps = userId => {
+  return dispatch => {
+    fetch('/app/getApps')
+      .then(res => res.json())
+      .then(res => {
+        dispatch({
+          type: types.GET_APPS,
+          payload: res
+        });
+      });
+  };
+};
 
-      // see what res is and take it out
-
-      dispatch({
-        type: types.GET_APPS,
-        payload: apps
-      })
-    })
-  }
-}
-
-export const companyChange = (text) => ({
+export const companyChange = text => ({
   type: types.COMPANY_CHANGE,
-  payload: text,
-})
+  payload: text
+});
 
-export const recruiterChange = (text) => ({
+export const recruiterChange = text => ({
   type: types.RECRUITER_CHANGE,
-  payload: text,
-})
+  payload: text
+});
 
-export const contactInfoChange = (text) => ({
+export const contactInfoChange = text => ({
   type: types.CONTACT_INFO_CHANGE,
-  payload: text,
-})
+  payload: text
+});
 
-export const dropdownChange = (value) => ({
+export const dropdownChange = value => ({
   type: types.DROPDOWN_CHANGE,
-  payload: value,
-})
+  payload: value
+});
 
 export const logIn = () => ({
   // return (dispatch) => {
   //   fetch('http://localhost:3000/getuser', {
-  //     method: 
+  //     method:
   //   })
   // }
-  type: types.LOG_IN,
+  type: types.LOG_IN
   // payload: user,
-})
+});
 
-export const checkLogin = () => {
-  return (dispatch) => {
-    fetch ('/login/checkUser')
-    .then(res => res.json())
-    .then((res) => {
+export const signOut = () => {
+  return dispatch => {
+    fetch("/login/signOut")
+    .then(() => {
       dispatch({
-        type: types.CHECK_LOGIN,
-        payload: res.loggedIn,
-      })
+        type: types.SIGN_OUT,
+      });
     });
-  }
-}
+  };
+};
+
+export const checkLogin = () => {
+  return dispatch => {
+    fetch("/login/checkUser")
+      .then(res => res.json())
+      .then(res => {
+        dispatch({
+          type: types.CHECK_LOGIN,
+          payload: res
+        });
+      });
+  };
+};

client/constants/actionTypes.js

@@ -6,4 +6,5 @@ export const RECRUITER_CHANGE = 'RECRUITER_CHANGE';
 export const CONTACT_INFO_CHANGE = 'CONTACT_INFO_CHANGE';
 export const DROPDOWN_CHANGE = 'DROPDOWN_CHANGE';
 export const LOG_IN = 'LOG_IN';
-export const CHECK_LOGIN = 'CHECK_LOGIN';
+export const CHECK_LOGIN = 'CHECK_LOGIN';
+export const SIGN_OUT = 'SIGN_OUT';

client/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './App.jsx';
 import store from './store';
+import './styles.css'
 
 render (
   <Provider store={store}>

client/main-router/Applications.jsx

@@ -1,86 +1,105 @@
-import React from 'react';
-import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
-import { connect } from 'react-redux';
-import CreateApp from '../app-router/CreateApp.jsx';
-import ViewApp from '../app-router/ViewApp.jsx'
-import InterviewQs from './InterviewQs.jsx';
-import Stats from './Stats.jsx';
-import Profile from './Profile.jsx';
-import * as actions from '../actions/actions';
+import React, { useState, useEffect } from "react";
+import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
+import { connect } from "react-redux";
+import CreateApp from "../app-router/CreateApp.jsx";
+import ViewApp from "../app-router/ViewApp.jsx";
+import InterviewQs from "./InterviewQs.jsx";
+import Stats from "./Stats.jsx";
+import Profile from "./Profile.jsx";
+import * as actions from "../actions/actions";
 
 const mapStateToProps = store => ({
   app: store.app,
   user: store.user
-})
+});
 
 const mapDispatchToProps = dispatch => ({
-  onLoad: () => {
-    dispatch(actions.getApps());
+  getApps: userId => {
+    dispatch(actions.getApps(userId));
+  },
+  signOut: () => {
+    dispatch(actions.signOut());
   }
-})
+});
 
-class Applications extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  // componentDidMount() {
-  //   this.props.onLoad();
-  // }
-
-  render() {
-    return(
-      <div>
-        <h1>Your Applications</h1>
-        <button onClick={}>Sign Out</button>
-        <span>Add Job Prospect<button>+</button></span>
-      <BrowserRouter>
-      <div>
-        <ul>
-          <li>
-            <Link to='/applications'>Applications</Link>
-          </li>
-          <li>
-            <Link to='/interview-questions'>Interview Questions</Link>
-          </li>
-          <li>
-            <Link to='/stats'>Stats</Link>
-          </li>
-          <li>
-            <Link to='/profile'>Profile</Link>
-          </li>
-        </ul>
-        <Switch>
-        <Route path='/applications' component={Applications} />
-        <Route path='/interview-questions' component={InterviewQs} />
-        <Route path='/stats' component={Stats} />
-        <Route path='/profile' component={Profile} />
-      </Switch>
+const Applications = (props) => {
+
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (count === 0) {
+      console.log('hello');
+      props.getApps(props.user.userId);
+      setCount(count + 1);
+    }
+  });
+
+    const linkStyle = {
+      textDecoration: "none",
+      marginBottom: '2.5rem', 
+      color: 'rgb(254, 254, 254)',
+      marginLeft: '0.3rem',
+      cursor: 'pointer',
+      fontSize: '1.5rem',
+      fontWeight: '400',
+    }
+
+    const apps = [];
+    if (props.app.appList) {
+      (props.app.appList).forEach((app) => {
+        apps.push(<div className="company">
+          <h3>{app.companyName}</h3>
+          <div className="namepic">
+            <img src={app.logo}></img>
+            <h4>{app.description}</h4>
+          </div>
+          <p id="domain">{app.domain}</p>
+          </div>)
+      });
+    }
+    return (
+      <div className="main">
+        <div className="nav">
+          <h1 id="minilogo">AppliView</h1>
+          <BrowserRouter>
+            <div className="navContent">
+              <Link to="/applications" style={linkStyle}>
+                Applications
+              </Link>
+              <Link
+                to="/interview-questions"
+                style={linkStyle}>
+                Interview Qs
+              </Link>
+              <Link to="/stats" style={linkStyle}>
+                Stats
+              </Link>
+              <Link to="/profile" style={linkStyle}>
+                Profile
+              </Link>
+              <Switch>
+                <Route path="/applications" component={Applications} />
+                <Route path="/interview-questions" component={InterviewQs} />
+                <Route path="/stats" component={Stats} />
+                <Route path="/profile" component={Profile} />
+              </Switch>
+            </div>
+          </BrowserRouter>
+        </div>
+        <div className="content">
+          <span className="topButtons">
+            <button className="addApp">Add Job Prospect +</button>
+            <button className="signOut" onClick={props.signOut}>Sign Out</button>
+          </span>
+          <h1>All Applications</h1>
+          <div className="apps">
+            {apps}
+          </div>
+        </div>
       </div>
-     </BrowserRouter>
-    </div>
-    //   <h1>Hi</h1>
-    // </div>
-      // <div>
-      //   <BrowserRouter>
-      //   <div>
-      //     <ul>
-      //       <li>
-      //         <Link to='/view-app'>View Application</Link>
-      //       </li>
-      //       <li>
-      //         <Link to='/create-app'><button>Add Job Prospect</button></Link>
-      //       </li>
-      //     </ul>
-      //     <Switch>
-      //     <Route exact path='/view-app' component={ViewApp} />
-      //     <Route path='/create-app' component={CreateApp} />
-      //   </Switch>
-      //   </div>
-      // </BrowserRouter>
-      //  
-      // </div>
-    )
-  }
-} 
+    );
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Applications);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Applications);

client/main-router/Logged.jsx

@@ -26,7 +26,6 @@ class Logged extends Component {
 
   render() {
     const checkLog = this.props.user.loggedIn;
-    console.log(checkLog);
     if (!checkLog) return <Login />;
     return <Applications />;
   }

client/main-router/Login.jsx

@@ -11,13 +11,11 @@ const mapDispatchToProps = dispatch => ({
 });
 
 const Login = (props) => {
-
   return (
-    <div>
-      <p>Log in!</p>
-      <br/>
-      <a href='/login/google'>Log In With Google</a>
-      <a href='/login/github'>Log In With GitHub</a>
+    <div className="login">
+      <h1 className="logo">AppliView</h1>
+      <a id="google" href='/login/google'>Log in with <span id="goo">Google</span></a>
+      <a id="github" href='/login/github'>Log in with <span id="git">GitHub</span></a>
     </div>
   );
 };