diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx index e03cf74d97..bdb02a5d7d 100644 --- a/src/components/Comment/Comment.tsx +++ b/src/components/Comment/Comment.tsx @@ -13,7 +13,9 @@ import { Button } from 'src/components/Button' import { AuthWrapper } from '../Auth/AuthWrapper' import { logger } from 'src/logger' -export interface IProps extends IComment {} +export interface IProps extends IComment { + verified: boolean +} export const Comment: React.FC = ({ _creatorId, @@ -22,6 +24,7 @@ export const Comment: React.FC = ({ ...props }) => { const { stores } = useCommonStores() + const [showEditModal, setShowEditModal] = useState(false) return ( diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx index e5e12c4b1c..05f2daf13b 100644 --- a/src/components/Comment/CommentHeader.tsx +++ b/src/components/Comment/CommentHeader.tsx @@ -1,16 +1,20 @@ -import { Box, Flex, Text } from 'rebass/styled-components' +import { Box, Flex, Text, Image } from 'rebass/styled-components' import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon' import { IComment } from 'src/models' import { Link } from 'src/components/Links' import theme from 'src/themes/styled.theme' +import VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg' -interface IProps extends Omit {} +interface IProps extends Omit { + verified: boolean +} export const CommentHeader = ({ creatorName, creatorCountry, _created, _edited, + verified, }: IProps) => { return ( @@ -26,6 +30,9 @@ export const CommentHeader = ({ > {creatorName} + {verified && ( + + )} diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx index 505d08c40e..80a1b0926d 100644 --- a/src/components/EventCard/EventCard.tsx +++ b/src/components/EventCard/EventCard.tsx @@ -7,9 +7,12 @@ import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon' import { IEvent } from '../../models/events.models' import { getMonth, getDay, capitalizeFirstLetter } from 'src/utils/helpers' import { LinkTargetBlank } from '../Links/LinkTargetBlank/LinkTargetBlank' +import { Image } from 'rebass' +import VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg' interface IProps { event: IEvent + verified?: boolean needsModeration: boolean moderateEvent: (event: IEvent, accepted: boolean) => void } @@ -79,9 +82,14 @@ export const EventCard = (props: IProps) => ( {capitalizeFirstLetter(props.event.title)} - - By {props.event._createdBy} - + + + By {props.event._createdBy} + + {props.verified && ( + + )} + = ({ item }) => ( +const ResearchListItem: React.FC = ({ item, verified }) => ( = ({ item }) => ( > {item._createdBy} + {verified && ( + + )} false, 1 -> true + * */ + verified: number } interface IExternalLink { diff --git a/src/pages/Events/Content/EventsList/EventsList.tsx b/src/pages/Events/Content/EventsList/EventsList.tsx index c8bc221da7..37b6dccc3d 100644 --- a/src/pages/Events/Content/EventsList/EventsList.tsx +++ b/src/pages/Events/Content/EventsList/EventsList.tsx @@ -24,6 +24,9 @@ export class EventsList extends React.Component { // eslint-disable-next-line constructor(props: any) { super(props) + + // fetch verified users to show badges on events + this.props.userStore?.fetchAllVerifiedUsers() } get injected() { @@ -94,6 +97,9 @@ export class EventsList extends React.Component { {filteredEvents.map((event: IEventDB) => ( user.userName === event._createdBy, + )} event={event} needsModeration={this.store.needsModeration(event)} moderateEvent={this.moderateEvent} diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx index bcbc588329..6593b401db 100644 --- a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx +++ b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx @@ -7,12 +7,14 @@ import { Comment } from 'src/components/Comment/Comment' import { CommentTextArea } from 'src/components/Comment/CommentTextArea' import { IComment } from 'src/models' import styled from 'styled-components' +import { IUser } from 'src/models/user.models' import { logger } from 'src/logger' const MAX_COMMENTS = 5 interface IProps { comments?: IComment[] + verifiedUsers?: IUser[] } const BoxStyled = styled(Box)` @@ -26,7 +28,7 @@ const ButtonStyled = styled(Button)` ` // TODO: Expect the comments as a prop from the HowTo -export const HowToComments = ({ comments }: IProps) => { +export const HowToComments = ({ comments, verifiedUsers }: IProps) => { const [comment, setComment] = useState('') const [loading, setLoading] = useState(false) const { stores } = useCommonStores() @@ -34,13 +36,17 @@ export const HowToComments = ({ comments }: IProps) => { async function onSubmit(comment: string) { try { - const howto = stores.howtoStore.activeHowto; + const howto = stores.howtoStore.activeHowto setLoading(true) await stores.howtoStore.addComment(comment) - if(howto){ - await stores.userStore.triggerNotification('new_comment', howto._createdBy, howto.slug); + if (howto) { + await stores.userStore.triggerNotification( + 'new_comment', + howto._createdBy, + howto.slug, + ) } - + setLoading(false) setComment('') @@ -82,7 +88,17 @@ export const HowToComments = ({ comments }: IProps) => { {comments && comments .slice(0, shownComments) - .map(comment => )} + .map(comment => ( + user.userName === comment.creatorName, + ) + } + {...comment} + /> + ))} {comments && comments.length > shownComments && (