From 17b343f8890902dc78abc53b62cb9017af141dd7 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Fri, 8 Mar 2024 09:14:39 +0100
Subject: [PATCH] feat: horizontal scroll for ItemListSection

---
 .../expo/src/components/HomeScreenContent.tsx | 12 +++++++---
 .../src/components/item/ItemListSection.tsx   | 23 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/apps/expo/src/components/HomeScreenContent.tsx b/apps/expo/src/components/HomeScreenContent.tsx
index 501083e..f03f0e8 100644
--- a/apps/expo/src/components/HomeScreenContent.tsx
+++ b/apps/expo/src/components/HomeScreenContent.tsx
@@ -107,7 +107,7 @@ export default function HomeScreenContent() {
       <ScrollView
         onScrollBeginDrag={handleScrollBegin}
         onMomentumScrollEnd={handleScrollEnd}
-        scrollEnabled={data && data.length > 0 ? true : false}
+        scrollEnabled={searchResultsLoaded ? true : false}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
       >
@@ -134,8 +134,14 @@ export default function HomeScreenContent() {
                 bookmarks.length > 0 || watching.length > 0 ? true : false
               }
             >
-              <ItemListSection title="Bookmarks" items={bookmarks} />
-              <ItemListSection title="Continue Watching" items={watching} />
+              <ItemListSection
+                title="Bookmarks"
+                items={bookmarks.concat(watching)}
+              />
+              <ItemListSection
+                title="Continue Watching"
+                items={watching.concat(bookmarks)}
+              />
             </ScrollView>
           )}
         </ScreenLayout>
diff --git a/apps/expo/src/components/item/ItemListSection.tsx b/apps/expo/src/components/item/ItemListSection.tsx
index d9b80ab..cf55ebb 100644
--- a/apps/expo/src/components/item/ItemListSection.tsx
+++ b/apps/expo/src/components/item/ItemListSection.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Dimensions, ScrollView, Text, View } from "react-native";
 
 import type { ItemData } from "~/components/item/item";
 import Item from "~/components/item/item";
@@ -42,6 +42,10 @@ export const watching: ItemData[] = [
   },
 ];
 
+const padding = 20;
+const screenWidth = Dimensions.get("window").width;
+const itemWidth = screenWidth / 2.3 - padding;
+
 export const ItemListSection = ({
   title,
   items,
@@ -54,13 +58,24 @@ export const ItemListSection = ({
       <Text className="mb-2 mt-4 text-xl font-semibold text-white">
         {title}
       </Text>
-      <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 3 }}
+      >
         {items.map((item, index) => (
-          <View key={index} className="basis-1/2 px-3 pb-3">
+          <View
+            key={index}
+            style={{
+              width: itemWidth,
+              paddingHorizontal: padding / 2,
+              paddingBottom: padding,
+            }}
+          >
             <Item data={item} />
           </View>
         ))}
-      </View>
+      </ScrollView>
     </View>
   );
 };