Merge pull request #244 from medyo/feat/feed-v2

Feat/feed v2

Author: medyo

package.json

@@ -22,6 +22,7 @@
     "react-easy-sort": "^1.5.1",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^5.2.1",
+    "react-infinite-scroll-hook": "^6.0.0",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
     "react-responsive": "^10.0.1",

src/App.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
 import {
@@ -30,6 +31,7 @@ export const App = () => {
     maxVisibleCards,
     setAdvStatus,
     isDNDModeActive,
+    layout,
     DNDDuration,
     setDNDDuration,
   } = useUserPreferences()
@@ -80,7 +82,11 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      <div className="layoutLayers hideScrollBar">
+      <div
+        className={clsx(
+          'layoutLayers hideScrollBar',
+          layout === 'cards' ? 'cardsLayout' : 'gridLayout'
+        )}>
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
       </div>

src/assets/App.css

@@ -411,10 +411,13 @@ a {
 }
 .rowCover {
   border-radius: 4px;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   min-height: auto;
   object-fit: cover;
+
   aspect-ratio: 16/9;
   background-color: var(--placeholder-background-color);
   margin-bottom: 12px;
@@ -492,6 +495,11 @@ a {
   font-size: 12px;
 }
 
+.rowDetails .rowItem.verticalAligned {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 .rowDescription .rowItem {
   font-size: 12px;
 }
@@ -1235,11 +1243,16 @@ Producthunt item
     justify-content: center;
   }
 
-  .layoutLayers {
+  .layoutLayers.cardsLayout {
     margin-left: 1%;
     margin-right: 1%;
   }
 
+  .layoutLayers.gridLayout {
+    margin-top: 1%;
+    box-shadow: 0px -10px 20px -15px var(--card-border-color);
+  }
+
   .Cards {
     padding-bottom: 20px;
   }

src/components/Elements/Card/Card.tsx

@@ -75,7 +75,11 @@ export const Card = ({
         {badge && <span className="blockHeaderBadge">{badge}</span>}
       </div>
 
-      {canAdsLoad && adsConfig.enabled && withAds && <AdvBanner />}
+      {canAdsLoad && adsConfig.enabled && withAds && (
+        <div className="ad-wrapper blockRow">
+          <AdvBanner />
+        </div>
+      )}
 
       <div className="blockContent scrollable">{children}</div>
     </div>

src/components/Layout/AppContentLayout.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Feed } from 'src/features/feed'
 import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
@@ -8,23 +9,30 @@ import { MobileCards } from './MobileCards'
 import { ScrollCardsNavigator } from './ScrollCardsNavigator'
 
 export const AppContentLayout = () => {
-  const { cards, userCustomCards } = useUserPreferences()
+  const { cards, userCustomCards, layout } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
     <>
       <main className="AppContent">
-        <ScrollCardsNavigator />
-        <DesktopBreakpoint>
-          <DesktopCards cards={cards} userCustomCards={userCustomCards} />
-        </DesktopBreakpoint>
-        <MobileBreakpoint>
-          <div className="Cards HorizontalScroll">
-            <MobileCards selectedCard={selectedCard} />
-          </div>
-        </MobileBreakpoint>
+        {layout === 'grid' ? (
+          <Feed />
+        ) : (
+          <>
+            <ScrollCardsNavigator />
+            <DesktopBreakpoint>
+              <DesktopCards cards={cards} userCustomCards={userCustomCards} />
+            </DesktopBreakpoint>
+            <MobileBreakpoint>
+              <div className="Cards HorizontalScroll">
+                <MobileCards selectedCard={selectedCard} />
+              </div>
+            </MobileBreakpoint>
+            <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+          </>
+        )}
       </main>
-      <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+      
     </>
   )
 }

src/components/placeholders/AdPlaceholder.tsx

@@ -1,6 +1,6 @@
-export const AdPlaceholder = ({ className = '' }: { className?: string }) => {
+export const AdPlaceholder = () => {
   return (
-    <div className={'cardPlaceholder adCardPlaceholder'}>
+    <div className="cardPlaceholder adCardPlaceholder">
       <span className="image" />
       <div className="cardContent">
         <span className="line" />

src/config/supportedCards.tsx

@@ -126,6 +126,6 @@ export const SUPPORTED_CARDS: SupportedCardType[] = [
     label: 'Powered by AI',
     component: AICard,
     type: 'supported',
-    badge: 'ALPHA',
+    badge: 'BETA',
   },
 ]

src/features/adv/api/getAd.ts

@@ -5,9 +5,10 @@ import { Ad } from '../types'
 
 const getAd = async (
   keywords: string[],
+  feed: boolean = false,
   aditionalAdQueries: { [key: string]: string } | undefined
 ): Promise<Ad | null> => {
-  let params = { keywords: keywords.join(',') }
+  let params = { keywords: keywords.join(','), feed: feed ? 'true' : 'false' }
   if (aditionalAdQueries) {
     params = { ...params, ...aditionalAdQueries }
   }
@@ -18,13 +19,14 @@ type QueryFnType = typeof getAd
 
 type UseGetAdOptions = {
   keywords: string[]
+  feed?: boolean
   config?: QueryConfig<QueryFnType>
   aditionalAdQueries: { [key: string]: string } | undefined
 }
-export const useGetAd = ({ keywords, config, aditionalAdQueries }: UseGetAdOptions) => {
+export const useGetAd = ({ keywords, feed, config, aditionalAdQueries }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad', keywords.join(',')],
-    queryFn: () => getAd(keywords, aditionalAdQueries),
+    queryFn: () => getAd(keywords, feed, aditionalAdQueries),
   })
 }