make ListItem much more simpler

2021-05-15 14:09:39 +02:00 · 2021-05-15 14:09:39 +02:00 · 25a11e9dde
parent 1531229df4
commit 25a11e9dde
8 changed files with 198 additions and 171 deletions
--- a/src/libs/native-base/native-base-extension.d.ts
+++ b/src/libs/native-base/native-base-extension.d.ts
@ -1,13 +0,0 @@
-/// <reference path="../../../node_modules/native-base/index.d.ts" />
-
-import { FlatListProps } from 'react-native';
-
-declare module 'native-base' {
-  namespace NativeBase {
-    interface List {
-      ListEmptyComponent?: FlatListProps<any>['ListEmptyComponent'];
-      initialNumToRender?: number;
-      maxToRenderPerBatch?: number;
-    }
-  }
-}
--- a/src/screens/HomeScreen/HomeScreen.tsx
+++ b/src/screens/HomeScreen/HomeScreen.tsx
@ -5,7 +5,7 @@ import { Query, QueryProfessionsArgs } from 'libs/graphql';
 import { QUERY_PROFESSIONS } from './queries';

 import { Container, Content, Spinner } from 'native-base';
-import Professions from './components/Professions/Professions';
+import List from './components/List/List';
 import Header from './components/Header/Header';
 import ModeSelector, { Mode } from './components/ModeSelector/ModeSelector';
 import NetworkConnectionAlert from './components/NetworkConnectionAlert/NetworkConnectionAlert';
@ -37,7 +37,7 @@ const HomeScreen = () => {
          <Spinner color={variables.brandPrimary} size="large" />
        </Content>
      ) : (
-        <Professions
+        <List
          professions={professions}
          refreshing={networkStatus === NetworkStatus.refetch}
          onRefresh={refetch}
--- a/src/screens/HomeScreen/components/List/List.tsx
+++ b/src/screens/HomeScreen/components/List/List.tsx
@ -0,0 +1,146 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import { useSavedQualifications } from 'libs/savedqualifications';
+import { Maybe, Profession, Qualification } from 'libs/graphql';
+import { Mode } from '../ModeSelector/ModeSelector';
+
+import {
+  FlatList,
+  FlatListProps,
+  RefreshControl,
+  StyleSheet,
+} from 'react-native';
+import { View } from 'native-base';
+import ListItem, { ListItemProps } from './ListItem';
+import ListEmpty from './ListEmpty';
+import QualificationModal from './QualificationModal';
+
+export interface ListProps
+  extends Pick<FlatListProps<Profession>, 'refreshing' | 'onRefresh'> {
+  professions: Profession[];
+  mode: Mode;
+  search: string;
+}
+
+const noop = () => {};
+
+const ID_SEPARATOR = '.';
+const getQualificationAndProfessionID = (str: string): [number, number] => {
+  const [professionID, qualificationID] = str.split(ID_SEPARATOR);
+  return [parseInt(professionID, 10), parseInt(qualificationID, 10)];
+};
+
+const MyList = ({
+  professions,
+  refreshing,
+  onRefresh,
+  mode,
+  search,
+}: ListProps) => {
+  const listRef = useRef<any>(null);
+  const [selectedQualification, setSelectedQualification] = useState<
+    Maybe<Qualification>
+  >(null);
+  const [showModal, setShowModal] = useState(false);
+  const { isSaved } = useSavedQualifications();
+  useUpdateEffect(() => {
+    listRef.current?._root?.scrollToOffset({ offset: 0, animated: false });
+  }, [mode, search]);
+  const handlePress = useCallback(
+    (id: string) => {
+      const [professionID, qualificationID] = getQualificationAndProfessionID(
+        id,
+      );
+      const profession = professions.find(p => p.id === professionID);
+      if (profession) {
+        const qualification = profession.qualifications.find(
+          q => q.id === qualificationID,
+        );
+        if (qualification) {
+          setSelectedQualification(qualification);
+          setShowModal(true);
+        }
+      }
+    },
+    [setShowModal, setSelectedQualification, professions],
+  );
+  const renderItem = useCallback(({ item }: { item: ListItemProps }) => {
+    return <ListItem {...item} />;
+  }, []);
+  const keyExtractor = useCallback(item => item.id, []);
+  const listItems = useMemo(() => {
+    let items: ListItemProps[] = [];
+    professions.forEach(profession => {
+      const qualifications = profession.qualifications
+        .filter(
+          qualification =>
+            (!search ||
+              qualification.name.toLowerCase().includes(search) ||
+              qualification.code.toLowerCase().includes(search)) &&
+            (mode === Mode.All || isSaved(qualification.id)),
+        )
+        .map(
+          (qualification): ListItemProps => {
+            return {
+              text: `${qualification.name} (${qualification.code})`,
+              itemDivider: false,
+              itemHeader: false,
+              id: `${profession.id}${ID_SEPARATOR}${qualification.id}`,
+              onPress: handlePress,
+            };
+          },
+        );
+      if (qualifications.length > 0) {
+        items = [
+          ...items,
+          {
+            text: profession.name,
+            itemHeader: true,
+            itemDivider: true,
+            id: 'P' + profession.id,
+          } as ListItemProps,
+          ...qualifications,
+        ];
+      }
+    });
+    return items;
+  }, [professions, search, mode, isSaved, handlePress]);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        ref={listRef}
+        data={listItems}
+        contentContainerStyle={styles.contentContainer}
+        renderItem={renderItem}
+        ListEmptyComponent={<ListEmpty />}
+        keyExtractor={keyExtractor}
+        maxToRenderPerBatch={5}
+        onEndReachedThreshold={0.75}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing ?? false}
+            onRefresh={onRefresh ?? noop}
+          />
+        }
+        initialNumToRender={10}
+      />
+      <QualificationModal
+        onPressBackdrop={() => setShowModal(false)}
+        qualification={selectedQualification}
+        visible={showModal}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+});
+
+export default MyList;
--- a/src/screens/HomeScreen/components/Professions/ListEmpty.tsx
+++ b/src/screens/HomeScreen/components/Professions/ListEmpty.tsx
--- a/src/screens/HomeScreen/components/List/ListItem.tsx
+++ b/src/screens/HomeScreen/components/List/ListItem.tsx
@ -0,0 +1,46 @@
+import React, { Fragment, useCallback } from 'react';
+import { Icon, Left, ListItem, NativeBase, Right, Text } from 'native-base';
+
+export interface ListItemProps
+  extends Pick<NativeBase.ListItem, 'itemDivider' | 'itemHeader'> {
+  onPress?: (id: string) => void;
+  id?: string;
+  text: string;
+}
+
+const MyListItem = ({
+  onPress,
+  text,
+  itemDivider,
+  itemHeader,
+  id,
+}: ListItemProps) => {
+  const handlePress = useCallback(() => {
+    if (onPress && id) {
+      onPress(id);
+    }
+  }, [onPress, id]);
+
+  return (
+    <ListItem
+      itemHeader={itemHeader}
+      itemDivider={itemDivider}
+      onPress={handlePress}
+    >
+      {onPress ? (
+        <Fragment>
+          <Left>
+            <Text>{text}</Text>
+          </Left>
+          <Right>
+            <Icon name="arrow-forward" />
+          </Right>
+        </Fragment>
+      ) : (
+        <Text>{text}</Text>
+      )}
+    </ListItem>
+  );
+};
+
+export default React.memo(MyListItem);
--- a/src/screens/HomeScreen/components/Professions/QualificationModal.tsx
+++ b/src/screens/HomeScreen/components/Professions/QualificationModal.tsx
@ -49,7 +49,7 @@ const QualificationModal = ({
        <Card style={styles.card}>
          <ScrollView pointerEvents={'box-none'}>
            <CardItem header bordered style={styles.cardHeader}>
-              <Body style={{ flex: 3, alignSelf: 'center' }}>
+              <Body style={styles.body}>
                <Text>
                  {qualification?.name} ({qualification?.code})
                </Text>
@ -67,7 +67,7 @@ const QualificationModal = ({
                  <Icon
                    type="Entypo"
                    name={isSaved ? 'star' : 'star-outlined'}
-                    style={{ fontSize: 30 }}
+                    style={styles.icon}
                  />
                </Button>
              </Right>
@ -133,6 +133,8 @@ const styles = StyleSheet.create({
  star: {
    flex: 1,
  },
+  body: { flex: 3, alignSelf: 'center' },
+  icon: { fontSize: 30 },
 });

 export default QualificationModal;
--- a/src/screens/HomeScreen/components/Professions/Item.tsx
+++ b/src/screens/HomeScreen/components/Professions/Item.tsx
@ -1,40 +0,0 @@
-import React from 'react';
-import { Profession, Qualification } from 'libs/graphql';
-
-import { Icon, Left, ListItem, Right, Text, View } from 'native-base';
-
-export interface ItemProps {
-  profession: Profession;
-  onPress?: (qualification: Qualification) => void;
-}
-
-const Item = ({ profession, onPress }: ItemProps) => {
-  return (
-    <View>
-      <ListItem itemHeader itemDivider>
-        <Text>{profession.name}</Text>
-      </ListItem>
-      {profession.qualifications.map(qualification => (
-        <ListItem
-          key={qualification.id}
-          onPress={() => {
-            if (onPress) {
-              onPress(qualification);
-            }
-          }}
-        >
-          <Left>
-            <Text>
-              {qualification.name} ({qualification.code})
-            </Text>
-          </Left>
-          <Right>
-            <Icon name="arrow-forward" />
-          </Right>
-        </ListItem>
-      ))}
-    </View>
-  );
-};
-
-export default React.memo(Item);
--- a/src/screens/HomeScreen/components/Professions/Professions.tsx
+++ b/src/screens/HomeScreen/components/Professions/Professions.tsx
@ -1,114 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import { useSavedQualifications } from 'libs/savedqualifications';
-import { Maybe, Profession, Qualification } from 'libs/graphql';
-import { Mode } from '../ModeSelector/ModeSelector';
-
-import { FlatListProps, RefreshControl, StyleSheet } from 'react-native';
-import { List, View } from 'native-base';
-import Item from './Item';
-import QualificationModal from './QualificationModal';
-import ListEmpty from './ListEmpty';
-
-export interface ProfessionsProps
-  extends Pick<FlatListProps<Profession>, 'refreshing' | 'onRefresh'> {
-  professions: Profession[];
-  mode: Mode;
-  search: string;
-}
-
-const noop = () => {};
-
-const Professions = ({
-  professions,
-  refreshing,
-  onRefresh,
-  mode,
-  search,
-}: ProfessionsProps) => {
-  const listRef = useRef<any>(null);
-  const { isSaved } = useSavedQualifications();
-  const [filteredProfessions, setFilteredProfessions] = useState<
-    Maybe<Profession[]>
-  >(null);
-  const [selectedQualification, setSelectedQualification] = useState<
-    Maybe<Qualification>
-  >(null);
-  const [showModal, setShowModal] = useState(false);
-  useUpdateEffect(() => {
-    listRef.current?._root?.scrollToOffset({ offset: 0, animated: false });
-  }, [mode]);
-  useUpdateEffect(() => {
-    if (!search && mode === Mode.All && filteredProfessions) {
-      setFilteredProfessions(null);
-      return;
-    }
-
-    const newFilteredProfessions: Profession[] = [];
-    professions.forEach(profession => {
-      const qualifications = profession.qualifications.filter(
-        qualification =>
-          (!search ||
-            qualification.name.toLowerCase().includes(search) ||
-            qualification.code.toLowerCase().includes(search)) &&
-          (mode === Mode.All || isSaved(qualification.id)),
-      );
-      if (qualifications.length > 0) {
-        newFilteredProfessions.push({ ...profession, qualifications });
-      }
-    });
-    setFilteredProfessions(newFilteredProfessions);
-  }, [professions, search, mode, isSaved]);
-
-  const handlePress = useCallback(
-    (qualification: Qualification) => {
-      setSelectedQualification(qualification);
-      setShowModal(true);
-    },
-    [setShowModal, setSelectedQualification],
-  );
-  const renderItem = useCallback(
-    ({ item }: { item: Profession }) => {
-      return <Item profession={item} onPress={handlePress} />;
-    },
-    [handlePress],
-  );
-  const keyExtractor = useCallback(item => item.id, []);
-
-  return (
-    <View style={styles.container}>
-      <List
-        ref={listRef}
-        dataArray={filteredProfessions ?? professions}
-        contentContainerStyle={styles.contentContainer}
-        renderItem={renderItem}
-        ListEmptyComponent={<ListEmpty />}
-        keyExtractor={keyExtractor}
-        maxToRenderPerBatch={5}
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing ?? false}
-            onRefresh={onRefresh ?? noop}
-          />
-        }
-        initialNumToRender={5}
-      />
-      <QualificationModal
-        onPressBackdrop={() => setShowModal(false)}
-        qualification={selectedQualification}
-        visible={showModal}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-});
-
-export default Professions;