Skip to content

Commit

Permalink
Issue #96
Browse files Browse the repository at this point in the history 
All 4 changes
  • Loading branch information
@aishwarya-mustoori
aishwarya-mustoori committed Jun 25, 2020
1 parent 1a42a63 commit bb779b7
Show file tree
Hide file tree
Showing 9 changed files with 218 additions and 42 deletions.
58 changes: 57 additions & 1 deletion components/article/ArticleList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { useRouter } from "next/router";
import React from "react";
import useSWR from "swr";
import storage from "../../lib/utils/storage";
import checkLogin from "../../lib/utils/checkLogin";
import Router from "next/router";
import axios from "axios";


import ErrorMessage from "../common/ErrorMessage";
import LoadingSpinner from "../common/LoadingSpinner";
Expand All @@ -16,8 +21,13 @@ import { SERVER_BASE_URL, DEFAULT_LIMIT } from "../../lib/utils/constant";
import fetcher from "../../lib/utils/fetcher";
import ArticleCard from "../../components/global/ArticleCard";
import CustomLink from "../common/CustomLink";
import ArticleAPI from "../../lib/api/article";
import {message} from 'antd';


const ArticleList = (props) => {
const [refresh,setRefresh] = React.useState(false)

const page = usePageState();
const pageCount = usePageCountState();
const setPageCount = usePageCountDispatch();
Expand All @@ -32,6 +42,8 @@ const ArticleList = (props) => {
const isProfilePage = pathname.startsWith(`/profile`);

let fetchURL = `${SERVER_BASE_URL}/articles?offset=${page * DEFAULT_LIMIT}`;
const { data: currentUser } = useSWR("user", storage);
const isLoggedIn = checkLogin(currentUser);

switch (true) {
case !!tag:
Expand Down Expand Up @@ -80,7 +92,51 @@ const ArticleList = (props) => {
if (articles && articles.length === 0) {
return <div className="article-preview">No articles are here... yet.</div>;
}

const rightButtonClicked=async(e,slug,bookmarked)=>{
e.preventDefault()
if(currentUser == null){
message.info('Please Sign in');
}else{
if(!bookmarked){
setRefresh(true)
await ArticleAPI.bookmark(slug,currentUser.token);

}

}

}
const handleClickFavorite = async (e,slug,favorited) => {
e.preventDefault()
if (!isLoggedIn) {
Router.push(`/user/login`);
return;
}
try {
if (favorited) {
await axios.delete(`${SERVER_BASE_URL}/articles/${slug}/favorite`, {
headers: {
Authorization: `Token ${currentUser?.token}`,
},
});
setRefresh(false)
} else {
await axios.post(
`${SERVER_BASE_URL}/articles/${slug}/favorite`,
{},
{
headers: {
Authorization: `Token ${currentUser?.token}`,
},
}
);
setRefresh(true)
}
} catch (error) {

}
};
return (
<>
{articles?.map((article) => (
Expand All @@ -89,7 +145,7 @@ const ArticleList = (props) => {
as={`/article/${article.slug}`}
className="preview-link"
>
<ArticleCard key={article.slug} article={article} />
<ArticleCard key={article.slug} article={article} onRightButtonClick ={(e)=>rightButtonClicked(e,article.slug,article.bookmarked)} favoriteClick = {(e)=>handleClickFavorite(e,article.slug,article.favorited)} isFavorite={article.favorited} />
</CustomLink>
))}

Expand Down
39 changes: 32 additions & 7 deletions components/comment/CommentInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import axios from "axios";
import { useRouter } from "next/router";
import React from "react";
import useSWR, { trigger } from "swr";
import {message} from 'antd'

import CustomImage from "../common/CustomImage";
import CustomLink from "../common/CustomLink";
import checkLogin from "../../lib/utils/checkLogin";
import { SERVER_BASE_URL } from "../../lib/utils/constant";
import storage from "../../lib/utils/storage";

const CommentInput = () => {
const CommentInput = (id=null) => {
const { data: currentUser } = useSWR("user", storage);
const isLoggedIn = checkLogin(currentUser);
const router = useRouter();
Expand All @@ -27,6 +28,7 @@ const CommentInput = () => {
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
if(id.id == null){
await axios.post(
`${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
JSON.stringify({
Expand All @@ -40,13 +42,33 @@ const CommentInput = () => {
Authorization: `Token ${encodeURIComponent(currentUser?.token)}`,
},
}
);
)
trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);
}else{
await axios.post(
`${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`,
JSON.stringify({
comment: {
body: content,
comment_id : id.id
},
}),
{
headers: {
"Content-Type": "application/json",
Authorization: `Token ${encodeURIComponent(currentUser?.token)}`,
},
}
);
trigger(`${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}/comments`);

};
setLoading(false);
setContent("");
trigger(`${SERVER_BASE_URL}/articles/${pid}/comments`);

};

if (!isLoggedIn) {
if (!isLoggedIn && id.id == null) {
return (
<p>
<CustomLink href="/user/login" as="/user/login">
Expand All @@ -60,7 +82,10 @@ const CommentInput = () => {
</p>
);
}

let text = "Post Comment"
if(id.id != null){
text = "Reply Comment"
}
return (
<form className="card comment-form" onSubmit={handleSubmit}>
<div className="card-block">
Expand All @@ -80,8 +105,8 @@ const CommentInput = () => {
alt="Comment author's profile image"
/>
<button className="btn btn-sm btn-primary" type="submit">
Post Comment
</button>
{text}
</button>
</div>
</form>
);
Expand Down
27 changes: 21 additions & 6 deletions components/comment/CommentList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,31 @@ import React from "react";
import useSWR from "swr";

import CommentInput from "./CommentInput";
import CommentReply from "./CommentReply";

import ErrorMessage from "../common/ErrorMessage";
import LoadingSpinner from "../common/LoadingSpinner";

import { CommentType } from "../../lib/types/commentType";
import { SERVER_BASE_URL } from "../../lib/utils/constant";
import fetcher from "../../lib/utils/fetcher";
import { Comment, Avatar } from 'antd';
import { Comment, Avatar, message } from 'antd';
import storage from "../../lib/utils/storage";
import checkLogin from "../../lib/utils/checkLogin";


const CommentList = () => {
const router = useRouter();
const {
query: { pid },
} = router;

const { data: currentUser } = useSWR("user", storage);
const isLoggedIn = checkLogin(currentUser);
const { data, error } = useSWR(
`${SERVER_BASE_URL}/articles/${pid}/comments`,
fetcher
);

const [replyTo,setReplyTo] = React.useState("")
if (!data) {
return <LoadingSpinner />;
}
Expand All @@ -32,29 +38,38 @@ const CommentList = () => {
);

const { comments } = data;
const onCommentClick=(id)=>{
if(!isLoggedIn){
message.info('Please Sign in')
}else{
setReplyTo(id)
}
}


const recurseComments = (comments) => {
return (
comments.map((comment: CommentType) => (
<Comment
key={comment.id}
actions={[<span key="comment-nested-reply-to">Reply to</span>]}
actions={[<span key="comment-nested-reply-to" onClick = { ()=> {onCommentClick(comment["id"])}}>Reply to</span>]}
author={comment.author.username}
avatar={
<Avatar
src={comment.author.image}
alt="Han Solo"
/>
}
}
content={
<p>{comment.body}</p>
}
>
{ replyTo == comment["id"] ?
<CommentInput id = {comment["id"]} />: null}
{comment.parentComment.comments.length > 0 ? recurseComments(comment.parentComment.comments) : null}
</Comment>
)))
}

return (
<div>
<CommentInput />
Expand Down
23 changes: 18 additions & 5 deletions components/global/ArticleCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,19 @@ const StyledEmoji = styled.span`
width: 20px;
}
`
const StyledEmoji2 = styled.span`
background: red;
border-radius: 22px;
padding: 0.2em 0.4em 0.2em 0.4em;
img {
width: 11px;
}
`



/* article state: draft, review, pubished, complete*/
const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null }) => {
const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null,favoriteClick = null ,isFavorite }) => {
const tags = article.tagList.map((tag, i) =>
(<StyledSpan>
<CustomLink
Expand Down Expand Up @@ -129,7 +139,10 @@ const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRi
{article.isPublished &&
<Space size={"large"}>
<Twemoji options={{ className: 'twemoji' }}>
<StyledEmoji>{"❤️ " + article.favoritesCount}</StyledEmoji>
{!isFavorite?
<span><StyledEmoji2 onClick = {favoriteClick}>{'🤍'}</StyledEmoji2> <span>{article.favoritesCount} </span></span>

: <StyledEmoji onClick = {favoriteClick}>{"❤️ " + article.favoritesCount}</StyledEmoji>}
<StyledEmoji>{"💬 " + article.commentsCount}</StyledEmoji>
</Twemoji>
</Space>
Expand Down Expand Up @@ -157,12 +170,12 @@ const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRi
style={{
fontWeight: 'bold',
borderRadius: "0.5em",
background: article.isPublished ? '#4EC700' : '#007BED',
borderColor: article.isPublished ? '#4EC700' : '#007BED',
background: article.isPublished ? ! article.bookmarked ?'#4EC700' : '#007BED': '#007BED',
borderColor: article.isPublished ? !article.bookmarked ?'#4EC700' : '#007BED' : '#007BED',
}}
>
{
article.isPublished ? 'BookMark' :
article.isPublished ? article.bookmarked ? 'BookMarked' :'Bookmark':
article.needsReview ? 'Published' : 'Edit'
}
</Button>
Expand Down
8 changes: 5 additions & 3 deletions components/home/TagView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ArticleList from "../article/ArticleList";
import TagHeader from "../../components/tag/TagHeader";
import { SERVER_BASE_URL } from "../../lib/utils/constant";
import TagAPI from "../../lib/api/tag";
import { Tag } from "antd";

const TagView = (props) => {
const handleFollow = async () => {
Expand All @@ -13,7 +14,8 @@ const TagView = (props) => {
{},
true
);
TagAPI.follow(props.tag.slug);
await TagAPI.follow(props.tag.slug);

trigger(`${SERVER_BASE_URL}/tags/${props.tag.slug}/follow`);
};

Expand All @@ -22,13 +24,13 @@ const TagView = (props) => {
`${SERVER_BASE_URL}/tags/${props.tag.slug}/follow`,
true
);
TagAPI.unfollow(props.tag.slug);
await TagAPI.unfollow(props.tag.slug);
trigger(`${SERVER_BASE_URL}/tags/${props.tag.slug}/follow`);
};

return (
<div className="col-md-9">
<TagHeader tagData={props.tag} follow={handleFollow} unfollow={handleUnfollow}/>
<TagHeader tagData={props.tag} follow={handleFollow} unfollow={handleUnfollow} />
<ArticleList {...props} />
</div>
)
Expand Down
Loading

0 comments on commit bb779b7

Please sign in to comment.