chore: Cleanup codebase (#137)

* Remove `useCachedState`

* Add pressable opacity

* Update Media.tsx

* f

* Update FormatFilter.ts

* update

* App -> CameraPage, Media -> MediaPage

* Update CameraPage.tsx

* Create 60 FPS switch

* Update CameraPage.tsx

example/src/hooks/useCachedState.ts

@@ -1,26 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-/**
- * Same as `useState`, but swallow all calls to `setState` if the value didn't change (uses `===` comparator per default)
- * @param initialValue The initial state
- * @param comparator A custom comparator, useful if you want to only round numbers or use string locale for comparison. Make sure this function is memoized!
- */
-export const useCachedState = <T>(initialValue: T, comparator?: (oldState: T, newState: T) => boolean): [T, (newState: T) => void] => {
-  const [state, setState] = useState(initialValue);
-  const cachedState = useRef(initialValue);
-
-  const dispatchState = useCallback(
-    (newState: T) => {
-      const areEqual = comparator == null ? cachedState.current === newState : comparator(cachedState.current, newState);
-      if (areEqual) {
-        return;
-      } else {
-        cachedState.current = newState;
-        setState(newState);
-      }
-    },
-    [comparator],
-  );
-
-  return [state, dispatchState];
-};

example/src/hooks/useIsForeground.ts

@@ -1,9 +1,9 @@
+import { useState } from 'react';
 import { useEffect } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
-import { useCachedState } from './useCachedState';
 
 export const useIsForeground = (): boolean => {
-  const [isForeground, setIsForeground] = useCachedState(true);
+  const [isForeground, setIsForeground] = useState(true);
 
   useEffect(() => {
     const onChange = (state: AppStateStatus): void => {

example/src/hooks/useIsScreenFocused.ts

@@ -1,57 +1,39 @@
-import { useEffect, useMemo, useReducer } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Navigation } from 'react-native-navigation';
 
-type Action =
-  | {
-      action: 'push';
-      componentId: string;
-    }
-  | {
-      action: 'pop';
-      componentId: string;
-    };
+export const useIsScreenFocussed = (componentId: string): boolean => {
+  const componentStack = useRef<string[]>(['componentId']);
+  const [isFocussed, setIsFocussed] = useState(true);
 
-const reducer = (stack: string[], action: Action): string[] => {
-  switch (action.action) {
-    case 'push': {
-      stack.push(action.componentId);
-      break;
-    }
-    case 'pop': {
-      const index = stack.indexOf(action.componentId);
-      if (index > -1) stack.splice(index, 1);
-      break;
-    }
-  }
-  return [...stack];
-};
-
-export const useIsScreenFocused = (componentId: string): boolean => {
-  const [componentStack, dispatch] = useReducer(reducer, [componentId]);
-  const isFocussed = useMemo(() => componentStack[componentStack.length - 1] === componentId, [componentStack, componentId]);
+  const invalidate = useCallback(() => {
+    const last = componentStack.current[componentStack.current.length - 1];
+    setIsFocussed(last === componentId);
+  }, [componentId, setIsFocussed]);
 
   useEffect(() => {
     const listener = Navigation.events().registerComponentDidAppearListener((event) => {
       if (event.componentType !== 'Component') return;
-      dispatch({
-        action: 'push',
-        componentId: event.componentId,
-      });
+      componentStack.current.push(event.componentId);
+      invalidate();
     });
 
     return () => listener.remove();
-  }, []);
+  }, [invalidate]);
   useEffect(() => {
     const listener = Navigation.events().registerComponentDidDisappearListener((event) => {
       if (event.componentType !== 'Component') return;
-      dispatch({
-        action: 'pop',
-        componentId: event.componentId,
-      });
+      // we can't simply use .pop() here because the component might be popped deeper down in the hierarchy.
+      for (let i = componentStack.current.length - 1; i >= 0; i--) {
+        if (componentStack.current[i] === event.componentId) {
+          componentStack.current.splice(i, 1);
+          break;
+        }
+      }
+      invalidate();
     });
 
     return () => listener.remove();
-  }, []);
+  }, [invalidate]);
 
   return isFocussed;
 };