Skip to content

Commit

Permalink
Add dynamic routing for project page and refactor code courtesy of Izaak
Browse files Browse the repository at this point in the history 
Relates #11

Co-authored-by: Hannah Gooding <hannah.gooding@yahoo.com>
  • Loading branch information
@CampbellDocherty @hannahgooding
CampbellDocherty and hannahgooding committed May 28, 2020
1 parent e7b7ef9 commit c66d410
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 121 deletions.
5 changes: 0 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,13 +147,8 @@ Request body example:

##### GET /project/:projectid

<<<<<<< HEAD
Get a project by its id
=======
Get a project by project id

> > > > > > > master
##### GET /followedprojects

Get your watched (followed) projects
Expand Down
80 changes: 31 additions & 49 deletions wip-app/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import "./App.css";
import TopNavbar from "./components/TopNavbar/TopNavbar";
import BottomNavbar from "./components/BottomNavbar/BottomNavbar";
import AddProjectPage from "./pages/AddProjectPage/AddProjectPage";
Expand All @@ -10,77 +11,58 @@ import SignUpForm from "./components/SignUpForm/SignUpForm";
import FeedPage from "./pages/FeedPage/FeedPage";
import UserPage from "./pages/UserPage/UserPage";
import ExplorePage from "./pages/ExplorePage/ExplorePage";
import ProjectPage from "./pages/ProjectPage/ProjectPage";
import NotificationPage from "./pages/NotificationPage/NotificationPage";
import { MainWrapper } from "./pages/page.style";

const App = () => {
// const [loggedIn, setLoggedIn] = React.useState(false);

return (
<Router>
{/* {loggedIn && (
<>
<TopNavbar setLoggedIn={setLoggedIn} />
<BottomNavbar />
</>
)}
{!loggedIn && <LandingPage setLoggedIn={setLoggedIn} />} */}

<Switch>
<Route path="/sign-up">
<MainWrapper>
<MainWrapper>
<Router>
<Switch>
<Route path="/sign-up">
<SignUpForm />
</MainWrapper>
</Route>
<Route path="/log-in">
<MainWrapper>
</Route>
<Route path="/log-in">
<LogInForm />
</MainWrapper>
</Route>
<Route path="/new-project">
<MainWrapper>
</Route>
<Route path="/new-project">
<TopNavbar />
<AddProjectPage />
<BottomNavbar />
</MainWrapper>
</Route>
<Route path="/sign-out"></Route>
<Route path="/feed">
<MainWrapper>
</Route>
<Route path="/sign-out"></Route>
<Route path="/feed">
<TopNavbar />
<FeedPage />
<BottomNavbar />
</MainWrapper>
</Route>
<Route path="/profile">
<MainWrapper>
</Route>
<Route path="/profile">
<TopNavbar />
<UserPage />
<BottomNavbar />
</MainWrapper>
</Route>
<Route path="/notifications">
<MainWrapper>
</Route>
<Route path="/notifications">
<TopNavbar />
<NotificationPage />
<BottomNavbar />
</MainWrapper>
</Route>
<Route path="/explore">
<MainWrapper>
</Route>
<Route path="/explore">
<TopNavbar />
<ExplorePage />
<BottomNavbar />
</MainWrapper>
</Route>
<Route path="/">
<MainWrapper>
</Route>
<Route path="/project">
<TopNavbar />
<ProjectPage />
<BottomNavbar />
</Route>
<Route path="/">
<LandingPage />
</MainWrapper>
</Route>
</Switch>
</Router>
</Route>
</Switch>
</Router>
</MainWrapper>
);
};

Expand Down
32 changes: 20 additions & 12 deletions wip-app/src/components/ProjectCard/ProjectCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
import React from "react";
import { ProjectCardArticle, ProjectCardImage } from "./ProjectCard.style";
import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";

const ProjectCard = ({
project_name,
username,
date,
step_link,
project_id,
}) => {
const history = useHistory();

function handleProjectClick(event) {
history.push(`/project/${project_id}`);
}

const ProjectCard = ({ project_name, username, date, step_link }) => {
const project_url = "/profile";
return (
<>
<ProjectCardArticle>
<h3>{project_name}</h3>
<Link to={project_url}>Feed</Link>
<p>{username}</p>
{/* {project_status ? <p>Work in progress</p> : <p>Finished</p>} */}
<ProjectCardImage src={step_link} alt="catch em" />
</ProjectCardArticle>
</>
<ProjectCardArticle onClick={handleProjectClick}>
<h3>{project_name}</h3>
<p>{username}</p>
{/* {project_status ? <p>Work in progress</p> : <p>Finished</p>} */}
<ProjectCardImage src={step_link} alt="catch em" />
</ProjectCardArticle>
);
};

Expand Down
5 changes: 4 additions & 1 deletion wip-app/src/components/ProjectFeed/ProjectFeed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ const ProjectFeed = ({ projects }) => {

for (let i = 1; i < projects.length; i++) {
for (let j = 0; j < uniqueProjects.length; j++) {
if (uniqueProjects.every((uniqueObj) => uniqueObj.id != projects[i].id)) {
if (
uniqueProjects.every((uniqueObj) => uniqueObj.id !== projects[i].id)
) {
uniqueProjects.push(projects[i]);
}
}
Expand All @@ -22,6 +24,7 @@ const ProjectFeed = ({ projects }) => {
username={username}
date={date}
step_link={step_link}
project_id={id}
key={id}
/>
);
Expand Down
1 change: 1 addition & 0 deletions wip-app/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";

Expand Down
29 changes: 14 additions & 15 deletions wip-app/src/pages/ProjectPage/ProjectPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import React from "react";
import { projectPage } from "../../utils/get-fetch";
// import { projectPage } from "../../utils/get-fetch";

const ProjectPage = () => {
const [projectData, setProjectData] = React.useState([]);
// const [projectData, setProjectData] = React.useState([]);

React.useEffect(() => {
projectPage().then(setProjectData);
}, []);
// React.useEffect(() => {
// projectPage().then(setProjectData);
// }, []);

const {
id,
user_id,
project_name,
project_description,
project_status,
} = projectData;
// SELECT (SELECT username FROM users WHERE projects.user_id=users.id), project_name, project_description, project_status, steps.step_name, steps.step_link, steps.date, feedback_text, feedback_tag, feedback.date
// FROM projects JOIN users ON projects.user_id=users.id JOIN steps ON projects.id=steps.project_id JOIN feedback ON steps.id=feedback.step_id
// WHERE projects.id = 1;
// const {
// id,
// user_id,
// project_name,
// project_description,
// project_status,
// } = projectData;

return <h1>Project Page</h1>;
};

export default ProjectPage;
76 changes: 38 additions & 38 deletions wip-app/src/pages/UserPage/UserPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,44 +29,44 @@ const UserPage = (props) => {
user_link_3,
} = userInfo;

return (
<>
{userInfo.length === 0 || userProjects.length === 0 ? (
<h1>Loading your profile...</h1>
) : (
<>
<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} />
</>
)}
</>
);
const isLoading = userInfo.length === 0 || userProjects.length === 0;

if (isLoading) {
return <h1>Loading your profile...</h1>;
} else {
return (
<>
<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} />
</>
);
}
};

export default UserPage;
2 changes: 1 addition & 1 deletion wip-app/src/utils/get-fetch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function getUserPageProjects() {
}

function projectPage(projectid) {
const projectid = 1;
projectid = 1;
const options = {
endpoint: `project/${projectid}`,
errorMessage: "Project page error",
Expand Down

0 comments on commit c66d410

Please sign in to comment.