Skip to content

Commit

Permalink
Feat: View other member details
Browse files Browse the repository at this point in the history 
fix handlelick

fix redirecting to member detail

Fix field type to non input
  • Loading branch information
@mtreacy002
mtreacy002 committed Aug 7, 2020
1 parent 63f8956 commit fc841bb
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 3 deletions.
4 changes: 4 additions & 0 deletions src/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Home";
import Members from "./members/Members";
import MemberProfile from "./members/MemberProfile";
import Register from "./register/Register";
import Login from "./login/Login";
import Portfolio from "./myspace/Portfolio";
Expand All @@ -26,6 +27,9 @@ export default function Routes() {
<ProtectedRoute exact path="/members">
<Members />
</ProtectedRoute>
<ProtectedRoute path="/member">
<MemberProfile />
</ProtectedRoute>
<Route path="/register">
<Register />
</Route>
Expand Down
136 changes: 136 additions & 0 deletions src/members/MemberProfile.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import React from "react";
import { useLocation } from "react-router-dom";


export default function MemberProfile() {
const { state } = useLocation();
const member = state.member;
console.log(member);

return (
<div className="container">
<div className="row mb-5">
<div className="col-lg-12 text-center">
<h1 className="mt-5">{member.name} Personal Details</h1>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<form className="myspace-form mx-auto">
<form-group controlId="formUserame">
<p className="input-control">
<label htmlFor="username">Username : </label>
{member.username}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formName">
<p className="input-control">
<label htmlFor="name">Name : </label>
{member.name}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formIrcId">
<p className="input-control">
<label htmlFor="ircId">IRC ID : </label>
{member.slack_username}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formIrcId">
<p className="input-control">
<label htmlFor="socialMediaLink">Social Media Links : </label>
{member.social_media_links}
</p>
</form-group>
<div><br></br></div>
<form-group>
<div className="row">
<div className="col-sm text-center">
<label htmlFor="availability">Available to be a : </label>
<form-group>
<div className="mb-3">
<div className="row">
<div className="col-sm">
{member.available_to_mentor &&
<label htmlFor="mentor">Mentor</label>}
</div>
<div className="col-sm">
{member.need_mentoring &&
<label htmlFor="mentee">Mentee</label>}
</div>
</div>
</div>
</form-group>
</div>
</div>
</form-group>
<form-group controlId="formInterests">
<p className="input-control">
<label htmlFor="interests">Is available : </label>
{member.is_available? "True" : "False"}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formInterests">
<p className="input-control">
<label htmlFor="interests">Interests : </label>
{member.interests}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formBio">
<p className="input-control">
<label htmlFor="bio">Bio :</label>
{member.bio}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formLocation">
<p className="input-control">
<label htmlFor="location">Location : </label>
{member.location}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formOccupation">
<p className="input-control">
<label htmlFor="occupation">Occupation : </label>
{member.occupation}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formCurrentOrganization">
<p className="input-control">
<label htmlFor="currentOrganization">Current Organization : </label>
{member.current_organization}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formSkills">
<p className="input-control">
<label htmlFor="skills">Skills : </label>
{member.skills}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formResumeUrl">
<p className="input-control">
<label htmlFor="resumeUrl">Resume Url : </label>
{member.resume_url}
</p>
</form-group>
<div><br></br></div>
<form-group controlId="formPhotoUrl">
<p className="input-control">
<label htmlFor="photoUrl">Photo Url : </label>
{member.photo_url}
</p>
</form-group>
</form>
</div>
</div>
</div>
)
}
10 changes: 7 additions & 3 deletions src/members/Members.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect } from "react";
import { Table } from "react-bootstrap";
import { Link } from "react-router-dom";
import { AuthContext } from "../AuthContext";
import { BASE_API } from "../config";
import { SERVICE_UNAVAILABLE_ERROR } from "../messages";
Expand Down Expand Up @@ -31,7 +32,7 @@ export default function Members() {
setErrorMessage(SERVICE_UNAVAILABLE_ERROR)
)

});
}, []);

return errorMessage ?
<div className="container-fluid" id="memberList">
Expand Down Expand Up @@ -64,10 +65,13 @@ export default function Members() {
<tbody>
{members.map((member) => (
<tr key={member.id}>
<td>{member.name}</td>
<td><Link to={{
pathname: `/member/${member.username}`,
state: { member }
}}>{member.name}</Link></td>
<td>{member.skills}</td>
<td>{member.need_mentoring ? "True" : "False"}</td>
<td>{member.available_to_mentor? "True" : "False"}</td>
<td>{member.available_to_mentor ? "True" : "False"}</td>
<td>tba</td>
<td>tba</td>
<td>{member.location}</td>
Expand Down

0 comments on commit fc841bb

Please sign in to comment.