Feat/use orientation hook (#1625)

* Create useOrientation hook

* Update generated types

Author: ethanshar

generatedTypes/src/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useToggleValue } from './useToggleValue';
 export { default as useDidUpdate } from './useDidUpdate';
+export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';
 export { default as useScrollToItem } from './useScrollToItem';

generatedTypes/src/hooks/useOrientation/index.d.ts

@@ -0,0 +1,7 @@
+interface UseOrientationProps {
+    onOrientationChange?: Function;
+}
+declare const useOrientation: ({ onOrientationChange }?: UseOrientationProps) => {
+    orientation: import("../../helpers/Constants").orientations;
+};
+export default useOrientation;

package.json

@@ -69,7 +69,7 @@
     "@react-native-community/datetimepicker": "^3.4.6",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native-picker/picker": "^1.9.4",
-    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.0.0",

src/hooks/index.ts

@@ -1,5 +1,6 @@
 export {default as useToggleValue} from './useToggleValue';
 export {default as useDidUpdate} from './useDidUpdate';
+export {default as useOrientation} from './useOrientation';
 export {default as useScrollEnabler} from './useScrollEnabler';
 export {default as useScrollReached} from './useScrollReached';
 export {default as useScrollToItem} from './useScrollToItem';

src/hooks/useOrientation/__tests__/useOrientation.spec.js

@@ -0,0 +1,70 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+
+let Constants;
+let useOrientation;
+let orientationChangeListeners;
+
+describe('useOrientation hook', () => {
+  beforeEach(() => {
+    jest.mock('../../../helpers/Constants');
+    Constants = require('../../../helpers/Constants').default;
+    useOrientation = require('../index').default;
+
+    orientationChangeListeners = [];
+
+    Constants.addDimensionsEventListener = jest.fn(callback => {
+      orientationChangeListeners.push(callback);
+    });
+  });
+
+  it('should return current orientation', () => {
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+    const {result} = renderHook(() => {
+      const {orientation} = useOrientation();
+
+      return {orientation};
+    });
+
+    expect(result.current.orientation).toBe('landscape');
+  });
+
+  it('should update orientation when it change', () => {
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+    const {result} = renderHook(() => {
+      const {orientation} = useOrientation();
+
+      return {orientation};
+    });
+
+    act(() => {
+      fakeOrientationChange('portrait');
+    });
+
+    expect(result.current.orientation).toBe('portrait');
+  });
+
+  it('should invoke given change callback when orientation changes', () => {
+    const changeCallback = jest.fn();
+    renderHook(() => {
+      const {orientation} = useOrientation({onOrientationChange: changeCallback});
+      return {orientation};
+    });
+
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+
+    expect(changeCallback).toHaveBeenCalledTimes(1);
+  });
+});
+
+function fakeOrientationChange(orientation = 'portrait') {
+  Constants.orientation = orientation;
+  orientationChangeListeners.forEach(callback => {
+    callback(orientation);
+  });
+}

src/hooks/useOrientation/index.ts

@@ -0,0 +1,31 @@
+import {useEffect, useCallback, useState} from 'react';
+import {Constants} from 'helpers';
+import useDidUpdate from '../useDidUpdate';
+
+interface UseOrientationProps {
+  onOrientationChange?: Function;
+}
+
+const useOrientation = ({onOrientationChange}: UseOrientationProps = {}) => {
+  const [orientation, setOrientation] = useState(Constants.orientation);
+
+  const orientationChangeListener = useCallback(() => {
+    setOrientation(Constants.orientation);
+  }, []);
+
+  useEffect(() => {
+    Constants.addDimensionsEventListener(orientationChangeListener);
+    return () => Constants.removeDimensionsEventListener(orientationChangeListener);
+  }, []);
+
+  useDidUpdate(() => {
+    onOrientationChange?.(orientation);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orientation]);
+
+  return {
+    orientation
+  };
+};
+
+export default useOrientation;