Add user project feed

Relates #13

Co-authored-by: Alexreid95 <[email protected]>

wip-app/src/components/ProjectFeed/ProjectFeed.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ProjectCard from "../../components/ProjectCard/ProjectCard";
 import { ProjectGrid } from "./ProjectFeed.style";
 

wip-app/src/pages/UserPage/UserPage.js

@@ -1,23 +1,23 @@
 import React from "react";
-import { getUser } from "../../utils/get-fetch";
+import { getUser, getUserPageProjects } from "../../utils/get-fetch";
+import { ProfileCard } from "./UserPage.style";
+import ProjectFeed from "../../components/ProjectFeed/ProjectFeed";
 
 const UserPage = (props) => {
   const [userInfo, setUserInfo] = React.useState([]);
+  const [userProjects, setUserProjects] = React.useState([]);
 
   React.useEffect(() => {
     getUser().then((userInfo) => {
       setUserInfo(userInfo);
     });
   }, []);
 
-  // email: "[email protected]"
-  // id: 2
-  // user_bio: "I love colours they are so nice"
-  // user_link_1: "www.facebook.com"
-  // user_link_2: "www.instagram.com"
-  // user_link_3: "www.twitter.com"
-  // user_vocation: "professional animator"
-  // username: "Jacko"
+  React.useEffect(() => {
+    getUserPageProjects().then((userProjects) => {
+      setUserProjects(userProjects);
+    });
+  }, []);
 
   const {
     username,
@@ -29,20 +29,44 @@ const UserPage = (props) => {
     user_link_3,
   } = userInfo;
 
+  console.log("userlink", user_link_1);
+
   return (
     <>
-      {userInfo !== [] ? (
+      {userInfo === [] || userProjects === [] ? (
+        <h1>Loading...</h1>
+      ) : (
+        // this is not rendering
         <>
-          <h1>{username}'s Profile</h1>
-          <p>{email}</p>
-          <a href={user_link_1}>Link 1</a>
-          <a href={user_link_2}>Link 2</a>
-          <a href={user_link_3}>Link 3</a>
-          <p>{user_bio}</p>
-          <p>{user_vocation}</p>
+          <ProfileCard>
+            <h1>{username}'s Profile</h1>
+            <p>{email}</p>
+            <a
+              href={"https://" + user_link_1}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Link 1
+            </a>
+            <a
+              href={"https://" + user_link_2}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Link 2
+            </a>
+            <a
+              href={"https://" + user_link_3}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Link 3
+            </a>
+            <p>{user_bio}</p>
+            <p>{user_vocation}</p>
+          </ProfileCard>
+          <ProjectFeed projects={userProjects} />
         </>
-      ) : (
-        <h1>Loading...</h1>
       )}
     </>
   );

wip-app/src/pages/UserPage/UserPage.style.js

@@ -1 +1,9 @@
 import styled from "styled-components";
+
+const ProfileCard = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export { ProfileCard };

wip-app/src/utils/get-fetch.js

@@ -47,4 +47,12 @@ function explorePage() {
   return getFetch(options);
 }
 
-export { feedPage, getUser, explorePage };
+function getUserPageProjects() {
+  const options = {
+    endpoint: "userprojects",
+    errorMessage: "Project feed error",
+  };
+  return getFetch(options);
+}
+
+export { feedPage, getUser, explorePage, getUserPageProjects };