AndrewTrieu/chathive
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Testing and debugging

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/Friend.jsx
View File

@@ -6,12 +6,12 @@ import { setFriends } from "state";
import FlexBetween from "./FlexBetween";
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 dispatch = useDispatch();
const navigate = useNavigate();
const { _id } = useSelector((state) => state.user);
const userId = useSelector((state) => state.user.user._id);
const token = useSelector((state) => state.token);
const friends = useSelector((state) => state.user.friends);
const { palette } = useTheme();
@@ -20,10 +20,12 @@ const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => {
const main = palette.neutral.main;
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 response = await fetch(`${baseUrl}/users/${_id}/${friendId}`, {
const response = await fetch(`${baseUrl}/users/${userId}/${friendId}`, {
method: "PATCH",
headers: {
Authorization: `Bearer ${token}`,

2
client/src/components/ProfilePhoto.jsx
View File

@@ -1,6 +1,6 @@
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" }) => {
return (

2
client/src/scenes/homePage/index.jsx
View File

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

2
client/src/scenes/loginPage/Form.jsx
View File

@@ -16,7 +16,7 @@ import { setLogin } from "state";
import Dropzone from "react-dropzone";
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({
firstName: yup.string().required("First name is required"),

2
client/src/scenes/navbar/index.jsx
View File

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

2
client/src/scenes/profilePage/index.jsx
View File

@@ -8,7 +8,7 @@ import PostWidget from "scenes/widgets/PostWidget";
import FeedWidget from "scenes/widgets/FeedWidget";
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 [user, setUser] = useState(null);

2
client/src/scenes/widgets/AdsWidget.jsx
View File

@@ -2,7 +2,7 @@ import { Typography, useTheme } from "@mui/material";
import FlexBetween from "components/FlexBetween";
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 { palette } = useTheme();

8
client/src/scenes/widgets/ContentWidget.jsx
View File

@@ -10,9 +10,9 @@ import Friend from "components/Friend";
import WidgetWrapper from "components/WidgetWrapper";
import { useState } from "react";
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 = ({
postId,
@@ -28,7 +28,7 @@ const ContentWidget = ({
const [isComments, setIsComments] = useState(false);
const dispatch = useDispatch();
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 likesCount = Object.keys(likes).length;
const { palette } = useTheme();
@@ -45,7 +45,7 @@ const ContentWidget = ({
body: JSON.stringify({ userId: loggedInUserId }),
});
const updatedPost = await response.json();
dispatch(setPosts({ post: updatedPost }));
dispatch(setPost({ post: updatedPost }));
};
return (

4
client/src/scenes/widgets/FeedWidget.jsx
View File

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

24
client/src/scenes/widgets/FriendList.jsx
View File

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

6
client/src/scenes/widgets/PostWidget.jsx
View File

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

16
client/src/scenes/widgets/UserWidget.jsx
View File

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