refactor: user statistics to accept view as number

ONEARMY · Oct 16, 2024 · 83694df · 83694df
1 parent cb34670
commit 83694df
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 51 deletions.
diff --git a/packages/components/src/UserStatistics/UserStatistics.tsx b/packages/components/src/UserStatistics/UserStatistics.tsx
@@ -8,7 +8,6 @@ import { ExternalLink } from '../ExternalLink/ExternalLink'
 import { Icon } from '../Icon/Icon'
 import { InternalLink } from '../InternalLink/InternalLink'
 
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import type { ThemeUIStyleObject } from 'theme-ui'
 
 export interface UserStatisticsProps {
@@ -19,7 +18,7 @@ export interface UserStatisticsProps {
   howtoCount: number
   usefulCount: number
   researchCount: number
-  total_views?: EmotionJSX.Element
+  totalViews?: number
   sx?: ThemeUIStyleObject | undefined
 }
 
@@ -112,7 +111,13 @@ export const UserStatistics = (props: UserStatisticsProps) => {
             </Flex>
           </InternalLink>
         ) : null}
-        {props.total_views}
+
+        {props.totalViews ? (
+          <Flex data-testid="profile-views-stat">
+            <Icon glyph={'view'} size={22} />
+            <Box ml={1}>Views:&nbsp;{props.totalViews}</Box>
+          </Flex>
+        ) : null}
       </Flex>
     </Card>
   )
@@ -123,4 +128,4 @@ const isEmpty = (props: UserStatisticsProps) =>
   !props.isSupporter &&
   !props.usefulCount &&
   !props.howtoCount &&
-  !props.total_views
+  !props.totalViews
diff --git a/src/pages/User/content/MemberProfile.tsx b/src/pages/User/content/MemberProfile.tsx
@@ -1,4 +1,4 @@
-import { Icon, MemberBadge, Username, UserStatistics } from 'oa-components'
+import { MemberBadge, Username, UserStatistics } from 'oa-components'
 import { ExternalLinkLabel, ProfileTypeList, UserRole } from 'oa-shared'
 import DefaultMemberImage from 'src/assets/images/default_member.svg'
 import { AuthWrapper } from 'src/common/AuthWrapper'
@@ -31,18 +31,6 @@ export const MemberProfile = ({ docs, user }: IProps) => {
     ? cdnImageUrl(userImage.downloadUrl)
     : DefaultMemberImage
 
-  const total_views = user.total_views
-
-  const totalViews = (total_views: number | undefined) =>
-    total_views ? (
-      <AuthWrapper roleRequired={UserRole.BETA_TESTER}>
-        <Flex data-testid="profile-views-stat">
-          <Icon glyph={'view'} size={22} />
-          <Box ml={1}>Views:&nbsp;{total_views}</Box>
-        </Flex>
-      </AuthWrapper>
-    ) : undefined
-
   return (
     <Flex
       sx={{
@@ -95,17 +83,33 @@ export const MemberProfile = ({ docs, user }: IProps) => {
                 height: '120px',
               }}
             />
-            <UserStatistics
-              userName={user.userName}
-              country={user.location?.country}
-              isVerified={user.verified}
-              isSupporter={!!user.badges?.supporter}
-              howtoCount={docs?.howtos.length || 0}
-              researchCount={docs?.research.length || 0}
-              usefulCount={user.totalUseful || 0}
-              sx={{ alignSelf: 'stretch' }}
-              total_views={totalViews(total_views)}
-            />
+            <AuthWrapper
+              roleRequired={UserRole.BETA_TESTER}
+              fallback={
+                <UserStatistics
+                  userName={user.userName}
+                  country={user.location?.country}
+                  isVerified={user.verified}
+                  isSupporter={!!user.badges?.supporter}
+                  howtoCount={docs?.howtos.length || 0}
+                  researchCount={docs?.research.length || 0}
+                  usefulCount={user.totalUseful || 0}
+                  sx={{ alignSelf: 'stretch' }}
+                />
+              }
+            >
+              <UserStatistics
+                userName={user.userName}
+                country={user.location?.country}
+                isVerified={user.verified}
+                isSupporter={!!user.badges?.supporter}
+                howtoCount={docs?.howtos.length || 0}
+                researchCount={docs?.research.length || 0}
+                usefulCount={user.totalUseful || 0}
+                sx={{ alignSelf: 'stretch' }}
+                totalViews={user.total_views}
+              />
+            </AuthWrapper>
           </Flex>
           <Flex sx={{ flexGrow: 2, width: '100%', flexDirection: 'column' }}>
             <Flex

diff --git a/src/pages/User/content/SpaceProfile.tsx b/src/pages/User/content/SpaceProfile.tsx
@@ -1,5 +1,4 @@
 import {
-  Icon,
   ImageGallery,
   MemberBadge,
   Tab,
@@ -168,18 +167,6 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
       ),
   )
 
-  const total_views = user.total_views
-
-  const totalViews = (total_views: number | undefined) =>
-    total_views ? (
-      <AuthWrapper roleRequired={UserRole.BETA_TESTER}>
-        <Flex data-testid="profile-views-stat">
-          <Icon glyph={'view'} size={22} />
-          <Box ml={1}>Views:&nbsp;{total_views}</Box>
-        </Flex>
-      </AuthWrapper>
-    ) : undefined
-
   return (
     <Card data-cy="SpaceProfile">
       <Box>
@@ -308,16 +295,31 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
                       mt: [3, 3, 0],
                     }}
                   >
-                    <UserStatistics
-                      userName={userName}
-                      country={location?.country}
-                      isVerified={user.verified}
-                      isSupporter={!!user.badges?.supporter}
-                      howtoCount={docs?.howtos.length || 0}
-                      usefulCount={user.totalUseful || 0}
-                      researchCount={docs?.research.length || 0}
-                      total_views={totalViews(total_views)}
-                    />
+                    <AuthWrapper
+                      roleRequired={UserRole.BETA_TESTER}
+                      fallback={
+                        <UserStatistics
+                          userName={userName}
+                          country={location?.country}
+                          isVerified={user.verified}
+                          isSupporter={!!user.badges?.supporter}
+                          howtoCount={docs?.howtos.length || 0}
+                          usefulCount={user.totalUseful || 0}
+                          researchCount={docs?.research.length || 0}
+                        />
+                      }
+                    >
+                      <UserStatistics
+                        userName={userName}
+                        country={location?.country}
+                        isVerified={user.verified}
+                        isSupporter={!!user.badges?.supporter}
+                        howtoCount={docs?.howtos.length || 0}
+                        usefulCount={user.totalUseful || 0}
+                        researchCount={docs?.research.length || 0}
+                        totalViews={user.total_views}
+                      />
+                    </AuthWrapper>
                   </Box>
                 </Flex>
               </Box>