Merge pull request #620 from andrew-bierman/fix/feed-page-native

fix: feed quick actions and search bar
andrew-bierman · Feb 10, 2024 · c617ded · c617ded
2 parents 000fa11 + fa3f46d
commit c617ded
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 94 deletions.
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 4000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { Switch } from 'tamagui';
@@ -38,7 +38,7 @@ const FeedSearchFilter = ({
 }) => {
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
-  const debouncedSearch = debounce((query) => setSearchQuery(query), 500);
+  const [search, setSearch] = useState('');
   return (
     <View style={styles.filterContainer}>
       <View style={styles.searchContainer}>
@@ -49,8 +49,13 @@ const FeedSearchFilter = ({
           <RInput
             size="$30"
             placeholder={`Search ${feedType || 'Feed'}`}
-            // onChangeText={setSearchQuery}
-            onChangeText={debouncedSearch}
+            onChangeText={(value) => {
+              setSearch(value);
+              debounce(() => {
+                setSearchQuery(value);
+              }, 500);
+            }}
+            value={search}
           />
           <RIconButton
             backgroundColor="transparent"
@@ -134,7 +139,12 @@ const FeedSearchFilter = ({
           <RButton onPress={handleCreateClick}>Create</RButton>
         )}
       </RStack>
-      <RSeparator style={{ margin: '10px 0' }} />
+      <RSeparator
+        marginTop={10}
+        marginBottom={10}
+        marginRight={0}
+        marginLeft={0}
+      />
     </View>
   );
 };

diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
@@ -43,14 +43,6 @@ export function PackDetails() {
     refetch: refetchQuery,
   } = useFetchSinglePack(packId);
 
-  // useEffect(() => {
-  //   if (!packId) return;
-  //   dispatch(fetchSinglePack(packId));
-
-  //   // if (userId) dispatch(fetchUserPacks({ ownerId: userId }));
-  //   setFirstLoad(false);
-  // }, [dispatch, packId, updated]); // TODO updated is a temporary fix to re-render when pack is update, due to bug in store
-
   const styles = useCustomStyles(loadStyles);
   const currentPackId = currentPack && currentPack._id;
 
@@ -59,7 +51,7 @@ export function PackDetails() {
 
   const isError = error !== null;
 
-  if (isLoading && firstLoad) return <RText>Loading...</RText>;
+  if (isLoading) return <RText>Loading...</RText>;
 
   return (
     <View
@@ -79,11 +71,7 @@ export function PackDetails() {
             error={error}
             additionalComps={
               <>
-                <TableContainer
-                  currentPack={currentPack}
-                  copy={canCopy}
-                  refetch={refetch}
-                />
+                <TableContainer currentPack={currentPack} copy={canCopy} />
                 <View style={styles.boxStyle}>
                   <AddItemModal
                     currentPackId={currentPackId}

diff --git a/packages/app/components/user/UserDataContainer.tsx b/packages/app/components/user/UserDataContainer.tsx
@@ -1,7 +1,6 @@
 import { Link } from 'solito/link';
-import { Stack, VStack, Text, Button } from 'native-base';
 import { RStack, RText, RButton, RSkeleton } from '@packrat/ui';
-import { Platform } from 'react-native';
+import { VirtualizedList } from 'react-native';
 import UserDataCard from './UserDataCard';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -84,7 +83,6 @@ export default function UserDataContainer({
         style={{
           gap: 16,
           alignItems: 'center',
-          flex: 1,
           width: '100%',
           padding: 24,
         }}
@@ -99,12 +97,13 @@ export default function UserDataContainer({
         >
           {differentUser
             ? // ? `${userId}'s ${typeUppercase}`
-              `${typeUppercase}`
+            `${typeUppercase}`
             : `Your ${typeUppercase}`}
         </RText>
         <RStack
           style={{
             flexWrap: 'wrap',
+            flexDirection: 'row',
             justifyContent: 'center',
             alignItems: 'center',
             width: '100%',
@@ -126,8 +125,11 @@ export default function UserDataContainer({
             //     />
             //   ))
             // )
-            <FlatList
+            <VirtualizedList
+              getItemCount={() => data.length}
+              nestedScrollEnabled={true}
               data={data}
+              getItem={(item, index) => ({...item, key: index})}
               renderItem={({ item, index }) => (
                 <UserDataCard
                   key={item._id}
@@ -141,7 +143,7 @@ export default function UserDataContainer({
               )}
               keyExtractor={(item) => item._id}
               maxToRenderPerBatch={2}
-              // Other FlatList props like onEndReached for infinite scrolling
+            // Other FlatList props like onEndReached for infinite scrolling
             />
           ) : currentUser?._id === userId ? (
             <Link href="/">

diff --git a/packages/app/screens/user/ProfileContainer.tsx b/packages/app/screens/user/ProfileContainer.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, ScrollView, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { RIconButton, RStack, RText, RSkeleton } from '@packrat/ui';
+import { ScrollView } from 'react-native-gesture-handler';
 import UserDataContainer from '../../components/user/UserDataContainer';
 import useTheme from '../../hooks/useTheme';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -56,7 +57,7 @@ const Header = ({
     : `@${userEmailSplitFirstHalf}`;
 
   return (
-    <View style={{ width: '50%', ...styles.infoSection }}>
+    <View style={{ width: '90%', ...styles.infoSection }}>
       <RStack
         style={{ flexDirection: 'row', width: '100%', alignItems: 'center' }}
       >
@@ -187,74 +188,78 @@ export default function ProfileContainer({ id = null }) {
   } = useProfile(id);
 
   return (
-    <ScrollView>
-      <RStack
-        style={[
-          styles.mainContainer,
-          Platform.OS == 'web' ? { minHeight: '100vh' } : null,
-        ]}
-      >
-        <Header
-          user={user}
-          isLoading={isLoading}
-          error={error}
-          tripsCount={tripsCount}
-          packsCount={packsCount}
-          favoritesCount={favoritesCount}
-          isCurrentUser={isCurrentUser}
-        />
-        <View style={styles.mainContentContainer}>
-          <View style={styles.userDataContainer}>
-            {isLoading && (
-              <UserDataContainer
-                data={[]}
-                type="packs"
-                userId={user?._id}
-                isLoading={isLoading}
-                SkeletonComponent={SkeletonUserDataCard}
-              />
-            )}
-          </View>
+    <View>
+      <ScrollView nestedScrollEnabled={true}>
+        <ScrollView horizontal={true} contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <RStack
+            style={[
+              styles.mainContainer,
+              Platform.OS == 'web' ? { minHeight: '100vh' } : { minHeight: '100%' },
+            ]}
+          >
+            <Header
+              user={user}
+              isLoading={isLoading}
+              error={error}
+              tripsCount={tripsCount}
+              packsCount={packsCount}
+              favoritesCount={favoritesCount}
+              isCurrentUser={isCurrentUser}
+            />
+            <View style={styles.mainContentContainer}>
+              <View style={styles.userDataContainer}>
+                {isLoading && (
+                  <UserDataContainer
+                    data={[]}
+                    type="packs"
+                    userId={user?._id}
+                    isLoading={isLoading}
+                    SkeletonComponent={SkeletonUserDataCard}
+                  />
+                )}
+              </View>
 
-          <View style={styles.userDataContainer}>
-            {favoritesList.length > 0 ? (
-              <UserDataContainer
-                data={favoritesList}
-                type="favorites"
-                userId={user?._id}
-                isLoading={isLoading}
-              />
-            ) : (
-              <RText
-                fontSize={20}
-                fontWeight="bold"
-                color={currentTheme.colors.textColor}
-              >
-                No favorites yet
-              </RText>
-            )}
-          </View>
-          {packsList.length > 0 && (
-            <View style={styles.userDataContainer}>
-              <UserDataContainer
-                data={packsList}
-                type="packs"
-                userId={user?.id}
-              />
+              <View style={styles.userDataContainer}>
+                {favoritesList.length > 0 ? (
+                  <UserDataContainer
+                    data={favoritesList}
+                    type="favorites"
+                    userId={user?._id}
+                    isLoading={isLoading}
+                  />
+                ) : (
+                  <RText
+                    fontSize={20}
+                    fontWeight="bold"
+                    color={currentTheme.colors.textColor}
+                  >
+                    No favorites yet
+                  </RText>
+                )}
+              </View>
+              {packsList.length > 0 && (
+                <View style={styles.userDataContainer}>
+                  <UserDataContainer
+                    data={packsList}
+                    type="packs"
+                    userId={user?.id}
+                  />
+                </View>
+              )}
+              {tripsList.length > 0 && (
+                <View style={styles.userDataContainer}>
+                  <UserDataContainer
+                    data={tripsList}
+                    type="trips"
+                    userId={user?.id}
+                  />
+                </View>
+              )}
             </View>
-          )}
-          {tripsList.length > 0 && (
-            <View style={styles.userDataContainer}>
-              <UserDataContainer
-                data={tripsList}
-                type="trips"
-                userId={user?.id}
-              />
-            </View>
-          )}
-        </View>
-      </RStack>
-    </ScrollView>
+          </RStack>
+        </ScrollView>
+      </ScrollView>
+    </View>
   );
 }