conflicts

client/src/App.js

@@ -17,6 +17,12 @@ import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import SingleProject from "./pages/SingleProject";
 import ProfileMain from "./pages/ProfileMain";
+<<<<<<< HEAD
+=======
+import ProfileProjects from "./pages/ProfileProjects";
+import ProfileComments from "./pages/ProfileComments";
+import FriendTab from "./pages/FriendTab";
+>>>>>>> 96afe5b17b2b8d77c2a1b8538d1c1e83b58a60a4
 
 const httpLink = createHttpLink({
   uri: "/graphql",
@@ -41,6 +47,7 @@ function App() {
   return (
     <ApolloProvider client={client}>
       <Router>
+<<<<<<< HEAD
         <div className="app-container d-flex flex-column dark-main-bg">
           <Header />
           <main>
@@ -63,6 +70,31 @@ function App() {
           </main>
           <Footer />
         </div>
+=======
+        <Header />
+        <main className="App custom-height bg-secondary">
+          <Routes>
+            <Route path="/single-project/:id" element={<SingleProject />} />
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<Signup />} />
+            <Route path="/profile" element={<ProfileMain />} />
+            <Route
+              path="/profile/user-projects"
+              element={<ProfileProjects />}
+            />
+            <Route
+              path="/profile/user-comments"
+              element={<ProfileComments />}
+            />
+            <Route
+              path="/profile/friend-list"
+              element={<FriendTab />}
+            />
+          </Routes>
+        </main>
+        <Footer />
+>>>>>>> 96afe5b17b2b8d77c2a1b8538d1c1e83b58a60a4
       </Router>
     </ApolloProvider>
   );

client/src/components/FriendList/index.js

@@ -2,7 +2,9 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Row, Col, Card, Button, ButtonGroup } from "react-bootstrap";
 
+
 const FriendList = ({ friendCount, username, friends }) => {
+
   if (!friends || !friends.length) {
     return (
       <Col className="py-3">

client/src/components/FriendSearch/index.js

@@ -0,0 +1,63 @@
+import React from "react";
+import {useState} from 'react';
+import { Link } from "react-router-dom";
+import { Row, Col, Card, Button, ButtonGroup } from "react-bootstrap";
+import { useQuery } from "@apollo/client";
+import { useMutation } from "@apollo/client";
+import { QUERY_USERS} from "../../utils/queries";
+import { ADD_FRIEND } from "../../utils/mutations";
+
+const FriendSearch = () => {
+  const { loading, data } = useQuery(QUERY_USERS);
+  const [addFriend] = useMutation(ADD_FRIEND);
+
+  const [buttonText, setButtonText] = useState('Add Friend');
+
+
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  const handleClick = async (event) => {
+
+    try {
+      await addFriend({
+        variables: { _id: event.target.value  }
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <>
+      {data.users.map((user) => (
+        <Col className="py-3" key={user.username}>
+
+          <Card className="bg-black bg-gradient text-white shadow">
+            <div className="d-flex flex-column align-items-center px-3">
+              <img
+                src={user.profileImage}
+                alt="profilepic"
+                style={{ borderRadius: "50%", width: "50%" }}
+                className="my-3"
+              ></img>
+              <h5>{user.username}</h5>
+              <button
+                className="btn w-100 display-block mb-2 btn-primary "
+                value={user._id}
+                onClick={handleClick}
+              >
+                <i className="bi bi-suit-heart-fill text-white"></i> {buttonText}
+              </button>
+            </div>
+          </Card>
+
+        </Col>
+      ))}
+    </>
+  );
+};
+
+export default FriendSearch;

client/src/components/ProfileNav/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Container, Row, Col, Card } from "react-bootstrap";
+import { Navbar } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+
+
+
+
+const ProfileNav = () => {
+
+  return (
+    <Container>
+      <Card className="bg-dark bg-gradient text-white shadow">
+        <Navbar className="flex-column" variant="dark" expand="md">
+          <NavLink to="/profile" className="nav-link">
+            Account
+          </NavLink>
+          <NavLink to="/profile/user-projects" className="nav-link">
+            Your Projects
+          </NavLink>
+          <NavLink to="/profile/user-comments" className="nav-link">
+            Your Comments
+          </NavLink>
+        </Navbar>
+      </Card>
+    </Container>
+  );
+};
+
+export default ProfileNav;

client/src/pages/FriendTab.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Navigate, useParams } from "react-router-dom";
+import { Container, Row, Col } from "react-bootstrap";
+import ProjectForm from "../components/ProjectForm";
+import ProjectList from "../components/ProjectList";
+import ProfileNav from "../components/ProfileNav";
+//import ProfileError from "../components/ProfileError";
+import { useQuery, useMutation } from "@apollo/client";
+import { QUERY_USER, QUERY_ME, QUERY_USERS} from "../utils/queries";
+import Auth from "../utils/auth";
+import FriendSearch from "../components/FriendSearch";
+
+const FriendTab = (props) => {
+  const { username: userParam } = useParams();
+  const { loading, data } = useQuery(userParam ? QUERY_USER : QUERY_ME, {
+    variables: {
+      input: {
+        username: userParam,
+      },
+    },
+  });
+
+  const user = data?.me || data?.user || {};
+
+  // navigate to personal profile page if username is yours
+  if (Auth.loggedIn() && Auth.getProfile().data.username === userParam) {
+    return <Navigate to="/profile/user-projects:username" />;
+  }
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Container id="profile-info" className="py-3">
+      <Row>
+        <Col >
+          <Row xs={3} className="g-4">
+          <FriendSearch />
+          </Row>
+        </Col>
+
+        <Col xs={3}>
+          <Row>
+            <ProfileNav />
+          </Row>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default FriendTab;

client/src/pages/Home.js

@@ -4,13 +4,14 @@ import ProjectForm from '../components/ProjectForm';
 import ProjectList from '../components/ProjectList';
 import SearchBar from '../components/SearchBar';
 import { QUERY_PROJECTS } from '../utils/queries';
-import { useQuery } from '@apollo/client';
+import { useQuery, useState } from '@apollo/client';
 
 const Home = () => {
 
   const { loading, data } = useQuery(QUERY_PROJECTS);
   const projects = data?.projects || [];
 
+
   return (
     // section for Homepage
     <div id="home" className="scroll-margin">

client/src/pages/ProfileMain.js

@@ -11,7 +11,11 @@ import CommentList from "../components/CommentList";
 import ProjectList from "../components/ProjectList";
 import Auth from "../utils/auth";
 
+import { ADD_FRIEND } from "../utils/mutations";
+
 const ProfileMain = (props) => {
+  const [addFriend] = useMutation(ADD_FRIEND);
+
   const { username: userParam } = useParams();
   console.log(userParam);
 
@@ -49,7 +53,18 @@ const ProfileMain = (props) => {
     );
   }
 
+  const handleClick = async () => {
+    try {
+      await addFriend({
+        variables: { id: user._id },
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
+<<<<<<< HEAD
     <Container className="py-4">
       <Tab.Container
         id="profile-tabs"
@@ -90,6 +105,26 @@ const ProfileMain = (props) => {
           </Col>
         </Row>
       </Tab.Container>
+=======
+    <Container id="profile-info" className="py-3">
+      <Row>
+        <Col xs={9}>
+          <Row>
+            <UserInfo username={user.username} joinDate={user.createdAt} />
+          </Row>
+        </Col>
+
+        <Col xs={3}>
+          <Row>
+            <ProfileNav />
+            <FriendList />
+            <button className="btn ml-auto" onClick={handleClick}>
+              Add Friend
+            </button>
+          </Row>
+        </Col>
+      </Row>
+>>>>>>> 96afe5b17b2b8d77c2a1b8538d1c1e83b58a60a4
     </Container>
   );
 };

client/src/utils/mutations.js

@@ -128,5 +128,18 @@ export const ADD_PROJECT = gql`
       lastEditedAt
       commentCount
     }
+    `
+
+export const ADD_FRIEND = gql`
+  mutation addFriend($id: ID!) {
+    addFriend( _id: $id) {
+      _id
+      username
+      friendCount
+      friends {
+        _id
+        username
+      }
+    }
   }
 `;

client/src/utils/queries.js

@@ -129,3 +129,16 @@ export const QUERY_COMMENT = gql`
     }
   }
 `;
+
+export const QUERY_USERS = gql`
+    query Query {
+  users {
+    _id
+    username
+    profileImage
+    projects {
+      projectTitle
+    }
+  }
+}
+`;

server/schemas/typeDefs.js

@@ -1,6 +1,7 @@
 const { gql } = require("apollo-server-express");
 
 const typeDefs = gql`
+
   type User {
     _id: ID
     username: String
@@ -79,6 +80,7 @@ const typeDefs = gql`
     addUser(username: String!, email: String!, password: String!): Auth
     editUser(input: EditUserInput, _id: ID!): Auth
     deleteUser(_id: ID!): User
+    addFriend(_id: ID!): User
     addProject(
       projectTitle: String!
       projectTags: [String]!