+
+
+
+
-
- {props.text}
diff --git a/src/UI/Button/button.module.css b/src/UI/Button/button.module.css index 66ee1d7..730b01c 100644 --- a/src/UI/Button/button.module.css +++ b/src/UI/Button/button.module.css @@ -1,4 +1,5 @@ .button{ + display: flex; width: fit-content; background-image: linear-gradient(#D00000, #D07D00); border-radius: 10px; @@ -7,6 +8,8 @@ padding: 13px; margin-right: 3vh; box-shadow: #D1730170 5px 5px 5px; + justify-content: center; + align-items: center; } .button p { @@ -16,6 +19,6 @@ } .button:hover{ - background-image: black; + background-image: rgba(0, 0, 0, 0.425); cursor: pointer; } \ No newline at end of file diff --git a/src/UI/Card/card.jsx b/src/UI/Card/card.jsx index 5b1807d..c0f0de2 100644 --- a/src/UI/Card/card.jsx +++ b/src/UI/Card/card.jsx @@ -1,15 +1,19 @@ -import styles from "./card.module.css"; +import styles from './card.module.css'; -const Card = props => { - return( -
- {props.children}
+const Card = (props) => {
+ return (
+
-
)
diff --git a/src/components/EditInput/EditInput.jsx b/src/components/EditInput/EditInput.jsx
new file mode 100644
index 0000000..0ca35fc
--- /dev/null
+++ b/src/components/EditInput/EditInput.jsx
@@ -0,0 +1,30 @@
+import styles from '../EditProfileDetails/EditProfileDetails.module.css';
+import { useState } from 'react';
+
+const EditInput = ({ placeholder, value, editProfile, type, onChange }) => {
+ const [inputValid, setInputValid] = useState(false);
+ return (
+ <>
+
+ 
{
+ setInputValid(!inputValid);
+ console.log(inputValid);
+ }}
+ >
+
+ );
+};
+
+export default EditInput;
diff --git a/src/components/EditPosts/EditPosts.jsx b/src/components/EditPosts/EditPosts.jsx
index 662adca..0c4b4db 100644
--- a/src/components/EditPosts/EditPosts.jsx
+++ b/src/components/EditPosts/EditPosts.jsx
@@ -1,33 +1,55 @@
-import styles from "./EditPosts.module.css";
+import styles from './EditPosts.module.css';
import profile from '../../assets/images/logos/user.png';
-const EditPosts = props => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
+ const [isChatRoom, setIsChatRoom] = useState(false);
+ const [users, setIsUsers] = useState([]);
+ const [otherUser, setOtherUser] = useState('UserName');
+ const [userInput, setUserInput] = useState();
+ const [messageInput, setMessageInput] = useState();
+ const [usersList, setUserList] = useState([]);
+ let [userName, setUserName] = useState('User');
+ let style2 = null;
+ const onChatRoom = () => {
+ setIsChatRoom(!isChatRoom);
+ };
+
+ useEffect(() => {
+ const getMembers = async () => {
+ try {
+ httpClient({
+ method: 'GET',
+ url: 'http://localhost:5000/user/members',
+ }).then((response) => {
+ setUserList(response.data);
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ };
+ getMembers();
+ }, []);
+
+ const handleSearchUser = (e) => {
+ console.log(e.target.value);
+ setUserInput(e.target.value);
+
+ // Filter method not working will return to this later.
+ if (e.target.value.trim().length > 0) {
+ setIsUsers(usersList);
+
+ const filtered = usersList.filter(
+ (user) => user.first_name.toLowerCase() === e.target.value.toLowerCase()
+ );
+ setIsUsers(filtered);
+ } else {
+ setIsUsers(usersList);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
-
- )
-}
+
+ );
+};
-export default FinalProject;
\ No newline at end of file
+export default FinalProject;
diff --git a/src/components/FinalProject/FinalProject.module.css b/src/components/FinalProject/FinalProject.module.css
new file mode 100644
index 0000000..cbe4d72
--- /dev/null
+++ b/src/components/FinalProject/FinalProject.module.css
@@ -0,0 +1,85 @@
+.chatBubble {
+ display: flex;
+ position: fixed;
+ height: 60px;
+ width: 60px;
+ background-color: rgb(135, 225, 0);
+ border-radius: 130px;
+ bottom: 30px;
+ right: 30px;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 2px 5px 10px 5px rgba(0, 0, 0, 0.413);
+ border-color: rgb(0, 201, 0);
+ border-width: 3px;
+ border-style: solid;
+ cursor: pointer;
+}
+
+.chatBubble:active {
+ background-color: rgb(0, 201, 0);
+}
+
+.messageContainer {
+ position: fixed;
+ display: flex;
+ bottom: 30px;
+ right: 120px;
+ z-index: 1;
+}
+
+.profileName {
+ margin: 0;
+ font-weight: 600;
+ font-size: 25px;
+}
+
+.user1 {
+ color: #ffffff;
+ font-weight: 500;
+ margin-right: 50%;
+}
+
+.user2 {
+ display: flex;
+ color: #ffffff;
+ font-weight: 500;
+ margin-left: 50%;
+}
+
+.messageText {
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ max-width: fit-content;
+}
+
+.inputField {
+ padding: 10px;
+ border-radius: 7px;
+ width: 90%;
+}
+
+.sendMessageContainer {
+ display: flex;
+ gap: 15px;
+ min-width: 100%;
+ justify-content: flex-start;
+}
+
+.listUser {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+}
+
+.userItem {
+ margin: 0;
+ padding: 10px;
+}
+
+.userItem:hover {
+ background-color: rgba(0, 0, 0, 0.178);
+ cursor: pointer;
+}
diff --git a/src/components/ForumItem/ForumItem.jsx b/src/components/ForumItem/ForumItem.jsx
index 1ca6942..b008a44 100644
--- a/src/components/ForumItem/ForumItem.jsx
+++ b/src/components/ForumItem/ForumItem.jsx
@@ -1,22 +1,55 @@
-import styles from "./ForumItem.module.css";
+import styles from './ForumItem.module.css';
-const ForumItem = props => {
- let profile = null;
- if (props.icon !== ""){
- profile = 
- } else {
- profile = ![Icon]({require("../../assets/images/logos/user.png")})
- }
+const ForumItem = (props) => {
+ let profile = null;
+ let comments = null;
+ if (props.icon !== '') {
+ profile = (
+
+ );
+ } else {
+ profile = (
+ })
+ );
+ }
- return(
-
// :
//
+ {props.children}
- )
-}
+ );
+};
-export default Card;
\ No newline at end of file
+export default Card;
diff --git a/src/UI/Card/card.module.css b/src/UI/Card/card.module.css
index 44766c8..038ccb4 100644
--- a/src/UI/Card/card.module.css
+++ b/src/UI/Card/card.module.css
@@ -1,12 +1,17 @@
-.card{
+.card {
position: relative;
display: flex;
flex-direction: column;
padding: 20px;
gap: 20px;
min-width: 55vh;
- background: rgb(7,29,124);
- background: linear-gradient(180deg, rgba(7,29,124,1) 0%, rgba(10,62,180,1) 45%, rgba(13,149,209,1) 100%);
+ background: rgb(7, 29, 124);
+ background: linear-gradient(
+ 180deg,
+ rgba(7, 29, 124, 1) 0%,
+ rgba(10, 62, 180, 1) 45%,
+ rgba(13, 149, 209, 1) 100%
+ );
border-radius: 20px;
}
@@ -19,4 +24,4 @@
min-width: 55vh;
background-color: purple;
border-radius: 20px;
-} */
\ No newline at end of file
+} */
diff --git a/src/UI/Login/login.jsx b/src/UI/Login/login.jsx
index f3873e1..9370b80 100644
--- a/src/UI/Login/login.jsx
+++ b/src/UI/Login/login.jsx
@@ -6,38 +6,44 @@ import { useContext, useState } from 'react'
import { UserContext, SignUpContext, NewUserContext, UserNameContext } from "../../components/FinalProject/FinalProject";
import httpClient from "../../httpClient";
import { login } from "../../auth";
+import { useDispatch } from "react-redux";
+import { setSignIn } from "../../redux/slices/userSlice"
-const initialValues = {
- userName: "",
- password: ""
-};
-const Login = props => {
+function Login() {
const [isOpened, setIsOpened] = useContext(UserContext);
const [isSignModal, setIsSignModal] = useContext(SignUpContext);
const [newUser, setNewUser] = useContext(NewUserContext);
const [userName, setUserName] = useContext(UserNameContext);
+ const initialValues = {
+ userName: "",
+ password: ""
+ };
// This is just a test to see if login works with data.
const [userData, setUserData] = useState(initialValues);
const [errorMessage, setErrorMessage] = useState(null);
let createAccount = null;
-
+
+ const dispatch = useDispatch()
// Function to fetch user data from database, log in user if successful
const loginUser = async () => {
httpClient({
method: "POST",
- url: "http://localhost:5000/login",
+ url: "http://localhost:5000/user/login",
data: {
username: userData.userName,
password: userData.password
}
})
.then((response) => {
+ login(response.data.access_token)
console.log(response)
console.log(response.data.access_token)
- login(response.data.access_token)
+ console.log(response.data.user)
+ let name = response.data.user
+ dispatch(setSignIn({name}))
console.log(userData.userName, " has logged in")
setIsOpened(false)
setNewUser(true)
@@ -55,27 +61,20 @@ const Login = props => {
})
};
-
//Set new keystroke to UserData values.
const handleValues = (e) => {
setUserData({ ...userData, [e.target.name]: e.target.value});
};
const handleLogin = (e) => {
- //Prevents form from refreshing when Sign button is clicked.
- e.preventDefault();
- if(userData.userName.trim().length === 0 || userData.password.trim().length === 0){
- setErrorMessage(Inputs cannot be empty
) - } else { - setErrorMessage("") - // setIsOpened(false) - // setNewUser(true) - // setIsSignModal(false) - loginUser() - console.log('Login successful'); - setUserName(userData.userName) - - } + //Prevents form from refreshing when Sign button is clicked. + e.preventDefault(); + if(userData.userName.trim().length === 0 || userData.password.trim().length === 0){ + setErrorMessage(Inputs cannot be empty
) + } else { + setErrorMessage("") + loginUser() + } } //Check if Modal is opened. diff --git a/src/UI/signup/signup.jsx b/src/UI/signup/signup.jsx index 956bce6..b59cf62 100644 --- a/src/UI/signup/signup.jsx +++ b/src/UI/signup/signup.jsx @@ -6,6 +6,8 @@ import { useState, useContext } from "react"; import { SignUpContext, UserContext, NewUserContext } from "../../components/FinalProject/FinalProject"; import httpClient from "../../httpClient"; import { login } from "../../auth"; +import { useDispatch } from "react-redux"; +import { setSignIn } from "../../redux/slices/userSlice" const SignUp = () => { const initialValues = { @@ -17,24 +19,23 @@ const SignUp = () => { confirmPSW: "" }; - + // Are there any contexts or states that we don't need anymore? let SignedUp = null; const [isSignUp, setIsSignUp] = useContext(SignUpContext); - const [isSignModal, setIsSignModal] = useContext(SignUpContext); - const [isOpened, setIsOpened] = useContext(UserContext); const [newUser, setNewUser] = useContext(NewUserContext); const [count, setCount] = useState(5); const [newUserData, setNewUserData] = useState(initialValues); const [errorMessage, setErrorMessage] = useState(""); + const dispatch = useDispatch() // Function to register a new user, post the data to backend if legit, and log user in afterwards const registerUser = async () => { httpClient({ method: "POST", - url: "http://127.0.0.1:5000/register", + url: "http://127.0.0.1:5000/user/register", data: { username: newUserData.userName, first_name: newUserData.firstName, @@ -46,7 +47,10 @@ const SignUp = () => { .then((response) => { console.log(response) console.log(response.data.access_token) + console.log(response.data.user) login(response.data.access_token) + let name = response.data.user + dispatch(setSignIn({name})) console.log(newUserData.userName, " has signed up") setNewUser(true) }).catch((error) => { @@ -61,18 +65,11 @@ const SignUp = () => { }) }; - - - const handleValues = (e) => { setNewUserData({ ...newUserData, [e.target.name]: e.target.value}); }; - - - // Added in the error checks that were missing (VARCHAR 50 for each name, 30 for username, 254 for email, 8 for password if it isn't there?) - // Might want to convert it to a switch case or rewrite it in a nicer JS looking way - // Add check for number in password + // @TODO Need to refactor this! Make the error handling more efficient const handleForm = (e) => { e.preventDefault(); @@ -87,28 +84,29 @@ const SignUp = () => { } else if (newUserData.password !== newUserData.confirmPSW){ setErrorMessage("Password does not match."); setNewUser(false); - } else if (newUserData.userName.length >= 30){ + } else if (newUserData.userName.length > 30){ setErrorMessage("Username must not be more than 30 characters."); setNewUser(false); - } else if (newUserData.firstName.length >= 50){ + } else if (newUserData.firstName.length > 50){ setErrorMessage("First name must be no more than 50 characters."); setNewUser(false); - } else if (newUserData.lastName.length >= 50){ + } else if (newUserData.lastName.length > 50){ setErrorMessage("Last name must be no more than 50 characters."); setNewUser(false); - } else if (newUserData.email.length >= 254){ + } else if (newUserData.email.length > 254){ setErrorMessage("Email address is too long."); setNewUser(false); - } else if (newUserData.password.length >= 72 || newUserData.password.length < 8){ - setErrorMessage("Password is too short or long."); // Don't give details on max length + } else if (newUserData.password.length > 72 || newUserData.password.length < 8){ + setErrorMessage("Password length is invalid."); setNewUser(false); } else { setErrorMessage(""); - // setNewUser(true); registerUser(); } } - console.log(newUserData.userName.length); + + // We can delete this right? The constant counting + // console.log(newUserData.userName.length); if (newUser === true){ setTimeout(() => { diff --git a/src/assets/icons/comments.png b/src/assets/icons/comments.png new file mode 100644 index 0000000..b2a0cbd Binary files /dev/null and b/src/assets/icons/comments.png differ diff --git a/src/assets/icons/message.png b/src/assets/icons/message.png new file mode 100644 index 0000000..724af34 Binary files /dev/null and b/src/assets/icons/message.png differ diff --git a/src/assets/img/TeamMembers/haiying.jpg b/src/assets/img/TeamMembers/haiying.jpg deleted file mode 100644 index 505ab59..0000000 Binary files a/src/assets/img/TeamMembers/haiying.jpg and /dev/null differ diff --git a/src/components/DropDownMenu/dropDownMenu.jsx b/src/components/DropDownMenu/dropDownMenu.jsx index d969f2c..001a9ce 100644 --- a/src/components/DropDownMenu/dropDownMenu.jsx +++ b/src/components/DropDownMenu/dropDownMenu.jsx @@ -3,20 +3,25 @@ import { NewUserContext } from "../../components/FinalProject/FinalProject" import { useContext } from 'react'; import { useAuth, logout } from "../../auth"; import httpClient from "../../httpClient"; +import { useDispatch } from "react-redux"; +import { setSignOut } from "../../redux/slices/userSlice" // set log out functionality here? const DropDownMenu = props => { const [newUser, setNewUser] = useContext(NewUserContext); + const dispatch = useDispatch() + // Function to log out the user function logMeOut() { httpClient({ method: "POST", - url: "http://localhost:5000/logout" + url: "http://localhost:5000/user/logout" }) .then((response) => { logout() + dispatch(setSignOut()) alert("You have successfully logged out") }).catch((error) => { if (error.response) { diff --git a/src/components/EditBanner/EditBanner.jsx b/src/components/EditBanner/EditBanner.jsx index 39a0771..ceb8539 100644 --- a/src/components/EditBanner/EditBanner.jsx +++ b/src/components/EditBanner/EditBanner.jsx @@ -2,17 +2,24 @@ import styles from "./EditBanner.module.css"; import profile from '../../assets/images/logos/user.png'; import { Fragment, useContext } from "react"; import { UserNameContext } from "../../components/FinalProject/FinalProject"; +import { useSelector } from "react-redux" +import { selectCurrentUser } from "../../redux/slices/userSlice" const EditBanner = () => { const [UserName, setUserName] = useContext(UserNameContext); + const user = useSelector(selectCurrentUser) + + console.log(user) + + const welcome = user ? `${user.name}` : "Guest" return (User2
+{welcome}
-
+ );
+};
export default EditPosts;
diff --git a/src/components/EditPosts/EditPosts.module.css b/src/components/EditPosts/EditPosts.module.css
index 7bd109d..5552d65 100644
--- a/src/components/EditPosts/EditPosts.module.css
+++ b/src/components/EditPosts/EditPosts.module.css
@@ -63,3 +63,10 @@
margin: 10px auto 30px;
padding: 0 10px;
}
+
+.commentContainer{
+ display: flex;
+ flex-direction: row;
+ gap: 5px;
+ align-items: center;
+}
diff --git a/src/components/EditProfileDetails/EditProfileDetails.jsx b/src/components/EditProfileDetails/EditProfileDetails.jsx
index 5097dde..3839c7d 100644
--- a/src/components/EditProfileDetails/EditProfileDetails.jsx
+++ b/src/components/EditProfileDetails/EditProfileDetails.jsx
@@ -1,86 +1,150 @@
-import styles from "./EditProfileDetails.module.css";
+import styles from './EditProfileDetails.module.css';
import editProfile from '../../assets/images/editProfile.svg';
+import React, { useEffect, useState } from 'react';
+import httpClient from '../../httpClient';
+import { useSelector } from 'react-redux';
+import { selectCurrentUser } from '../../redux/slices/userSlice';
+import EditInput from '../EditInput/EditInput';
+
+// Have added an API call ish but no idea how to get it into the profile box or how to convert the profile box to view rather than edit, tried to copy recommendations.js
+// Think would be cool to have the component as view only initially with an "edit" button, that then allows you to make a put or post request to edit certain fields
const EditPosts = () => {
- return (
-
- )
-}
+ const user = useSelector(selectCurrentUser);
+ const [userDetails, setUserDetails] = useState({
+ first_name: null,
+ last_name: null,
+ email: null,
+ date_of_birth: null,
+ interests: null,
+ });
+
+ // let editable = true;
+ const [userValues, setUserValues] = useState({
+ first_name: 'ANGEL',
+ last_name: '',
+ username: '',
+ email: '',
+ password: ''
+ });
+
+ const [List, setList] = useState([]);
+ const token = localStorage.getItem('REACT_TOKEN_AUTH_KEY')
+ console.log(token)
+ const [profile, setProfile] = useState(null);
+
+ useEffect(() => {
+ const getAPI = async () => {
+ try {
+ const response = await httpClient.get("http://localhost:5000/user/current_user", {headers: {"Authorization": `Bearer ${JSON.parse(token)}`}});
+ // console.log(response.data)
+ setUserDetails((ud) => (ud = response.data));
+ // console.log(userDetails);
+ } catch(error) {
+ console.log(error)
+ }
+ };
+ getAPI()
+ }, [user.name, token]);
+
+ // useEffect(() => {
+ // const getAPI = async () => {
+ // try {
+ // const response = await httpClient.get(
+ // 'http://localhost:5000/user/members/' + user.name
+ // );
+ // setUserDetails((ud) => (ud = response.data));
+ // console.log(userDetails);
+ // } catch (error) {
+ // console.log(error);
+ // }
+ // };
+ // getAPI();
+ // }, [user.name]);
+
+ return (
+
+ );
+};
+
export default EditPosts;
diff --git a/src/components/EditProfileDetails/EditProfileDetails.module.css b/src/components/EditProfileDetails/EditProfileDetails.module.css
index e290732..5fd6329 100644
--- a/src/components/EditProfileDetails/EditProfileDetails.module.css
+++ b/src/components/EditProfileDetails/EditProfileDetails.module.css
@@ -1,74 +1,83 @@
.EditAccountform {
- display: flex;
- flex-direction: column;
- gap: 10px;
- padding: 25px;
- min-width: 750px;
- justify-content: center;
- align-items: center;
- background-color: #d9d9d9;
- border-radius: 15px;
- margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 25px;
+ min-width: 750px;
+ justify-content: center;
+ align-items: center;
+ background-color: #d9d9d9;
+ border-radius: 15px;
+ margin: 0 auto;
}
-
.editInput {
- display: flex;
- padding: 8px;
- border-radius: 10px;
- text-align: center;
- width: 60vh;
- gap: 10px;
+ display: flex;
+ padding: 8px;
+ border-radius: 10px;
+ text-align: center;
+ width: 60vh;
+ gap: 10px;
+}
+
+.editInputActive {
+ display: flex;
+ padding: 8px;
+ border-radius: 10px;
+ text-align: center;
+ width: 60vh;
+ gap: 10px;
+ border-color: rgb(0, 106, 255);
}
.formContainer {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 0 auto;
- padding-bottom: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 auto;
+ padding-bottom: 30px;
}
.row {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
}
.imageButton {
- background-color: none;
- width: 5vh;
+ background-color: none;
+ width: 5vh;
}
.row label {
- width: 120px;
+ width: 120px;
}
@media all and (max-width: 820px) {
- .EditAccountform {
- width: 93.6vw;
- }
+ .EditAccountform {
+ width: 93.6vw;
+ }
- .postsContainer {
- margin: 90px auto 10px;
- }
+ .postsContainer {
+ margin: 90px auto 10px;
+ }
- .row label {
- width: 180px;
- }
+ .row label {
+ width: 180px;
+ }
}
-@media all and (min-width: 360px){
- .EditAccountform {
- width: 80vw;
- }
+@media all and (min-width: 360px) {
+ .EditAccountform {
+ width: 80vw;
+ }
}
-@media all and (max-width: 360px){
- .EditAccountform {
- width: 80vw;
- margin-left: 10px;
- }
-}
\ No newline at end of file
+@media all and (max-width: 360px) {
+ .EditAccountform {
+ width: 80vw;
+ margin-left: 10px;
+ }
+}
diff --git a/src/components/FinalProject/FinalProject.jsx b/src/components/FinalProject/FinalProject.jsx
index 62596ed..55f1e88 100644
--- a/src/components/FinalProject/FinalProject.jsx
+++ b/src/components/FinalProject/FinalProject.jsx
@@ -1,13 +1,15 @@
-import { Fragment, createContext, useState } from 'react';
+import { Fragment, createContext, useEffect, useState } from 'react';
import NavGraph from '../../navigation/NavGraph';
import AccountCreation from '../../components/accountCreation/accountCreation';
-import Recommendations from '../../pages/recommendations/recommendations';
+import styles from './FinalProject.module.css';
+import Card from '../../UI/Card/card';
+import Button from '../../UI/Button/button';
+// import { response } from 'express';
+import httpClient from '../../httpClient';
// export const UserContext = createContext();
export const SignUpContext = createContext();
export const NewUserContext = createContext();
-export const MobileNavContext = createContext();
-export const StyleMobileNavContext = createContext();
export const UserContext = createContext();
export const UserNameContext = createContext();
@@ -15,29 +17,144 @@ const FinalProject = () => {
const [isOpened, setIsOpened] = useState(false);
const [isSignModal, setIsSignModal] = useState(false);
const [newUser, setNewUser] = useState(false);
- const [isMobileClicked, setIsMobileClicked] = useState(false);
- let [userName, setUserName] = useState("User");
-
- let style2 = null
-
- return(
- Posts
- {props.data.map((post) => ( -
-
+ ))}
+
-
+const EditPosts = (props) => {
+ return (
+
-
-
-
-
- {post.post_author}
-{post.post_category}
-
+
- )
-}
+ Posts
+ {props.data.map((post) => ( +
+
- ))}
-
+
-
+
+
+
+
+ {post.post_author}
+{post.post_category}
+- {post.post_content} -
+{post.post_content}
-- {post.post_date} -
-+ {new Date(post.post_date).toLocaleDateString('en-GB', { + weekday: 'short', + day: 'numeric', + month: 'short', + year: 'numeric', + })} +
++ {new Date(post.post_date).toLocaleTimeString('en-GB', { + hour12: 'true', + })} +
+
+ })
+
+
+ 0
+
+ {isChatRoom ? (
+
+
+
+ ) : null}
+
+ -
+ {users.map((name) => (
+
- { + setOtherUser(name.first_name); + setIsUsers([]); + setUserName(''); + setUserInput(''); + setMessageInput(''); + }} + > + {name.first_name} + + ))} +
{otherUser}
+
+
+
+
+ Hello There!
+
+
+
+
+ Hi User hows it going?
+
+ {
+ setMessageInput(e.target.value);
+ }}
+ >
+
+ onChatRoom()}
+ >
+ })
+
+
+
- }
+const ForumItem = (props) => {
+ let profile = null;
+ let comments = null;
+ if (props.icon !== '') {
+ profile = (
+
+ );
+ }
- return(
-
- {profile}
-
- )
-}
+ if (!props.isComments) {
+ comments = null;
+ } else {
+ comments = (
+
-
- {props.title}
-{props.userName}
-
+
+
+ );
+ }
-export default ForumItem;
\ No newline at end of file
+ return (
+
+ 0
+
+ {profile}
+
+ );
+};
+
+export default ForumItem;
diff --git a/src/components/ForumItem/ForumItem.module.css b/src/components/ForumItem/ForumItem.module.css
index 143d8c5..78dbbc6 100644
--- a/src/components/ForumItem/ForumItem.module.css
+++ b/src/components/ForumItem/ForumItem.module.css
@@ -7,6 +7,7 @@
border-radius: 10px;
align-items: center;
flex-direction: row;
+ cursor: pointer;
}
.Textcolumn{
@@ -53,16 +54,27 @@
width: 60px;
background-color: grey;
border-radius: 10px;
- /* margin-right: 25px; */
border: 4px #4C4B4B solid;
}
.profilePicture{
display: flex;
- /* width: 50px; */
height: 50px;
}
+.commentContainer{
+ display: flex;
+ flex-direction: row;
+ gap: 5px;
+ align-items: center;
+}
+
+.comment{
+ width: 35px;
+ height: 35px;
+ margin: 0;
+}
+
@media all and (min-width: 360px) {
.row{
width: 96%;
diff --git a/src/components/MobileNav/MobileNav.jsx b/src/components/MobileNav/MobileNav.jsx
deleted file mode 100644
index 1b53ba3..0000000
--- a/src/components/MobileNav/MobileNav.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import styles from "./MobileNav.module.css";
-import { Link } from "react-router-dom";
-import { NewUserContext, MobileNavContext, StyleMobileNavContext, UserContext} from "../../components/FinalProject/FinalProject";
-import { useContext, useState } from "react";
-
-
-// Angel, can you update this one to match the login requirements of the other navbar too? Although I don't think mobile functionality is a prio for submission
-const MobileNav = () => {
- const [newUser, setNewUser] = useContext(NewUserContext);
- const [isMobileClicked, setIsMobileClicked] = useContext(MobileNavContext);
- const [isOpened, setIsOpened] = useContext(UserContext);
-
- let style2 = StyleMobileNavContext;
-
- if (!isMobileClicked){
- style2 = {display: 'none'};
- } else {
- style2 = {display: 'block'};
- }
-
- return(
-
+
+ {props.title}
+{props.userName}
+ {comments} +{props.date}
+
- {newUser ?
-
- )
-}
-
-export default MobileNav
\ No newline at end of file
diff --git a/src/components/MobileNav/MobileNav.module.css b/src/components/MobileNav/MobileNav.module.css
deleted file mode 100644
index d1bb57e..0000000
--- a/src/components/MobileNav/MobileNav.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.MobileNav{
- display: none;
-}
-
-@media all and (max-width: 875px){
- .MobileNav{
- position: absolute;
- z-index: 1;
- top: 21.3vh;
- justify-content: center;
- width: 100%;
- }
- .navItemsMobile{
- display: flex;
- flex-direction: column;
- background-color: #353be552;
- width: 100%;
- }
-
- .navItemMobile{
- font-size: 20px;
- padding-top: 5px;
- padding-bottom: 5px;
- font-weight: 500;
- width: 100%;
- text-align: center;
- margin: 0 auto;
- }
-
- .navItemMobile:hover{
- background-color: #2d32c052;
- }
-
- .navLink{
- color: white;
- text-decoration: none;
- }
-}
\ No newline at end of file
diff --git a/src/components/NavBar/nav.module.css b/src/components/NavBar/nav.module.css
index 986430c..4c18efe 100644
--- a/src/components/NavBar/nav.module.css
+++ b/src/components/NavBar/nav.module.css
@@ -1,176 +1,175 @@
-.navbar{
- display: flex;
- position: absolute;
- background-color: #353be552;
- padding-top: 15px;
- padding-bottom: 15px;
- margin: 0;
- width: 100%;
- justify-content: space-between;
- align-items: center;
- z-index: 1;
+.navbar {
+ display: flex;
+ position: absolute;
+ background-color: #353be552;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ margin: 0;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 1;
}
.navbar h1 {
- display: flex;
- align-items: center;
- margin-left: 5px;
- color: white;
- text-shadow: 4px 4px 4px #0094FF56;
- font-weight: 800;
- font-size: 55px;
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ color: white;
+ text-shadow: 4px 4px 4px #0094ff56;
+ font-weight: 800;
+ font-size: 55px;
}
-.navItems{
- display: flex;
- gap: 10px;
- justify-content: flex-end;
- /* width: 71%; */
- margin: 0;
- padding: 0;
+.navItems {
+ display: flex;
+ gap: 10px;
+ justify-content: flex-end;
+ /* width: 71%; */
+ margin: 0;
+ padding: 0;
+}
+
+.navItem {
+ font-size: 25px;
+ color: white;
+ font-weight: 400;
+ /* padding: 5px; */
}
-.navItem{
- font-size: 25px;
- color: white;
- font-weight: 400;
- /* padding: 5px; */
+.navItem:hover {
+ border: white 2px solid;
}
-.navItem:hover{
- border: white 2px solid;
+.MobileMenu {
+ display: none;
}
-.MobileMenu{
+.profile {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60px;
+ width: 60px;
+ background-color: grey;
+ border-radius: 10px;
+ /* margin-right: 25px; */
+ border: 4px #4c4b4b solid;
+}
+
+.profilePicture {
+ display: flex;
+ /* width: 50px; */
+ height: 50px;
+}
+
+.profileRow {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ /* margin-right: 5px; */
+ align-items: center;
+ justify-content: center;
+}
+
+.navHeadingTitles {
+ font-size: 5vh;
+ font-weight: 400;
+ padding: 0;
+ margin: 0;
+}
+
+.link {
+ text-decoration: none;
+}
+
+.logo {
+ height: 150px;
+ border-radius: 90px;
+ margin-left: 20px;
+}
+@media all and (max-width: 900px) {
+ .MobileMenu {
display: none;
+ height: 50px;
+ width: 50px;
+ }
+
+ .navItems {
+ overflow-x: hidden;
+ width: 65%;
+ }
+
+ .navbar h1 {
+ margin-left: 0;
+ font-size: 35px;
+ }
}
-.profile{
+@media all and (max-width: 872px) {
+ .MobileMenu {
+ display: block;
+ }
+
+ .menu {
display: flex;
- justify-content: center;
+ flex-direction: row;
align-items: center;
- height: 60px;
- width: 60px;
- background-color: grey;
- border-radius: 10px;
- /* margin-right: 25px; */
- border: 4px #4C4B4B solid;
+ gap: 65vw;
+ }
+
+ .navItems {
+ display: none;
+ overflow-x: hidden;
+ }
+
+ .navbar h1 {
+ margin-left: 15px;
+ font-size: 35px;
+ }
}
-.profilePicture{
+@media all and (max-width: 800px) {
+ .MobileMenu {
+ display: block;
+ }
+
+ .menu {
display: flex;
- /* width: 50px; */
- height: 50px;
-}
+ flex-direction: row;
+ gap: 65vw;
+ }
+
+ .navItems {
+ display: none;
+ overflow-x: hidden;
+ }
-.profileRow{
- position: relative;
+ .navbar h1 {
+ margin-left: 15px;
+ font-size: 35px;
+ }
+}
+@media all and (max-width: 700px) {
+ .menu {
display: flex;
flex-direction: row;
- /* margin-right: 5px; */
- align-items: center;
- justify-content: center;
+ gap: 50vw;
+ }
}
-.navHeadingTitles{
- font-size: 5vh;
- font-weight: 400;
- padding: 0;
- margin: 0;
+@media all and (max-width: 500px) {
+ .menu {
+ display: flex;
+ flex-direction: row;
+ gap: 38vw;
}
+}
-.link{
- text-decoration: none;
-}
-
-.logo{
- height: 150px;
- border-radius: 90px;
- margin-left: 20px;
-}
-@media all and (max-width: 900px){
- .MobileMenu{
- display: none;
- height: 50px;
- width: 50px;
- }
-
- .navItems{
- overflow-x: hidden;
- width: 65%;
- }
-
- .navbar h1 {
- margin-left: 0;
- font-size: 35px;
- }
-}
-
-@media all and (max-width: 872px){
- .MobileMenu{
- display: block;
- }
-
- .menu{
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 65vw;
- }
-
- .navItems{
- display: none;
- overflow-x: hidden;
- }
-
- .navbar h1 {
- margin-left: 15px;
- font-size: 35px;
- }
-}
-
-@media all and (max-width: 800px){
- .MobileMenu{
- display: block;
- }
-
- .menu{
- display: flex;
- flex-direction: row;
- gap: 65vw;
- }
-
- .navItems{
- display: none;
- overflow-x: hidden;
- }
-
- .navbar h1 {
- margin-left: 15px;
- font-size: 35px;
- }
-}
-
-@media all and (max-width: 700px){
- .menu{
- display: flex;
- flex-direction: row;
- gap: 50vw;
- }
-}
-
-@media all and (max-width: 500px){
- .menu{
- display: flex;
- flex-direction: row;
- gap: 38vw;
- }
-}
-
-@media all and (max-width: 360px){
- .menu{
- display: flex;
- flex-direction: row;
- gap: 30vw;
- }
-}
\ No newline at end of file
+@media all and (max-width: 360px) {
+ .menu {
+ display: flex;
+ flex-direction: row;
+ gap: 30vw;
+ }
+}
diff --git a/src/components/NavBar/navbar.jsx b/src/components/NavBar/navbar.jsx
index 131b364..9d2a569 100644
--- a/src/components/NavBar/navbar.jsx
+++ b/src/components/NavBar/navbar.jsx
@@ -1,90 +1,131 @@
-import styles from "./nav.module.css";
-import Button from "../../UI/Button/button";
-import profile from "../../assets/images/logos/user.png";
-import profileDropArrow from "../../assets/images/profileArrow.svg";
-import { Link } from "react-router-dom";
-import logo from "../../logo.png";
-
-import Menu from "../../assets/images/logos/menu.svg";
-import { useAuth } from "../../auth";
-import { UserContext, NewUserContext, SignUpContext, MobileNavContext } from "../../components/FinalProject/FinalProject";
-import { useContext, useState, useEffect } from "react";
-
-
+import styles from './nav.module.css';
+import Button from '../../UI/Button/button';
+import profile from '../../assets/images/logos/user.png';
+import profileDropArrow from '../../assets/images/profileArrow.svg';
+import { Link } from 'react-router-dom';
+import logo from '../../logo.png';
+import Menu from '../../assets/images/logos/menu.svg';
+import { useAuth } from '../../auth';
+import {
+ UserContext,
+ NewUserContext,
+ SignUpContext,
+} from '../../components/FinalProject/FinalProject';
+import { useContext } from 'react';
function NavBar(props) {
- const [logged]=useAuth();
- const [isOpened, setIsOpened] = useContext(UserContext);
+ const [logged] = useAuth();
+ const [isOpened, setIsOpened] = useContext(UserContext);
// const [newUser, setNewUser] = useContext(NewUserContext);
// const [isSignUp, setIsSignUp] = useContext(SignUpContext);
- const [isMobileClicked, setIsMobileClicked] = useContext(MobileNavContext);
-
// Links that logged in user sees
const LoggedInLinks = () => {
return (
- <>
-
-
:
-
- setIsMobileClicked(false)}>Home
-
-
- setIsMobileClicked(false)}>Recommendations
-
-
- setIsMobileClicked(false)}>About
-
-
- setIsMobileClicked(false)}>Forums
-
-
- setIsMobileClicked(false)}>Profile
-
-
- {
- setNewUser(false)
- setIsMobileClicked(false)}}
- >Sign Out
-
-
-
- }
-
- setIsMobileClicked(false)}>Home
-
-
- setIsMobileClicked(false)}>About
-
- {/* Will implement tomorrow. */}
-
- {
- setIsOpened(true);
- setIsMobileClicked(false)}}
- >Sign in
-
-
-
+
+ );
+ };
// Links that logged out user sees
const LoggedOutLinks = () => {
return (
<>
Home
-Recommendations
-Forums
-About
- {/*Sign Out
*/} -
+ <>
+ 
props.onChangePressed(!props.isPressed)}
+ />
+
+
+
+
props.onChangePressed(!props.isPressed)}/>
+
-
-
-
- )
- }
+ Home
+ + +Recommendations
+ + +Forums
+ + +About
+ + {/*Sign Out
*/} +
-
-
-
-
- )
- }
+ );
+ };
// Rendering the nav bar depending on if user is logged in or not
- return(
+ return (
-)
+ );
}
export default NavBar;
-
-
// }
-
-
-
-
-
// const NavBar = () => {
// useEffect(() => {
// // skip initial render
@@ -111,25 +152,24 @@ export default NavBar;
// }
// export default NavBar;
-// /*
+// /*
// /* Home
-About
- + +Home
+ + +About
+ +IntroVerse
*/ // /* { -// // isSignedin +// // isSignedin // ? //
//
+// Home
//About
//Forums
-//
//
-
-// } */
+// } */
// // With drop down menu
// // const LoggedInLinks = props => {
@@ -144,14 +184,14 @@ export default NavBar;
// // Home
//About
//
// //
// //
-// // About
-Our Mission
-At Introverse, we are dedicated to nurturing the mental well-being of introverts who cherish the worlds of anime, gaming and literature. We understand that finding a community where you can truly belong and express your passions can be a transformative experience. Our mission is to create an inviting digital haven where introverts can connect, share, and engage in meaningful conversations about anime, games and reading. -We strive to offer a platform that resonates with the unique needs and preferences of our audience, providing a space that feels like home. Here, every voice is valued, every interest is celebrated, and every individual is encouraged to embrace their love for anime, literature and gaming. Our commitment extends beyond creating a community; it's about fostering an environment where introverts can flourish, find like-minded friends, and feel empowered to explore their passions without any reservations. -In this journey, we are not just building a website; we are crafting a sanctuary where the beauty of solitude meets the warmth of togetherness, all centred around the shared love for anime, games and books.
-The Team!
-
-
+
+
+
-
-
- );
+
+ About
+Our Mission
++ At Introverse, we are dedicated to nurturing the mental well-being + of introverts who cherish the worlds of anime, gaming and + literature. We understand that finding a community where you can + truly belong and express your passions can be a transformative + experience. Our mission is to create an inviting digital haven where + introverts can connect, share, and engage in meaningful + conversations about anime, games and reading. We strive to offer a + platform that resonates with the unique needs and preferences of our + audience, providing a space that feels like home. Here, every voice + is valued, every interest is celebrated, and every individual is + encouraged to embrace their love for anime, literature and gaming. + Our commitment extends beyond creating a community; it's about + fostering an environment where introverts can flourish, find + like-minded friends, and feel empowered to explore their passions + without any reservations. In this journey, we are not just building + a website; we are crafting a sanctuary where the beauty of solitude + meets the warmth of togetherness, all centred around the shared love + for anime, games and books. +
+The Team!
+
+
- No Posts Yet.
- setPosts(null) - } - }) - .catch(err => { - setPosts(null); - // APIres = null; - console.log(err); - error =No Posts Yet.
}); - } - getForms(); - // getAPI(); - }, []) + console.log(UserName); + let error = null; + let filteredList = null; - return ( -
-
- }
- {/* No Posts Yet.
-No Posts Yet.
; + setPosts(null); + } + }) + .catch((err) => { + setPosts(null); + console.log(err); + error =No Posts Yet.
; + }); + }; + getForms(); + }, []); + + console.log(filteredList); + + return ( +
+
+ )}
+ No Posts Yet.
+No Posts Yet.
}); + error =No Posts Yet.
; + }); + }; + if (endpoint !== '') { + getForms(endpoint); } - getForms(); - },[newPost]) + }, [endpoint, newPost]); - const filterArray = (category) => { - console.log(category); - postID = (posts[posts.length - 1].post_id); - let filterList = posts.filter((list) => list.post_category === category) - setfilteredposts(filterList); - console.log(posts); - } + // const filterArray = (category) => { + // console.log(category); + // postID = posts[posts.length - 1].post_id; + // let filterList = posts.filter((list) => list.post_category === category); + // setfilteredposts(filterList); + // console.log(posts); + // }; return (
-
-
-