Merge pull request #1568 from kdembler/atlas-remove-channel-view-count

remove channel view counts

scripts/mocking/generateChannels.js

@@ -11,7 +11,6 @@ const generateChannel = () => {
   return {
     id: faker.random.uuid(),
     handle: faker.lorem.words(handleWordsCount),
-    totalViews: faker.random.number(150000),
   }
 }
 

src/api/queries/__generated__/ChannelFields.ts

@@ -13,5 +13,4 @@ export interface ChannelFields {
   handle: string;
   avatarPhotoURL: string | null;
   coverPhotoURL: string | null;
-  totalViews: number;
 }

src/api/queries/__generated__/GetChannel.ts

@@ -59,7 +59,6 @@ export interface GetChannel_channel {
   handle: string;
   avatarPhotoURL: string | null;
   coverPhotoURL: string | null;
-  totalViews: number;
   videos: GetChannel_channel_videos[] | null;
 }
 

src/api/queries/__generated__/GetNewestChannels.ts

@@ -13,7 +13,6 @@ export interface GetNewestChannels_channelsConnection_edges_node {
   handle: string;
   avatarPhotoURL: string | null;
   coverPhotoURL: string | null;
-  totalViews: number;
 }
 
 export interface GetNewestChannels_channelsConnection_edges {

src/api/queries/__generated__/Search.ts

@@ -59,7 +59,6 @@ export interface Search_search_item_Channel {
   handle: string;
   avatarPhotoURL: string | null;
   coverPhotoURL: string | null;
-  totalViews: number;
 }
 
 export type Search_search_item = Search_search_item_Video | Search_search_item_Channel;

src/api/queries/channels.ts

@@ -7,7 +7,6 @@ export const channelFieldsFragment = gql`
     handle
     avatarPhotoURL
     coverPhotoURL
-    totalViews
   }
 `
 

src/api/schemas/extendedQueryNode.graphql

@@ -28,8 +28,6 @@ type Channel {
 
   isPublic: Boolean!
 
-  totalViews: Int!
-
   isCurated: Boolean!
 
   language: Language

src/components/ChannelGallery.tsx

@@ -28,7 +28,6 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, action, channels
               id={channel.id}
               name={channel.handle}
               avatarURL={channel.avatarPhotoURL}
-              views={channel.totalViews}
               key={channel.id}
               animated
             />

src/mocking/data/raw/channels.json

@@ -1,12 +1,12 @@
 [
-  { "id": "e619b9e6-f7b5-4624-979f-2ddefbdead26", "handle": "mollitia quasi odit rerum", "totalViews": 91878 },
-  { "id": "e5849d9e-0096-4bc1-97f5-2eb5ffbca99a", "handle": "eligendi consequatur", "totalViews": 55377 },
-  { "id": "88d3f52e-de3e-4b62-8a89-b336ce8dd73d", "handle": "id vel", "totalViews": 140095 },
-  { "id": "d1a9d99c-5a79-4956-ae69-edbc769fe347", "handle": "explicabo officia", "totalViews": 72177 },
-  { "id": "8d29f059-d403-4145-a4f2-ab6e1ad0088a", "handle": "fugit et et", "totalViews": 45519 },
-  { "id": "ff0eb9cc-5421-4648-aa31-e1a6c7ff25e5", "handle": "delectus voluptas veniam aut", "totalViews": 112005 },
-  { "id": "f460ecd2-f76a-47bc-9489-2a36b40c2fe2", "handle": "voluptatibus saepe", "totalViews": 65270 },
-  { "id": "28e58b60-6647-41b0-8bb1-3562f927e56f", "handle": "ut iste quia dolorem", "totalViews": 31754 },
-  { "id": "e7db3770-f3d0-4ea6-b491-0e369dc91279", "handle": "molestias ab optio sit", "totalViews": 10482 },
-  { "id": "f3eb7b52-e94b-48df-a16c-6e3c679f6d9e", "handle": "harum molestias aut dolore", "totalViews": 87730 }
+  { "id": "e619b9e6-f7b5-4624-979f-2ddefbdead26", "handle": "mollitia quasi odit rerum" },
+  { "id": "e5849d9e-0096-4bc1-97f5-2eb5ffbca99a", "handle": "eligendi consequatur" },
+  { "id": "88d3f52e-de3e-4b62-8a89-b336ce8dd73d", "handle": "id vel" },
+  { "id": "d1a9d99c-5a79-4956-ae69-edbc769fe347", "handle": "explicabo officia" },
+  { "id": "8d29f059-d403-4145-a4f2-ab6e1ad0088a", "handle": "fugit et et" },
+  { "id": "ff0eb9cc-5421-4648-aa31-e1a6c7ff25e5", "handle": "delectus voluptas veniam aut" },
+  { "id": "f460ecd2-f76a-47bc-9489-2a36b40c2fe2", "handle": "voluptatibus saepe" },
+  { "id": "28e58b60-6647-41b0-8bb1-3562f927e56f", "handle": "ut iste quia dolorem" },
+  { "id": "e7db3770-f3d0-4ea6-b491-0e369dc91279", "handle": "molestias ab optio sit" },
+  { "id": "f3eb7b52-e94b-48df-a16c-6e3c679f6d9e", "handle": "harum molestias aut dolore" }
 ]

src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -1,37 +1,26 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { formatNumberShort } from '@/utils/number'
 import ChannelPreviewBase from './ChannelPreviewBase'
 import { typography } from '../../theme'
 import { Avatar } from '..'
 
 type ChannelPreviewProps = {
   name: string
-  views: number
   avatarURL?: string | null
   className?: string
   animated?: boolean
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
 }
 
-const ChannelPreview: React.FC<ChannelPreviewProps> = ({
-  name,
-  avatarURL,
-  views,
-  className,
-  animated = false,
-  onClick,
-}) => {
+const ChannelPreview: React.FC<ChannelPreviewProps> = ({ name, avatarURL, className, animated = false, onClick }) => {
   const avatarNode = <StyledAvatar img={avatarURL} />
   const nameNode = <NameHeader>{name}</NameHeader>
-  const metaNode = <MetaSpan>{formatNumberShort(views)} views</MetaSpan>
 
   return (
     <ChannelPreviewBase
       className={className}
       avatarNode={avatarNode}
       nameNode={nameNode}
-      metaNode={metaNode}
       animated={animated}
       onClick={onClick}
     />
@@ -49,11 +38,6 @@ const NameHeader = styled.h2`
   max-width: 100%;
 `
 
-const MetaSpan = styled.span`
-  font-size: ${typography.sizes.subtitle2};
-  line-height: 1.43;
-`
-
 export const StyledAvatar = styled(Avatar)`
   width: 100%;
   height: 100%;

src/shared/components/ChannelPreview/ChannelPreviewBase.style.tsx

@@ -6,7 +6,7 @@ const imageTopOverflow = '2rem'
 
 export const OuterContainer = styled.article`
   width: 200px;
-  height: ${`calc(186px + ${imageTopOverflow})`};
+  height: ${`calc(166px + ${imageTopOverflow})`};
   padding-top: ${imageTopOverflow};
   :hover {
     cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};

src/shared/components/ChannelPreview/ChannelPreviewBase.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
-import styled from '@emotion/styled'
 import { AvatarContainer, Info, InnerContainer, OuterContainer } from './ChannelPreviewBase.style'
 import Placeholder from '../Placeholder'
 
 type ChannelPreviewBaseProps = {
   avatarNode?: React.ReactNode
   nameNode?: React.ReactNode
-  metaNode?: React.ReactNode
   className?: string
   animated?: boolean
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
@@ -15,14 +13,12 @@ type ChannelPreviewBaseProps = {
 const ChannelPreviewBase: React.FC<ChannelPreviewBaseProps> = ({
   avatarNode,
   nameNode,
-  metaNode,
   className,
   animated = false,
   onClick,
 }) => {
   const avatarPlaceholder = <Placeholder rounded />
   const namePlaceholder = <Placeholder width="140px" height="16px" />
-  const metaPlaceholder = <MetaPlaceholder width="80px" height="12px" />
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     if (!onClick) return
@@ -34,17 +30,10 @@ const ChannelPreviewBase: React.FC<ChannelPreviewBaseProps> = ({
     <OuterContainer className={className} onClick={handleClick}>
       <InnerContainer animated={animated}>
         <AvatarContainer>{avatarNode || avatarPlaceholder}</AvatarContainer>
-        <Info>
-          {nameNode || namePlaceholder}
-          {metaNode || metaPlaceholder}
-        </Info>
+        <Info>{nameNode || namePlaceholder}</Info>
       </InnerContainer>
     </OuterContainer>
   )
 }
 
-const MetaPlaceholder = styled(Placeholder)`
-  margin-top: 6px;
-`
-
 export default ChannelPreviewBase