Skip to content

Commit

Permalink
🛠 Refactor services + restructure Follow schema
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgudo
jgudo committed Mar 21, 2021
1 parent 6a78541 commit dc25740
Show file tree
Hide file tree
Showing 29 changed files with 464 additions and 850 deletions.
2 changes: 1 addition & 1 deletion frontend/.eslintcache
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/src/components/main/Comments/CommentItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ const CommentItem: React.FC<IProps> = (props) => {
const getReplies = async () => {
try {
setGettingReplies(true);
const res = await getCommentReplies({ offset, comment_id: comment.id, post_id: comment.post_id });
const data = await getCommentReplies({ offset, comment_id: comment.id, post_id: comment.post_id });

setGettingReplies(false);
setError(null);
setReplies([...replies, ...res.replies]);
setReplies([...replies, ...data]);
setOffset(offset + 1);
setVisibleReplies(true);
} catch (e) {
Expand Down
22 changes: 7 additions & 15 deletions frontend/src/components/main/Comments/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,13 @@ interface IProps {
setInputCommentVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

interface ICommentsState {
items: IComment[],
commentsCount: number;
}

const Comments: React.FC<IProps> = (props) => {
const {
postID,
isCommentVisible,
commentInputRef,
} = props;
const [comments, setComments] = useState<ICommentsState>({
items: [],
commentsCount: 0
});
const [comments, setComments] = useState<IComment[]>([]);
const [offset, setOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [isUpdateMode, setUpdateMode] = useState(false);
Expand All @@ -57,11 +49,11 @@ const Comments: React.FC<IProps> = (props) => {
const fetchComment = async (params: IFetchParams) => {
try {
setIsLoading(true);
const { comments: fetchedComments, commentsCount } = await getComments(postID, params);
const result = await getComments(postID, params);

if (didMount) {
setOffset(offset + 1);
setComments({ items: [...fetchedComments.reverse(), ...comments.items], commentsCount });
setComments([...result.reverse(), ...comments]);
setIsLoading(false);
}
} catch (e) {
Expand All @@ -83,7 +75,7 @@ const Comments: React.FC<IProps> = (props) => {
const comment = await commentOnPost(postID, commentBody);

if (didMount) {
setComments({ commentsCount: comments.commentsCount + 1, items: [...comments.items, comment] });
setComments([...comments, comment]);

setCommentBody('');
setUpdateMode(false);
Expand Down Expand Up @@ -112,7 +104,7 @@ const Comments: React.FC<IProps> = (props) => {
if (didMount) {
setComments(oldComments => ({
...oldComments,
items: oldComments.items.filter((cmt) => cmt.id !== comment.id)
items: oldComments.filter((cmt) => cmt.id !== comment.id)
}));
}
}
Expand All @@ -127,7 +119,7 @@ const Comments: React.FC<IProps> = (props) => {
onClick={() => fetchComment({
offset: 1,
limit: 10,
skip: comments.items.length === 1 ? 1 : undefined,
skip: comments.length === 1 ? 1 : undefined,
sort: 'asc'
})}
>
Expand All @@ -136,7 +128,7 @@ const Comments: React.FC<IProps> = (props) => {
)}
{/* ----- COMMENT LIST ---------- */}
<div className="py-4 laptop:px-2 space-y-2 divide-y divide-gray-200 dark:divide-gray-800">
<CommentList comments={comments.items} updateCommentCallback={updateCommentCallback} />
<CommentList comments={comments} updateCommentCallback={updateCommentCallback} />
</div>
{/* ---- INPUT COMMENT ----- */}
{isCommentVisible && (
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/components/main/Modals/PostLikesModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useDidMount } from '~/hooks';
import { setTargetPost } from '~/redux/action/helperActions';
import { hideModal } from '~/redux/action/modalActions';
import { getPostLikes } from '~/services/api';
import { EModalType, IError, IRootReducer, IUser } from '~/types/types';
import { EModalType, IError, IProfile, IRootReducer } from '~/types/types';
import UserCard from '../UserCard';

interface IProps {
Expand All @@ -16,10 +16,8 @@ interface IProps {

Modal.setAppElement('#root');

type TLikesState = IUser & { isFollowing: boolean };

const PostLikesModal: React.FC<IProps> = (props) => {
const [likes, setLikes] = useState<TLikesState[]>([]);
const [likes, setLikes] = useState<IProfile[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [offset, setOffset] = useState(0);
const [error, setError] = useState<IError | null>(null);
Expand Down Expand Up @@ -95,7 +93,7 @@ const PostLikesModal: React.FC<IProps> = (props) => {
<div className="divide-y divide-gray-100 dark:divide-gray-800">
{likes.map(user => (
<div key={user.id}>
<UserCard profile={user} isFollowing={user.isFollowing} />
<UserCard profile={user} />
</div>
))}
</div>
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/components/main/UserCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { FollowButton } from '~/components/main';
import { Avatar } from "~/components/shared";
import { IRootReducer, IUser } from "~/types/types";
import { IProfile, IRootReducer, IUser } from "~/types/types";

interface IProps {
profile: IUser;
isFollowing: boolean;
profile: IProfile | IUser;
}

const UserCard: React.FC<IProps> = ({ profile, isFollowing }) => {
const UserCard: React.FC<IProps> = ({ profile }) => {
const myUsername = useSelector((state: IRootReducer) => state.auth.username);

return (
Expand All @@ -24,7 +23,7 @@ const UserCard: React.FC<IProps> = ({ profile, isFollowing }) => {
{profile.username === myUsername ? (
<h4 className="text-gray-400">Me</h4>
) : (
<FollowButton userID={profile.id} isFollowing={isFollowing} />
<FollowButton userID={profile.id} isFollowing={profile.isFollowing} />
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/shared/SearchInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const SearchInput: React.FC<IProps> = (props) => {
setError(null);
const users = await search({ q: val, limit: 5 });

setSuggestions(users);
setSuggestions(users as IProfile[]);
setSuggesting(false);
} catch (e) {
setSuggesting(false);
Expand Down
Binary file added frontend/src/images/thumbnail.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions frontend/src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ const Home: React.FC<IProps> = (props) => {
)}
{/* ---- NEWS FEED ---- */}
{(state.newsFeed.items.length !== 0) && (
<>
<div className="mb-8">
<TransitionGroup component={null}>
<div ref={infiniteRef as React.RefObject<HTMLDivElement>}>
{state.newsFeed.items.map((post: IPost) => post.author && ( // avoid render posts with null author
Expand Down Expand Up @@ -193,7 +193,7 @@ const Home: React.FC<IProps> = (props) => {
</p>
</div>
)}
</>
</div>
)}
</div>
{/* --- SUGGESTED PEOPLE --- */}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/pages/profile/Tabs/Bookmarks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { BookmarkButton } from "~/components/main";
import { Loader } from '~/components/shared';
import { useDidMount, useDocumentTitle } from '~/hooks';
import thumbnail from '~/images/thumbnail.jpg';
import { getBookmarks } from "~/services/api";
import { IBookmark, IError } from "~/types/types";

Expand Down Expand Up @@ -126,7 +127,7 @@ const Bookmarks: React.FC<IProps> = ({ username, isOwnProfile }) => {
<div
className="w-32 h-full !bg-cover !bg-no-repeat !bg-center"
style={{
background: `#f7f7f7 url(${item.post.photos[0]})`
background: `#f7f7f7 url(${item.post.photos[0]?.url || thumbnail})`
}}
/>
</Link>
Expand Down
18 changes: 5 additions & 13 deletions frontend/src/pages/profile/Tabs/Followers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,8 @@ interface IProps {
username: string;
}

interface IFollowerState {
user: IProfile;
isFollowing: boolean;
}

const Followers: React.FC<IProps> = ({ username }) => {
const [followers, setFollowers] = useState<IFollowerState[]>([]);
const [followers, setFollowers] = useState<IProfile[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [offset, setOffset] = useState(0); // Pagination
const didMount = useDidMount(true);
Expand Down Expand Up @@ -77,17 +72,14 @@ const Followers: React.FC<IProps> = ({ username }) => {
<div>
<h4 className="text-gray-700 dark:text-white mb-4 ml-4 mt-4 laptop:mt-0">Followers</h4>
<TransitionGroup component={null}>
{followers.map(follower => (
{followers.map(user => (
<CSSTransition
timeout={500}
classNames="fade"
key={follower.user._id}
key={user.id}
>
<div className="bg-white dark:bg-indigo-1000 rounded-md mb-4 shadow-md" key={follower.user._id}>
<UserCard
profile={follower.user}
isFollowing={follower.isFollowing}
/>
<div className="bg-white dark:bg-indigo-1000 rounded-md mb-4 shadow-md">
<UserCard profile={user} />
</div>
</CSSTransition>
))}
Expand Down
18 changes: 5 additions & 13 deletions frontend/src/pages/profile/Tabs/Following.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,8 @@ interface IProps {
username: string;
}

interface IFollowingState {
user: IProfile;
isFollowing: boolean;
}

const Following: React.FC<IProps> = ({ username }) => {
const [followings, setFollowing] = useState<IFollowingState[]>([]);
const [followings, setFollowing] = useState<IProfile[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [offset, setOffset] = useState(0); // Pagination
const [error, setError] = useState<IError | null>(null);
Expand Down Expand Up @@ -78,17 +73,14 @@ const Following: React.FC<IProps> = ({ username }) => {
<div>
<h4 className="text-gray-700 dark:text-white mb-4 ml-4 mt-4 laptop:mt-0">Following</h4>
<TransitionGroup component={null}>
{followings.map(following => (
{followings.map(user => (
<CSSTransition
timeout={500}
classNames="fade"
key={following.user._id}
key={user.id}
>
<div className="bg-white dark:bg-indigo-1000 rounded-md mb-4 shadow-md" key={following.user._id}>
<UserCard
profile={following.user}
isFollowing={following.isFollowing}
/>
<div className="bg-white dark:bg-indigo-1000 rounded-md mb-4 shadow-md">
<UserCard profile={user} />
</div>
</CSSTransition>
))}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/pages/search/Posts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useHistory } from 'react-router-dom';
import useDocumentTitle from '~/hooks/useDocumentTitle';
import thumbnail from '~/images/thumbnail.jpg';
import { IPost } from "~/types/types";

dayjs.extend(relativeTime);
Expand Down Expand Up @@ -47,7 +48,7 @@ const Posts: React.FC<IProps> = ({ posts, searchQuery }) => {
<div
className="w-24 laptop:w-32 h-full !bg-cover !bg-no-repeat !bg-center"
style={{
background: `#f7f7f7 url(${post.photos[0]})`
background: `#f7f7f7 url(${post.photos[0]?.url || thumbnail})`
}}
/>
<div className="flex-grow p-2 pb-4 max-w-sm">
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/pages/search/Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ const Users: React.FC<IProps> = ({ users }) => {
return (
<div>
{users.map((user) => (
<div className="bg-white dark:bg-indigo-1100 rounded-md mb-4 shadow-md dark:shadow-none divide-y divide-y-transparent dark:divide-gray-800" key={user._id}>
<UserCard
profile={user}
isFollowing={user.isFollowing}
/>
<div
className="bg-white dark:bg-indigo-1100 rounded-md mb-4 shadow-md dark:shadow-none divide-y divide-y-transparent dark:divide-gray-800"
key={user.id}
>
<UserCard profile={user} />
</div>
))}
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/search/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
const fetchedPosts = await search({ q: searchQuery, type: 'posts', offset: postOffset });

if (didMount) {
setPosts([...posts, ...fetchedPosts]);
setPosts([...posts, ...(fetchedPosts as IPost[])]);
setIsLoadingPost(false);
setPostOffset(postOffset + 1);
}
Expand All @@ -68,7 +68,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
const fetchedUsers = await search({ q: searchQuery, offset: userOffset });

if (didMount) {
setUsers([...users, ...fetchedUsers]);
setUsers([...users, ...(fetchedUsers as IProfile[])]);
setIsLoadingUser(false);
setUserOffset(userOffset + 1);
}
Expand Down
5 changes: 1 addition & 4 deletions frontend/src/pages/suggested_people/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,7 @@ const SuggestedPeople = () => {
key={user.id}
>
<div className="bg-white dark:bg-indigo-1000 rounded-md mb-4 shadow-md dark:shadow-none" key={user.id}>
<UserCard
profile={user}
isFollowing={user.isFollowing}
/>
<UserCard profile={user} />
</div>
</CSSTransition>
))}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/redux/action/authActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ export const checkSession = () => (<const>{
type: CHECK_SESSION
});

export const updateAuthPicture = (url: string) => (<const>{
export const updateAuthPicture = (image: Object) => (<const>{
type: UPDATE_AUTH_PICTURE,
payload: url
payload: image
});

export type TAuthActionType =
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/redux/action/profileActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ export const updateProfileInfo = (user: IProfile) => (<const>{
payload: user
});

export const updateProfilePicture = (url: string) => (<const>{
export const updateProfilePicture = (image: Object) => (<const>{
type: UPDATE_PROFILE_PICTURE,
payload: url
payload: image
});

export const updateCoverPhoto = (url: string) => (<const>{
export const updateCoverPhoto = (image: Object) => (<const>{
type: UPDATE_COVER_PHOTO,
payload: url
payload: image
});

export type TProfileActionTypes =
Expand Down
Loading

1 comment on commit dc25740

@vercel
Copy link

@vercel vercel bot commented on dc25740 Mar 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.