From 43375f35ad4c1ba99968c7c04a8e98fd7939e286 Mon Sep 17 00:00:00 2001
From: danitrod <danitrod@outlook.com>
Date: Wed, 16 Feb 2022 20:18:44 -0800
Subject: [PATCH 1/6] feat: verified everywhere (#1479)

---
 src/components/Comment/Comment.tsx            |  5 +-
 src/components/Comment/CommentHeader.tsx      | 11 ++-
 src/components/EventCard/EventCard.tsx        | 14 ++-
 src/components/Research/ResearchListItem.tsx  |  8 +-
 src/mocks/user.mock.tsx                       |  2 +-
 src/mocks/user_pp.mock.tsx                    |  8 +-
 src/models/user.models.tsx                    |  6 +-
 .../Events/Content/EventsList/EventsList.tsx  |  6 ++
 .../Howto/HowToComments/HowToComments.tsx     | 28 ++++--
 src/pages/Howto/Content/Howto/Howto.tsx       | 11 ++-
 .../HowtoDescription/HowtoDescription.tsx     |  7 ++
 .../Howto/Content/HowtoList/HowToCard.tsx     |  8 +-
 .../Howto/Content/HowtoList/HowtoList.tsx     | 30 ++++--
 .../Research/Content/ResearchDescription.tsx  | 38 +++++---
 .../Research/Content/ResearchItemDetail.tsx   | 16 +++-
 src/pages/Research/Content/ResearchList.tsx   | 22 ++++-
 src/stores/Maps/maps.store.ts                 |  2 +-
 src/stores/User/user.store.ts                 | 96 ++++++++++++-------
 18 files changed, 237 insertions(+), 81 deletions(-)

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<IProps> = ({
   _creatorId,
@@ -22,6 +24,7 @@ export const Comment: React.FC<IProps> = ({
   ...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<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">
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)}
         </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'}
diff --git a/src/components/Research/ResearchListItem.tsx b/src/components/Research/ResearchListItem.tsx
index 0e3d25e125..e8096fbe04 100644
--- a/src/components/Research/ResearchListItem.tsx
+++ b/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"
diff --git a/src/mocks/user.mock.tsx b/src/mocks/user.mock.tsx
index 862d1c65ea..948e6cc7ad 100644
--- a/src/mocks/user.mock.tsx
+++ b/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',
diff --git a/src/mocks/user_pp.mock.tsx b/src/mocks/user_pp.mock.tsx
index 2b6d45f66d..192f853557 100644
--- a/src/mocks/user_pp.mock.tsx
+++ b/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(),
diff --git a/src/models/user.models.tsx b/src/models/user.models.tsx
index 3c77c3a3a2..bfb22c541e 100644
--- a/src/models/user.models.tsx
+++ b/src/models/user.models.tsx
@@ -45,7 +45,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 {
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<any> {
   // 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<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}
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 => <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"
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index f37ec43066..94ad8456c2 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/src/pages/Howto/Content/Howto/Howto.tsx
@@ -82,6 +82,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() {
@@ -123,6 +126,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)}
@@ -135,7 +141,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.
diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
index ef8ebf37b2..18cc581b5e 100644
--- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
+++ b/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>
diff --git a/src/pages/Howto/Content/HowtoList/HowToCard.tsx b/src/pages/Howto/Content/HowtoList/HowToCard.tsx
index ac36d811af..78d7acdbc4 100644
--- a/src/pages/Howto/Content/HowtoList/HowToCard.tsx
+++ b/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 &&
diff --git a/src/pages/Howto/Content/HowtoList/HowtoList.tsx b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
index d3420ed64f..69652299b8 100644
--- a/src/pages/Howto/Content/HowtoList/HowtoList.tsx
+++ b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
@@ -1,18 +1,19 @@
+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'
 
 interface InjectedProps {
   howtoStore?: HowtoStore
@@ -51,6 +52,8 @@ export class HowtoList extends React.Component<any, IState> {
       isLoading: true,
     }
 
+    this.props.userStore.fetchAllVerifiedUsers()
+
     if (props.location.search) {
       const searchParams = new URLSearchParams(props.location.search)
 
@@ -74,6 +77,7 @@ export class HowtoList extends React.Component<any, IState> {
       )
     }
   }
+
   get injected() {
     return this.props as InjectedProps
   }
@@ -90,6 +94,7 @@ export class HowtoList extends React.Component<any, IState> {
   }
 
   public render() {
+    const { verifiedUsers } = this.props.userStore
     const {
       filteredHowtos,
       selectedTags,
@@ -187,9 +192,14 @@ 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.some(
+                        user => user.userName === data._createdBy,
+                      )}
+                    />
                   </Box>
                 )}
               />
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index e8d967141d..2b812b095f 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -9,17 +9,19 @@ 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 VerifiedBadgeIcon from 'src/assets/icons/icon-verified-badge.svg'
 interface IProps {
   research: IResearch.ItemDB
   isEditable: boolean
   needsModeration: boolean
   moderateResearch: (accepted: boolean) => void
+  verified: boolean
 }
 
 const ResearchDescription: React.FC<IProps> = ({
   research,
   isEditable,
+  verified,
   ...props
 }) => {
   const dateLastUpdateText = (research: IResearch.ItemDB): string => {
@@ -95,17 +97,29 @@ const ResearchDescription: React.FC<IProps> = ({
         <Box mt={3} mb={2}>
           <Flex alignItems="center">
             <Text inline auxiliary my={2} ml={1}>
-              By{' '}
-              <Link
-                sx={{
-                  textDecoration: 'underline',
-                  color: 'inherit',
-                }}
-                to={'/u/' + research._createdBy}
-              >
-                {research._createdBy}
-              </Link>{' '}
-              | Started on {format(new Date(research._created), 'DD-MM-YYYY')}
+              <Flex alignItems="center">
+                By
+                <Link
+                  ml={1}
+                  mr={1}
+                  sx={{
+                    textDecoration: 'underline',
+                    color: 'inherit',
+                  }}
+                  to={'/u/' + research._createdBy}
+                >
+                  {research._createdBy}
+                </Link>
+                {verified && (
+                  <Image
+                    src={VerifiedBadgeIcon}
+                    mr={1}
+                    width="12px"
+                    height="12px"
+                  />
+                )}
+                | Started on {format(new Date(research._created), 'DD-MM-YYYY')}
+              </Flex>
             </Text>
           </Flex>
           <Text
diff --git a/src/pages/Research/Content/ResearchItemDetail.tsx b/src/pages/Research/Content/ResearchItemDetail.tsx
index ca498a60b0..593dc888d6 100644
--- a/src/pages/Research/Content/ResearchItemDetail.tsx
+++ b/src/pages/Research/Content/ResearchItemDetail.tsx
@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react'
 import * as React from 'react'
 import { RouteComponentProps } from 'react-router'
+import { useCommonStores } from 'src'
 import { Box, Flex } from 'rebass/styled-components'
 import { Button } from 'src/components/Button'
 import { Link } from 'src/components/Links'
@@ -15,6 +16,9 @@ type IProps = RouteComponentProps<{ slug: string }>
 
 const ResearchItemDetail = observer((props: IProps) => {
   const store = useResearchStore()
+  const {
+    stores: { userStore },
+  } = useCommonStores()
 
   const [isLoading, setIsLoading] = React.useState(true)
 
@@ -27,7 +31,7 @@ const ResearchItemDetail = observer((props: IProps) => {
   }
 
   React.useEffect(() => {
-    (async () => {
+    ;(async () => {
       const { slug } = props.match.params
       await store.setActiveResearchItem(slug)
       setIsLoading(false)
@@ -39,7 +43,14 @@ const ResearchItemDetail = observer((props: IProps) => {
     }
   }, [props, store])
 
+  React.useEffect(() => {
+    if (userStore) {
+      userStore.fetchAllVerifiedUsers()
+    }
+  }, [userStore])
+
   const item = store.activeResearchItem
+  const { verifiedUsers } = userStore
 
   if (item) {
     const isEditable =
@@ -52,6 +63,9 @@ const ResearchItemDetail = observer((props: IProps) => {
           isEditable={isEditable}
           needsModeration={store.needsModeration(item)}
           moderateResearch={moderateResearch}
+          verified={
+            !!verifiedUsers?.some(user => user.userName === item._createdBy)
+          }
         />
         <Box my={16}>
           {item &&
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index 9d5fde60a9..7df8d0635e 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { observer } from 'mobx-react'
 import { Box, Flex } from 'rebass/styled-components'
 import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
@@ -6,9 +7,20 @@ import Heading from 'src/components/Heading'
 import { Link } from 'src/components/Links'
 import ResearchListItem from 'src/components/Research/ResearchListItem'
 import { useResearchStore } from 'src/stores/Research/research.store'
+import { useCommonStores } from 'src'
 
 const ResearchList = observer(() => {
   const store = useResearchStore()
+  const {
+    stores: { userStore },
+  } = useCommonStores()
+
+  useEffect(() => {
+    if (userStore) {
+      userStore.fetchAllVerifiedUsers()
+    }
+  }, [userStore])
+
   const { filteredResearches } = store
   return (
     <>
@@ -18,7 +30,15 @@ const ResearchList = observer(() => {
         </Heading>
       </Flex>
       {filteredResearches.map(item => (
-        <ResearchListItem key={item._id} item={item} />
+        <ResearchListItem
+          key={item._id}
+          item={item}
+          verified={
+            !!userStore?.verifiedUsers?.some(
+              user => user.userName === item._createdBy,
+            )
+          }
+        />
       ))}
       <Box mb={4}>
         <Link
diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
index c84deff8fd..0921b41da0 100644
--- a/src/stores/Maps/maps.store.ts
+++ b/src/stores/Maps/maps.store.ts
@@ -239,7 +239,7 @@ export class MapsStore extends ModuleStore {
       name: u.userName,
       displayName: u.displayName,
       profileUrl: `${window.location.origin}/u/${u.userName}`,
-      verifiedBadge: u.badges?.verified || false,
+      verifiedBadge: !!u.badges?.verified,
     }
   }
   @action
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index 09d936daa2..53dc729d45 100644
--- a/src/stores/User/user.store.ts
+++ b/src/stores/User/user.store.ts
@@ -1,10 +1,16 @@
+import { DBDoc } from 'src/models'
 import { observable, action, makeObservable, toJS } from 'mobx'
-import { INotification, IUser, IUserDB, NotificationType } from 'src/models/user.models'
+import {
+  INotification,
+  IUser,
+  IUserDB,
+  NotificationType,
+} from 'src/models/user.models'
 import { IUserPP, IUserPPDB } from 'src/models/user_pp.models'
-import { IFirebaseUser, auth, EmailAuthProvider } from 'src/utils/firebase'
-import { Storage } from '../storage'
+import { auth, EmailAuthProvider, IFirebaseUser } from 'src/utils/firebase'
 import { RootStore } from '..'
 import { ModuleStore } from '../common/module.store'
+import { Storage } from '../storage'
 import { IConvertedFileMeta } from 'src/components/ImageInput/ImageInput'
 import { formatLowerNoSpecial, randomID } from 'src/utils/helpers'
 import { logger } from 'src/logger'
@@ -27,6 +33,10 @@ export class UserStore extends ModuleStore {
   @observable
   public updateStatus: IUserUpdateStatus = getInitialUpdateStatus()
 
+  /** A list of all the verified users, to display verified icons where needed */
+  @observable
+  public verifiedUsers: (IUser & DBDoc)[] = []
+
   @action
   public updateUser(user?: IUserPPDB) {
     this.user = user
@@ -141,10 +151,13 @@ export class UserStore extends ModuleStore {
     // sometimes mobx has issues with de-serialising obseverables so try to force it using toJS
     const updatedUserProfile = { ...toJS(user), ...toJS(values) }
 
-
-    if (updatedUserProfile.location?.latlng
-      && Object.keys(updatedUserProfile.location).length == 1) {
-      updatedUserProfile.location = await getLocationData(updatedUserProfile.location.latlng);
+    if (
+      updatedUserProfile.location?.latlng &&
+      Object.keys(updatedUserProfile.location).length == 1
+    ) {
+      updatedUserProfile.location = await getLocationData(
+        updatedUserProfile.location.latlng,
+      )
     }
 
     await this.db
@@ -253,21 +266,37 @@ export class UserStore extends ModuleStore {
   }
 
   @action
-  public async updateUsefulHowTos(howtoId: string, howtoAuthor: string, howtoSlug: string) {
+  public async updateUsefulHowTos(
+    howtoId: string,
+    howtoAuthor: string,
+    howtoSlug: string,
+  ) {
     if (this.user) {
       // toggle entry on user votedUsefulHowtos to either vote or unvote a howto
       // this will updated the main howto via backend `updateUserVoteStats` function
       const votedUsefulHowtos = toJS(this.user.votedUsefulHowtos) || {}
-      votedUsefulHowtos[howtoId] = !votedUsefulHowtos[howtoId];
+      votedUsefulHowtos[howtoId] = !votedUsefulHowtos[howtoId]
 
       if (votedUsefulHowtos[howtoId]) {
         //get how to author from howtoid
-        this.triggerNotification('howto_useful', howtoAuthor, howtoSlug);
+        this.triggerNotification('howto_useful', howtoAuthor, howtoSlug)
       }
       await this.updateUserProfile({ votedUsefulHowtos })
     }
   }
 
+  /**
+   * Fetches all users that have a `verified: 1` badge
+   */
+  @action
+  public async fetchAllVerifiedUsers() {
+    const verifiedUsers = await this.db
+      .collection<IUser>(COLLECTION_NAME)
+      .getWhere('badges.verified', '==', 1)
+
+    this.verifiedUsers = verifiedUsers
+  }
+
   // use firebase auth to listen to change to signed in user
   // on sign in want to load user profile
   // strange implementation return the unsubscribe object on subscription, so stored
@@ -292,34 +321,37 @@ export class UserStore extends ModuleStore {
   }
 
   @action
-  public async triggerNotification(type: NotificationType, username: string,
-    howToId?: string) {
-    const howToUrl = '/how-to/';
+  public async triggerNotification(
+    type: NotificationType,
+    username: string,
+    howToId?: string,
+  ) {
+    const howToUrl = '/how-to/'
     try {
-      const triggeredBy = this.activeUser;
+      const triggeredBy = this.activeUser
       if (triggeredBy) {
         // do not get notified when you're the one making a new comment or how-to useful vote
-        if(triggeredBy.userName === username){
-          return;
+        if (triggeredBy.userName === username) {
+          return
         }
         const newNotification: INotification = {
           _id: randomID(),
           _created: new Date().toISOString(),
           triggeredBy: {
             displayName: triggeredBy.displayName,
-            userId: triggeredBy._id
+            userId: triggeredBy._id,
           },
           relevantUrl: howToUrl + howToId,
           type: type,
-          read: false
-        } 
+          read: false,
+        }
 
         const lookup = await this.db
           .collection<IUserPP>(COLLECTION_NAME)
           .getWhere('userName', '==', username)
 
-        const user = lookup[0];
-        
+        const user = lookup[0]
+
         const updatedUser: IUser = {
           ...toJS(user),
           notifications: user.notifications
@@ -331,9 +363,8 @@ export class UserStore extends ModuleStore {
           .collection<IUser>(COLLECTION_NAME)
           .doc(updatedUser._authID)
 
-        await dbRef.set(updatedUser)        
+        await dbRef.set(updatedUser)
       }
-
     } catch (err) {
       console.error(err)
       throw new Error(err)
@@ -345,10 +376,8 @@ export class UserStore extends ModuleStore {
     try {
       const user = this.activeUser
       if (user) {
-        const notifications = toJS(user.notifications);
-        notifications?.forEach(notification =>
-          notification.read = true
-        );
+        const notifications = toJS(user.notifications)
+        notifications?.forEach(notification => (notification.read = true))
         const updatedUser: IUser = {
           ...toJS(user),
           notifications,
@@ -358,13 +387,12 @@ export class UserStore extends ModuleStore {
           .collection<IUser>(COLLECTION_NAME)
           .doc(updatedUser._authID)
 
-        await dbRef.set(updatedUser);
-        await this.updateUserProfile({ notifications });
-
+        await dbRef.set(updatedUser)
+        await this.updateUserProfile({ notifications })
       }
     } catch (err) {
-      console.error(err);
-      throw new Error(err);
+      console.error(err)
+      throw new Error(err)
     }
   }
 
@@ -396,8 +424,6 @@ export class UserStore extends ModuleStore {
   }
 }
 
-
-
 interface IUserUpdateStatus {
   Start: boolean
   Complete: boolean
@@ -424,5 +450,5 @@ const USER_BASE = {
   links: [],
   moderation: 'awaiting-moderation',
   verified: false,
-  badges: { verified: false },
+  badges: { verified: 0 },
 }

From 94c63aee6deb8a65d7a1441d25c8166f3bd74d67 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 16 Feb 2022 20:20:27 -0800
Subject: [PATCH 2/6] refactor: use verified aggregation

---
 src/components/Comment/Comment.tsx            |  1 -
 src/mocks/user.mock.tsx                       |  2 +-
 src/mocks/user_pp.mock.tsx                    |  8 +++---
 src/models/user.models.tsx                    |  6 +----
 .../Events/Content/EventsList/EventsList.tsx  |  1 -
 .../Howto/HowToComments/HowToComments.tsx     |  9 ++-----
 src/pages/Howto/Content/Howto/Howto.tsx       | 26 ++++++++++++++-----
 .../Howto/Content/HowtoList/HowtoList.tsx     | 22 ++++++++--------
 .../Research/Content/ResearchItemDetail.tsx   |  4 +--
 src/pages/Research/Content/ResearchList.tsx   |  6 +----
 src/stores/User/user.store.ts                 | 12 ++++-----
 11 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index bdb02a5d7d..19250a8406 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -24,7 +24,6 @@ export const Comment: React.FC<IProps> = ({
   ...props
 }) => {
   const { stores } = useCommonStores()
-
   const [showEditModal, setShowEditModal] = useState(false)
 
   return (
diff --git a/src/mocks/user.mock.tsx b/src/mocks/user.mock.tsx
index 948e6cc7ad..862d1c65ea 100644
--- a/src/mocks/user.mock.tsx
+++ b/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: 1 },
+  badges: { verified: true },
   userName: 'chris-m-clarke',
   displayName: 'chris-m-clarke',
   moderation: 'accepted',
diff --git a/src/mocks/user_pp.mock.tsx b/src/mocks/user_pp.mock.tsx
index 192f853557..2b6d45f66d 100644
--- a/src/mocks/user_pp.mock.tsx
+++ b/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: 1 },
+  badges: { verified: true },
   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: 0 },
+  badges: { verified: false },
   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: 1 },
+  badges: { verified: true },
   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: 1 },
+  badges: { verified: true },
   userName: 'community-username',
   about: 'We are building machine to recycle plastic',
   ...MOCK_DB_META(),
diff --git a/src/models/user.models.tsx b/src/models/user.models.tsx
index bfb22c541e..3c77c3a3a2 100644
--- a/src/models/user.models.tsx
+++ b/src/models/user.models.tsx
@@ -45,11 +45,7 @@ export interface IUser {
 }
 
 interface IUserBadges {
-  /** 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
+  verified: boolean
 }
 
 interface IExternalLink {
diff --git a/src/pages/Events/Content/EventsList/EventsList.tsx b/src/pages/Events/Content/EventsList/EventsList.tsx
index 37b6dccc3d..ceba9caab4 100644
--- a/src/pages/Events/Content/EventsList/EventsList.tsx
+++ b/src/pages/Events/Content/EventsList/EventsList.tsx
@@ -24,7 +24,6 @@ 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()
   }
diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
index 6593b401db..ff13f661fc 100644
--- a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
+++ b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -7,14 +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'
 import { logger } from 'src/logger'
 
 const MAX_COMMENTS = 5
 
 interface IProps {
   comments?: IComment[]
-  verifiedUsers?: IUser[]
+  verifiedUsers?: { [user_id: string]: boolean }
 }
 
 const BoxStyled = styled(Box)`
@@ -91,11 +90,7 @@ export const HowToComments = ({ comments, verifiedUsers }: IProps) => {
             .map(comment => (
               <Comment
                 key={comment._id}
-                verified={
-                  !!verifiedUsers?.some(
-                    user => user.userName === comment.creatorName,
-                  )
-                }
+                verified={verifiedUsers?.[comment.creatorName] ? true : false}
                 {...comment}
               />
             ))}
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index 94ad8456c2..d9a7270c55 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/src/pages/Howto/Content/Howto/Howto.tsx
@@ -103,9 +103,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() {
@@ -126,15 +134,21 @@ export class Howto extends React.Component<
         <>
           <HowtoDescription
             howto={activeHowto}
-            verified={this.injected.userStore.verifiedUsers.some(
-              user => user.userName === this.store.activeHowto?._createdBy,
-            )}
+            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) => (
diff --git a/src/pages/Howto/Content/HowtoList/HowtoList.tsx b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
index 69652299b8..3bf45ea153 100644
--- a/src/pages/Howto/Content/HowtoList/HowtoList.tsx
+++ b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
@@ -14,10 +14,12 @@ import { IHowtoDB } from 'src/models/howto.models'
 import { HowtoStore } from 'src/stores/Howto/howto.store'
 import { UserStore } from 'src/stores/User/user.store'
 import HowToCard from './HowToCard'
+import { ThemeStore } from 'src/stores/Theme/theme.store'
 
 interface InjectedProps {
-  howtoStore?: HowtoStore
-  userStore?: UserStore
+  howtoStore: HowtoStore
+  userStore: UserStore
+  themeStore: ThemeStore
 }
 
 interface IState {
@@ -69,12 +71,12 @@ 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(),
-      )
     }
   }
 
@@ -94,7 +96,7 @@ export class HowtoList extends React.Component<any, IState> {
   }
 
   public render() {
-    const { verifiedUsers } = this.props.userStore
+    const { verifiedUsers } = this.injected.userStore
     const {
       filteredHowtos,
       selectedTags,
@@ -196,9 +198,7 @@ export class HowtoList extends React.Component<any, IState> {
                   <Box px={4} py={4}>
                     <HowToCard
                       howto={data}
-                      verified={verifiedUsers.some(
-                        user => user.userName === data._createdBy,
-                      )}
+                      verified={verifiedUsers?.[data._createdBy]}
                     />
                   </Box>
                 )}
diff --git a/src/pages/Research/Content/ResearchItemDetail.tsx b/src/pages/Research/Content/ResearchItemDetail.tsx
index 593dc888d6..dd195648e2 100644
--- a/src/pages/Research/Content/ResearchItemDetail.tsx
+++ b/src/pages/Research/Content/ResearchItemDetail.tsx
@@ -63,9 +63,7 @@ const ResearchItemDetail = observer((props: IProps) => {
           isEditable={isEditable}
           needsModeration={store.needsModeration(item)}
           moderateResearch={moderateResearch}
-          verified={
-            !!verifiedUsers?.some(user => user.userName === item._createdBy)
-          }
+          verified={verifiedUsers?.[item._createdBy]}
         />
         <Box my={16}>
           {item &&
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index 7df8d0635e..a77b72bba8 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -33,11 +33,7 @@ const ResearchList = observer(() => {
         <ResearchListItem
           key={item._id}
           item={item}
-          verified={
-            !!userStore?.verifiedUsers?.some(
-              user => user.userName === item._createdBy,
-            )
-          }
+          verified={userStore?.verifiedUsers?.[item._createdBy]}
         />
       ))}
       <Box mb={4}>
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index 53dc729d45..732cc6e3fe 100644
--- a/src/stores/User/user.store.ts
+++ b/src/stores/User/user.store.ts
@@ -1,4 +1,3 @@
-import { DBDoc } from 'src/models'
 import { observable, action, makeObservable, toJS } from 'mobx'
 import {
   INotification,
@@ -35,7 +34,7 @@ export class UserStore extends ModuleStore {
 
   /** A list of all the verified users, to display verified icons where needed */
   @observable
-  public verifiedUsers: (IUser & DBDoc)[] = []
+  public verifiedUsers: { [user_id: string]: boolean } = {}
 
   @action
   public updateUser(user?: IUserPPDB) {
@@ -291,10 +290,10 @@ export class UserStore extends ModuleStore {
   @action
   public async fetchAllVerifiedUsers() {
     const verifiedUsers = await this.db
-      .collection<IUser>(COLLECTION_NAME)
-      .getWhere('badges.verified', '==', 1)
-
-    this.verifiedUsers = verifiedUsers
+      .collection<any>('aggregations')
+      .doc('users_verified')
+      .get()
+    this.verifiedUsers = verifiedUsers || {}
   }
 
   // use firebase auth to listen to change to signed in user
@@ -450,5 +449,4 @@ const USER_BASE = {
   links: [],
   moderation: 'awaiting-moderation',
   verified: false,
-  badges: { verified: 0 },
 }

From 107d6df5e7e8f2e12ed6ed17b57d592a23bbc6de Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 16 Feb 2022 20:35:29 -0800
Subject: [PATCH 3/6] fix: common stores import

---
 src/pages/Research/Content/ResearchItemDetail.tsx | 2 +-
 src/pages/Research/Content/ResearchList.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Research/Content/ResearchItemDetail.tsx b/src/pages/Research/Content/ResearchItemDetail.tsx
index dd195648e2..b9b722d796 100644
--- a/src/pages/Research/Content/ResearchItemDetail.tsx
+++ b/src/pages/Research/Content/ResearchItemDetail.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react'
 import * as React from 'react'
 import { RouteComponentProps } from 'react-router'
-import { useCommonStores } from 'src'
+import { useCommonStores } from 'src/App'
 import { Box, Flex } from 'rebass/styled-components'
 import { Button } from 'src/components/Button'
 import { Link } from 'src/components/Links'
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index a77b72bba8..7a33dd0821 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -7,7 +7,7 @@ import Heading from 'src/components/Heading'
 import { Link } from 'src/components/Links'
 import ResearchListItem from 'src/components/Research/ResearchListItem'
 import { useResearchStore } from 'src/stores/Research/research.store'
-import { useCommonStores } from 'src'
+import { useCommonStores } from 'src/App'
 
 const ResearchList = observer(() => {
   const store = useResearchStore()

From af4274860b9820dba48f084a03b9d3a031060550 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 16 Feb 2022 21:37:31 -0800
Subject: [PATCH 4/6] test: stub out user common store

---
 src/pages/Research/research.routes.test.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/Research/research.routes.test.tsx b/src/pages/Research/research.routes.test.tsx
index 46bca812a4..f9d81631d5 100644
--- a/src/pages/Research/research.routes.test.tsx
+++ b/src/pages/Research/research.routes.test.tsx
@@ -4,6 +4,16 @@ import { render, waitFor, cleanup } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { Provider } from 'mobx-react'
 
+// Similar to issues in Academy.test.tsx - stub methods called in user store constructor
+// TODO - replace with mock store or avoid direct call
+jest.mock('src/index', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true,
+  useCommonStores() {
+    return { stores: { userStore: { fetchAllVerifiedUsers: jest.fn() } } }
+  },
+}))
+
 const mockResearchStore: any = {
   filteredResearches: [],
   setActiveResearchItem: jest.fn(),
@@ -26,6 +36,7 @@ jest.mock('src/stores/Research/research.store', () => ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   __esModule: true,
   useResearchStore() {
+    console.log('using research store')
     return mockResearchStore
   },
 }))

From cb2015dac519b0d20017353d667eb7f252b91d51 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 16 Feb 2022 21:38:01 -0800
Subject: [PATCH 5/6] chore: reduce calls to fetch verified users

---
 src/pages/Events/Content/EventsList/EventsList.tsx |  7 -------
 src/pages/Howto/Content/Howto/Howto.tsx            |  3 ---
 src/pages/Howto/Content/HowtoList/HowtoList.tsx    |  3 ---
 src/pages/Research/Content/ResearchItemDetail.tsx  | 12 ++----------
 src/pages/Research/Content/ResearchList.tsx        | 13 ++-----------
 src/stores/User/user.store.ts                      |  1 +
 6 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/src/pages/Events/Content/EventsList/EventsList.tsx b/src/pages/Events/Content/EventsList/EventsList.tsx
index ceba9caab4..6c533c6356 100644
--- a/src/pages/Events/Content/EventsList/EventsList.tsx
+++ b/src/pages/Events/Content/EventsList/EventsList.tsx
@@ -21,13 +21,6 @@ interface InjectedProps {
 @inject('eventStore', 'userStore')
 @observer
 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() {
     return this.props as InjectedProps
   }
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index d9a7270c55..999b9fe26e 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/src/pages/Howto/Content/Howto/Howto.tsx
@@ -82,9 +82,6 @@ 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() {
diff --git a/src/pages/Howto/Content/HowtoList/HowtoList.tsx b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
index 3bf45ea153..fa8d2535b9 100644
--- a/src/pages/Howto/Content/HowtoList/HowtoList.tsx
+++ b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
@@ -53,9 +53,6 @@ export class HowtoList extends React.Component<any, IState> {
     this.state = {
       isLoading: true,
     }
-
-    this.props.userStore.fetchAllVerifiedUsers()
-
     if (props.location.search) {
       const searchParams = new URLSearchParams(props.location.search)
 
diff --git a/src/pages/Research/Content/ResearchItemDetail.tsx b/src/pages/Research/Content/ResearchItemDetail.tsx
index b9b722d796..53142b6f28 100644
--- a/src/pages/Research/Content/ResearchItemDetail.tsx
+++ b/src/pages/Research/Content/ResearchItemDetail.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react'
 import * as React from 'react'
 import { RouteComponentProps } from 'react-router'
-import { useCommonStores } from 'src/App'
+import { useCommonStores } from 'src/index'
 import { Box, Flex } from 'rebass/styled-components'
 import { Button } from 'src/components/Button'
 import { Link } from 'src/components/Links'
@@ -16,9 +16,7 @@ type IProps = RouteComponentProps<{ slug: string }>
 
 const ResearchItemDetail = observer((props: IProps) => {
   const store = useResearchStore()
-  const {
-    stores: { userStore },
-  } = useCommonStores()
+  const { userStore } = useCommonStores().stores
 
   const [isLoading, setIsLoading] = React.useState(true)
 
@@ -43,12 +41,6 @@ const ResearchItemDetail = observer((props: IProps) => {
     }
   }, [props, store])
 
-  React.useEffect(() => {
-    if (userStore) {
-      userStore.fetchAllVerifiedUsers()
-    }
-  }, [userStore])
-
   const item = store.activeResearchItem
   const { verifiedUsers } = userStore
 
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index 7a33dd0821..84af8b54bf 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import { observer } from 'mobx-react'
 import { Box, Flex } from 'rebass/styled-components'
 import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
@@ -7,19 +6,11 @@ import Heading from 'src/components/Heading'
 import { Link } from 'src/components/Links'
 import ResearchListItem from 'src/components/Research/ResearchListItem'
 import { useResearchStore } from 'src/stores/Research/research.store'
-import { useCommonStores } from 'src/App'
+import { useCommonStores } from 'src/index'
 
 const ResearchList = observer(() => {
   const store = useResearchStore()
-  const {
-    stores: { userStore },
-  } = useCommonStores()
-
-  useEffect(() => {
-    if (userStore) {
-      userStore.fetchAllVerifiedUsers()
-    }
-  }, [userStore])
+  const { userStore } = useCommonStores().stores
 
   const { filteredResearches } = store
   return (
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index 732cc6e3fe..a74d604d90 100644
--- a/src/stores/User/user.store.ts
+++ b/src/stores/User/user.store.ts
@@ -50,6 +50,7 @@ export class UserStore extends ModuleStore {
     super(rootStore)
     makeObservable(this)
     this._listenToAuthStateChanges()
+    this.fetchAllVerifiedUsers()
   }
 
   // when registering a new user create firebase auth profile as well as database user profile

From e57a98f82359dc605ac29077de5dae23ff9dc57c Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 16 Feb 2022 21:57:21 -0800
Subject: [PATCH 6/6] fix: event list bindings

---
 src/pages/Events/Content/EventsList/EventsList.tsx | 6 +++---
 src/stores/User/user.store.ts                      | 8 +++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/pages/Events/Content/EventsList/EventsList.tsx b/src/pages/Events/Content/EventsList/EventsList.tsx
index 6c533c6356..a7a5915cc9 100644
--- a/src/pages/Events/Content/EventsList/EventsList.tsx
+++ b/src/pages/Events/Content/EventsList/EventsList.tsx
@@ -89,9 +89,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,
-                      )}
+                      verified={
+                        this.injected.userStore?.verifiedUsers[event._createdBy]
+                      }
                       event={event}
                       needsModeration={this.store.needsModeration(event)}
                       moderateEvent={this.moderateEvent}
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index a74d604d90..b27f7c1200 100644
--- a/src/stores/User/user.store.ts
+++ b/src/stores/User/user.store.ts
@@ -50,7 +50,7 @@ export class UserStore extends ModuleStore {
     super(rootStore)
     makeObservable(this)
     this._listenToAuthStateChanges()
-    this.fetchAllVerifiedUsers()
+    this.loadVerifiedUsers()
   }
 
   // when registering a new user create firebase auth profile as well as database user profile
@@ -285,11 +285,9 @@ export class UserStore extends ModuleStore {
     }
   }
 
-  /**
-   * Fetches all users that have a `verified: 1` badge
-   */
   @action
-  public async fetchAllVerifiedUsers() {
+  /** Perform a single lookup of all verified users (will update on page reload or on demand) */
+  public async loadVerifiedUsers() {
     const verifiedUsers = await this.db
       .collection<any>('aggregations')
       .doc('users_verified')