Merge pull request #1480 from ONEARMY/pr/1205-rebased-3

feat: verified icon in usernames (rebased)

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<IProps> = ({
   _creatorId,

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<IComment, 'text' | '_id' | '_creatorId'> {}
+interface IProps extends Omit<IComment, 'text' | '_id' | '_creatorId'> {
+  verified: boolean
+}
 
 export const CommentHeader = ({
   creatorName,
   creatorCountry,
   _created,
   _edited,
+  verified,
 }: IProps) => {
   return (
     <Flex justifyContent="space-between" alignItems="baseline">
@@ -26,6 +30,9 @@ export const CommentHeader = ({
           >
             {creatorName}
           </Link>
+          {verified && (
+            <Image src={VerifiedBadgeIcon} ml={1} height="12px" width="12px" />
+          )}
         </span>
       </Box>
       <Flex alignItems="center">

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)}
         </Text>
       </Flex>
-      <Text auxiliary width={1}>
-        By {props.event._createdBy}
-      </Text>
+      <Flex>
+        <Text auxiliary width={1}>
+          By {props.event._createdBy}
+        </Text>
+        {props.verified && (
+          <Image src={VerifiedBadgeIcon} height="16px" width="16px" />
+        )}
+      </Flex>
     </Flex>
     <Flex
       flexWrap={'nowrap'}

src/components/Research/ResearchListItem.tsx

@@ -7,12 +7,15 @@ import { ModerationStatusText } from 'src/components/ModerationStatusText'
 import Text from 'src/components/Text'
 import { IResearch } from 'src/models/research.models'
 import theme from 'src/themes/styled.theme'
+import { Image } from 'rebass/styled-components'
+import VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg'
 
 interface IProps {
   item: IResearch.ItemDB
+  verified: boolean
 }
 
-const ResearchListItem: React.FC<IProps> = ({ item }) => (
+const ResearchListItem: React.FC<IProps> = ({ item, verified }) => (
   <Flex
     card
     mediumRadius
@@ -44,6 +47,9 @@ const ResearchListItem: React.FC<IProps> = ({ item }) => (
           >
             {item._createdBy}
           </Text>
+          {verified && (
+            <Image src={VerifiedBadgeIcon} ml={1} height="12px" width="12px" />
+          )}
         </Flex>
         <Flex
           alignItems="center"

src/pages/Events/Content/EventsList/EventsList.tsx

@@ -21,11 +21,6 @@ interface InjectedProps {
 @inject('eventStore', 'userStore')
 @observer
 export class EventsList extends React.Component<any> {
-  // eslint-disable-next-line
-  constructor(props: any) {
-    super(props)
-  }
-
   get injected() {
     return this.props as InjectedProps
   }
@@ -94,6 +89,9 @@ export class EventsList extends React.Component<any> {
                   {filteredEvents.map((event: IEventDB) => (
                     <EventCard
                       key={event._id}
+                      verified={
+                        this.injected.userStore?.verifiedUsers[event._createdBy]
+                      }
                       event={event}
                       needsModeration={this.store.needsModeration(event)}
                       moderateEvent={this.moderateEvent}

src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx

@@ -13,6 +13,7 @@ const MAX_COMMENTS = 5
 
 interface IProps {
   comments?: IComment[]
+  verifiedUsers?: { [user_id: string]: boolean }
 }
 
 const BoxStyled = styled(Box)`
@@ -26,21 +27,25 @@ 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()
   const [moreComments, setMoreComments] = useState(1)
 
   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 +87,13 @@ export const HowToComments = ({ comments }: IProps) => {
         {comments &&
           comments
             .slice(0, shownComments)
-            .map(comment => <Comment key={comment._id} {...comment} />)}
+            .map(comment => (
+              <Comment
+                key={comment._id}
+                verified={verifiedUsers?.[comment.creatorName] ? true : false}
+                {...comment}
+              />
+            ))}
         {comments && comments.length > shownComments && (
           <Button
             width="max-content"

src/pages/Howto/Content/Howto/Howto.tsx

@@ -100,9 +100,17 @@ export class Howto extends React.Component<
     }
   }
 
-  private onUsefulClick = async (howtoId: string, howtoCreatedBy: string, howToSlug: string) => {
+  private onUsefulClick = async (
+    howtoId: string,
+    howtoCreatedBy: string,
+    howToSlug: string,
+  ) => {
     // Fire & forget
-    await this.injected.userStore.updateUsefulHowTos(howtoId, howtoCreatedBy, howToSlug)
+    await this.injected.userStore.updateUsefulHowTos(
+      howtoId,
+      howtoCreatedBy,
+      howToSlug,
+    )
   }
 
   public async componentDidMount() {
@@ -123,19 +131,31 @@ export class Howto extends React.Component<
         <>
           <HowtoDescription
             howto={activeHowto}
+            verified={
+              this.injected.userStore.verifiedUsers[activeHowto._createdBy]
+            }
             votedUsefulCount={this.store.howtoStats?.votedUsefulCount}
             loggedInUser={loggedInUser}
             needsModeration={this.store.needsModeration(activeHowto)}
             userVotedUseful={this.store.userVotedActiveHowToUseful}
             moderateHowto={this.moderateHowto}
-            onUsefulClick={() => this.onUsefulClick(activeHowto._id, activeHowto._createdBy, activeHowto.slug)}
+            onUsefulClick={() =>
+              this.onUsefulClick(
+                activeHowto._id,
+                activeHowto._createdBy,
+                activeHowto.slug,
+              )
+            }
           />
           <Box mt={9}>
             {activeHowto.steps.map((step: any, index: number) => (
               <Step step={step} key={index} stepindex={index} />
             ))}
           </Box>
-          <HowToComments comments={activeHowto.comments} />
+          <HowToComments
+            comments={activeHowto.comments}
+            verifiedUsers={this.injected.userStore.verifiedUsers}
+          />
           <MoreBox py={20} mt={20}>
             <Text bold txtcenter fontSize={[4, 4, 5]}>
               You're done.

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

@@ -11,6 +11,7 @@ import { FileInfo } from 'src/components/FileInfo/FileInfo'
 import StepsIcon from 'src/assets/icons/icon-steps.svg'
 import TimeNeeded from 'src/assets/icons/icon-time-needed.svg'
 import DifficultyLevel from 'src/assets/icons/icon-difficulty-level.svg'
+import VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg'
 import { Button } from 'src/components/Button'
 import { IUser } from 'src/models/user.models'
 import {
@@ -28,6 +29,7 @@ interface IProps {
   loggedInUser: IUser | undefined
   needsModeration: boolean
   votedUsefulCount?: number
+  verified?: boolean
   userVotedUseful: boolean
   moderateHowto: (accepted: boolean) => void
   onUsefulClick: () => void
@@ -144,6 +146,11 @@ export default class HowtoDescription extends PureComponent<IProps> {
                 >
                   {howto._createdBy}
                 </Link>{' '}
+                {this.props.verified && (
+                  <>
+                    <Image src={VerifiedBadgeIcon} height="12px" width="12px" />{' '}
+                  </>
+                )}
                 | Published on {this.dateCreatedByText(howto)}
               </Text>
             </Flex>

src/pages/Howto/Content/HowtoList/HowToCard.tsx

@@ -8,9 +8,12 @@ import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
 import { IHowtoDB } from 'src/models/howto.models'
 import Heading from 'src/components/Heading'
 import { capitalizeFirstLetter } from 'src/utils/helpers'
+import VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg'
+import { Image } from 'rebass'
 
 interface IProps {
   howto: IHowtoDB
+  verified: boolean
 }
 export const HowToCard = (props: IProps) => (
   <Flex
@@ -56,9 +59,12 @@ export const HowToCard = (props: IProps) => (
           {props.howto.creatorCountry && (
             <FlagIconHowTos code={props.howto.creatorCountry} />
           )}
-          <Text auxiliary my={2} ml={1}>
+          <Text auxiliary my={2} ml={1} display="flex">
             By {props.howto._createdBy}
           </Text>
+          {props.verified && (
+            <Image src={VerifiedBadgeIcon} ml={1} height="12px" width="12px" />
+          )}
         </Flex>
         <Flex mt={4}>
           {props.howto.tags &&

src/pages/Howto/Content/HowtoList/HowtoList.tsx

@@ -1,22 +1,25 @@
+import { inject, observer } from 'mobx-react'
 import * as React from 'react'
+import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
+import { Button } from 'src/components/Button'
+import Heading from 'src/components/Heading'
 import { Flex, Box } from 'rebass/styled-components'
 import { Link } from 'src/components/Links'
+import { Loader } from 'src/components/Loader'
+import MoreContainer from 'src/components/MoreContainer/MoreContainer'
+import SearchInput from 'src/components/SearchInput'
 import TagsSelect from 'src/components/Tags/TagsSelect'
-import { inject, observer } from 'mobx-react'
+import { VirtualizedFlex } from 'src/components/VirtualizedFlex/VirtualizedFlex'
+import { IHowtoDB } from 'src/models/howto.models'
 import { HowtoStore } from 'src/stores/Howto/howto.store'
 import { UserStore } from 'src/stores/User/user.store'
-import { Button } from 'src/components/Button'
-import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
-import MoreContainer from 'src/components/MoreContainer/MoreContainer'
 import HowToCard from './HowToCard'
-import Heading from 'src/components/Heading'
-import { Loader } from 'src/components/Loader'
-import { VirtualizedFlex } from 'src/components/VirtualizedFlex/VirtualizedFlex'
-import SearchInput from 'src/components/SearchInput'
+import { ThemeStore } from 'src/stores/Theme/theme.store'
 
 interface InjectedProps {
-  howtoStore?: HowtoStore
-  userStore?: UserStore
+  howtoStore: HowtoStore
+  userStore: UserStore
+  themeStore: ThemeStore
 }
 
 interface IState {
@@ -50,7 +53,6 @@ export class HowtoList extends React.Component<any, IState> {
     this.state = {
       isLoading: true,
     }
-
     if (props.location.search) {
       const searchParams = new URLSearchParams(props.location.search)
 
@@ -66,14 +68,15 @@ export class HowtoList extends React.Component<any, IState> {
 
       const searchQuery = searchParams.get('search')?.toString()
       if (searchQuery) {
-        this.props.howtoStore.updateSearchValue(searchQuery)
+        this.injected.howtoStore.updateSearchValue(searchQuery)
+      }
+      const referrerSource = searchParams.get('source')?.toString()
+      if (referrerSource) {
+        this.injected.howtoStore.updateReferrerSource(referrerSource)
       }
-
-      this.props.howtoStore.updateReferrerSource(
-        searchParams.get('source')?.toString(),
-      )
     }
   }
+
   get injected() {
     return this.props as InjectedProps
   }
@@ -90,6 +93,7 @@ export class HowtoList extends React.Component<any, IState> {
   }
 
   public render() {
+    const { verifiedUsers } = this.injected.userStore
     const {
       filteredHowtos,
       selectedTags,
@@ -187,9 +191,12 @@ export class HowtoList extends React.Component<any, IState> {
             >
               <VirtualizedFlex
                 data={filteredHowtos}
-                renderItem={data => (
+                renderItem={(data: IHowtoDB) => (
                   <Box px={4} py={4}>
-                    <HowToCard howto={data} />
+                    <HowToCard
+                      howto={data}
+                      verified={verifiedUsers?.[data._createdBy]}
+                    />
                   </Box>
                 )}
               />