Move search bar inside the list page

belinde · Apr 22, 2024 · 050c709 · 050c709
1 parent 19c1616
commit 050c709
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 84 deletions.
diff --git a/src/components/ConcertList.tsx b/src/components/ConcertList.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useEffect, useState } from "react";
 import { FlatList } from "react-native";
-import { List } from "react-native-paper";
+import { List, Searchbar } from "react-native-paper";
 import { useDataContext } from "../hooks/useDataContext";
 import { useEffectOnFocus } from "../hooks/useEffectOnFocus";
 import { Concert } from "../types";
@@ -12,6 +12,7 @@ export const ConcertList: FC<{ onPress: (concert: Concert) => void }> = (
   const data = useDataContext();
   const [concerts, setConcerts] = useState<Concert[]>();
   const [refreshing, setRefreshing] = useState(false);
+  const [text, setText] = useState(() => data.search);
 
   const applyFilter = useCallback(
     (s: Concert[]) => {
@@ -41,24 +42,44 @@ export const ConcertList: FC<{ onPress: (concert: Concert) => void }> = (
     applyFilter(data.concerts.list());
   }, [applyFilter, data.concerts]);
 
+  const search = useCallback(
+    (s: string) => {
+      setText(s);
+      data.setSearch(s);
+    },
+    [data]
+  );
+  const reset = useCallback(() => search(""), [search]);
+
   return (
-    <FlatList
-      data={concerts}
-      refreshing={refreshing}
-      onRefresh={refresh}
-      renderItem={(row) => (
-        <List.Item
-          title={row.item.title}
-          description={row.item.description}
-          left={() => <List.Icon icon="account-music" />}
-          right={() => <List.Icon icon="chevron-right" />}
-          onPress={() => props.onPress(row.item)}
-          titleNumberOfLines={2}
-          descriptionNumberOfLines={1}
-        />
-      )}
-      keyExtractor={(song) => song.id}
-      ListEmptyComponent={EmptySearchableListElement}
-    />
+    <>
+      <Searchbar
+        value={text}
+        onChangeText={search}
+        onIconPress={reset}
+        onClearIconPress={reset}
+        placeholder="Cerca..."
+        searchAccessibilityLabel="Cerca..."
+        aria-label="Cerca..."
+      />
+      <FlatList
+        data={concerts}
+        refreshing={refreshing}
+        onRefresh={refresh}
+        renderItem={(row) => (
+          <List.Item
+            title={row.item.title}
+            description={row.item.description}
+            left={() => <List.Icon icon="account-music" />}
+            right={() => <List.Icon icon="chevron-right" />}
+            onPress={() => props.onPress(row.item)}
+            titleNumberOfLines={2}
+            descriptionNumberOfLines={1}
+          />
+        )}
+        keyExtractor={(song) => song.id}
+        ListEmptyComponent={EmptySearchableListElement}
+      />
+    </>
   );
 };
diff --git a/src/components/SearchMenu.tsx b/src/components/SearchMenu.tsx
diff --git a/src/pages/Concert/ConcertStack.tsx b/src/pages/Concert/ConcertStack.tsx
@@ -1,6 +1,5 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { FC } from "react";
-import { SearchMenu } from "../../components/SearchMenu";
 import { useNativeStackNavigatorOptions } from "../../hooks/useNativeStackNavigatorOptions";
 import { CreateConcert } from "./CreateConcert";
 import { EditConcert } from "./EditConcert";
@@ -29,7 +28,7 @@ export const ConcertStack: FC = () => {
       <Stack.Screen
         name="List"
         component={ListConcerts}
-        options={{ title: "Concerti", headerRight: SearchMenu }}
+        options={{ title: "Concerti" }}
       />
       <Stack.Screen
         name="Create"

diff --git a/src/pages/Library/LibraryStack.tsx b/src/pages/Library/LibraryStack.tsx
@@ -1,6 +1,5 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { FC } from "react";
-import { SearchMenu } from "../../components/SearchMenu";
 import { useNativeStackNavigatorOptions } from "../../hooks/useNativeStackNavigatorOptions";
 import { CreateSong } from "./CreateSong";
 import { EditSong } from "./EditSong";
@@ -32,7 +31,7 @@ export const LibraryStack: FC = () => {
       <Stack.Screen
         name="List"
         component={ListSongs}
-        options={{ title: "Repertorio", headerRight: SearchMenu }}
+        options={{ title: "Repertorio" }}
       />
       <Stack.Screen
         name="Create"

diff --git a/src/pages/Library/ListSongs.tsx b/src/pages/Library/ListSongs.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useEffect, useState } from "react";
-import { Button } from "react-native-paper";
+import { Button, Searchbar } from "react-native-paper";
 import { Page } from "../../components/Page";
 import { SongList } from "../../components/SongList";
 import { useDataContext } from "../../hooks/useDataContext";
@@ -9,6 +9,8 @@ import { LibraryTabScreenProps } from "../types";
 
 export const ListSongs: FC<LibraryTabScreenProps<"List">> = (props) => {
   const data = useDataContext();
+  const [text, setText] = useState(() => data.search);
+
   const [songs, setSongs] = useState(() => data.songs.list());
 
   const applyFilter = useCallback(
@@ -34,8 +36,26 @@ export const ListSongs: FC<LibraryTabScreenProps<"List">> = (props) => {
     applyFilter(data.songs.list());
   }, [applyFilter, data.songs]);
 
+  const search = useCallback(
+    (s: string) => {
+      setText(s);
+      data.setSearch(s);
+    },
+    [data]
+  );
+  const reset = useCallback(() => search(""), [search]);
+
   return (
     <Page accessibilityLabel="Repertorio">
+      <Searchbar
+        value={text}
+        onChangeText={search}
+        onIconPress={reset}
+        onClearIconPress={reset}
+        placeholder="Cerca..."
+        searchAccessibilityLabel="Cerca..."
+        aria-label="Cerca..."
+      />
       <SongList
         songs={songs}
         onRefresh={refresh}

diff --git a/src/pages/Library/QRSong.tsx b/src/pages/Library/QRSong.tsx
@@ -1,5 +1,6 @@
 import { FC, useCallback, useState } from "react";
 import { View, useWindowDimensions } from "react-native";
+import { Text } from "react-native-paper";
 import QRCode from "react-qr-code";
 import { Page } from "../../components/Page";
 import { useDataContext } from "../../hooks/useDataContext";
@@ -36,6 +37,17 @@ export const QRSong: FC<LibraryTabScreenProps<"QRView">> = (props) => {
       >
         <QRCode size={width - 40} value={serializeSong(currentSong)} />
       </View>
+      <Text>
+        Usa questo QR Code per copiare rapidamente "{currentSong.title}" su un
+        altro dispositivo.
+      </Text>
+      {currentSong.image ? (
+        <Text>
+          Attenzione: la fotografia dello spartito non è inclusa. Per trasferire
+          tutte le informazioni devi utilizzare la funzione di esportazione
+          della libreria.
+        </Text>
+      ) : null}
     </Page>
   );
 };