-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f8952fb
commit 162555a
Showing
11 changed files
with
306 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
|
|
||
| import DOMPurify from 'dompurify'; | ||
|
|
||
| import ActivityPub from 'podfriend-approot/library/ActivityPub/ActivityPub.js'; | ||
| import styles from './EpisodeCommentList.scss'; | ||
|
|
||
|
|
||
| const EpisodeComment = ({ from, content }) => { | ||
| const [commentText,setCommentText] = useState('Loading comment.'); | ||
|
|
||
| useEffect(() => { | ||
| setCommentText(DOMPurify.sanitize(content,{ | ||
| ALLOWED_TAGS: [] // we used to allow 'i','em', but it doesn't work on mobile. I'm not sure I can see a good reason to have them. | ||
| })); | ||
| },[]); | ||
|
|
||
| return ( | ||
| <div className={styles.comment}> | ||
| <img src={from.avatar} className={styles.avatar} /> | ||
| <div className={styles.commentContent}> | ||
| <div className={styles.username}>{from.username}</div> | ||
| <div className={styles.commentText}> | ||
| {commentText} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| const EpisodeCommentList = ({ commentURL }) => { | ||
| const [commentInfo,setCommentInfo] = useState(false); | ||
| const [comments,setComments] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| const retrieveCommentInformation = (commentURL) => { | ||
| console.log('RSS has Comment URL: '); | ||
| console.log(commentURL); | ||
|
|
||
| ActivityPub.getCommentInformation(commentURL.uri) | ||
| .then((commentResponse) => { | ||
| setCommentInfo(commentResponse); | ||
| }) | ||
| .catch((error) => { | ||
| console.log('error getting comments: '); | ||
| console.log(error); | ||
| }); | ||
| }; | ||
|
|
||
| if (commentURL) { | ||
| retrieveCommentInformation(commentURL); | ||
| } | ||
| },[commentURL]); | ||
|
|
||
| useEffect(() => { | ||
| if (commentInfo) { | ||
| const retrieveComments = () => { | ||
| console.log('retrieveComments()'); | ||
| return ActivityPub.getComments(commentInfo,0) | ||
| .then((comments) => { | ||
| console.log('comments'); | ||
| console.log(comments); | ||
| setComments(comments); | ||
| }); | ||
| }; | ||
| retrieveComments(); | ||
| } | ||
| },[commentInfo]); | ||
|
|
||
|
|
||
| return ( | ||
| <div className={styles.commentList}> | ||
| { Array.isArray(comments) === false && | ||
| <div> | ||
| No comments yet for this episode. | ||
| </div> | ||
| } | ||
| { Array.isArray(comments) && comments.map((comment,index) => { | ||
| console.log('comment: '); | ||
| console.log(comment); | ||
| return <EpisodeComment key={index} from={comment.from} content={comment.content} />; | ||
| })} | ||
| <div className={styles.writeCommentContainer}> | ||
| <textarea className={styles.writeComment} placeholder="How do you feel about this episode?"></textarea> | ||
| <button>Post comment</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default EpisodeCommentList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| .commentList { | ||
| min-height: 100vh; | ||
|
|
||
| .writeCommentContainer { | ||
| margin-top: 30px; | ||
|
|
||
| textarea { | ||
| display: block; | ||
| background-color: rgba(0,0,0,0.1); | ||
| border: 0px; | ||
| width: 100%; | ||
| height: 150px; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
|
|
||
| margin-bottom: 10px; | ||
|
|
||
| border-radius: 5px; | ||
|
|
||
| outline: 1px solid rgba(0,0,0,0); | ||
|
|
||
| transition: 0.2s all; | ||
| } | ||
| textarea:focus { | ||
| outline: 1px solid rgba(0,0,0,0.3); | ||
| } | ||
| button { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
| .comment { | ||
| display: flex; | ||
|
|
||
| .avatar { | ||
| width: 30px; | ||
| height: 30px; | ||
| border-radius: 50%; | ||
| margin-right: 10px; | ||
| } | ||
| .username { | ||
| font-weight: bold; | ||
| margin-bottom: 5px; | ||
| } | ||
| .commentContent { | ||
| .commentText { | ||
|
|
||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.