Api routes

client/src/components/NavBar/NavBar.js

@@ -1,37 +1,83 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import "./NavBar.css";
+import API from "../../utils/API";
 
 class NavBar extends Component {
-
+    state = {
+        name: "",
+        username: "",
+        profileImage: ""
+    };
+
+    componentDidMount() {
+        this.loadProfile();
+    }
+
+    loadProfile = () => {
+        const thisComp = this;
+        API.getUserProfile(this.props.match.params.username).then(res => {
+            console.log(res);
+            thisComp.setState({
+                username: res.username,
+                fullName: res.fullName,
+                imageUrl: res.imageUrl
+            });
+        });
+    };
+
     render() {
         return (
             <nav className="uk-navbar-container" uk-navbar="true">
                 <div className="uk-navbar-left">
                     <ul className="uk-navbar-nav">
                         <li>
-                            <a href="#"><span uk-icon="icon: menu; ratio: 1.3"></span></a>
-                            <div className="uk-navbar-dropdown" uk-dropdown="mode: click; offset: -15; flip: true;">
+                            <a href="#">
+                                <span uk-icon="icon: menu; ratio: 1.3" />
+                            </a>
+                            <div
+                                className="uk-navbar-dropdown"
+                                uk-dropdown="mode: click; offset: -15; flip: true;"
+                            >
                                 <ul className="uk-nav uk-dropdown-nav">
-                                    <li><Link to={"/"}>Home</Link></li>
-                                    <li><Link to={"/friends"}>Friends</Link></li>
+                                    <li>
+                                        <Link to={"/"}>Home</Link>
+                                    </li>
+                                    <li>
+                                        <Link to={"/friends"}>Friends</Link>
+                                    </li>
                                 </ul>
                             </div>
                         </li>
                     </ul>
                 </div>
                 <div className="uk-navbar-center">
-                    <a className="uk-link-reset" href="/"><h3>Lets_Dev</h3></a>
+                    <a className="uk-link-reset" href="/">
+                        <h3>Lets_Dev</h3>
+                    </a>
                 </div>
                 <div className="uk-navbar-right">
                     <ul className="uk-navbar-nav uk-flex-middle">
-                        <li><Link to={"/profile/" + this.props.username} className="uk-link-reset">{this.props.name}</Link></li>
-                        <li><div className="profile-image"></div></li>
+                        <li>
+                            <Link
+                                to={"/profile/" + this.state.username}
+                                className="uk-link-reset"
+                            >
+                                {this.state.fullName}
+                            </Link>
+                        </li>
+                        <li>
+                            <img
+                                className="profile-image"
+                                src={this.state.profileImage}
+                                alt="profile"
+                            />
+                        </li>
                     </ul>
                 </div>
             </nav>
-        )
+        );
     }
 }
 
-export default NavBar;
+export default NavBar;

client/src/components/PendingFriends/PendgingFriends.js

@@ -10,7 +10,7 @@ class PendingFriends extends Component {
                 </div>
                 <table className="uk-table uk-table-divider uk-table-middle uk-margin-top">
                     <tbody>
-                        {this.props.pendingFriends.map(friend => (
+                        {this.props.requests.map(friend => (
                             <tr>
                                 <td className="uk-text-left table-10">
                                     <img

client/src/pages/Friends/Friends.js

@@ -4,45 +4,45 @@ import SearchFriends from "../../components/SearchFriends";
 import PendingFriends from "../../components/PendingFriends";
 import API from "../../utils/API";
 import NavBar from "../../components/NavBar";
+import Cookie from "react-cookie";
 
 class Friends extends Component {
     state = {
         friends: [],
-        pendingFriends: []
+        requests: []
     };
 
     componentDidMount() {
         //loadFriends();
-        //loadPendingFriends();
+        //loadRequests();
     }
 
     loadFriends = () => {
         const thisComp = this;
-        API.getFriends().then(function(res) {
+        const userId = Cookie.get("userId");
+        API.getFriends(userId).then(function(res) {
             thisComp.setState({
                 friends: res.data
             });
         });
     };
 
-    loadPendingFriends = () => {
+    loadRequests = () => {
         const thisComp = this;
-        API.getPendingFriends().then(function(res) {
+        API.displayRequests().then(function(res) {
             thisComp.setState({
-                friends: res.data
+                requests: res.data
             });
         });
     };
 
     render() {
         return (
             <div>
-                <NavBar name="Craig Melville" username="acekreations" />
+                <NavBar />
                 <div className="uk-container uk-container-xsmall">
                     {this.state.pendingFriends.length > 0 && (
-                        <PendingFriends
-                            pendingFriends={this.state.pendingFriends}
-                        />
+                        <PendingFriends requests={this.state.requests} />
                     )}
                     <SearchPeople />
                     {this.state.friends.length > 0 && (

client/src/pages/Home/Home.js

@@ -11,7 +11,7 @@ class Home extends Component {
     render() {
         return (
             <div>
-                <NavBar name="Craig Melville" username="acekreations" />
+                <NavBar />
                 <div className="uk-container uk-container-xsmall">
                     <Stats actions="104" rank="4" globalRank="1286" />
                     <div className="uk-section uk-section-default uk-margin-large-top uk-padding-remove">

client/src/pages/Landing/Landing.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import "./Landing.css";
 import { Animated } from "react-animated-css";
+import API from "../../utils/API";
 
 class Landing extends Component {
     state = {
@@ -25,6 +26,18 @@ class Landing extends Component {
         }
     };
 
+    login = () => {
+        API.login().then(function() {
+            //do stuff
+        });
+    };
+
+    signup = () => {
+        API.signup.then(function() {
+            //do stuff
+        });
+    };
+
     render() {
         return (
             <div className="uk-container-expand landing-container-main">
@@ -36,7 +49,10 @@ class Landing extends Component {
                         >
                             Features
                         </a>
-                        <button className="uk-margin-top landingBtn">
+                        <button
+                            className="uk-margin-top landingBtn"
+                            onClick={this.login}
+                        >
                             Sign In
                         </button>
                     </div>
@@ -54,7 +70,10 @@ class Landing extends Component {
                         </div>
                         <div className="uk-flex uk-flex-middle uk-flex-right">
                             <Animated animationIn="flipInX">
-                                <button className="landingBtn">
+                                <button
+                                    className="landingBtn"
+                                    onClick={this.signup}
+                                >
                                     Sign Up With GitHub{" "}
                                     <span uk-icon="icon: github" />
                                 </button>

client/src/pages/Profile/Profile.js

@@ -1,29 +1,37 @@
 import React, { Component } from "react";
 import Stats from "../../components/Stats";
 import NavBar from "../../components/NavBar";
+import API from "../../utils/API";
 
 class Profile extends Component {
     state = {
-        name: "Craig Melvillle",
-        username: "acekreations",
-        profileImage: "https://via.placeholder.com/350x350",
-        githubURL: "https://github.com/acekreations"
+        name: "",
+        username: "",
+        profileImage: "",
+        githubURL: ""
     };
 
     componentDidMount() {
         this.loadProfile();
     }
 
     loadProfile = () => {
-        console.log(this.props.match.params.username);
-
-        //API call => set state
+        const thisComp = this;
+        API.getUserProfile(this.props.match.params.username).then(res => {
+            console.log(res);
+            thisComp.setState({
+                username: res.username,
+                fullName: res.fullName,
+                imageUrl: res.imageUrl,
+                githubURL: "https://github.com/" + res.username
+            });
+        });
     };
 
     render() {
         return (
             <div>
-                <NavBar name="Craig Melville" username="acekreations" />
+                <NavBar />
                 <div className="uk-flex uk-flex-column uk-flex-middle">
                     <img
                         className="profileImageLg uk-margin-large-top"

client/src/utils/API.js

@@ -1,8 +1,30 @@
 import axios from "axios";
 
 export default {
-    //example
-    getFriends: function() {
-        return axios.get("/api/friends");
+    getUserProfile: function(username) {
+        return axios.get("/api/users/" + username);
+    },
+    displayFriends: function(id) {
+        return axios.get("/api/friends/" + id);
+    },
+    updateActivity: function(id) {
+        return axios.get("/api/update/" + id);
+    },
+    createRequest: function() {
+        //post obj to req.body. user id friend id
+        return axios.post("/api/request");
+    },
+    acceptRequest: function() {
+        //post obj to req.body. user id friend id
+        return axios.put("/api/request");
+    },
+    displayRequests: function(id) {
+        return axios.get("/api/request/" + id);
+    },
+    login: function(username) {
+        return axios.get("/api/login/" + username);
+    },
+    signUp: function() {
+        return axios.post("/api/signup");
     }
 };

config/config.json

@@ -1,23 +1,23 @@
 {
-  "development": {
-    "username": "postgres",
-    "password": "password",
-    "database": "lets_dev_1",
-    "host": "127.0.0.1",
-    "dialect": "postgres"
-  },
-  "test": {
-    "username": "root",
-    "password": null,
-    "database": "database_test",
-    "host": "127.0.0.1",
-    "dialect": "postgres"
-  },
-  "production": {
-    "username": "root",
-    "password": null,
-    "database": "database_production",
-    "host": "127.0.0.1",
-    "dialect": "postgres"
-  }
+    "development": {
+        "username": "postgres",
+        "password": "password",
+        "database": "lets_dev2",
+        "host": "127.0.0.1",
+        "dialect": "postgres"
+    },
+    "test": {
+        "username": "root",
+        "password": null,
+        "database": "database_test",
+        "host": "127.0.0.1",
+        "dialect": "postgres"
+    },
+    "production": {
+        "username": "root",
+        "password": null,
+        "database": "database_production",
+        "host": "127.0.0.1",
+        "dialect": "postgres"
+    }
 }