add a new lib that is responsible for saving qualifications

src/libs/savedqualifications/Provider.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useState } from 'react';
+import { useEffectOnce, useUpdateEffect } from 'react-use';
+import { useAsyncStorage } from '@react-native-async-storage/async-storage';
+import { context as Context } from './context';
+
+export interface SavedQualificationsProviderProps {
+  children?: React.ReactNode;
+}
+
+const ASYNC_STORAGE_KEY = 'saved_qualifications';
+
+export const SavedQualificationsProvider = ({
+  children,
+}: SavedQualificationsProviderProps) => {
+  const [loading, setLoading] = useState(true);
+  const [savedQualifications, setSavedQualifications] = useState<number[]>([]);
+  const asyncStorage = useAsyncStorage(ASYNC_STORAGE_KEY);
+
+  useEffectOnce(() => {
+    asyncStorage
+      .getItem()
+      .then(data => {
+        const parsed = JSON.parse(data ?? '[]');
+        if (parsed && Array.isArray(parsed)) {
+          setSavedQualifications(parsed);
+        }
+      })
+      .catch(e => {
+        if (__DEV__) {
+          console.log('loadSavedQualifications', e);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  });
+
+  useUpdateEffect(() => {
+    asyncStorage.setItem(JSON.stringify(savedQualifications)).catch(e => {
+      if (__DEV__) {
+        console.log('saveQualifications', e);
+      }
+    });
+  }, [savedQualifications]);
+
+  const saveQualification = useCallback(
+    (id: number, save: boolean) => {
+      setSavedQualifications(
+        save
+          ? ids => [...ids, id]
+          : ids => ids.filter(otherID => otherID !== id),
+      );
+    },
+    [setSavedQualifications],
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Context.Provider value={{ savedQualifications, saveQualification }}>
+      {children}
+    </Context.Provider>
+  );
+};

src/libs/savedqualifications/context.ts

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

src/libs/savedqualifications/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './Provider';
+export * from './useSavedQualifications';

src/libs/savedqualifications/useSavedQualifications.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { context } from './context';
+
+export const useSavedQualifications = () => {
+  return useContext(context);
+};

src/screens/App.tsx

@@ -2,23 +2,31 @@ import 'react-native-gesture-handler';
 import React, { useEffect, useRef } from 'react';
 import { ApolloProvider } from '@apollo/client';
 import RNBootSplash from 'react-native-bootsplash';
+import { StyleProvider } from 'native-base';
 import { createClient } from 'libs/graphql';
 import { API_URI } from 'config/api';
 import Navigation from './Navigation';
-import { StyleProvider } from 'native-base';
 import { createTheme, variables } from '../libs/native-base';
+import { SavedQualificationsProvider } from '../libs/savedqualifications';
 
-const App = () => {
-  const theme = useRef(createTheme(variables)).current;
-  const client = useRef(createClient(API_URI)).current;
+const BaseApp = () => {
   useEffect(() => {
     RNBootSplash.hide({ fade: true });
   }, []);
 
+  return <Navigation />;
+};
+
+const App = () => {
+  const theme = useRef(createTheme(variables)).current;
+  const client = useRef(createClient(API_URI)).current;
+
   return (
     <ApolloProvider client={client}>
       <StyleProvider style={theme}>
-        <Navigation />
+        <SavedQualificationsProvider>
+          <BaseApp />
+        </SavedQualificationsProvider>
       </StyleProvider>
     </ApolloProvider>
   );