added following topic on user profile

client/src/App.js

@@ -55,7 +55,11 @@ class App extends Component {
             exact
             path="/"
             render={(routeParams) => (
-              <Home setUser={this.setUser} {...routeParams} />
+              <Home
+                user={this.state.user}
+                setUser={this.setUser}
+                {...routeParams}
+              />
             )}
           />
           <Route

client/src/Pages/Home/Home.css

@@ -4,8 +4,9 @@
 
 .friend-container {
   display: flex;
-  width: 100%;
-  margin-top: 1rem;
+  width: 70vw;
+  margin: 1rem 0rem;
+  padding: 10px;
   overflow-y: scroll;
   justify-content: flex-start;
 }
@@ -59,3 +60,22 @@
   display: flex;
   justify-content: space-evenly;
 }
+
+.post-content-container {
+  width: 54vw;
+  height: 16vw;
+  border: 1px solid var(--primary-color);
+  border-radius: 8px;
+  font-size: 1rem;
+  padding: 10px;
+}
+
+.post-content-container:focus,
+.post-content-container:hover {
+  border: 5px solid var(--secondary-color);
+  outline: none;
+}
+
+.option-category {
+  text-transform: uppercase;
+}

client/src/Pages/Home/Home.jsx

@@ -5,38 +5,46 @@ import { API_BASE_URL } from "../../util/apiUtil";
 import axios from "axios";
 import { getUserProfileImage } from "../../util/commonMethods";
 import jwt from "../../util/jwt";
+import Loader from "../../Components/Loader/Loader";
+import interests from "../../util/interest";
 class Welcome extends Component {
   constructor(props) {
     super(props);
     this.state = {
       friends: [],
+      postContent: "",
+      postTitle: "",
+      category: interests[0],
+      isLoading: false,
     };
   }
   componentDidMount() {
+    this.setState({ isLoading: true });
     const api = API_BASE_URL + "users";
-    axios
-      .get(api)
-      .then((resp) => this.setState({ friends: resp.data.data.users }))
-      .catch((err) => console.log(err));
     const headers = jwt.getAuthHeader();
-    axios
-      .get(api + "/getFriendRecommendation", { headers })
-      .then((resp) => this.setState({ friends: resp.data.data }));
+    this.props.user &&
+      axios
+        .get(api + "/getFriendRecommendation", { headers })
+        .then((resp) =>
+          this.setState({ friends: resp.data.data, isLoading: false })
+        )
+        .catch((err) => console.log(err));
+    this.setState({ isLoading: false });
   }
 
   addFriend = (e, id) => {
     e.stopPropagation();
     const api = API_BASE_URL + `users/friends/${id}`;
     const headers = jwt.getAuthHeader();
+    this.setState({ isLoading: true });
     axios
       .patch(api, { userId: id }, { headers })
       .then((resp) => {
         this.props.setUser(resp.data.data.user);
         axios
           .get(API_BASE_URL + "users/getFriendRecommendation", { headers })
           .then((resp) => {
-            console.log(resp.data.data);
-            this.setState({ friends: resp.data.data });
+            this.setState({ friends: resp.data.data, isLoading: false });
           });
       })
       .catch((err) => console.log(err));
@@ -49,40 +57,89 @@ class Welcome extends Component {
   showUserProfile = (id) => {
     this.props.history.push(`/user/${id}`);
   };
+  handleChange = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
 
   renderAddFriendList = () => {
-    return this.state.friends.map((friend) => (
-      <div
-        key={friend._id}
-        className="friend-single"
-        onClick={() => this.showUserProfile(friend._id)}
-      >
-        <div className="friend-image">
-          <img src={getUserProfileImage(friend.profile_img)} alt="profile" />
+    return (
+      this.props.user &&
+      this.state.friends.map((friend) => (
+        <div
+          key={friend._id}
+          className="friend-single"
+          onClick={() => this.showUserProfile(friend._id)}
+        >
+          <div className="friend-image">
+            <img src={getUserProfileImage(friend.profile_img)} alt="profile" />
+          </div>
+          <div className="friend-username">{friend.username}</div>
+          <div className="friend-footer">
+            <button
+              className="btn-add"
+              onClick={(e) => this.addFriend(e, friend._id)}
+            >
+              Add Friend
+            </button>
+            <button
+              className="btn-cancel"
+              onClick={(e) => this.removeFromList(e)}
+            >
+              Cancel
+            </button>
+          </div>
         </div>
-        <div className="friend-username">{friend.username}</div>
-        <div className="friend-footer">
-          <button
-            className="btn-add"
-            onClick={(e) => this.addFriend(e, friend._id)}
-          >
-            Add Friend
-          </button>
-          <button
-            className="btn-cancel"
-            onClick={(e) => this.removeFromList(e)}
+      ))
+    );
+  };
+  renderCreatePost = () => {
+    return this.props.user ? (
+      <div className="create-post">
+        <textarea
+          className="post-content-container"
+          name="postContent"
+          placeholder="The post content goes over here"
+          value={this.state.postContent}
+          onChange={(e) => this.handleChange(e)}
+        ></textarea>
+        <div className="post-body">
+          <input
+            type="text"
+            name="postTitle"
+            value={this.state.postTitle}
+            onChange={(e) => this.handleChange(e)}
+            placeholder="The post title"
+          />
+          <select
+            value={this.state.category}
+            name="category"
+            onChange={(e) => this.handleChange(e)}
           >
-            Cancel
-          </button>
+            {interests.map((interest) => (
+              <option
+                key={interest}
+                className="option-category"
+                value={interest}
+              >
+                {interest}
+              </option>
+            ))}
+          </select>
         </div>
       </div>
-    ));
+    ) : (
+      ""
+    );
   };
   render() {
     return (
-      <div className="Home-container page">
-        <div className="friend-container">{this.renderAddFriendList()}</div>
-      </div>
+      <>
+        {this.state.isLoading ? <Loader /> : ""}
+        <div className="Home-container page">
+          <div className="friend-container">{this.renderAddFriendList()}</div>
+          {this.renderCreatePost()}
+        </div>
+      </>
     );
   }
 }

client/src/Pages/Interest/Interest.jsx

@@ -28,7 +28,6 @@ export class Interest extends Component {
 
   nextPage = () => {
     if (this.state.selected.filter((interest) => interest).length) {
-      console.log(this.state.selected);
       this.props.history.push({
         pathname: "/profileUpdate",
         state: {
@@ -71,6 +70,7 @@ export class Interest extends Component {
         <div className="Interest-select-item-container">
           {interests.map((interest, idx) => (
             <div
+              key={interest}
               className={`Interest-select-item ${
                 this.state.selected[idx] ? "Interest-select-item-selected" : ""
               }`}

client/src/Pages/Me/DashbBoard/EditProfile/EditProfile.jsx

@@ -3,6 +3,7 @@ import "./EditProfile.css";
 import General from "./General/General";
 import Preference from "./Preference/Preference";
 import ChangePassword from "./ChangePassword/ChangePassword";
+import Error from "../../../Error/Error";
 export class EditProfile extends Component {
   constructor(props) {
     super(props);
@@ -40,6 +41,8 @@ export class EditProfile extends Component {
         );
       case "Change Password":
         return <ChangePassword user={this.props.user} />;
+      default:
+        return <Error />;
     }
   };
 

client/src/Pages/Me/DashbBoard/EditProfile/Preference/Preference.jsx

@@ -98,6 +98,7 @@ export class Preference extends Component {
           <div className="Interest-select-item-container">
             {interests.map((interest, idx) => (
               <div
+                key={interest}
                 className={`Interest-select-item ${
                   this.state.selected[idx]
                     ? "Interest-select-item-selected"

client/src/Pages/Me/DashbBoard/Friends/Friends.jsx

@@ -4,28 +4,41 @@ import { API_BASE_URL } from "../../../../util/apiUtil";
 import axios from "axios";
 import jwt from "../../../../util/jwt";
 import { getUserProfileImage } from "../../../../util/commonMethods";
+import Loader from "../../../../Components/Loader/Loader";
 export class Friends extends Component {
   constructor(props) {
     super(props);
     this.state = {
       friends: [],
+      isLoading: false,
     };
   }
   componentDidMount() {
-    this.setState({ friends: this.props.user.friends });
+    const api = API_BASE_URL + `users/friends`;
+    const headers = jwt.getAuthHeader();
+    axios
+      .get(api, { headers })
+      .then(({ data }) => {
+        this.setState({ friends: data.data.data });
+      })
+      .catch((err) => console.log(err));
   }
   showUserProfile = (e, id) => {
     e.stopPropagation();
     this.props.history.push(`/user/${id}`);
   };
   removeFriend = (e, id) => {
     e.stopPropagation();
+    this.setState({ isLoading: true });
     const headers = jwt.getAuthHeader();
     const api = API_BASE_URL + `users/friends/${id}`;
     axios
       .delete(api, { headers })
       .then((resp) => {
-        this.setState({ friends: resp.data.data.user.friends });
+        this.setState({
+          friends: resp.data.data.user.friends,
+          isLoading: false,
+        });
         this.props.setUser(resp.data.data.user);
       })
       .catch((err) => console.log(err));
@@ -54,13 +67,16 @@ export class Friends extends Component {
   };
   render() {
     return (
-      <div className="page">
-        {this.state.friends.length ? (
-          <div className="friends-container">{this.renderFriends()}</div>
-        ) : (
-          <div className="empty-friends">No Friends Added </div>
-        )}
-      </div>
+      <>
+        {this.state.isLoading ? <Loader /> : ""}
+        <div className="page">
+          {this.state.friends.length ? (
+            <div className="friends-container">{this.renderFriends()}</div>
+          ) : (
+            <div className="empty-friends">No Friends Added </div>
+          )}
+        </div>
+      </>
     );
   }
 }

client/src/Pages/Me/DashbBoard/MeSection/MeSection.css

@@ -111,3 +111,32 @@
   opacity: 1;
   transform: scale(1.1);
 }
+
+.top-interests {
+  position: absolute;
+  right: 16vw;
+  top: 8vw;
+}
+.top-interests-header {
+  color: var(--primary-color);
+  font-size: 1.8rem;
+  font-variant: small-caps;
+  margin-bottom: 1rem;
+}
+
+.top-interests-follow {
+  padding: 10px;
+  font-size: 1rem;
+  text-align: right;
+  position: relative;
+}
+.top-interests-follow::after {
+  content: "";
+  width: 10px;
+  margin-left: 10px;
+  position: absolute;
+  height: 10px;
+  background-color: #ff5050;
+  border-radius: 50%;
+  top: 0.95rem;
+}