Skip to content

Commit

Permalink
Run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@BerkeAras
BerkeAras committed Mar 18, 2022
1 parent b6570c7 commit 791e0bc
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 74 deletions.
55 changes: 35 additions & 20 deletions src/components/Feed/FeedCommentSection/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { MentionsInput, Mention } from 'react-mentions'
import { Header, Loader, Button, Comment, Form, Feed } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import mentionStyles from './mentionStyles'
import {ThumbsUp} from 'react-feather'
import { ThumbsUp } from 'react-feather'

import unknownAvatar from '../../../static/unknown.png'
import likeComment from '../../../utils/likeComment'
Expand Down Expand Up @@ -67,10 +67,9 @@ class CommentSection extends React.Component {
handleSubmit(e, postId) {
e.preventDefault()


let postContent = this.state.newCommentContentRaw
postContent = postContent.replace(/(?:\r\n|\r|\n)/g, '<br>')

if (postContent !== null && postContent.trim() !== '' && postContent.replaceAll('<br>', '').trim() !== '') {
this.setState({ isPosting: true, isLoading: true })

Expand Down Expand Up @@ -145,8 +144,8 @@ class CommentSection extends React.Component {
fetch(process.env.REACT_APP_API_URL + '/api/search?query=' + query, requestOptions)
.then((response) => response.json())
.then((result) => {
let userResult = result[0];
return userResult.map(user => ({ display: user.name, id: user.id }))
let userResult = result[0]
return userResult.map((user) => ({ display: user.name, id: user.id }))
})
.then(callback)
}
Expand All @@ -161,7 +160,7 @@ class CommentSection extends React.Component {
padding: '5px 15px',
borderBottom: '1px solid rgba(0,0,0,0.15)',
'&focused': {
backgroundColor: '#cee4e5',
backgroundColor: '#cee4e5',
},
},
}
Expand All @@ -186,18 +185,18 @@ class CommentSection extends React.Component {
</Header>

{this.state.isLoading ? (
<div style={{position:'relative',height:'130px'}}>
<div style={{ position: 'relative', height: '130px' }}>
<Loader active>Loading Comments</Loader>
</div>
): (
) : (
<>
{this.state.comments ? (
this.state.comments.length == 0 ? (
<span className="empty-comments">Sorry. We could not find any comments.</span>
) : (
this.state.comments.map((comment) => {
return (
<Comment key={comment.id} id={"comment_" + comment.id}>
<Comment key={comment.id} id={'comment_' + comment.id}>
{comment.avatar == '' ? (
<Comment.Avatar href={'/app/user/' + comment.email} src={unknownAvatar} />
) : (
Expand Down Expand Up @@ -232,27 +231,43 @@ class CommentSection extends React.Component {
<Navigate to="/" />
)}

<Form onSubmit={(e) => {this.handleSubmit(e, this.props.postId)}} reply>
<Form
onSubmit={(e) => {
this.handleSubmit(e, this.props.postId)
}}
reply
>
<br />
<MentionsInput className='MentionsInputComment' style={{minHeight:'60px',marginBottom:'10px'}} disabled={this.state.isLoading} value={this.state.newCommentContent} onChange={(event, newValue, newPlainTextValue, mentions) => {this.setState({newCommentContent:event.target.value,newCommentContentRaw:newValue})}}>
<Mention
displayTransform={(id, name) => `@${name}`}
trigger="@"
data={this.fetchUsers}
style={mentionStyles}
appendSpaceOnAdd
/>
<MentionsInput
className="MentionsInputComment"
style={{ minHeight: '60px', marginBottom: '10px' }}
disabled={this.state.isLoading}
value={this.state.newCommentContent}
onChange={(event, newValue, newPlainTextValue, mentions) => {
this.setState({ newCommentContent: event.target.value, newCommentContentRaw: newValue })
}}
>
<Mention displayTransform={(id, name) => `@${name}`} trigger="@" data={this.fetchUsers} style={mentionStyles} appendSpaceOnAdd />
</MentionsInput>

{this.state.isPosting === true ? (
<Button size="small" compact content="Add Reply" loading labelPosition="left" icon="edit" primary />
) : (
<Button size="small" compact content="Add Reply" onClick={(e) => {this.handleSubmit(e, this.props.postId)}} labelPosition="left" icon="edit" primary />
<Button
size="small"
compact
content="Add Reply"
onClick={(e) => {
this.handleSubmit(e, this.props.postId)
}}
labelPosition="left"
icon="edit"
primary
/>
)}
</Form>
</>
)}

</Comment.Group>
)
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Feed/FeedCommentSection/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
min-height: unset !important;
max-height: unset !important;
line-height: unset !important;
font-family: "PT Sans", sans-serif !important;
font-family: 'PT Sans', sans-serif !important;
font-size: 16px !important;
}

Expand Down Expand Up @@ -46,14 +46,14 @@

.MentionsInputComment--multiLine .MentionsInputComment__control {
font-size: 16px;
font-family: "PT Sans", sans-serif !important;
font-family: 'PT Sans', sans-serif !important;
}

.MentionsInputComment--multiLine .MentionsInputComment__highlighter {
border: 1px solid transparent;
padding: 9px;
min-height: 63px;
padding: .78571429em 1em !important;
padding: 0.78571429em 1em !important;
}

.MentionsInputComment--multiLine .MentionsInputComment__highlighter strong {
Expand Down Expand Up @@ -100,4 +100,4 @@
text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
text-decoration: underline;
pointer-events: none;
}
}
116 changes: 78 additions & 38 deletions src/components/Feed/FeedPostItem/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function PostItem(props) {
const [isLoading, setIsLoading] = useState(false)
const [showDeleteCommentsModal, setShowDeleteCommentsModal] = useState(false)
const [showDeleteLikesModal, setShowDeleteLikesModal] = useState(false)

const toggleLongText = (postId) => {
document.querySelector('#post_' + postId + ' div.text').classList.toggle('collapsed')
if (document.querySelector('#post_' + postId + ' .toggle-long-text-button')) {
Expand Down Expand Up @@ -66,7 +66,7 @@ export default function PostItem(props) {
}

const pinPost = (postId) => {
props.setIsLoading(true);
props.setIsLoading(true)

let header = new Headers()
header.append('Authorization', 'Bearer ' + localStorage.getItem('token'))
Expand All @@ -76,22 +76,22 @@ export default function PostItem(props) {
method: 'POST',
headers: header,
body: JSON.stringify({
postId: postId
postId: postId,
}),
}
// eslint-disable-next-line no-undef
fetch(process.env.REACT_APP_API_URL + '/api/content/pinPost', requestOptions)
.then((response) => response.json())
.then((data) => {
props.setIsLoading(false);
props.reloadFeed();
props.setPinnedModalVisible(true);
props.setPinnedModalStatus(data.is_pinned);
props.setIsLoading(false)
props.reloadFeed()
props.setPinnedModalVisible(true)
props.setPinnedModalStatus(data.is_pinned)
})
}

const disablePost = (postId) => {
props.setIsLoading(true);
props.setIsLoading(true)

let header = new Headers()
header.append('Authorization', 'Bearer ' + localStorage.getItem('token'))
Expand All @@ -101,22 +101,22 @@ export default function PostItem(props) {
method: 'POST',
headers: header,
body: JSON.stringify({
postId: postId
postId: postId,
}),
}
// eslint-disable-next-line no-undef
fetch(process.env.REACT_APP_API_URL + '/api/content/togglePostStatus', requestOptions)
.then((response) => response.json())
.then((data) => {
props.setIsLoading(false);
props.reloadFeed();
props.setDisabledModalVisible(true);
props.setDisabledModalStatus(data.status);
props.setIsLoading(false)
props.reloadFeed()
props.setDisabledModalVisible(true)
props.setDisabledModalStatus(data.status)
})
}

const clearComments = (postId) => {
props.setIsLoading(true);
props.setIsLoading(true)

let header = new Headers()
header.append('Authorization', 'Bearer ' + localStorage.getItem('token'))
Expand All @@ -126,22 +126,22 @@ export default function PostItem(props) {
method: 'POST',
headers: header,
body: JSON.stringify({
postId: postId
postId: postId,
}),
}
// eslint-disable-next-line no-undef
fetch(process.env.REACT_APP_API_URL + '/api/content/clearComments', requestOptions)
.then((response) => response.json())
.then((data) => {
props.setIsLoading(false);
props.reloadFeed();
props.setClearedModalVisible(true);
props.setClearedModalStatus("comments");
props.setIsLoading(false)
props.reloadFeed()
props.setClearedModalVisible(true)
props.setClearedModalStatus('comments')
})
}

const clearLikes = (postId) => {
props.setIsLoading(true);
props.setIsLoading(true)

let header = new Headers()
header.append('Authorization', 'Bearer ' + localStorage.getItem('token'))
Expand All @@ -151,23 +151,30 @@ export default function PostItem(props) {
method: 'POST',
headers: header,
body: JSON.stringify({
postId: postId
postId: postId,
}),
}
// eslint-disable-next-line no-undef
fetch(process.env.REACT_APP_API_URL + '/api/content/clearLikes', requestOptions)
.then((response) => response.json())
.then((data) => {
props.setIsLoading(false);
props.reloadFeed();
props.setClearedModalVisible(true);
props.setClearedModalStatus("likes");
props.setIsLoading(false)
props.reloadFeed()
props.setClearedModalVisible(true)
props.setClearedModalStatus('likes')
})
}

return (
<React.Fragment key={props.post.id}>
<Feed.Event id={'post_' + props.post.id} className={[visibleCommentSections.includes(props.post.id) == 0 ? 'event--no-comments-visible' : '', props.post.is_pinned == 1 ? 'event--pinned' : '', props.post.status == 0 ? 'event--disabled' : '']}>
<Feed.Event
id={'post_' + props.post.id}
className={[
visibleCommentSections.includes(props.post.id) == 0 ? 'event--no-comments-visible' : '',
props.post.is_pinned == 1 ? 'event--pinned' : '',
props.post.status == 0 ? 'event--disabled' : '',
]}
>
<Feed.Label className="user-avatar">
<Link to={'/app/user/' + props.post.email}>
{props.post.avatar == '' ? <img loading="lazy" src={unknownAvatar} /> : <img loading="lazy" src={process.env.REACT_APP_API_URL + '/' + props.post.avatar.replace('./', '')} />}
Expand Down Expand Up @@ -263,7 +270,7 @@ export default function PostItem(props) {
</a>
{localStorage.getItem('user_admin') !== undefined && localStorage.getItem('user_admin') == '1' && (
<Dropdown
trigger={(
trigger={
<a
href="#"
className="administrate-button"
Expand All @@ -274,14 +281,36 @@ export default function PostItem(props) {
<span>Administrate</span>
<Tool size={16} strokeWidth={2.5} />
</a>
)}
direction='left'
}
direction="left"
>
<Dropdown.Menu>
<Dropdown.Item onClick={() => {pinPost(props.post.id)}} text={`${props.post.is_pinned == 1 ? 'Unpin' : 'Pin'} this Post`} />
<Dropdown.Item onClick={() => {disablePost(props.post.id)}} text={`${props.post.status == 1 ? 'Disable' : 'Enable'} this Post`} />
<Dropdown.Item onClick={() => {setShowDeleteCommentsModal(true)}} text='Clear all Comments' description='Caution!' />
<Dropdown.Item onClick={() => {setShowDeleteLikesModal(true)}} text='Clear all Likes' description='Caution!' />
<Dropdown.Item
onClick={() => {
pinPost(props.post.id)
}}
text={`${props.post.is_pinned == 1 ? 'Unpin' : 'Pin'} this Post`}
/>
<Dropdown.Item
onClick={() => {
disablePost(props.post.id)
}}
text={`${props.post.status == 1 ? 'Disable' : 'Enable'} this Post`}
/>
<Dropdown.Item
onClick={() => {
setShowDeleteCommentsModal(true)
}}
text="Clear all Comments"
description="Caution!"
/>
<Dropdown.Item
onClick={() => {
setShowDeleteLikesModal(true)
}}
text="Clear all Likes"
description="Caution!"
/>
</Dropdown.Menu>
</Dropdown>
)}
Expand Down Expand Up @@ -315,7 +344,13 @@ export default function PostItem(props) {
<Button disabled={isLoading} color="black" onClick={() => setShowDeleteCommentsModal(false)}>
Cancel
</Button>
<Button disabled={isLoading} color="red" onClick={() => {clearComments(props.post.id)}}>
<Button
disabled={isLoading}
color="red"
onClick={() => {
clearComments(props.post.id)
}}
>
Delete irreversibly
</Button>
</Modal.Actions>
Expand All @@ -332,13 +367,18 @@ export default function PostItem(props) {
<Button disabled={isLoading} color="black" onClick={() => setShowDeleteLikesModal(false)}>
Cancel
</Button>
<Button disabled={isLoading} color="red" onClick={() => {clearLikes(props.post.id)}}>
<Button
disabled={isLoading}
color="red"
onClick={() => {
clearLikes(props.post.id)
}}
>
Delete irreversibly
</Button>
</Modal.Actions>
</W_Modal>
)}

</React.Fragment>
)
}
Expand Down
Loading

0 comments on commit 791e0bc

Please sign in to comment.