testing

client/src/App.js

@@ -1,16 +1,23 @@
-import { ApolloProvider, ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
+import {
+  ApolloProvider,
+  ApolloClient,
+  InMemoryCache,
+  createHttpLink,
+} from "@apollo/client";
 import React from "react";
-import Profile from './pages/Profile';
-import './App.css';
-import main from "./images/main.svg"
-import './index.css'
-import Header from './components/Header';
-import Home from './pages/Home';
-
-
+import Profile from "./pages/Profile";
+import "./App.css";
+import main from "./images/main.svg";
+import "./index.css";
+import Header from "./components/Header";
+import Home from "./pages/Home";
+//RVB
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Layout from "./pages/Layout";
+import ProfileNav from "./components/ProfileNav";
 
 const httpLink = createHttpLink({
-  uri: '/graphql',
+  uri: "/graphql",
 });
 
 const client = new ApolloClient({
@@ -21,12 +28,19 @@ const client = new ApolloClient({
 function App() {
   return (
     <ApolloProvider client={client}>
-    <div className="App">
-      <main>  
-        <Header></Header>
-        <Home></Home>
-    </main>
-    </div>
+      <div className="App">
+        <main>
+          <Header></Header>
+          <Home></Home>
+          <BrowserRouter>
+            <Routes>
+
+                <Route path="profile" element={<Profile />} />
+
+            </Routes>
+          </BrowserRouter>
+        </main>
+      </div>
     </ApolloProvider>
   );
 }

client/src/components/ProfileNav/index.js

@@ -13,7 +13,7 @@ const ProfileNav = (props) => {
   } = props;
 
   useEffect(() => {
-    document.title = currentCategory.name;
+    document.title = "Profile";
   }, [currentCategory]);
 
   return (
@@ -26,7 +26,7 @@ const ProfileNav = (props) => {
           alt="logo"
         />
       </a>
-      <nav className="text-center">
+      <nav className="text-allign">
         <ul className="flex-row">
           <li className="mx-2">
             <a
@@ -38,22 +38,25 @@ const ProfileNav = (props) => {
             >About </a>
           </li>
           <li className={`mx-2 ${workSelected && "navActive"}`}>
-            <span
+          <a
+              data-testid="work"
+              href="#work"
               onClick={() =>
-                setWorkSelected(true) || setSavedListSelected(false)
-              } >
-              <a href="#projects">Projects</a>
-            </span>
+                setSavedListSelected(false) || setWorkSelected(false)
+              }
+            >Work </a>
           </li>
           <li className={`mx-2 ${savedListSelected && "navActive"}`}>
-            <span
+          <a
+              data-testid="saved"
+              href="#saved"
               onClick={() =>
-                setSavedListSelected(true) || setWorkSelected(false)
+                setSavedListSelected(false) || setWorkSelected(false)
               }
-            >
-              Saved
-            </span>
+            >Saved </a>
           </li>
+
+
 
           {categories.map((category) => (
             <li

client/src/index.css

@@ -1297,4 +1297,9 @@ button a.btn{
   color: var(--light);
   font-size: larger;
   padding-left: 30px;
+}
+
+.navBarClass {
+  display: flex;
+  flex-wrap: wrap;
 }

client/src/pages/Layout.js

@@ -0,0 +1,18 @@
+import { Outlet, Link } from "react-router-dom";
+
+const Layout = () => {
+  return (
+    <>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/profile">Profile</Link>
+          </li>
+        </ul>
+      </nav>
+      <Outlet />
+    </>
+  )
+};
+
+export default Layout;

client/src/pages/Profile.js

@@ -3,47 +3,27 @@ import React from "react";
 import cover from "../images/logo-black.png";
 import About from "../components/About";
 import ProfileNav from "../components/ProfileNav";
-
+import UploadAndDisplayImage from "../utils/imageUpload";
 
 const Profile = () => {
   return (
     <div>
       <div className="profileTop">
-        <img
-          src={cover}
-          className="my-2"
-          style={{ width: "50%" }}
-          alt="cover"
-        />
         <div className="userInfo">
-          <img
-            src={cover}
-            className="profilePic"
-            style={{ width: "10%" }}
-            alt="profilepic"
-          />
-          <button className="followBtn">+</button>
-          <div className="flex-row mb-3">
-        <h2 className="bg-dark text-secondary p-3 display-inline-block">
-          {/* Viewing <usernames>'s profile. */}
-        </h2>
-      </div>
-
+
         </div>
-        <ul>
-            <li>Work</li>
-            <li>Followers</li>
-            <li>Likes</li>
+        <ul className="flex-row">
+          <li><UploadAndDisplayImage></UploadAndDisplayImage></li>
+          <li>Work</li>
+          <li>Followers</li>
+          <li>Likes</li>
         </ul>
       </div>
-      <ProfileNav></ProfileNav>
-      <div className="nav">
-    <About></About>
-
+      <div className="flex-row">
+        <ProfileNav></ProfileNav>
       </div>
-
     </div>
   );
 };
 
-export default Profile;
+export default Profile;

client/src/utils/imageUpload.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+const UploadAndDisplayImage = () => {
+  const [selectedImage, setSelectedImage] = useState(null);
+
+  return (
+    <div>
+      {selectedImage && (
+        <div>
+        <img alt="not fount" width={"250px"} src={URL.createObjectURL(selectedImage)} />
+        <br />
+    {/* User photo */}
+        <button onClick={()=>setSelectedImage(null)}>Remove</button>
+        </div>
+      )}
+      <br />
+
+      <br /> 
+      <input
+        type="file"
+        name="myImage"
+        onChange={(event) => {
+          console.log(event.target.files[0]);
+          setSelectedImage(event.target.files[0]);
+        }}
+      />
+    </div>
+  );
+};
+
+export default UploadAndDisplayImage;