Added profile directory with components, not found page. Finished with profile.

Author: Promchi

client/src/App.js

@@ -24,6 +24,8 @@ import EditProfile from "./components/edit-profile/EditProfile";
 import AddExperience from "./components/add-credentials/AddExperience";
 import AddEducation from "./components/add-credentials/AddEducation";
 import Profiles from "./components/profiles/Profiles";
+import Profile from "./components/profile/Profile";
+import NotFound from "./components/not-found/NotFound";
 
 import "./App.css";
 
@@ -61,6 +63,7 @@ class App extends Component {
               <Route exact path="/register" component={Register} />
               <Route exact path="/login" component={Login} />
               <Route exact path="/profiles" component={Profiles} />
+              <Route exact path="/profile/:handle" component={Profile} />
               <Switch>
                 <PrivateRoute exact path="/dashboard" component={Dashboard} />
               </Switch>
@@ -92,6 +95,7 @@ class App extends Component {
                   component={AddEducation}
                 />
               </Switch>
+              <Route exact path="/not-found" component={NotFound} />
             </div>
             <Footer />
           </Router>

client/src/actions/profileActions.js

@@ -28,6 +28,25 @@ export const getCurrentProfile = () => (dispatch) => {
     );
 };
 
+// get profile by handle
+export const getProfileByHandle = (handle) => (dispatch) => {
+  dispatch(setProfileLoading());
+  axios
+    .get(`/api/profile/handle/${handle}`)
+    .then((res) =>
+      dispatch({
+        type: GET_PROFILE,
+        payload: res.data,
+      })
+    )
+    .catch((err) =>
+      dispatch({
+        type: GET_PROFILE,
+        payload: null,
+      })
+    );
+};
+
 // create profile
 export const createProfile = (profileData, history) => (dispatch) => {
   axios

client/src/components/auth/Login.js

@@ -22,7 +22,7 @@ class Login extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.auth.isAuthenticated) {
       this.props.history.push("/dashboard");
     }
@@ -94,7 +94,7 @@ Login.propTypes = {
   errors: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   auth: state.auth,
   errors: state.errors,
 });

client/src/components/auth/Register.js

@@ -25,7 +25,7 @@ class Register extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.errors) {
       this.setState({ errors: nextProps.errors });
     }
@@ -114,7 +114,7 @@ Register.propTypes = {
   errors: PropTypes.object.isRequired,
 };
 
-const mapStatetoProps = state => ({
+const mapStatetoProps = (state) => ({
   auth: state.auth,
   errors: state.errors,
 });

client/src/components/create-profile/CreateProfile.js

@@ -33,7 +33,7 @@ class CreateProfile extends Component {
     this.onSubmit = this.onSubmit.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.errors) {
       this.setState({ errors: nextProps.errors });
     }

client/src/components/dashboard/Education.js

@@ -10,7 +10,7 @@ class Education extends Component {
   }
   render() {
     const education = this.props.education.map((edu) => (
-      <tr key={edu.id}>
+      <tr key={edu._id}>
         <td>{edu.school}</td>
         <td>{edu.degree}</td>
         <td>

client/src/components/dashboard/Experience.js

@@ -10,7 +10,7 @@ class Experience extends Component {
   }
   render() {
     const experience = this.props.experience.map((exp) => (
-      <tr key={exp.id}>
+      <tr key={exp._id}>
         <td>{exp.company}</td>
         <td>{exp.title}</td>
         <td>

client/src/components/edit-profile/EditProfile.js

@@ -38,7 +38,7 @@ class CreateProfile extends Component {
     this.props.getCurrentProfile();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.errors) {
       this.setState({ errors: nextProps.errors });
     }

client/src/components/not-found/NotFound.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default () => {
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-md-6">
+          <h1 className="display-4">Page Not Found</h1>
+          <p>Sorry, this page does not exist</p>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/profile/Profile.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import ProfileHeader from "./ProfileHeader";
+import ProfileAbout from "./ProfileAbout";
+import ProfileCreds from "./ProfileCreds";
+import ProfileGithub from "./ProfileGithub";
+import Spinner from "../common/Spinner";
+import { getProfileByHandle } from "../../actions/profileActions";
+
+class Profile extends Component {
+  componentDidMount() {
+    if (this.props.match.params.handle) {
+      this.props.getProfileByHandle(this.props.match.params.handle);
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.profile.profile === null && this.props.profile.loading) {
+      this.props.history.push("/not-found");
+    }
+  }
+
+  render() {
+    const { profile, loading } = this.props.profile;
+    let profileContent;
+
+    if (profile === null || loading) {
+      profileContent = <Spinner />;
+    } else {
+      profileContent = (
+        <div>
+          <div className="row">
+            <div className="col-md-6">
+              <Link to="/profiles" className="btn btn-success mb-3 float-left">
+                Back To Profiles
+              </Link>
+              <div className="col-md-6" />
+            </div>
+          </div>
+          <ProfileHeader profile={profile} />
+          <ProfileAbout profile={profile} />
+          <ProfileCreds
+            education={profile.education}
+            experience={profile.experience}
+          />
+
+          {profile.githubusername ? (
+            <ProfileGithub username={profile.githubusername} />
+          ) : null}
+        </div>
+      );
+    }
+    return (
+      <div className="profile">
+        <div className="container">
+          <div className="row">
+            <div className="col-md-12">{profileContent}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Profile.propTypes = {
+  getProfileByHandle: PropTypes.func.isRequired,
+  profile: PropTypes.object.isRequired,
+};
+
+const mapStatetoProps = (state) => ({
+  profile: state.profile,
+});
+
+export default connect(mapStatetoProps, { getProfileByHandle })(Profile);