feat: added home search screen

src/components/activity-indicator.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ActivityIndicator as Indicator } from 'react-native';
+import { useTheme } from './theme';
+
+export function ActivityIndicator() {
+ const { colors } = useTheme();
+ return <Indicator size='large' color={colors.Primary} />;
+}

src/navigation/routes.ts

@@ -37,7 +37,13 @@ export enum MainRoutes {
 
 type MainParamList = {
  [MainRoutes.Home]: null;
- [MainRoutes.Search]: { query: string; source?: string; forceOpen?: boolean; fantlabId?: string; paper?: boolean };
+ [MainRoutes.Search]: {
+ query: string;
+ source?: 'FantLab' | 'LiveLib';
+ forceOpen?: boolean;
+ fantlabId?: string;
+ paper?: boolean;
+ };
  [MainRoutes.ReadList]: { filters?; sort?; readonly?: boolean; listId?: string; listName?: string };
  [MainRoutes.WishList]: null;
  [MainRoutes.Details]: { bookId: string; extra?: Partial<BookData>; fantlabId?: string; initialTab?: string };

src/screens/home/home.screen.tsx

@@ -7,7 +7,9 @@ import { MainRoutes, MainScreenProps } from 'navigation/routes';
 
 import { MainScreen } from './screens/main.screen';
 import { BookshelvesScreen } from './screens/bookshelves.screen';
+import { HomeSearchScreen } from './screens/search.screen';
 import { ProfileScreen } from './screens/profile.screen';
+import { Platform } from 'react-native';
 
 const Tab = createBottomTabNavigator();
 
@@ -17,10 +19,14 @@ export const HomeScreen: FC<Props> = ({ navigation }) => {
  setNavigation(navigation);
 
  return (
- <Tab.Navigator tabBarOptions={{ showLabel: false }}>
+ <Tab.Navigator tabBarOptions={{ showLabel: false, safeAreaInsets: Platform.OS === 'web' ? { bottom: 24 } : null }}>
  <Tab.Screen name='main' component={MainScreen} options={{ tabBarIcon: icon('home') }} />
  <Tab.Screen name='bookshelves' component={BookshelvesScreen} options={{ tabBarIcon: icon('book') }} />
- <Tab.Screen name='search' component={BookshelvesScreen} options={{ tabBarIcon: icon('search') }} />
+ <Tab.Screen
+ name='home-search'
+ component={HomeSearchScreen}
+ options={{ tabBarIcon: icon('search'), unmountOnBlur: true }}
+ />
  <Tab.Screen name='profile' component={ProfileScreen} options={{ tabBarIcon: icon('user') }} />
  </Tab.Navigator>
  );

src/screens/home/components/header.tsx → src/screens/home/screens/search.screen.tsx

@@ -1,44 +1,57 @@
 import _ from 'lodash';
 import React from 'react';
 import { getNavigation, openModal, api } from 'services';
-import { SearchBar } from 'components';
-import { ActivityIndicator } from 'react-native';
+import { SearchBar, Tag } from 'components';
 import { t } from 'services/i18n';
 import { livelib } from 'screens/search/search.screen';
 import { MainRoutes, ModalRoutes } from 'navigation/routes';
+import { ActivityIndicator } from 'components/activity-indicator';
+import { Box } from 'components/theme';
 
 interface State {
  query: string;
  fetching: boolean;
+ source: 'FantLab' | 'LiveLib';
 }
 
-export class HomeHeader extends React.Component<any, State> {
- state: State = { query: '', fetching: false };
+export class HomeSearchScreen extends React.Component<any, State> {
+ state: State = { query: '', fetching: false, source: 'FantLab' };
 
  render() {
- const { fetching, query } = this.state;
+ const { fetching, query, source } = this.state;
 
  if (fetching) {
  return <ActivityIndicator />;
  }
 
  return (
- <SearchBar
- placeholder={t('home.search')}
- value={query}
- actionIcon='barcode'
- onChange={this.queryChange}
- onSearch={this.onSearch}
- onAction={this.scan}
- />
+ <Box px={2} pt={2}>
+ <SearchBar
+ placeholder={t('home.search')}
+ value={query}
+ actionIcon='barcode'
+ autoFocus
+ onChange={this.queryChange}
+ onSearch={this.onSearch}
+ onAction={this.scan}
+ />
+
+ <Box flexDirection='row' mt={2}>
+ <Tag title='FantLab' selected={source === 'FantLab'} onPress={this.setFantLab} outline />
+ <Tag title='LiveLib' selected={source === 'LiveLib'} onPress={this.setLiveLib} outline />
+ </Box>
+ </Box>
  );
  }
 
  queryChange = query => this.setState({ query });
 
+ setFantLab = () => this.setState({ source: 'FantLab' });
+ setLiveLib = () => this.setState({ source: 'LiveLib' });
+
  onSearch = async () => {
  let screen = MainRoutes.Search;
- let params: any = { query: this.state.query.trim() };
+ let params: any = { query: this.state.query.trim(), source: this.state.source };
 
  if (isISBN(params.query)) {
  this.setState({ fetching: true });
@@ -49,7 +62,10 @@ export class HomeHeader extends React.Component<any, State> {
  }
 
  getNavigation().push(screen, params);
- this.setState({ query: '' });
+
+ setTimeout(() => {
+ this.props.navigation.jumpTo('main');
+ }, 500);
  };
 
  async isbnSearch(query): Promise<[MainRoutes, any]> {

src/screens/search/search.screen.tsx

@@ -13,7 +13,7 @@ type Props = MainScreenProps<MainRoutes.Search>;
 interface State {
  q: string;
  query: string;
- source: string;
+ source: 'FantLab' | 'LiveLib';
 }
 
 export const fantlab = 'FantLab';
@@ -22,8 +22,6 @@ export const livelib = 'LiveLib';
 export class SearchScreen extends React.Component<Props, State> {
  static contextType = ColorSchemeContext;
 
- static defaultProps = { source: fantlab };
-
  state: State = {
  q: this.props.route.params.query,
  query: this.props.route.params.query,