refactoring: use function component

coopcycle · Jun 3, 2024 · 7e47486 · 7e47486
1 parent b6bfebf
commit 7e47486
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 74 deletions.
diff --git a/src/navigation/restaurant/Printer.js b/src/navigation/restaurant/Printer.js
@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import { Center, Icon, Text } from 'native-base';
 import React, { Component } from 'react';
-import { withTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation, withTranslation } from 'react-i18next';
 import {
  ActivityIndicator,
  FlatList,
@@ -14,18 +15,99 @@ import {
 } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { connect } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
 
 import ItemSeparator from '../../components/ItemSeparator';
 import {
  bluetoothStartScan,
  connectPrinter,
  disconnectPrinter,
 } from '../../redux/Restaurant/actions';
+import { selectPrinter } from '../../redux/Restaurant/selectors';
 import { getMissingAndroidPermissions } from '../../utils/bluetooth';
 
 const BleManagerModule = NativeModules.BleManager;
 const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);
 
+function Item({ item }) {
+ const dispatch = useDispatch();
+ const navigation = useNavigation();
+
+ const _connect = device => {
+ dispatch(
+ connectPrinter(device, () => navigation.navigate('RestaurantSettings')),
+ );
+ };
+
+ const _disconnect = device => {
+ dispatch(
+ disconnectPrinter(device, () =>
+ navigation.navigate('RestaurantSettings'),
+ ),
+ );
+ };
+
+ return (
+ <TouchableOpacity
+ style={styles.item}
+ onPress={() => (item.isConnected ? _disconnect(item) : _connect(item))}>
+ <Text>
+ {item.name ||
+ (item.advertising && item.advertising.localName) ||
+ item.id}
+ </Text>
+ <Icon
+ as={FontAwesome}
+ name={item.isConnected ? 'close' : 'chevron-right'}
+ />
+ </TouchableOpacity>
+ );
+}
+
+function PrinterComponent({ devices, isScanning, _onPressScan }) {
+ const printer = useSelector(selectPrinter);
+
+ const { t } = useTranslation();
+
+ let items = [];
+ if (printer) {
+ items.push({ ...printer, isConnected: true });
+ } else {
+ items = devices.map(device => ({ ...device, isConnected: false }));
+ }
+
+ const hasItems = !isScanning && items.length > 0;
+
+ if (!hasItems) {
+ return (
+ <Center flex={1}>
+ <TouchableOpacity
+ onPress={_onPressScan}
+ style={{ padding: 15, alignItems: 'center' }}>
+ <Icon as={FontAwesome} name="print" size="lg" />
+ <Text>{t('SCAN_FOR_PRINTERS')}</Text>
+ {isScanning && (
+ <ActivityIndicator
+ size="large"
+ color="#c7c7c7"
+ style={{ marginTop: 5 }}
+ />
+ )}
+ </TouchableOpacity>
+ </Center>
+ );
+ }
+
+ return (
+ <FlatList
+ data={items}
+ keyExtractor={item => item.id}
+ renderItem={({ item }) => <Item key={item.id} item={item} />}
+ ItemSeparatorComponent={ItemSeparator}
+ />
+ );
+}
+
 class Printer extends Component {
  constructor(props) {
  super(props);
@@ -51,18 +133,6 @@ class Printer extends Component {
  this.discoverPeripheral.remove();
  }
 
- _connect(device) {
- this.props.connectPrinter(device, () =>
- this.props.navigation.navigate('RestaurantSettings'),
- );
- }
-
- _disconnect(device) {
- this.props.disconnectPrinter(device, () =>
- this.props.navigation.navigate('RestaurantSettings'),
- );
- }
-
  async _onPressScan() {
  if (this.props.isScanning) {
  return;
@@ -89,65 +159,13 @@ class Printer extends Component {
  }
  }
 
- renderItem(item) {
- return (
- <TouchableOpacity
- style={styles.item}
- onPress={() =>
- item.isConnected ? this._disconnect(item) : this._connect(item)
- }>
- <Text>
- {item.name ||
- (item.advertising && item.advertising.localName) ||
- item.id}
- </Text>
- <Icon
- as={FontAwesome}
- name={item.isConnected ? 'close' : 'chevron-right'}
- />
- </TouchableOpacity>
- );
- }
-
+ //FIXME; fully migrate to a functional component
  render() {
- const { devices } = this.state;
- const { isScanning, printer } = this.props;
-
- let items = [];
- if (printer) {
- items.push({ ...printer, isConnected: true });
- } else {
- items = devices.map(device => ({ ...device, isConnected: false }));
- }
-
- const hasItems = !isScanning && items.length > 0;
-
- if (!hasItems) {
- return (
- <Center flex={1}>
- <TouchableOpacity
- onPress={() => this._onPressScan()}
- style={{ padding: 15, alignItems: 'center' }}>
- <Icon as={FontAwesome} name="print" size="lg" />
- <Text>{this.props.t('SCAN_FOR_PRINTERS')}</Text>
- {isScanning && (
- <ActivityIndicator
- size="large"
- color="#c7c7c7"
- style={{ marginTop: 5 }}
- />
- )}
- </TouchableOpacity>
- </Center>
- );
- }
-
  return (
- <FlatList
- data={items}
- keyExtractor={item => item.id}
- renderItem={({ item }) => this.renderItem(item)}
- ItemSeparatorComponent={ItemSeparator}
+ <PrinterComponent
+ devices={this.state.devices}
+ isScanning={this.props.isScanning}
+ _onPressScan={() => this._onPressScan()}
  />
  );
  }
@@ -169,14 +187,11 @@ const styles = StyleSheet.create({
 function mapStateToProps(state) {
  return {
  isScanning: state.restaurant.isScanningBluetooth,
- printer: state.restaurant.printer,
  };
 }
 
 function mapDispatchToProps(dispatch) {
  return {
- connectPrinter: (device, cb) => dispatch(connectPrinter(device, cb)),
- disconnectPrinter: (device, cb) => dispatch(disconnectPrinter(device, cb)),
  bluetoothStartScan: () => dispatch(bluetoothStartScan()),
  };
 }

diff --git a/src/redux/Restaurant/reducers.js b/src/redux/Restaurant/reducers.js
@@ -92,6 +92,9 @@ const initialState = {
  menus: [],
  bluetoothEnabled: false,
  isScanningBluetooth: false,
+ /**
+ * Peripheral (react-native-ble-manager)
+ */
  printer: null,
  productOptions: [],
  isSunmiPrinter: false,
@@ -207,7 +210,6 @@ function updateOrdersToPrint(state, orderId) {
  },
  },
  };
-
  } else {
  return state;
  }