@@ -86,34 +85,31 @@ class PostPage extends Component {
Related Topics:
- {post.tags &&
- post.tags.map((tag) => (
-
{tag.name}
- ))}
+ {post.tags.map(tag => (
+
+ {tag.name}
+
+ ))}
{post.views} Views
- Posted by {(post.author && post.author.username) || 0}
+ Posted by {post.username }
-
+
{post.time}
@@ -124,37 +120,30 @@ class PostPage extends Component {
Showing {replies.length} replies
- {replies &&
- replies.map((reply) => (
-
-
-
- Posted by {reply.author.username}
-
-
{reply.comment}
-
-
-
-
- {reply.time}
-
-
-
+ {replies.map(reply => (
+
+
+
+ Posted by {reply.author.username || "Unknown author"}
- ))}
+
{reply.comment}
+
+
+
+
+ {reply.time}
+
+
+
+
+ ))}
);
diff --git a/client/src/components/Profile.css b/client/src/components/Profile.css
new file mode 100644
index 0000000..f5fea30
--- /dev/null
+++ b/client/src/components/Profile.css
@@ -0,0 +1,61 @@
+/* Profile.css */
+
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f9;
+}
+
+.profile-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 50px;
+}
+
+.profile-card {
+ background: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 600px;
+ text-align: center;
+}
+
+.profile-image {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ margin: 0 auto 20px;
+}
+
+.profile-details {
+ margin-bottom: 20px;
+}
+
+.profile-details p {
+ margin: 5px 0;
+ color: #333;
+}
+
+.profile-buttons {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+.social-icons {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+.social-icons a {
+ color: inherit;
+ text-decoration: none;
+}
+
+.social-icons a:hover {
+ color: #007bff;
+}
diff --git a/client/src/components/Profile.jsx b/client/src/components/Profile.jsx
new file mode 100644
index 0000000..87cc242
--- /dev/null
+++ b/client/src/components/Profile.jsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from "react";
+import { Avatar } from "@mui/material";
+import { getUserProfile, followUser, unfollowUser } from "../services/userService";
+import Cookies from "js-cookie";
+import { getCurrentUser } from "../services/authService";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faTwitter, faInstagram, faFacebook ,faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import {
+ MDBCol,
+ MDBContainer,
+ MDBRow,
+ MDBCard,
+ MDBCardText,
+ MDBCardBody,
+ MDBCardImage,
+ MDBBtn,
+ MDBBreadcrumb,
+ MDBBreadcrumbItem,
+ MDBListGroup,
+ MDBListGroupItem
+} from 'mdb-react-ui-kit';
+import './Profile.css';
+
+function Profile({ match, user: currentUser }) {
+ const [user, setUser] = useState(null);
+ const [isFollowing, setIsFollowing] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+ const userEmail = Cookies.get('userEmail');
+
+ useEffect(() => {
+ async function fetchUserProfile() {
+ let connectedUser = await getCurrentUser(userEmail);
+ setUser(connectedUser);
+ console.log(connectedUser);
+ }
+ fetchUserProfile();
+ }, [userEmail]);
+
+ if (!user) {
+ return
Loading...
;
+ }
+
+ return (
+
+
+
+
+
+
+
+ {user.role}
+ {user.email}
+
+ setIsFollowing(!isFollowing)}>
+ {isFollowing ? "Unfollow" : "Follow"}
+
+ Message
+
+
+
+
+
+
+
+
+
+ https://mdbootstrap.com
+
+
+
+ mdbootstrap
+
+
+
+ @mdbootstrap
+
+
+
+ mdbootstrap
+
+
+
+ mdbootstrap
+
+
+
+
+
+
+
+
+
+
+ Full Name
+
+
+ {user.name}
+
+
+
+
+
+ Email
+
+
+ {user.email}
+
+
+
+
+
+ Username
+
+
+ {user.username}
+
+
+
+
+
+ CIN Number
+
+
+ {user.cinNumber}
+
+
+
+
+
+ Role
+
+
+ {user.role}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/client/src/components/SearchBar.css b/client/src/components/SearchBar.css
new file mode 100644
index 0000000..648978c
--- /dev/null
+++ b/client/src/components/SearchBar.css
@@ -0,0 +1,28 @@
+.search-bar-container {
+ display: flex;
+ align-items: center; /* Center vertically */
+}
+
+.search-input {
+ flex: 1; /* Take up remaining space */
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+}
+
+.search-button {
+ padding: 8px;
+ margin-left: 8px;
+ border: none;
+ background-color: transparent; /* Transparent background */
+ cursor: pointer;
+}
+
+.search-icon {
+ color: #007bff; /* Primary color */
+}
+
+.search-icon:hover {
+ color: #0056b3; /* Darker primary color on hover */
+}
\ No newline at end of file
diff --git a/client/src/components/SearchBar.jsx b/client/src/components/SearchBar.jsx
new file mode 100644
index 0000000..43c8f5d
--- /dev/null
+++ b/client/src/components/SearchBar.jsx
@@ -0,0 +1,55 @@
+// SearchBar.jsx
+
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import './SearchBar.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import axios from 'axios'; // Import Axios for making HTTP requests
+
+const SearchBar = () => {
+ const [searchTerm, setSearchTerm] = useState('');
+ const history = useHistory();
+
+ const handleSearch = async () => {
+ if (searchTerm.trim() !== '') {
+ try {
+ const response = await axios.get(`/search?q=${searchTerm}`);
+ // Handle the search results, e.g., navigate to a search results page
+ console.log('Search results:', response.data);
+ // Redirect to search results page
+ history.push(`/search?q=${searchTerm}`);
+ } catch (error) {
+ console.error('Error searching:', error);
+ }
+ }
+ };
+
+ const handleChange = (e) => {
+ setSearchTerm(e.target.value);
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === 'Enter') {
+ handleSearch();
+ }
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/client/src/components/SearchResult.jsx b/client/src/components/SearchResult.jsx
new file mode 100644
index 0000000..39a0c58
--- /dev/null
+++ b/client/src/components/SearchResult.jsx
@@ -0,0 +1,48 @@
+// components/SearchResult.js
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useLocation } from 'react-router-dom';
+
+const useQuery = () => {
+ return new URLSearchParams(useLocation().search);
+};
+
+const SearchResult = () => {
+ const [results, setResults] = useState([]);
+ const query = useQuery();
+ const searchTerm = query.get('q');
+
+ useEffect(() => {
+ const fetchResults = async () => {
+ try {
+ const response = await axios.get(`/api/search?q=${searchTerm}`);
+ setResults(response.data);
+ } catch (error) {
+ console.error('Error fetching search results:', error);
+ }
+ };
+
+ if (searchTerm) {
+ fetchResults();
+ }
+ }, [searchTerm]);
+
+ return (
+
+
Search Results for "{searchTerm}"
+ {results.length === 0 ? (
+
No results found
+ ) : (
+
+ {results.map((result) => (
+ -
+ {result.title}
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default SearchResult;
diff --git a/client/src/components/common/ThreeDotMenu.jsx b/client/src/components/common/ThreeDotMenu.jsx
new file mode 100644
index 0000000..05b7ee9
--- /dev/null
+++ b/client/src/components/common/ThreeDotMenu.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Menu, MenuItem, IconButton } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+const ThreeDotMenu = ({ onEdit, onDelete }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default ThreeDotMenu;
diff --git a/client/src/components/common/jumbotron.jsx b/client/src/components/common/jumbotron.jsx
index 4f830c9..d2f37da 100644
--- a/client/src/components/common/jumbotron.jsx
+++ b/client/src/components/common/jumbotron.jsx
@@ -1,14 +1,14 @@
import React from "react";
-const Jumotron = () => {
+const Jumbotron = () => {
return (
-
Community
-
We <3 people who code!
-
-
A disscussion forum for enthusiastic developers.
+
ESSTHS-FORUM
+
Welcome !
+
+
A discussion forum for Essths's Students.
);
};
-export default Jumotron;
+export default Jumbotron;
diff --git a/client/src/components/common/protectedRoute.jsx b/client/src/components/common/protectedRoute.jsx
index e81c3c9..f1df63f 100644
--- a/client/src/components/common/protectedRoute.jsx
+++ b/client/src/components/common/protectedRoute.jsx
@@ -1,18 +1,13 @@
-import React from "react";
-import { Route, Redirect } from "react-router-dom";
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
-const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {
+const ProtectedRoute = ({ path, component: Component, render, user, ...rest }) => {
return (
{
- if (!localStorage.getItem("token"))
- return (
-
- );
- return Component ? : render(props);
+ if (!user) return ;
+ return Component ? : render(props);
}}
/>
);
diff --git a/client/src/components/createpost.jsx b/client/src/components/createpost.jsx
index 95300d4..a46091a 100644
--- a/client/src/components/createpost.jsx
+++ b/client/src/components/createpost.jsx
@@ -46,11 +46,15 @@ class NewPost extends Form {
doSubmit = async () => {
try {
const { data } = this.state;
+ console.log('Submitting form with data:', data); // Add this debug log
const { response } = await createpost(data);
- console.log(response);
+ console.log('Response after creating post:', response); // Add this debug log
window.location = "/dashboard";
- } catch (ex) {}
+ } catch (ex) {
+ console.error('Error creating post:', ex); // Add this debug log
+ }
};
+
render() {
const { data, errors, tags } = this.state;
return (
diff --git a/client/src/components/dashboard.jsx b/client/src/components/dashboard.jsx
index 2e046d7..8b8f3a2 100644
--- a/client/src/components/dashboard.jsx
+++ b/client/src/components/dashboard.jsx
@@ -10,18 +10,19 @@ import Jumotron from "./common/jumbotron";
class Dashboard extends Component {
state = {
- allposts: [],
+ allPosts: [],
currentPage: 1,
pageSize: 4,
tags: [],
selectedTag: { _id: "1", name: "All Posts" },
};
+
async componentDidMount() {
- const { data: allposts } = await http.get(api.postsEndPoint);
+ const { data: allPosts } = await http.get(api.postsEndPoint);
const { data: tags } = await http.get(api.tagsEndPoint);
this.setState({
- allposts: [...allposts],
+ allPosts: allPosts.filter((post) => post !== null),
tags: [
{
_id: "1",
@@ -31,36 +32,32 @@ class Dashboard extends Component {
],
});
}
+
handlePageChange = (page) => {
this.setState({ currentPage: page });
};
- handlePostDelete = (post) => {};
+
+ handlePostDelete = async (postId) => {
+ await http.delete(`${api.postsEndPoint}/${postId}`);
+ const { data: allPosts } = await http.get(api.postsEndPoint);
+ this.setState({ allPosts: allPosts.filter((post) => post !== null) });
+ };
+
handleTagSelect = (tag) => {
this.setState({ selectedTag: tag, currentPage: 1 });
};
- getPosts() {
- const { allposts, selectedTag } = this.state;
- const filtered = [];
- for (let i in allposts) {
- const post = allposts[i];
- const { tags } = post;
- for (let j in tags) {
- if (tags[j].name === selectedTag.name) {
- filtered.push(post);
- break;
- }
- }
- }
- console.log(filtered);
- return filtered;
+
+ getFilteredPosts() {
+ const { allPosts, selectedTag } = this.state;
+ return selectedTag._id === "1" ? allPosts : allPosts.filter(post => post.tags.some(tag => tag.name === selectedTag.name));
}
+
render() {
const { user } = this.props;
- const { allposts, pageSize, currentPage, tags, selectedTag } = this.state;
- const filtered = selectedTag._id === "1" ? allposts : this.getPosts();
- const posts = paginate(filtered, currentPage, pageSize);
- if (allposts.length === 0)
- return There are no posts in the database!
;
+ const { allPosts, pageSize, currentPage, tags, selectedTag } = this.state;
+ const filteredPosts = this.getFilteredPosts();
+ const paginatedPosts = paginate(filteredPosts, currentPage, pageSize);
+
return (
@@ -68,16 +65,10 @@ class Dashboard extends Component {
- Showing {filtered.length} posts.
+ Showing {filteredPosts.length} posts.
{user && (
-
+
)}
@@ -85,22 +76,22 @@ class Dashboard extends Component {
+
);
diff --git a/client/src/components/listgroup.jsx b/client/src/components/listgroup.jsx
index 56a08ba..074fa99 100644
--- a/client/src/components/listgroup.jsx
+++ b/client/src/components/listgroup.jsx
@@ -1,7 +1,6 @@
import React from "react";
-const ListGroup = (props) => {
- const { items, selectedTag, onTagSelect } = props;
+const ListGroup = ({ items, selectedTag, onTagSelect }) => {
return (
{items.map((item) => (
@@ -13,15 +12,19 @@ const ListGroup = (props) => {
onClick={() => onTagSelect(item)}
>
{item.name}
+ {item.tags && (
+
+ {item.tags.map((tag) => (
+ -
+ {tag}
+
+ ))}
+
+ )}
))}
);
};
-ListGroup.defaultProps = {
- textProperty: "name",
- valueProperty: "_id",
-};
-
export default ListGroup;
diff --git a/client/src/components/log.jsx b/client/src/components/log.jsx
index 30b2a9d..a00df75 100644
--- a/client/src/components/log.jsx
+++ b/client/src/components/log.jsx
@@ -1,47 +1,42 @@
import React from "react";
-import { Link, Redirect } from "react-router-dom";
+import { Link } from "react-router-dom";
import Joi from "joi-browser";
import { ToastContainer, toast } from "react-toastify";
import "../App.css";
import Input from "../components/common/input";
import Form from "./common/form";
import { login } from "../services/authService";
+import {getCurrentUser} from "../services/authService";
-// use programmatic navigation form login form to dashboard
-
-// add functionality to show react toast if the user is redierected to different locations due to history
class Log extends Form {
state = {
data: { email: "", password: "" },
- errors: {
- email: "",
- passowrd: "",
- },
+ errors: {},
};
+
schema = {
- email: Joi.string().required().label("Email ID"),
+ email: Joi.string().email().required().label("Email"),
password: Joi.string().required().label("Password"),
};
+ currentUser;
doSubmit = async () => {
- // call the server;
try {
const { data } = this.state;
- //console.log(data.email);
- const { data: jwt } = await login(data.email, data.password);
- localStorage.setItem("token", jwt);
- const { state } = this.props.location;
- window.location = state ? state.from.pathname : "/users/login";
+ await login(data.email, data.password); // Login function now handles storing session
+ this.currentUser = await getCurrentUser(data.email)
+ console.log("current user is: ", this.currentUser)
+ document.cookie = `userEmail=${data.email}; path=/`; // Set session cookie with user email
+ document.cookie = `userRole=${this.currentUser.role}; path=/`; // Set session cookie with user email
+
+ window.location.href = "/dashboard"; // Redirect to dashboard after successful login
} catch (ex) {
if (ex.response && ex.response.status === 400) {
- toast.error("Invalid Email Or Password");
+ toast.error("Invalid Email or Password");
}
}
};
+
render() {
- if (localStorage.getItem("token")) {
- return ;
- }
- const { data, errors } = this.state;
return (
@@ -50,18 +45,17 @@ class Log extends Form {