Testing and debugging

This commit is contained in:
Andrew Trieu
2023-07-23 18:56:27 +03:00
parent cd8c4611b6
commit 2e1832a0bf
16 changed files with 61 additions and 52 deletions

View File

@@ -24,3 +24,5 @@ Table:
| 21.07.2023 | Each post on home page | 20 | | 21.07.2023 | Each post on home page | 20 |
| 22.07.2023 | Ads and friend list | 10 | | 22.07.2023 | Ads and friend list | 10 |
| 23.07.2023 | Profile page | 5 | | 23.07.2023 | Profile page | 5 |
| 24.07.2023 | Testing and debugging | 3 |

View File

@@ -6,12 +6,12 @@ import { setFriends } from "state";
import FlexBetween from "./FlexBetween"; import FlexBetween from "./FlexBetween";
import ProfilePhoto from "./ProfilePhoto"; import ProfilePhoto from "./ProfilePhoto";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => { const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const { _id } = useSelector((state) => state.user); const userId = useSelector((state) => state.user.user._id);
const token = useSelector((state) => state.token); const token = useSelector((state) => state.token);
const friends = useSelector((state) => state.user.friends); const friends = useSelector((state) => state.user.friends);
const { palette } = useTheme(); const { palette } = useTheme();
@@ -20,10 +20,12 @@ const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => {
const main = palette.neutral.main; const main = palette.neutral.main;
const medium = palette.neutral.medium; const medium = palette.neutral.medium;
const isFriend = friends.find((friend) => friend._id === friendId); if (!friends) return null;
const isFriend = friends.some((friend) => friend._id === friendId) || false;
const handleFriend = async () => { const handleFriend = async () => {
const response = await fetch(`${baseUrl}/users/${_id}/${friendId}`, { const response = await fetch(`${baseUrl}/users/${userId}/${friendId}`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,

View File

@@ -1,6 +1,6 @@
import { Box } from "@mui/material"; import { Box } from "@mui/material";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const ProfilePhoto = ({ image, size = "60px" }) => { const ProfilePhoto = ({ image, size = "60px" }) => {
return ( return (

View File

@@ -9,7 +9,7 @@ import FriendList from "scenes/widgets/FriendList";
const HomePage = () => { const HomePage = () => {
const isNotMobile = useMediaQuery("(min-width: 1000px)"); const isNotMobile = useMediaQuery("(min-width: 1000px)");
const { _id, profilePicturePath } = useSelector((state) => state.user); const { _id, profilePicturePath } = useSelector((state) => state.user.user);
return ( return (
<Box> <Box>

View File

@@ -16,7 +16,7 @@ import { setLogin } from "state";
import Dropzone from "react-dropzone"; import Dropzone from "react-dropzone";
import FlexBetween from "components/FlexBetween"; import FlexBetween from "components/FlexBetween";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const registerSchema = yup.object().shape({ const registerSchema = yup.object().shape({
firstName: yup.string().required("First name is required"), firstName: yup.string().required("First name is required"),

View File

@@ -29,7 +29,7 @@ const Navbar = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
const user = useSelector((state) => state.user); const user = useSelector((state) => state.user.user);
const isNotMobile = useMediaQuery("(min-width: 1000px)"); const isNotMobile = useMediaQuery("(min-width: 1000px)");
const theme = useTheme(); const theme = useTheme();

View File

@@ -8,7 +8,7 @@ import PostWidget from "scenes/widgets/PostWidget";
import FeedWidget from "scenes/widgets/FeedWidget"; import FeedWidget from "scenes/widgets/FeedWidget";
import UserWidget from "scenes/widgets/UserWidget"; import UserWidget from "scenes/widgets/UserWidget";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const ProfilePage = () => { const ProfilePage = () => {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);

View File

@@ -2,7 +2,7 @@ import { Typography, useTheme } from "@mui/material";
import FlexBetween from "components/FlexBetween"; import FlexBetween from "components/FlexBetween";
import WidgetWrapper from "components/WidgetWrapper"; import WidgetWrapper from "components/WidgetWrapper";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const AdsWidget = () => { const AdsWidget = () => {
const { palette } = useTheme(); const { palette } = useTheme();

View File

@@ -10,9 +10,9 @@ import Friend from "components/Friend";
import WidgetWrapper from "components/WidgetWrapper"; import WidgetWrapper from "components/WidgetWrapper";
import { useState } from "react"; import { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setPosts } from "state"; import { setPost } from "state";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const ContentWidget = ({ const ContentWidget = ({
postId, postId,
@@ -28,7 +28,7 @@ const ContentWidget = ({
const [isComments, setIsComments] = useState(false); const [isComments, setIsComments] = useState(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const token = useSelector((state) => state.token); const token = useSelector((state) => state.token);
const loggedInUserId = useSelector((state) => state.user._id); const loggedInUserId = useSelector((state) => state.user.user._id);
const isLiked = Boolean(likes[loggedInUserId]); const isLiked = Boolean(likes[loggedInUserId]);
const likesCount = Object.keys(likes).length; const likesCount = Object.keys(likes).length;
const { palette } = useTheme(); const { palette } = useTheme();
@@ -45,7 +45,7 @@ const ContentWidget = ({
body: JSON.stringify({ userId: loggedInUserId }), body: JSON.stringify({ userId: loggedInUserId }),
}); });
const updatedPost = await response.json(); const updatedPost = await response.json();
dispatch(setPosts({ post: updatedPost })); dispatch(setPost({ post: updatedPost }));
}; };
return ( return (

View File

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
import { setPosts } from "state"; import { setPosts } from "state";
import ContentWidget from "./ContentWidget"; import ContentWidget from "./ContentWidget";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const FeedWidget = ({ userId, isProfile = false }) => { const FeedWidget = ({ userId, isProfile = false }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -35,7 +35,7 @@ const FeedWidget = ({ userId, isProfile = false }) => {
useEffect(() => { useEffect(() => {
isProfile ? getUserPosts() : getPosts(); isProfile ? getUserPosts() : getPosts();
}, []); // eslint-disable-line react-hooks/exhaustive-deps }, []); // eslint-disable-line react-hooks/exhaustive-deps
console.log(posts);
return ( return (
<> <>
{posts.map( {posts.map(

View File

@@ -5,7 +5,7 @@ import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setFriends } from "state"; import { setFriends } from "state";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const FriendList = ({ userId }) => { const FriendList = ({ userId }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -36,18 +36,20 @@ const FriendList = ({ userId }) => {
fontWeight="500" fontWeight="500"
sx={{ mb: "1.5rem" }} sx={{ mb: "1.5rem" }}
> >
Great minds you know Connected great minds
</Typography> </Typography>
<Box display="flex" flexDirection="column" gap="1.5rem"> <Box display="flex" flexDirection="column" gap="1.5rem">
{friends.map((friend) => ( {friends &&
<Friend friends.length > 0 &&
key={friend._id} friends.map((friend) => (
friendId={friend._id} <Friend
userName={`${friend.firstName} ${friend.lastName}`} key={friend._id}
subtitle={friend.location} friendId={friend._id}
profilePicturePath={friend.profilePicturePath} userName={`${friend.firstName} ${friend.lastName}`}
/> subtitle={friend.location}
))} profilePicturePath={friend.profilePicturePath}
/>
))}
</Box> </Box>
</WidgetWrapper> </WidgetWrapper>
); );

View File

@@ -25,7 +25,7 @@ import { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setPosts } from "state"; import { setPosts } from "state";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const PostWidget = ({ profilePicturePath }) => { const PostWidget = ({ profilePicturePath }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -33,7 +33,7 @@ const PostWidget = ({ profilePicturePath }) => {
const [image, setImage] = useState(null); const [image, setImage] = useState(null);
const [post, setPost] = useState(""); const [post, setPost] = useState("");
const { palette } = useTheme(); const { palette } = useTheme();
const { _id } = useSelector((state) => state.user); const userId = useSelector((state) => state.user.user._id);
const token = useSelector((state) => state.token); const token = useSelector((state) => state.token);
const isNotMobile = useMediaQuery("(min-width: 1000px)"); const isNotMobile = useMediaQuery("(min-width: 1000px)");
const mediumMain = palette.neutral.mediumMain; const mediumMain = palette.neutral.mediumMain;
@@ -41,7 +41,7 @@ const PostWidget = ({ profilePicturePath }) => {
const handlePost = async () => { const handlePost = async () => {
const formData = new FormData(); const formData = new FormData();
formData.append("userId", _id); formData.append("userId", userId);
formData.append("content", post); formData.append("content", post);
if (image) { if (image) {
formData.append("contentPicture", image); formData.append("contentPicture", image);

View File

@@ -3,6 +3,9 @@ import {
EditOutlined, EditOutlined,
LocationOnOutlined, LocationOnOutlined,
FavoriteOutlined, FavoriteOutlined,
FacebookOutlined,
Instagram,
LinkedIn,
} from "@mui/icons-material"; } from "@mui/icons-material";
import { Box, Typography, Divider, useTheme } from "@mui/material"; import { Box, Typography, Divider, useTheme } from "@mui/material";
import ProfilePhoto from "components/ProfilePhoto"; import ProfilePhoto from "components/ProfilePhoto";
@@ -12,7 +15,7 @@ import { useSelector } from "react-redux";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const baseUrl = process.env.REACT_APP_BASE_URL; const baseUrl = process.env.REACT_APP_BASE_URL || "http://localhost:3001";
const UserWidget = ({ userId, profilePicturePath }) => { const UserWidget = ({ userId, profilePicturePath }) => {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
@@ -64,7 +67,7 @@ const UserWidget = ({ userId, profilePicturePath }) => {
{firstName} {lastName} {firstName} {lastName}
</Typography> </Typography>
<Typography color={medium}> <Typography color={medium}>
{friends.length} friend&#40;s&#41; {friends && friends.length} friend&#40;s&#41;
</Typography> </Typography>
</Box> </Box>
</FlexBetween> </FlexBetween>
@@ -89,7 +92,7 @@ const UserWidget = ({ userId, profilePicturePath }) => {
</Typography> </Typography>
<FlexBetween gap="1rem" mb="0.5rem"> <FlexBetween gap="1rem" mb="0.5rem">
<FlexBetween gap="1rem"> <FlexBetween gap="1rem">
<img src="../../public/assets/icons/facebook.svg" alt="facebook" /> <FacebookOutlined fontSize="large" sx={{ color: main }} />
<Box> <Box>
<Typography color={main} fontWeight="500"> <Typography color={main} fontWeight="500">
Facebook Facebook
@@ -101,10 +104,7 @@ const UserWidget = ({ userId, profilePicturePath }) => {
</FlexBetween> </FlexBetween>
<FlexBetween gap="1rem"> <FlexBetween gap="1rem">
<FlexBetween gap="1rem"> <FlexBetween gap="1rem">
<img <Instagram fontSize="large" sx={{ color: main }} />
src="../../public/assets/icons/instagram.svg"
alt="instagram"
/>
<Box> <Box>
<Typography color={main} fontWeight="500"> <Typography color={main} fontWeight="500">
Instagram Instagram
@@ -116,7 +116,7 @@ const UserWidget = ({ userId, profilePicturePath }) => {
</FlexBetween> </FlexBetween>
<FlexBetween gap="1rem"> <FlexBetween gap="1rem">
<FlexBetween gap="1rem"> <FlexBetween gap="1rem">
<img src="../../public/assets/icons/linkedin.svg" alt="linkedin" /> <LinkedIn fontSize="large" sx={{ color: main }} />
<Box> <Box>
<Typography color={main} fontWeight="500"> <Typography color={main} fontWeight="500">
LinkedIn LinkedIn

View File

@@ -71,12 +71,12 @@ export const login = async (req, res) => {
const validPassword = await bcrypt.compare(password, user.password); const validPassword = await bcrypt.compare(password, user.password);
if (!validPassword) return res.status(400).json({ msg: "Wrong password" }); if (!validPassword) return res.status(400).json({ msg: "Wrong password" });
const accessToken = jwt.sign( const token = jwt.sign(
{ id: user._id, admin: user.admin }, { id: user._id, admin: user.admin },
process.env.JWT_SECRET process.env.JWT_SECRET
); );
delete user.password; delete user.password;
res.status(200).json({ accessToken, user }); res.status(200).json({ token, user });
} catch (error) { } catch (error) {
res.status(500).json({ error: error.message }); res.status(500).json({ error: error.message });
} }

View File

@@ -55,6 +55,9 @@ export const getFriends = async (req, res) => {
export const patchFriend = async (req, res) => { export const patchFriend = async (req, res) => {
try { try {
const { userId, friendId } = req.params; const { userId, friendId } = req.params;
if (userId === friendId) {
return res.status(400).json({ error: "You cannot add yourself" });
}
const user = await User.findById(userId); const user = await User.findById(userId);
const friend = await User.findById(friendId); const friend = await User.findById(friendId);
@@ -63,7 +66,7 @@ export const patchFriend = async (req, res) => {
friend.friends = friend.friends.filter((id) => id !== id); friend.friends = friend.friends.filter((id) => id !== id);
} else { } else {
user.friends.push(friendId); user.friends.push(friendId);
friend.friends.push(id); friend.friends.push(userId);
} }
await user.save(); await user.save();

View File

@@ -36,7 +36,7 @@ export const mockUsers = [
firstName: "Aake", firstName: "Aake",
lastName: "Haapala", lastName: "Haapala",
email: "aake.haapala@mail.com", email: "aake.haapala@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", // 123456## password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti", // 123456##
profilePicturePath: "p1.jpeg", profilePicturePath: "p1.jpeg",
friends: [], friends: [],
location: "Helsinki, Finland", location: "Helsinki, Finland",
@@ -51,7 +51,7 @@ export const mockUsers = [
firstName: "Eelis", firstName: "Eelis",
lastName: "Janhunen", lastName: "Janhunen",
email: "eelis.janhunen@mail.com", email: "eelis.janhunen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e9", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p2.jpeg", profilePicturePath: "p2.jpeg",
friends: [], friends: [],
location: "Hämeenlinna, Finland", location: "Hämeenlinna, Finland",
@@ -66,7 +66,7 @@ export const mockUsers = [
firstName: "Eevert", firstName: "Eevert",
lastName: "Kotilainen", lastName: "Kotilainen",
email: "evert.kotilainen@mail.com", email: "evert.kotilainen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p3.jpeg", profilePicturePath: "p3.jpeg",
friends: [], friends: [],
location: "Kerava, Finland", location: "Kerava, Finland",
@@ -81,7 +81,7 @@ export const mockUsers = [
firstName: "Krista", firstName: "Krista",
lastName: "Manninen", lastName: "Manninen",
email: "krista.manninen@mail.com", email: "krista.manninen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p4.jpeg", profilePicturePath: "p4.jpeg",
friends: [], friends: [],
location: "Espoo, Finland", location: "Espoo, Finland",
@@ -96,7 +96,7 @@ export const mockUsers = [
firstName: "Taina", firstName: "Taina",
lastName: "Ruotsalainen", lastName: "Ruotsalainen",
email: "taina.ruotsalainen@mail.com", email: "taina.ruotsalainen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p5.jpeg", profilePicturePath: "p5.jpeg",
friends: [], friends: [],
location: "Turku, Finland", location: "Turku, Finland",
@@ -111,7 +111,7 @@ export const mockUsers = [
firstName: "Lea", firstName: "Lea",
lastName: "Varis", lastName: "Varis",
email: "lea.varis@mail.com", email: "lea.varis@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p6.jpeg", profilePicturePath: "p6.jpeg",
friends: [], friends: [],
location: "Tampere, Finland", location: "Tampere, Finland",
@@ -126,7 +126,7 @@ export const mockUsers = [
firstName: "Elisa", firstName: "Elisa",
lastName: "Järvelä", lastName: "Järvelä",
email: "elisa.jarvela@mail.com", email: "elisa.jarvela@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p7.jpeg", profilePicturePath: "p7.jpeg",
friends: [], friends: [],
location: "Riihimäki, Finland", location: "Riihimäki, Finland",
@@ -141,7 +141,7 @@ export const mockUsers = [
firstName: "Joonas", firstName: "Joonas",
lastName: "Koivisto", lastName: "Koivisto",
email: "joonas.koivisto@mail.com", email: "joonas.koivisto@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p8.jpeg", profilePicturePath: "p8.jpeg",
friends: [], friends: [],
location: "Rovaniemi, Finland", location: "Rovaniemi, Finland",
@@ -156,7 +156,7 @@ export const mockUsers = [
firstName: "Johanna", firstName: "Johanna",
lastName: "Mäkinen", lastName: "Mäkinen",
email: "johanna.makinen@mail.com", email: "johanna.makinen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p9.jpeg", profilePicturePath: "p9.jpeg",
friends: [], friends: [],
location: "Oulu, Finland", location: "Oulu, Finland",
@@ -171,7 +171,7 @@ export const mockUsers = [
firstName: "Johannes", firstName: "Johannes",
lastName: "Korhonen", lastName: "Korhonen",
email: "johannes.korhonen@mail.com", email: "johannes.korhonen@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p10.jpeg", profilePicturePath: "p10.jpeg",
friends: [], friends: [],
location: "Kuopio, Finland", location: "Kuopio, Finland",
@@ -186,7 +186,7 @@ export const mockUsers = [
firstName: "Mikko", firstName: "Mikko",
lastName: "Koivu", lastName: "Koivu",
email: "mikko.koivu@mail.com", email: "mikko.koivu@mail.com",
password: "$2a$04$LzaBXTtLrOglvkHIPcAYKevvIOLoPZCm48DdQr.rf1gg5cIiehV4e", password: "$2b$04$EYpcRcVBZP35DXZdQbXWSec1Mxh.H3HXqPRBYhjIw1/WXcadzmiti",
profilePicturePath: "p11.jpeg", profilePicturePath: "p11.jpeg",
friends: [], friends: [],
location: "Jyväskylä, Finland", location: "Jyväskylä, Finland",