Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Component, Comments
import React, { useEffect, useState } from 'react'
import sanitize from '../utils/sanitize'
import useContructor from '../utils/constructor'
import comment_styles from '../styles/Comment.module.css'
import Comment from './comment'
export default function Comments(props) {
const [comments, setComments] = useState(props.comments);
const [meta, setMeta] = useState(props.meta);
const [pid, setPID] = useState(0);
const [author, setAuthor] = useState('Anonymous');
const [upvote_count, setUpvoteCount] = useState(0);
const [downvote_count, setDownvoteCount] = useState(0);
const [content, setContent] = useState('');
let reply_level = 0;
let processed_comments = [];
const handleCommentSubmit = async(e, article_id) => {
e.preventDefault();
let pid = e.target.pid.value
let author = e.target.author.value
let content = sanitize(e.target.content.value)
let upvotes = 0
let downvotes = 0
if ( author == '' ) {
author = e.target.author.placeholder;
}
const object = {
'pid': pid,
'author': author,
'content': content,
'upvotes': upvotes,
'downvotes': downvotes,
'article': article_id,
}
const options_post = {
method: "POST",
supportHeaderParams: true,
headers: {
'Accept': 'application/json;encoding=utf-8',
'Content-Type': 'application/json;encoding=utf-8',
},
body: JSON.stringify(object),
}
const results = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/comment/submit`, options_post)
.then(res => res.json())
.then(data => {
return data;
})
.catch(error => console.log( error ))
getNewComments();
return results;
}
const options_get = {
method: "GET",
supportHeaderParams: true,
headers: {
'Accept': 'application/json;encoding=utf-8',
'Content-Type': 'application/json;encoding=utf-8',
},
}
const getNewComments = async() => {
const results = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/comments/${props.meta.slug}/parents`, options_get)
.then(res => res.json())
.then(data => {
return data;
})
.catch(error => console.log( error ));
processComments(results);
}
const processComments = (comments) => {
// API setup to returns 'Not found' in python view
if (comments.length > 0 && comments != 'Not found') {
comments.forEach((comment) => {
processed_comments.push(<Comment key={ comment.cid } comment={ comment } reply_level={ reply_level } />);
getReplies( comment, reply_level );
})
}
}
const getReplies = async (comment, reply_level) => {
const comment_replies = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/comment/pid/${comment.cid}`, options_get)
.then(res => res.json())
.then(data => {
return data;
})
.catch(error => console.log(error));
if (comment_replies.length > 0 && comment_replies != 'Not found') {
reply_level++;
console.log(reply_level);
console.log(comment_replies);
comment_replies.forEach((reply) => {
processed_comments.push(<Comment key={ reply.cid } comment={ reply } reply_level={ reply_level } />);
getReplies( reply, reply_level );
});
}
}
useContructor(() => {
processComments(comments);
console.log(processed_comments)
})
return(
<>
<h4 className={ comment_styles.comments_header }>Discussion</h4>
{ processed_comments }
<div className={ comment_styles.comment_form_wrapper }>
<form className={ comment_styles.comment_form } onSubmit={ (e) => { handleCommentSubmit(e, meta.id) } }>
<input required hidden type="number" name="pid" value="0" onChange={ (e) => { setPID(e) } } />
<input type="text" name="author" placeholder="Anonymous" className={ comment_styles.name_input } onChange={ (e) => { setAuthor(e) } } />
<textarea required type="text" name="content" rows="5" placeholder="Type a reply or comment in this area." className={ comment_styles.comment_input } onChange={ (e) => { setContent(e) } } />
<div className={ comment_styles.comment_form_button }>
<input type="submit" value="SUBMIT" className={ comment_styles.comment_submit } />
</div>
</form>
</div>
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment