Skip to content

Commit

Permalink
Project import generated by Copybara.
Browse files Browse the repository at this point in the history 
GitOrigin-RevId: 7a38ecc00b6d3ef30d141778cf1c9edc2dda76c7
  • Loading branch information
@HarryZ10
Helper Bot authored and HarryZ10 committed Apr 17, 2024
1 parent c05fc24 commit 1a2e698
Show file tree
Hide file tree
Showing 7 changed files with 169 additions and 73 deletions.
2 changes: 1 addition & 1 deletion src/api/PostsAPI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const createPost = async (data: CreatePostData): Promise<CreatePostRespon
};

// Update an existing post
export const updatePost = async (data: CreatePostData): Promise<UpdateCommentResponse> => {
export const updatePost = async (data: CreatePostData): Promise<CreatePostResponse> => {

const response: UpdateCommentResponse = await fetch(`${API_BASE_URL}/posts/${data.id}`, {
method: 'PUT',
Expand Down
6 changes: 3 additions & 3 deletions src/components/feed/CreateCommentForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { getUsername } from "../../api/UsersAPI";

interface ComponentProps {
post_id?: string;
handleNewComments: (commentData: any) => void;
handleNewComments: (commentData: any, id: string, date: string) => void;
}

export interface JSONPayload {
Expand Down Expand Up @@ -72,8 +72,8 @@ const CreateCommentForm: React.FC<ComponentProps> = ({ post_id, handleNewComment
.then((res) => {
if (res?.message) {
toast.dismiss();
toast.success("Comment created. Refresh to modify or delete.");
handleNewComments(commentData);
toast.success("Comment created");
handleNewComments(commentData, res.id, res.date);
}
})
.catch(err => {
Expand Down
170 changes: 114 additions & 56 deletions src/components/feed/post/PostCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { jwtDecode } from "jwt-decode";
import { Card, Row, Col, Button, Collapse } from 'react-bootstrap';
import { Link } from "react-router-dom";

import { Button as MoreActionButton, Dropdown, Space } from "antd";
import { DownOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { InfoCircleOutlined } from "@ant-design/icons";
import type { MenuProps } from 'antd';

import CreateCommentForm from "../CreateCommentForm";
import { PostCard as PCInfo} from "../../../interfaces/postCard";
import CommentList from "./CommentList";
Expand All @@ -29,6 +34,7 @@ const PostCard: React.FC<PCInfo> = ({ post_id, post_text, post_date, user_id, ad

// Post Card Other Info collapse/show toggle
const [openAdditionalInfo, setOpenAdditionalInfo] = useState(false);
const [openComments, setOpenComments] = useState(false);

// Get username info
const [username, setUsername] = useState('');
Expand Down Expand Up @@ -123,29 +129,88 @@ const PostCard: React.FC<PCInfo> = ({ post_id, post_text, post_date, user_id, ad
setComments(comments.filter((comment) => comment.id !== commentData.id));
};

const handleNewComments = (commentData: any) => {
setComments([...comments, commentData]);
const handleNewComments = (commentData: any, id: string, date: string) => {
const newComment = { ...commentData, id};

// Soft reload
setComments((prevComments) => [
...prevComments.filter((comment) => comment.id !== id),
{
id: id,
comment_date: date,
comment_text: commentData.comment_text,
post_id: commentData.post_id,
user_id: commentData.user_id,
username: commentData.username,
}
]);

};

const handleMenuClick: MenuProps['onClick'] = (e) => {
if (e.key === '1') {
handleUpdate();
} else if (e.key == '2') {
handleDelete();
}
};

const items: MenuProps['items'] = [
{
label: 'Edit',
key: '1',
icon: <EditOutlined />,
},
{
label: 'Delete',
key: '2',
icon: <DeleteOutlined />,
danger: true,
},
];

const menuProps = {
items,
onClick: handleMenuClick,
};

return (
return (
<StyledCard
style={PostCardStyle}
id="post-card-index"
ref={IOref}
className={`fade-in ${addInitial ? "fade-in-initial" : ""}`.trim()}
>
<Card.Header style={CardBorderStyle}>Post from
<Link
to={`/profile/${user_id}`}
className="px-1"
style={{
textDecoration: 'none',
color: '#9f66e3',
}}
>
{username}
</Link>
on {post_date}
<Card.Header style={CardBorderStyle}>
<Row>
<Col xs={8} md={8} lg={9}>
Post from
<Link
to={`/profile/${user_id}`}
className="px-1"
style={{
textDecoration: 'none',
color: '#9f66e3',
}}
>
{username}
</Link>
on {post_date}
</Col>
<Col xs={4} md={4} lg={3}>
{/* More Actions for Author */}
{currentUserId === user_id && (
<Dropdown menu={menuProps}>
<MoreActionButtonStyled>
<Space>
Actions
<DownOutlined />
</Space>
</MoreActionButtonStyled>
</Dropdown>
)}
</Col>
</Row>
</Card.Header>
<Card.Body style={CardBorderStyle}>
<Card.Title>Job Offer Details</Card.Title>
Expand Down Expand Up @@ -202,7 +267,7 @@ const PostCard: React.FC<PCInfo> = ({ post_id, post_text, post_date, user_id, ad
</a>

<Collapse in={openAdditionalInfo}>
<div id="job-offer-info-collapse">
<div>
<Row>
<Col xs={6} sm={6} md={6}><strong>Medical Insurance:</strong></Col>
<Col xs={6} sm={6} md={6}>{jobOfferInfo.otherOptions.healthInsurance.medical ? 'Yes' : 'No'}</Col>
Expand Down Expand Up @@ -246,34 +311,31 @@ const PostCard: React.FC<PCInfo> = ({ post_id, post_text, post_date, user_id, ad
)}

<Card.Footer style={CardBorderStyle}>
<Row>
<Col xs={6} md={9} style={{ padding: 0 }} className="d-flex justify-content-start">

{currentUserId === user_id && (
<Button
onClick={handleUpdate}
style={EditButtonStyle}
>
Edit
</Button>
)}
</Col>

<Col xs={6} md={3} style={{ padding: 0 }}
className="d-flex justify-content-end">

{currentUserId === user_id && (
<ActionButton style={DeleteButtonStyle} onClick={handleDelete}>Delete</ActionButton>
)}
</Col>
</Row>
<Row>
<CreateCommentForm post_id={post_id} handleNewComments={handleNewComments}/>
</Row>

<CommentList comments={comments} handleUpdates={handleCommentUpdates}/>

<MoreActionButtonStyled
onClick={(e: any) => {
e.preventDefault();
setOpenComments(!openComments);
}}
icon={<InfoCircleOutlined />}
className="mb-3"
>
{openComments ? 'Hide Comments' : 'View Comments'}
</MoreActionButtonStyled>

<Collapse in={openComments}>
<div
style={{
marginLeft: '10px',
}}
>
<CreateCommentForm post_id={post_id} handleNewComments={handleNewComments}/>
<CommentList comments={comments} handleUpdates={handleCommentUpdates}/>
</div>
</Collapse>

</Card.Footer>

</Card.Body>
</StyledCard>
)
Expand All @@ -288,7 +350,7 @@ const fetchUsername = async (user_id: string): Promise<string> => {

const StyledCard = styled(Card)`
@media (max-width: 768px) {
width: 80% !important;
width: 95% !important;
}
`;

Expand All @@ -304,6 +366,14 @@ const ActionButton = styled(Button)`
}
`;

const MoreActionButtonStyled = styled(MoreActionButton)`
@media (max-width: 480px) { // For mobile phones
width: 100%;
margin: 0 auto;
}
`;

const PostCardStyle = {
width: "50%",
margin: "0 auto",
Expand All @@ -316,17 +386,5 @@ const PostCardStyle = {

const CardBorderStyle = {
borderColor: themes.dark.colors.cardBorder,
}

// eslint-disable-next-line
const DeleteButtonStyle: React.CSSProperties = {
backgroundColor: themes.dark.colors.danger,
border: themes.dark.colors.danger,
width: '100%'
}

const EditButtonStyle: React.CSSProperties = {
backgroundColor: themes.dark.colors.submission,
border: themes.dark.colors.danger,
width: '150px',

}
2 changes: 1 addition & 1 deletion src/components/layout/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const NavBar: React.FC = () => {
Home
</Nav.Link>
<Nav.Link as={Link} to="/blog" style={LinkStyle}>
Feed
Discover
</Nav.Link>
<Nav.Link as={Link} to="/search" style={LinkStyle}>
Search
Expand Down
31 changes: 22 additions & 9 deletions src/contexts/PostsContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,15 @@ export const PostsProvider: React.FC<any> = ({ children }) => {
toast.dismiss();
toast.success("Post created successfully");

// TODO? soft reload
// setPosts([...posts, {
// post_text: postData.post_text,
// user_id: postData.user_id,
// id: postData.id,

// }])
// Soft reload
setPosts([...posts, {
id: res?.id,
post_date: res?.date,
post_text: postData.post_text,
user_id: postData.user_id,
extra: postData.extra,
}]);

} else {
toast.dismiss();
toast.error("Failed to create post");
Expand All @@ -97,9 +99,20 @@ export const PostsProvider: React.FC<any> = ({ children }) => {
const res = await updatePost(postData);
if (res?.message === 'Success') {
toast.dismiss();
toast.success('Post updated successfully!');
toast.success('Refresh to see changes');

// Soft reload
setPosts((prevPosts) => [
...prevPosts.filter((post) => post.id !== res.id),
{
id: res.id,
post_date: res.date,
post_text: postData.post_text,
user_id: postData.user_id,
extra: postData.extra,
},
]);

// TODO? soft reload here
} else {
toast.dismiss();
toast.error('Failed to update post');
Expand Down
2 changes: 2 additions & 0 deletions src/interfaces/apiResponses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export interface RetrieveUsernameResponse {

export interface CreatePostResponse {
message: string;
id?: string;
date?: string;
}

export interface UpdateCommentResponse {
Expand Down
29 changes: 26 additions & 3 deletions src/pages/FeedPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import styled from "styled-components";
import { toast } from "react-hot-toast";
import { useNavigate, useParams } from 'react-router-dom';

import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import CreatePostForm from '../components/feed/CreatePostForm';
import NavBar from '../components/layout/NavBar';
import PostCard from '../components/feed/post/PostCard';
Expand Down Expand Up @@ -134,9 +136,25 @@ const FeedPage: React.FC<FeedProps> = ({ isProfileMode }) => {
return (
<div>
<NavBar />
<PageTitle>
{!isProfileMode ? "Discover" : !username ? "My Stuff" : `${username.toLocaleUpperCase()}'s Stuff`}
</PageTitle>

{isProfileMode && (
<PageTitle>
{username
? `${username.toUpperCase()}'s Stuff`
: "My Stuff"}
</PageTitle>
)}

{ !isProfileMode && (
<>
<div style={CreatePostStyle}>
<Button className="mt-0" onClick={handleFormShow} icon={<PlusOutlined />}>
Create Post
</Button>
</div>
</>
)}

{Array.isArray(posts) && posts
.sort((a, b) => new Date(b?.post_date || '').getTime() - new Date(a?.post_date || '').getTime())
.map(post => (
Expand Down Expand Up @@ -178,4 +196,9 @@ export const PageTitle = styled.h1`
padding: '28px 0 16px';
`;

const CreatePostStyle = {
display: 'flex',
justifyContent: 'center',
};

export default FeedPage;

0 comments on commit 1a2e698

Please sign in to comment.