1618 add view count to how to and research

packages/components/src/Icon/Icon.tsx

@@ -95,6 +95,7 @@ export const glyphs: IGlyphs = {
   useful: iconMap.useful,
   thunderbolt: <AiFillThunderbolt />,
   filter: <RiFilter2Fill />,
+  view: iconMap.view,
 }
 
 type WrapperProps = IProps & VerticalAlignProps & SpaceProps

packages/components/src/Icon/svgs.tsx

@@ -4,6 +4,7 @@ import starActiveSVG from '../../assets/icons/icon-star-active.svg'
 import verifiedSVG from '../../assets/icons/icon-verified-badge.svg'
 import usefulSVG from '../../assets/icons/icon-useful.svg'
 import commentSVG from '../../assets/icons/icon-comment.svg'
+import viewSVG from '../../assets/icons/icon-views.svg'
 
 const imgStyle = {
   maxWidth: '100%',
@@ -16,4 +17,5 @@ export const iconMap = {
   verified: <img alt="icon" style={imgStyle} src={verifiedSVG} />,
   useful: <img alt="icon" style={imgStyle} src={usefulSVG} />,
   comment: <img alt="icon" style={imgStyle} src={commentSVG} />,
+  view: <img alt="icon" style={imgStyle} src={viewSVG} />,
 }

packages/components/src/Icon/types.ts

@@ -40,5 +40,6 @@ export type availableGlyphs =
   | 'useful'
   | 'verified'
   | 'filter'
+  | 'view'
 
 export type IGlyphs = { [k in availableGlyphs]: JSX.Element }

packages/components/src/ViewsCounter/ViewsCounter.tsx

@@ -0,0 +1,31 @@
+import { Text, Flex } from 'theme-ui'
+import { Icon } from '..'
+import { useTheme } from '@emotion/react'
+
+export interface IProps {
+  viewsCount: number
+}
+
+export const ViewsCounter = (props: IProps) => {
+  const theme: any = useTheme()
+
+  return (
+    <Flex
+      paddingX={2}
+      paddingY={1}
+      mb={1}
+      sx={{
+        alignItems: 'center',
+        background: theme.colors.softyellow,
+        borderRadius: '5px',
+        fontSize: theme.fontSizes[2],
+      }}
+    >
+      <Icon glyph={'view'} mr={2} size={'md'} />
+      <Text>
+        {props.viewsCount}
+        {props.viewsCount !== 1 ? ' views' : ' view'}
+      </Text>
+    </Flex>
+  )
+}

packages/components/src/index.ts

@@ -23,6 +23,7 @@ export { ImageGallery } from './ImageGallery/ImageGallery'
 export { Loader } from './Loader/Loader'
 export { LinkifyText } from './LinkifyText/LinkifyText'
 export { UsefulStatsButton } from './UsefulStatsButton/UsefulStatsButton'
+export { ViewsCounter } from './ViewsCounter/ViewsCounter'
 export { CategoryTag } from './CategoryTag/CategoryTag'
 export { FileInformation } from './FileInformation/FileInformation'
 export { OsmGeocoding } from './OsmGeocoding/OsmGeocoding'

src/models/howto.models.tsx

@@ -22,6 +22,7 @@ export interface IHowto extends IHowtoFormInput, IModerable {
   // Comments were added in V2, old howto's may not have the property
   comments?: IComment[]
   total_downloads?: number
+  total_views?: number
   mentions: UserMention[]
   previousSlugs?: string[]
 }

src/models/research.models.tsx

@@ -18,6 +18,7 @@ export namespace IResearch {
   export interface Item extends FormInput {
     updates: Update[]
     _createdBy: string
+    total_views?: number
   }
 
   /** A research item update */
@@ -27,6 +28,7 @@ export namespace IResearch {
     images: Array<IUploadedFileMeta | IConvertedFileMeta | null>
     videoUrl?: string
     comments?: IComment[]
+    total_views?: number
   }
 
   export interface FormInput extends IModerable {

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

@@ -191,6 +191,7 @@ export class Howto extends React.Component<
         <>
           <HowtoDescription
             howto={howto}
+            key={activeHowto._id}
             needsModeration={this.store.needsModeration(activeHowto)}
             loggedInUser={loggedInUser}
             votedUsefulCount={votedUsefulCount}