migrate appContentLayout to ts

Author: medyo

src/App.js

@@ -4,7 +4,7 @@ import { Footer, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/components/Elements'
 import ScrollCardsNavigator from './components/ScrollCardsNavigator'
-import AppContentLayout from './components/AppContentLayout'
+import { AppContentLayout } from './components/Layout'
 import 'react-contexify/dist/ReactContexify.css'
 import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'

src/components/AppContentLayout.js

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { BottomNavigation } from '../Elements'
+import { isDesktop } from 'react-device-detect'
+import { useUserPreferences } from 'src/stores/preferences'
+import { MobileCards } from './MobileCards'
+import { DesktopCards } from './DesktopCards'
+
+export const AppContentLayout = ({
+  setShowSettings,
+}: {
+  setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
+}) => {
+  const { cards } = useUserPreferences()
+  const [selectedCard, setSelectedCard] = useState(cards[0])
+
+  return (
+    <>
+      <main className="AppContent scrollable">
+        {isDesktop ? <DesktopCards cards={cards} /> : <MobileCards selectedCard={selectedCard} />}
+      </main>
+
+      <BottomNavigation
+        selectedCard={selectedCard}
+        setSelectedCard={setSelectedCard}
+        setShowSettings={setShowSettings}
+      />
+    </>
+  )
+}

src/components/Layout/AppContentLayout.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { SUPPORTED_CARDS } from 'src/config'
+import { SelectedCard } from 'src/types'
+
+export const DesktopCards = ({ cards }: { cards: SelectedCard[] }) => {
+  return (
+    <>
+      {cards.map((card, index) => {
+        const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name)
+        if (!constantCard) {
+          return null
+        }
+
+        return React.createElement(constantCard.component, {
+          key: card.name,
+          meta: constantCard,
+          withAds: index === 0,
+        })
+      })}
+    </>
+  )
+}

src/components/Layout/DesktopCards.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SUPPORTED_CARDS } from 'src/config'
+import { SelectedCard } from 'src/types'
+
+export const MobileCards = ({ selectedCard }: { selectedCard: SelectedCard }) => {
+  const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name)
+  return currentCard
+    ? React.createElement(currentCard.component, {
+        key: currentCard.value,
+        meta: currentCard,
+        withAds: true,
+      })
+    : null
+}

src/components/Layout/MobileCards.tsx

@@ -1,2 +1,3 @@
 export * from "./Header"
-export * from "./Footer"
+export * from "./Footer"
+export * from "./AppContentLayout"