Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Part 2 UI bug-fixes/enhancements #166

Merged
merged 16 commits into from
Nov 29, 2023
Merged

Part 2 UI bug-fixes/enhancements #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a184018
Fixed loading animation of post page
rmgutierrez Nov 29, 2023
defdee2
Fixed select follower styling
rmgutierrez Nov 29, 2023
bc79020
Changed loading color and thickness
rmgutierrez Nov 29, 2023
0019663
Added loading animation for posts and followers in profile page
rmgutierrez Nov 29, 2023
d0c0e42
Update ProfilePage.tsx
rmgutierrez Nov 29, 2023
5597751
Show "You have no followers" when the modal is opan and user does not…
rmgutierrez Nov 29, 2023
91edff7
Aligned "distributed" with left nav bar and changed sign out color
rmgutierrez Nov 29, 2023
3e04d5d
Updated postbutton to not extend too much with higher resolution disp…
rmgutierrez Nov 29, 2023
f1feb41
Update PostPage.tsx
rmgutierrez Nov 29, 2023
5497829
Update PostsList.tsx
rmgutierrez Nov 29, 2023
4081573
Loading on whole profile instead of just posts or folllowers
rmgutierrez Nov 29, 2023
975d794
Fixed bug where the whole left side of the logo is also a link
rmgutierrez Nov 29, 2023
92042e8
Prevent users from seeing other user's unlisted posts
rmgutierrez Nov 29, 2023
665539c
Update github link format
rmgutierrez Nov 29, 2023
cee3af0
Added primary color to github logo and text
rmgutierrez Nov 29, 2023
a896bb7
Prevent bug where github events would shift to the right when a modal…
rmgutierrez Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 138 additions & 108 deletions client/src/components/Profilepage/ProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
TextField,
Grid,
IconButton,
Link
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { Post } from "../../interfaces/interfaces";
Expand Down Expand Up @@ -37,6 +38,7 @@ import Tooltip from "@mui/material/Tooltip";
import ProfileTabs from "./ProfileTabs";
import { codes } from "../../objects/objects";
import { isHostLocal } from "../../utils/responseUtils";
import Loading from "../ui/Loading";

const APP_URI = process.env.REACT_APP_URI;

Expand Down Expand Up @@ -88,6 +90,8 @@ const ProfilePage = () => {
github: "",
profileImage: "",
});
const [isPostLoading, setIsPostLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);

const location = useLocation();
const { otherAuthorObject, userObject } = location.state || {};
Expand Down Expand Up @@ -132,6 +136,8 @@ const ProfilePage = () => {
}
} catch (error) {
console.error("Error fetching author", error);
} finally {
setIsLoading(false);
}
}, [authorId]);

Expand All @@ -157,7 +163,7 @@ const ProfilePage = () => {
});
if (authorId !== loggedUserId) {
const publicPosts = response.data.filter((post: Post) =>
post.visibility === ShareType.PUBLIC);
post.visibility === ShareType.PUBLIC && post.unlisted === false);
setPosts(publicPosts);
} else {
setPosts(response.data);
Expand Down Expand Up @@ -187,6 +193,8 @@ const ProfilePage = () => {
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsPostLoading(false);
}

}, [authorId]);
Expand Down Expand Up @@ -224,6 +232,7 @@ const ProfilePage = () => {
github: otherAuthorObject.github,
profileImage: otherAuthorObject.profileImage,
});
setIsLoading(false);
}
}, [authorId, fetchAuthor]);

Expand Down Expand Up @@ -336,119 +345,140 @@ const ProfilePage = () => {
borderRight: "1px solid #dbd9d9",
}}
>
<Grid
sx={{
backgroundColor: "#FAF8F1",
paddingTop: 2,
paddingBottom: 5,
borderBottom: "1px solid #dbd9d9",

}}
>
<Box
sx={{
position: "relative",
height: 200,
width: 200,
marginLeft: "auto",
marginRight: "auto",
}}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
>
{showEdit && isLoggedUser && (
<IconButton
{ isLoading ? (
<Loading/>
) : (
<>
<Grid
sx={{
backgroundColor: "#FAF8F1",
paddingTop: 2,
paddingBottom: 5,
borderBottom: "1px solid #dbd9d9",
}}
>
<Box
sx={{
backgroundColor: "white",
position: "absolute",
right: 0,
boxShadow: 1,
transition: "all",
position: "relative",
height: 200,
width: 200,
marginLeft: "auto",
marginRight: "auto",
}}
onClick={handleOpen}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
>
<EditIcon />
</IconButton>
)}
<img
src={profilePic || defaultSrc}
alt="profile-pic"
className={classes.picture}
/>
</Box>
<Typography
variant="h2"
align="center"
color="textPrimary"
style={{ fontFamily: "Bree Serif, serif" }}
>
{username}
</Typography>
<a href={github ?? ""} target="_blank" rel="noopener noreferrer">
<Typography align="center" variant="body2" color="primary">
{github}
</Typography>
</a>
{!isLoggedUser && (
<Box display="flex" alignItems="center" justifyContent="center">
<FollowAuthorButton
authorId={authorId!}
isLocal={isLocal()}
otherAuthorObject={otherAuthorObject}
setIsUserFollowingAuthor={setIsUserFollowingAuthor}
userObject={userObject}
/>
{!isLoggedUser &&
isUserFollowingAuthor &&
isAuthorFollowingUser && (
<Tooltip
title={
<>
<Typography
color="inherit"
flexGrow={1}
textAlign={"center"}
>
True Friend
</Typography>
<em>{"You follow each other"}</em>
</>
}
{showEdit && isLoggedUser && (
<IconButton
sx={{
backgroundColor: "white",
position: "absolute",
right: 0,
boxShadow: 1,
transition: "all",
}}
onClick={handleOpen}
>
<FavoriteRoundedIcon
sx={{
borderRadius: 100,
fontSize: "35px",
marginTop: "auto",
marginBottom: "0.5px",
marginLeft: 1,
padding: "4px",
paddingTop: "6px",
color: "#FAF8F1",
bgcolor: "#103F5B",
}}
color="primary"
/>
</Tooltip>
<EditIcon />
</IconButton>
)}
</Box>
)}
</Grid>
<ProfileTabs
author={authorData!}
deletePost={deletePost}
isLocal={isLocal()}
fetchPosts={fetchPosts}
posts={posts}
/>
</Grid >
<img
src={profilePic || defaultSrc}
alt="profile-pic"
className={classes.picture}
/>
</Box>
<Typography
variant="h2"
align="center"
color="textPrimary"
style={{ fontFamily: "Bree Serif, serif" }}
>
{username}
</Typography>
<Link
href={github ?? ""}
target="_blank"
rel="noopener noreferrer"
style={{
textDecoration: "none",
}}
>
<Typography
align="center"
variant="subtitle1"
color="primary"
sx={{
marginTop: 1,
fontWeight: 500
}}
>
{github?.replace("https://", "")}
</Typography>
</Link>
{!isLoggedUser && (
<Box display="flex" alignItems="center" justifyContent="center">
<FollowAuthorButton
authorId={authorId!}
isLocal={isLocal()}
otherAuthorObject={otherAuthorObject}
setIsUserFollowingAuthor={setIsUserFollowingAuthor}
userObject={userObject}
/>
{!isLoggedUser &&
isUserFollowingAuthor &&
isAuthorFollowingUser && (
<Tooltip
title={
<>
<Typography
color="inherit"
flexGrow={1}
textAlign={"center"}
>
True Friend
</Typography>
<em>{"You follow each other"}</em>
</>
}
>
<FavoriteRoundedIcon
sx={{
borderRadius: 100,
fontSize: "35px",
marginTop: "auto",
marginBottom: "0.5px",
marginLeft: 1,
padding: "4px",
paddingTop: "6px",
color: "#FAF8F1",
bgcolor: "#103F5B",
}}
color="primary"
/>
</Tooltip>
)}
</Box>
)}
</Grid>
<ProfileTabs
author={authorData!}
deletePost={deletePost}
isLocal={isLocal()}
fetchPosts={fetchPosts}
posts={posts}
isPostLoading={isPostLoading}
/>
</>
)}
</Grid>
<Grid item xs={3.6} style={{ paddingLeft: '4px' }}>
{authorData && authorData.github && (
<GitHubEventList
githubUrl={authorData.github}
/>
)}
</Grid>
{authorData && authorData.github && (
<GitHubEventList
githubUrl={authorData.github}
/>
)}
</Grid>
<div>
<Modal
open={open}
Expand Down
32 changes: 24 additions & 8 deletions client/src/components/Profilepage/ProfileTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import PostsList from "../post/PostsList";
import { getUserCredentials } from "../../utils/localStorageUtils";
import { Username } from "../../enums/enums";
import { codes } from "../../objects/objects";
import Loading from "../ui/Loading";

const CustomTab = styled(Tab)({
width: "50%",
Expand All @@ -21,15 +22,18 @@ const ProfileTabs = ({
isLocal,
fetchPosts,
posts,
isPostLoading
}: {
author: Author;
deletePost: (posId: string) => void;
isLocal: boolean;
fetchPosts: () => void;
posts: Post[];
isPostLoading: boolean;
}) => {
const [followers, setFollowers] = useState<Author[]>([]);
const [tabValue, setTabValue] = React.useState<string>("posts");
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const fetchFollowers = async () => {
Expand Down Expand Up @@ -65,6 +69,7 @@ const ProfileTabs = ({
(follower: Author) => follower !== null
);
setFollowers(filteredFollowers);
setIsLoading(false);
} catch(error) {
console.error("Unable to fetch followers: ", error);
}
Expand Down Expand Up @@ -101,14 +106,23 @@ const ProfileTabs = ({
</Tabs>
<Grid item sx={{ width: "100%" }}>
{tabValue === "posts" && (
<PostsList
posts={posts}
deletePost={deletePost}
onPostEdited={fetchPosts}
/>
<>
{isPostLoading ? (
<Loading/>
) : (
<PostsList
posts={posts}
deletePost={deletePost}
onPostEdited={fetchPosts}
/>
)}
</>
)}
{tabValue === "followers" &&
(followers.length > 0 ? (

{tabValue === "followers" && (
isLoading ? (
<Loading/>
): (followers.length > 0 ? (
<AuthorsList authors={followers} />
) : (
<Typography
Expand All @@ -123,7 +137,9 @@ const ProfileTabs = ({
>
No followers...
</Typography>
))}
))
)
}
</Grid>
</Grid>
);
Expand Down
Loading
Loading