Skip to content

Commit

Permalink
fix(*): update articles pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Feb 11, 2024
1 parent 71240ed commit 8f8260e
Show file tree
Hide file tree
Showing 10 changed files with 599 additions and 440 deletions.
0 src/Pages/Articles/BtnRender.jsx → src/Components/Article/BtnRender.jsx
View file
File renamed without changes.
137 changes: 83 additions & 54 deletions src/Components/Article/MainContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,69 +14,98 @@ import marked from 'marked';
import Newsletter from '../Subscribe/Newsletter';
import RelatedPosts from './RelatedPosts';
import StickyFooter from '../Sticky/StickyFooter';
import BtnRender from './BtnRender';

const MainContainer = (props) => {
const { _id, likes, title, subtitle, description, images, markdown } = props.detailArticle;
const { _id, likes, title, subtitle, description, images, markdown, comments } = props.detailArticle;
const timeFormater = props.timeFormater;
const readTime = props.readTime;
const user = props.user
const avatar = user.avatar === "" ?
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"
: user.avatar;
return (
<StyledMainContainer>
<PaddingContent>
<section>
{
user.name !== "" &&
<Alert transition="false" variant="light">
<AlertP>
You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
<AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
</AlertP>
</Alert>

}
<JustifyContent AlignCenter>
<CircleImage src={avatar}
alt="author" />
<div>
<NamePlate>{user.name || "Will Smith"}</NamePlate>
<WarppedDate>
<GrayText>{timeFormater}</GrayText>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem>{readTime} min read &nbsp; <AiFillStar/></DisplayItem>
<span>&nbsp;&#183;&nbsp;</span>
<TextToSpeech text={markdown} />
</WarppedDate>
</div>
</JustifyContent>
<ArticleHr Primary/>
<BlogTitle>{title}</BlogTitle>
<BlogSubTitle>{subtitle}</BlogSubTitle>
<BlogDisplayImage src={images.url} alt={title} />
<BlogPhotoCredit>Photo Credit by &nbsp;<u>You</u></BlogPhotoCredit>
<BlogCard>
<br />
<BlogPost>
<br />
<BlogContent>{description}</BlogContent>
<br />
<br />
<BlogContent Markdown dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
<br />
<StickyFooter viewComment={props.viewComment} setViewComment={props.setViewComment} id={_id} likes={likes}/>
<Newsletter/>
</BlogPost>
{/* <input type="checkbox" checked={checked}
onChange={() => props.handleCheck(_id)} /> */}
{/* <BtnRender article={props.article} deleteArticle={props.deleteArticle} /> */}
</BlogCard>
</section>
</PaddingContent>
<RelatedPosts user={user} articles={props.articles} timeFormater={timeFormater} readTime={readTime}/>
</StyledMainContainer>
)
<StyledMainContainer>
<PaddingContent>
<section>
{user.name !== "" && (
<Alert transition="false" variant="light">
<AlertP>
You have <strong style={{ color: "black" }}>1</strong> free
member-only story left this month.&nbsp;
<AlertLink href="#">
Sign up for Medium and get an extra one.
</AlertLink>
</AlertP>
</Alert>
)}
<JustifyContent AlignCenter>
<CircleImage src={avatar} alt="author" />
<div>
<NamePlate>{user.name || "Will Smith"}</NamePlate>
<WarppedDate>
<GrayText>{timeFormater}</GrayText>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem>
{readTime} min read &nbsp; <AiFillStar />
</DisplayItem>
<span>&nbsp;&#183;&nbsp;</span>
<TextToSpeech text={markdown} />
</WarppedDate>
</div>
</JustifyContent>
<ArticleHr Primary />
<BlogTitle>{title}</BlogTitle>
<BlogSubTitle>{subtitle}</BlogSubTitle>
<BlogDisplayImage src={images.url} alt={title} />
<BlogPhotoCredit>
Photo Credit by &nbsp;<u>You</u>
</BlogPhotoCredit>
<BlogCard>
<br />
<BlogPost>
<br />
<BlogContent>{description}</BlogContent>
<br />
<br />
<BlogContent
Markdown
dangerouslySetInnerHTML={{ __html: marked(markdown) }}
></BlogContent>
<br />
<StickyFooter
comments
viewComment={props.viewComment}
setViewComment={props.setViewComment}
id={_id}
likes={likes}
/>
<Newsletter />
</BlogPost>
{props.isAdmin && props.isLoggedIn ? (
<>
<input
type="checkbox"
checked={true}
onChange={() => props.handleCheck(_id)}
/>
<BtnRender
article={props.article}
deleteArticle={props.deleteArticle}
/>
</>
) : null}
</BlogCard>
</section>
</PaddingContent>
<RelatedPosts
user={user}
articles={props.articles}
timeFormater={timeFormater}
readTime={readTime}
/>
</StyledMainContainer>
);
}


Expand Down
30 changes: 26 additions & 4 deletions src/Components/Article/RightColumn.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const RightColumn = (props) => {
const [isLoggedIn] = state.userAPI.isLoggedIn;
const [search, setSearch] = useState('')
const [comments, setComments] = useState({comments: []})
const [comment, setComment] = useState("")
const param = useParams()

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
Expand Down Expand Up @@ -58,7 +59,26 @@ const RightColumn = (props) => {
}
getComments()
}
}, [param.id])
}, [param.id, comment])

const postComment = async () => {
try {
await axios.post(`/api/articles/${param.id}/comments`, {postId: param.id, comment, user})
const res = await axios.get(`/api/articles/${id}/comments`)
let filteredComments = res.data.comments.filter((comment) => {
return comment.blog === id;
});
setComments({comments: filteredComments});
} catch (error) {
console.log(error)
}
}

const handleChangeInput = e => {
const { name, value } = e.target
console.log(name, value)
setComment(value)
}

return (
<>
Expand All @@ -83,9 +103,10 @@ const RightColumn = (props) => {
<div>
<img src="" alt="" srcset="" />
<h3>{currentUser.name}</h3>
<textarea placeholder='What are your thoughts?' name="" id="" cols="30" rows="10"></textarea>
<textarea onChange={(e) => handleChangeInput(e)}
placeholder='What are your thoughts?' name="" id="" cols="30" rows="10"></textarea>
<button>Cancel</button>
<button>Respond</button>
<button onClick={() => postComment()}>Respond</button>
</div>
:
<div style={{marginTop: '2rem', WebkitBoxShadow: '0px 0px 10px 1px rgba(220,220,220,0.9)',boxShadow: '0px 0px 10px 1px rgba(220,220,220,0.9)', padding: '5px 15px',
Expand All @@ -97,12 +118,13 @@ const RightColumn = (props) => {
<h3 style={{ marginLeft: '5px',fontSize: '1.5rem'}}>Anonymous</h3>
</div>
<textarea
onChange={(e) => handleChangeInput(e)}
style={{border: 'none', paddingTop: '10px'}}
placeholder='What are your thoughts?'
name="" id="" cols="30" rows="10"></textarea>
<div style={{display: 'flex', width: '100%', justifyContent: 'space-around', alignItems: 'flex-end'}}>
<button>Cancel</button>
<button>Respond</button>
<button onClick={() => postComment()}>Respond</button>
</div>
</div>

Expand Down
Loading

0 comments on commit 8f8260e

Please sign in to comment.