feat: verified icon in usernames

src/components/Comment/Comment.tsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react'
-import { FaTrash, FaRegEdit } from 'react-icons/fa'
+import { Field, Form } from 'react-final-form'
+import { FaRegEdit, FaTrash } from 'react-icons/fa'
 import { Flex } from 'rebass'
 import { useCommonStores } from 'src'
-import { IComment } from 'src/models'
-import { CommentHeader } from './CommentHeader'
-import { Text } from 'src/components/Text'
-import { Modal } from '../Modal/Modal'
-import { TextAreaField } from '../Form/Fields'
-import { Field, Form } from 'react-final-form'
 import { Button } from 'src/components/Button'
+import { Text } from 'src/components/Text'
+import { IComment } from 'src/models'
 import { AuthWrapper } from '../Auth/AuthWrapper'
+import { TextAreaField } from '../Form/Fields'
+import { Modal } from '../Modal/Modal'
+import { CommentHeader } from './CommentHeader'
 
-export interface IProps extends IComment {}
+export interface IProps extends IComment {
+  verified: boolean
+}
 
 export const Comment: React.FC<IProps> = ({
   _creatorId,
@@ -20,6 +22,7 @@ export const Comment: React.FC<IProps> = ({
   ...props
 }) => {
   const { stores } = useCommonStores()
+
   const [showEditModal, setShowEditModal] = useState(false)
 
   return (

src/components/Comment/CommentHeader.tsx

@@ -1,15 +1,19 @@
-import { Box, Flex, Text } from 'rebass'
+import { Box, Flex, Text, Image } from 'rebass'
 import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import { IComment } from 'src/models'
 import { Link } from 'src/components/Links'
+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">
@@ -25,6 +29,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/mocks/user.mock.tsx

@@ -4,7 +4,7 @@ import { MOCK_DB_META } from './db.mock'
 
 export const MOCK_USER: IUser = {
   verified: true,
-  badges: { verified: true },
+  badges: { verified: 1 },
   userName: 'chris-m-clarke',
   displayName: 'chris-m-clarke',
   moderation: 'accepted',

src/mocks/user_pp.mock.tsx

@@ -87,7 +87,7 @@ export const MOCK_USER_WORKSPACE: IUserPP = {
 }
 export const MOCK_USER_COLLECTION: IUserPP = {
   verified: true,
-  badges: { verified: true },
+  badges: { verified: 1 },
   userName: 'collection-username',
   about: 'We are collecting plastic in city center',
   ...MOCK_DB_META(),
@@ -142,7 +142,7 @@ export const MOCK_USER_COLLECTION: IUserPP = {
 }
 export const MOCK_USER_MEMBER: IUserPP = {
   verified: true,
-  badges: { verified: false },
+  badges: { verified: 0 },
   userName: 'member-username',
   about: "I'm just a member of this community that share knowledge",
   ...MOCK_DB_META(),
@@ -196,7 +196,7 @@ export const MOCK_USER_MEMBER: IUserPP = {
 }
 export const MOCK_USER_COMMUNITY: IUserPP = {
   verified: true,
-  badges: { verified: true },
+  badges: { verified: 1 },
   userName: 'community-username',
   about: 'We are building a local community to fight plastic waste',
   ...MOCK_DB_META(),
@@ -252,7 +252,7 @@ export const MOCK_USER_COMMUNITY: IUserPP = {
 }
 export const MOCK_USER_MACHINE: IUserPP = {
   verified: true,
-  badges: { verified: true },
+  badges: { verified: 1 },
   userName: 'community-username',
   about: 'We are building machine to recycle plastic',
   ...MOCK_DB_META(),

src/models/user.models.tsx

@@ -44,7 +44,11 @@ export interface IUser {
 }
 
 interface IUserBadges {
-  verified: boolean
+  /** We use number instead of boolean to enable Dexie to index the data
+   * (it is not compatible with boolean)
+   * 0 -> false, 1 -> true
+   * */
+  verified: number
 }
 
 interface IExternalLink {

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

@@ -26,6 +26,9 @@ export class EventsList extends React.Component<any> {
   // eslint-disable-next-line
   constructor(props: any) {
     super(props)
+
+    // fetch verified users to show badges on events
+    this.props.userStore?.fetchAllVerifiedUsers()
   }
 
   get injected() {
@@ -111,6 +114,9 @@ export class EventsList extends React.Component<any> {
                   {filteredEvents.map((event: IEventDB) => (
                     <EventCard
                       key={event._id}
+                      verified={this.props.userStore?.verifiedUsers?.some(
+                        user => user.userName === event._createdBy,
+                      )}
                       event={event}
                       needsModeration={this.store.needsModeration(event)}
                       moderateEvent={this.moderateEvent}

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

@@ -7,11 +7,13 @@ 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'
 
 const MAX_COMMENTS = 5
 
 interface IProps {
   comments?: IComment[]
+  verifiedUsers?: IUser[]
 }
 
 const BoxStyled = styled(Box)`
@@ -25,7 +27,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()
@@ -61,7 +63,17 @@ 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?.some(
+                    user => user.userName === comment.creatorName,
+                  )
+                }
+                {...comment}
+              />
+            ))}
         {comments && comments.length > shownComments && (
           <Button
             width="max-content"

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

@@ -85,6 +85,9 @@ export class Howto extends React.Component<
     this.state = {
       isLoading: true,
     }
+
+    // Verified users will be used to display badges on comments & howto author
+    this.injected.userStore.fetchAllVerifiedUsers()
   }
   // workaround used later so that userStore can be called in render method when not existing on
   get injected() {
@@ -126,6 +129,9 @@ export class Howto extends React.Component<
         <>
           <HowtoDescription
             howto={activeHowto}
+            verified={this.injected.userStore.verifiedUsers.some(
+              user => user.userName === this.store.activeHowto?._createdBy,
+            )}
             votedUsefulCount={this.store.howtoStats?.votedUsefulCount}
             loggedInUser={loggedInUser}
             needsModeration={this.store.needsModeration(activeHowto)}
@@ -139,7 +145,10 @@ export class Howto extends React.Component<
               <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

@@ -1,33 +1,35 @@
-import { PureComponent } from 'react'
-import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
 import { format } from 'date-fns'
-import { IHowtoDB } from 'src/models/howto.models'
-import Heading from 'src/components/Heading'
-import Text from 'src/components/Text'
-import ModerationStatusText from 'src/components/ModerationStatusText'
-import { Link } from 'src/components/Links'
+import { PureComponent } from 'react'
 import { Box, Flex, Image } from 'rebass'
-import { FileInfo } from 'src/components/FileInfo/FileInfo'
+import ArrowIcon from 'src/assets/icons/icon-arrow-select.svg'
+import DifficultyLevel from 'src/assets/icons/icon-difficulty-level.svg'
 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 { FileInfo } from 'src/components/FileInfo/FileInfo'
+import Heading from 'src/components/Heading'
+import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
+import { Link } from 'src/components/Links'
+import ModerationStatusText from 'src/components/ModerationStatusText'
+import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
+import Text from 'src/components/Text'
+import { IHowtoDB } from 'src/models/howto.models'
 import { IUser } from 'src/models/user.models'
+import theme from 'src/themes/styled.theme'
 import {
-  isAllowToEditContent,
-  emStringToPx,
   capitalizeFirstLetter,
+  emStringToPx,
+  isAllowToEditContent,
 } from 'src/utils/helpers'
-import theme from 'src/themes/styled.theme'
-import ArrowIcon from 'src/assets/icons/icon-arrow-select.svg'
-import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import { HowtoUsefulStats } from './HowtoUsefulStats'
 
 interface IProps {
   howto: IHowtoDB
   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 &&