feat: remove home legacy code and enable rankings (decentraland#758)

* feat: remove home legacy code and enable rankings * feat: uses splice instead of two slices
pZRyeSht · Jul 21, 2022 · 9a12aed · 9a12aed
1 parent b0d5d69
commit 9a12aed
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 137 deletions.
diff --git a/webapp/src/components/HomePage/HomePage.container.ts b/webapp/src/components/HomePage/HomePage.container.ts
@@ -1,22 +1,17 @@
 import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
-import { getState } from 'decentraland-dapps/dist/modules/features/selectors'
-import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
 import { RootState } from '../../modules/reducer'
 import { fetchAssetsFromRoute } from '../../modules/routing/actions'
 import {
   getHomepage,
   getHomepageLoading
 } from '../../modules/ui/asset/homepage/selectors'
-import { getRankingsFeatureVariant } from '../../modules/features/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './HomePage.types'
 import HomePage from './HomePage'
 
 const mapState = (state: RootState): MapStateProps => ({
   homepage: getHomepage(state),
-  homepageLoading: getHomepageLoading(state),
-  features: getState(state).data[ApplicationName.MARKETPLACE],
-  rankingsVariant: getRankingsFeatureVariant(state)
+  homepageLoading: getHomepageLoading(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({

diff --git a/webapp/src/components/HomePage/HomePage.tsx b/webapp/src/components/HomePage/HomePage.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react'
-import { Button, Hero, Page } from 'decentraland-ui'
-import { isMobile } from 'decentraland-dapps/dist/lib/utils'
+import { Page } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { locations } from '../../modules/routing/locations'
@@ -26,40 +25,13 @@ const HomePage = (props: Props) => {
     homepage,
     homepageLoading,
     onNavigate,
-    onFetchAssetsFromRoute,
-    rankingsVariant,
-    features
+    onFetchAssetsFromRoute
   } = props
 
-  useEffect(() => {
-    if (features) {
-      getAnalytics().track('feature_flags', {
-        featureFlags: [
-          ...Object.keys(features.flags).filter(flag => features.flags[flag]),
-          ...Object.keys(features.variants)
-            .filter(flag => features.variants[flag]?.enabled)
-            .map(flag => `${flag}:${features.variants[flag].name}`)
-        ]
-      })
-    }
-  }, [features])
-
-  const shouldRenderRankingsVariant = useMemo(() => {
-    if (
-      rankingsVariant &&
-      rankingsVariant.name === 'enabled' &&
-      rankingsVariant.enabled
-    ) {
-      return true
-    }
-    return false
-  }, [rankingsVariant])
-
   const sections: Partial<Record<View, Section>> = useMemo(
     () => ({
       [View.HOME_TRENDING_ITEMS]: Section.WEARABLES_TRENDING,
       [View.HOME_NEW_ITEMS]: Section.WEARABLES,
-      [View.HOME_SOLD_ITEMS]: Section.WEARABLES,
       [View.HOME_WEARABLES]: Section.WEARABLES,
       [View.HOME_LAND]: Section.LAND,
       [View.HOME_ENS]: Section.ENS
@@ -162,82 +134,31 @@ const HomePage = (props: Props) => {
     />
   )
 
-  const getRankingsHomeView = () => {
-    const homepageWithoutLatestSales = Object.keys(homepage).filter(
-      view => view !== View.HOME_SOLD_ITEMS
-    )
-    // trending and newest sections
-    const firstViewsSection = homepageWithoutLatestSales.slice(
-      0,
-      2
-    ) as HomepageView[]
-    // rest of the sections
-    const secondViewsSection = homepageWithoutLatestSales.slice(
-      2
-    ) as HomepageView[]
-    return (
-      <>
-        <Navbar isFullscreen />
-        <Navigation activeTab={NavigationTab.OVERVIEW} />
-        <Page className="HomePage">
-          <AnalyticsVolumeDayData />
-          {firstViewsSection.map(renderSlideshow)}
-          <RankingsTable />
-          {secondViewsSection.map(renderSlideshow)}
-          <RecentlySoldTable />
-        </Page>
-        <Footer />
-      </>
-    )
-  }
-
-  const handleGetStarted = useCallback(() => {
-    onNavigate(
-      locations.browse({
-        section: Section.WEARABLES,
-        assetType: AssetType.ITEM
-      })
-    )
-  }, [onNavigate])
-
-  const getLegacyHomeView = () => {
-    const views = (Object.keys(homepage) as HomepageView[]).filter(
-      view => view !== View.HOME_TRENDING_ITEMS
-    )
-    return (
-      <>
-        <Navbar isFullscreen isOverlay />
-        <Hero centered={isMobile()} className="HomePageHero">
-          <Hero.Header>{t('home_page.title')}</Hero.Header>
-          <Hero.Description>{t('home_page.subtitle')}</Hero.Description>
-          <Hero.Content>
-            <div className="hero-image" />{' '}
-          </Hero.Content>
-          <Hero.Actions>
-            <Button primary onClick={handleGetStarted}>
-              {t('home_page.get_started')}
-            </Button>
-          </Hero.Actions>
-        </Hero>
-        <Page className="HomePage">
-          {views.map(view => (
-            <Slideshow
-              key={view}
-              title={t(`home_page.${view}`)}
-              assets={homepage[view]}
-              isLoading={homepageLoading[view]}
-              onViewAll={() => handleViewAll(view)}
-            />
-          ))}
-        </Page>
-        <Footer />
-      </>
-    )
-  }
-
-  return shouldRenderRankingsVariant
-    ? getRankingsHomeView()
-    : getLegacyHomeView()
+  const homepageWithoutLatestSales = Object.keys(homepage).filter(
+    view => view !== View.HOME_SOLD_ITEMS
+  )
+  // trending and newest sections
+  const firstViewsSection = homepageWithoutLatestSales.splice(
+    0,
+    2
+  ) as HomepageView[]
+  // rest of the sections
+  const secondViewsSection = homepageWithoutLatestSales as HomepageView[]
+
+  return (
+    <>
+      <Navbar isFullscreen />
+      <Navigation activeTab={NavigationTab.OVERVIEW} />
+      <Page className="HomePage">
+        <AnalyticsVolumeDayData />
+        {firstViewsSection.map(renderSlideshow)}
+        <RankingsTable />
+        {secondViewsSection.map(renderSlideshow)}
+        <RecentlySoldTable />
+      </Page>
+      <Footer />
+    </>
+  )
 }
 
 export default React.memo(HomePage)
diff --git a/webapp/src/components/HomePage/HomePage.types.ts b/webapp/src/components/HomePage/HomePage.types.ts
@@ -1,9 +1,5 @@
 import { Dispatch } from 'redux'
 import { CallHistoryMethodAction } from 'connected-react-router'
-import {
-  ApplicationFeatures,
-  Variant
-} from 'decentraland-dapps/dist/modules/features/types'
 import {
   getHomepage,
   getHomepageLoading
@@ -16,16 +12,11 @@ import {
 export type Props = {
   homepage: ReturnType<typeof getHomepage>
   homepageLoading: ReturnType<typeof getHomepageLoading>
-  rankingsVariant: false | Variant
-  features: ApplicationFeatures
   onNavigate: (path: string) => void
   onFetchAssetsFromRoute: typeof fetchAssetsFromRoute
 }
 
-export type MapStateProps = Pick<
-  Props,
-  'homepage' | 'homepageLoading' | 'rankingsVariant' | 'features'
->
+export type MapStateProps = Pick<Props, 'homepage' | 'homepageLoading'>
 export type MapDispatchProps = Pick<
   Props,
   'onNavigate' | 'onFetchAssetsFromRoute'

diff --git a/webapp/src/modules/features/selectors.ts b/webapp/src/modules/features/selectors.ts
@@ -1,22 +1,8 @@
 import { RootState } from '../reducer'
-import {
-  getState,
-  getIsFeatureEnabled
-} from 'decentraland-dapps/dist/modules/features/selectors'
+import { getIsFeatureEnabled } from 'decentraland-dapps/dist/modules/features/selectors'
 import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
 import { FeatureName } from './types'
 
-export const getRankingsFeatureVariant = (state: RootState) => {
-  try {
-    const features = getState(state)
-    return features.data[ApplicationName.MARKETPLACE].variants[
-      `${ApplicationName.MARKETPLACE}-${FeatureName.RANKINGS}`
-    ]
-  } catch (e) {
-    return false
-  }
-}
-
 export const getIsMaintenanceEnabled = (state: RootState) => {
   // As this is called by the routes component which is rendered when the user enters the application,
   // Features might have not yet been requested and will throw in that case.