[HomeScreen]: filter by mode

src/libs/savedqualifications/Provider.tsx

@@ -54,12 +54,21 @@ export const SavedQualificationsProvider = ({
     [setSavedQualifications],
   );
 
+  const isSaved = useCallback(
+    (id: number) => {
+      return savedQualifications.includes(id);
+    },
+    [savedQualifications],
+  );
+
   if (loading) {
     return null;
   }
 
   return (
-    <Context.Provider value={{ savedQualifications, saveQualification }}>
+    <Context.Provider
+      value={{ savedQualifications, saveQualification, isSaved }}
+    >
       {children}
     </Context.Provider>
   );

src/libs/savedqualifications/context.ts

@@ -2,11 +2,13 @@ import { createContext } from 'react';
 
 export type ContextState = {
   savedQualifications: number[];
-  saveQualification: (id: number, save: boolean) => Promise<void> | void;
+  saveQualification: (id: number, save: boolean) => void;
+  isSaved: (id: number) => boolean;
 };
 
 export const context = createContext<ContextState>({
   savedQualifications: [],
   saveQualification: () => {},
+  isSaved: () => false,
 });
 context.displayName = 'SavedQualificationsContext';

src/screens/HomeScreen/HomeScreen.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { sortBy } from 'lodash';
 import { NetworkStatus, useQuery } from '@apollo/client';
 import { useVariables } from 'libs/native-base';
+import { useSavedQualifications } from 'libs/savedqualifications';
 import { Query, QueryProfessionsArgs } from 'libs/graphql';
 import { QUERY_PROFESSIONS } from './queries';
 
@@ -14,6 +15,7 @@ const HomeScreen = () => {
   const [search, setSearch] = useState('');
   const [mode, setMode] = useState(Mode.All);
   const variables = useVariables();
+  const { isSaved } = useSavedQualifications();
   const { loading, data, refetch, networkStatus } = useQuery<
     Pick<Query, 'professions'>,
     QueryProfessionsArgs
@@ -31,7 +33,7 @@ const HomeScreen = () => {
       }));
   }, [data]);
   const filteredProfessions = useMemo(() => {
-    if (!search) {
+    if (!search && mode === Mode.All) {
       return professions;
     }
     return professions
@@ -39,12 +41,14 @@ const HomeScreen = () => {
         ...profession,
         qualifications: profession.qualifications.filter(
           qualification =>
-            qualification.name.toLowerCase().includes(search) ||
-            qualification.code.toLowerCase().includes(search),
+            (!search ||
+              qualification.name.toLowerCase().includes(search) ||
+              qualification.code.toLowerCase().includes(search)) &&
+            (mode === Mode.All || isSaved(qualification.id)),
         ),
       }))
       .filter(profession => profession.qualifications.length > 0);
-  }, [search, professions]);
+  }, [search, professions, mode, isSaved]);
 
   return (
     <Container>

src/screens/HomeScreen/components/Professions/Professions.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { FlatListProps, RefreshControl } from 'react-native';
+import React, { useRef, useState } from 'react';
 import { Maybe, Profession, Qualification } from 'libs/graphql';
 
+import { FlatListProps, RefreshControl } from 'react-native';
 import { List, View } from 'native-base';
 import Item from './Item';
 import QualificationModal from './QualificationModal';
+import { useUpdateEffect } from 'react-use';
 
 export interface ProfessionsProps
   extends Pick<FlatListProps<Profession>, 'refreshing' | 'onRefresh'> {
@@ -16,14 +17,20 @@ const Professions = ({
   refreshing,
   onRefresh,
 }: ProfessionsProps) => {
+  const listRef = useRef<any>(null);
   const [selectedQualification, setSelectedQualification] = useState<
     Maybe<Qualification>
   >(null);
   const [showModal, setShowModal] = useState(false);
 
+  useUpdateEffect(() => {
+    listRef.current?._root?.scrollToOffset({ offset: 0, animated: false });
+  }, [professions]);
+
   return (
     <View style={{ flex: 1 }}>
       <List
+        ref={listRef}
         dataArray={professions}
         renderItem={({ item }: { item: Profession }) => {
           return (