OBKN-706 Replaced all instances of renderData component with DetailsT…

…able and cleanup unused styles
openboxes · Jul 22, 2022 · c7962f7 · c7962f7
1 parent 685d676
commit c7962f7
Show file tree

Hide file tree

Showing 19 changed files with 205 additions and 906 deletions.
diff --git a/src/components/LabeledData/types.ts b/src/components/LabeledData/types.ts
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 interface LabeledDataProps {
   label: string;
-  value?: string | number | ReactElement | null;
+  value?: string | number | ReactElement | null | Date;
   defaultValue?: string | number;
   style?: any;
   labelStyle?: any;

diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx
@@ -1,15 +1,8 @@
 import React from 'react';
-import {
-  FlatList,
-  Image,
-  ListRenderItemInfo,
-  Text,
-  TouchableOpacity,
-  View
-} from 'react-native';
+import { FlatList, Image, ListRenderItemInfo, Text, TouchableOpacity, View } from 'react-native';
 import styles from './styles';
 import { connect } from 'react-redux';
-import { DispatchProps, Props, State } from './Types';
+import { DispatchProps, Props, State } from './types';
 import { RootState } from '../../redux/reducers';
 import { Card } from 'react-native-paper';
 import dashboardData from './dashboardData';
@@ -25,11 +18,7 @@ class Dashboard extends React.Component<Props, State> {
         }}
       >
         <Card style={styles.card}>
-          <Image
-            style={styles.cardImage}
-            resizeMode="contain"
-            source={item.icon}
-          />
+          <Image style={styles.cardImage} resizeMode="contain" source={item.icon} />
           <Text style={styles.cardLabel}>{item.screenName}</Text>
         </Card>
       </TouchableOpacity>
@@ -44,9 +33,7 @@ class Dashboard extends React.Component<Props, State> {
           horizontal={false}
           numColumns={3}
           ListEmptyComponent={<EmptyView />}
-          renderItem={(item: ListRenderItemInfo<any>) =>
-            this.renderItem(item.item, item.index)
-          }
+          renderItem={(item: ListRenderItemInfo<any>) => this.renderItem(item.item, item.index)}
         />
       </View>
     );

diff --git a/src/screens/Dashboard/styles.ts b/src/screens/Dashboard/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   screenContainer: {

diff --git a/src/screens/Dashboard/Types.ts → src/screens/Dashboard/types.ts b/src/screens/Dashboard/Types.ts → src/screens/Dashboard/types.ts
diff --git a/src/screens/InboundOrderList/index.tsx b/src/screens/InboundOrderList/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchInboundOrderList } from '../../redux/actions/inboundorder';
@@ -13,6 +13,8 @@ import { Card } from 'react-native-paper';
 import EmptyView from '../../components/EmptyView';
 import { LayoutStyle } from '../../assets/styles';
 import _ from 'lodash';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 const InboundOrderList = () => {
   const dispatch = useDispatch();
@@ -67,38 +69,26 @@ const InboundOrderList = () => {
     dispatch(fetchInboundOrderList(callback, id));
   };
 
-  const RenderOrderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
-
   const navigateToInboundDetails = (item: any) => {
     navigation.navigate('InboundDetails', { shipmentDetails: item });
   };
 
-  const RenderListItem = ({ item, index }: any): JSX.Element => {
+  const renderListItem = ({ item, index }: any) => {
+    const itemStyles = { labelStyle: styles.label, valueStyle: styles.value };
+
+    const renderListItemDats: LabeledDataType[] = [
+      { label: 'Identifier', value: item.shipmentNumber, ...itemStyles },
+      { label: 'Status', value: item.status, ...itemStyles },
+      { label: 'Origin', value: item.origin.name, ...itemStyles },
+      { label: 'Destination', value: item.destination.name, ...itemStyles },
+      { label: 'Description', value: item.name, ...itemStyles },
+      { label: 'Items Received', value: `${item.receivedCount} / ${item.shipmentItems.length}`, ...itemStyles }
+    ];
+
     return (
       <Card style={LayoutStyle.listItemContainer} key={index} onPress={() => navigateToInboundDetails(item)}>
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Identifier'} subText={item.shipmentNumber} />
-            <RenderOrderData title={'Status'} subText={item.status} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Origin'} subText={item.origin.name} />
-            <RenderOrderData title={'Destination'} subText={item.destination.name} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Description'} subText={item.name} />
-            <RenderOrderData
-              title={'Items Received'}
-              subText={item.receivedCount + ' / ' + item.shipmentItems.length}
-            />
-          </View>
+          <DetailsTable data={renderListItemDats} />
         </Card.Content>
       </Card>
     );
@@ -146,15 +136,14 @@ const InboundOrderList = () => {
         searchBox={false}
         onSearchTermSubmit={filterInboundOrders}
       />
-      {state.inboundOrders.length > 0 ? (
-        <FlatList
-          data={state.filteredInboundOrders.length > 0 ? state.filteredInboundOrders : state.inboundOrders}
-          keyExtractor={(inboundOrder) => inboundOrder.id}
-          renderItem={RenderListItem}
-        />
-      ) : (
-        <EmptyView title="Receiving" description="There are no items to receive" isRefresh={false} />
-      )}
+      <FlatList
+        data={state.filteredInboundOrders.length > 0 ? state.filteredInboundOrders : state.inboundOrders}
+        ListEmptyComponent={
+          <EmptyView title="Receiving" description="There are no items to receive" isRefresh={false} />
+        }
+        keyExtractor={(inboundOrder) => inboundOrder.id}
+        renderItem={renderListItem}
+      />
     </View>
   );
 };

diff --git a/src/screens/InboundOrderList/styles.ts b/src/screens/InboundOrderList/styles.ts
@@ -2,33 +2,12 @@ import { StyleSheet } from 'react-native';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  itemView: {
-    marginStart: 10,
-    marginEnd: 10,
-    marginTop: 5
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    //padding: 2,
-    //marginStart: 4,
-    width: '100%',
-    alignItems: 'center'
-  },
-  columnItem: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    width: '50%'
-  },
   label: {
     fontSize: 11,
     color: Theme.colors.placeholder
   },
   value: {
     fontSize: 12,
     color: Theme.colors.text,
-    width: '90%'
   }
 });
diff --git a/src/screens/OrderDetails/styles.ts b/src/screens/OrderDetails/styles.ts