chore(clerk-js): Move useInView inside /hooks

+ Add default values in useLoadingStatus

Author: panteliselef

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -1,5 +1,4 @@
 import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
-import React, { useCallback, useRef, useState } from 'react';
 
 import { Plus, SwitchArrows } from '../../../ui/icons';
 import {
@@ -18,6 +17,7 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
+import { useInView } from '../../hooks';
 import { common } from '../../styledSystem';
 import { handleError } from '../../utils';
 
@@ -34,50 +34,6 @@ export interface IntersectionOptions extends IntersectionObserverInit {
   onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
 }
 
-const useInView = (params: IntersectionOptions) => {
-  const [inView, setInView] = useState(false);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const thresholds = Array.isArray(params.threshold) ? params.threshold : [params.threshold || 0];
-  const internalOnChange = React.useRef<IntersectionOptions['onChange']>();
-
-  internalOnChange.current = params.onChange;
-
-  const ref = useCallback((element: HTMLElement | null) => {
-    if (!element) {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-      return;
-    }
-
-    observerRef.current = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          const _inView = entry.isIntersecting && thresholds.some(threshold => entry.intersectionRatio >= threshold);
-
-          setInView(_inView);
-
-          if (internalOnChange.current) {
-            internalOnChange.current(_inView, entry);
-          }
-        });
-      },
-      {
-        root: params.root,
-        rootMargin: params.rootMargin,
-        threshold: thresholds,
-      },
-    );
-
-    observerRef.current.observe(element);
-  }, []);
-
-  return {
-    inView,
-    ref,
-  };
-};
-
 export const OrganizationActionList = (props: OrganizationActionListProps) => {
   const { onCreateOrganizationClick, onPersonalWorkspaceClick, onOrganizationClick } = props;
   const { organizationList, userInvitations } = useCoreOrganizationList({

packages/clerk-js/src/ui/hooks/index.ts

@@ -4,6 +4,7 @@ export * from './useWindowEventListener';
 export * from './useMagicLink';
 export * from './useClipboard';
 export * from './useEnabledThirdPartyProviders';
+export * from './useInView';
 export * from './useLoadingStatus';
 export * from './usePassword';
 export * from './usePasswordComplexity';

packages/clerk-js/src/ui/hooks/useInView.ts

@@ -0,0 +1,47 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import type { IntersectionOptions } from '../components/OrganizationSwitcher/OtherOrganizationActions';
+
+export const useInView = (params: IntersectionOptions) => {
+  const [inView, setInView] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const thresholds = Array.isArray(params.threshold) ? params.threshold : [params.threshold || 0];
+  const internalOnChange = React.useRef<IntersectionOptions['onChange']>();
+
+  internalOnChange.current = params.onChange;
+
+  const ref = useCallback((element: HTMLElement | null) => {
+    if (!element) {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      return;
+    }
+
+    observerRef.current = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          const _inView = entry.isIntersecting && thresholds.some(threshold => entry.intersectionRatio >= threshold);
+
+          setInView(_inView);
+
+          if (internalOnChange.current) {
+            internalOnChange.current(_inView, entry);
+          }
+        });
+      },
+      {
+        root: params.root,
+        rootMargin: params.rootMargin,
+        threshold: thresholds,
+      },
+    );
+
+    observerRef.current.observe(element);
+  }, []);
+
+  return {
+    inView,
+    ref,
+  };
+};

packages/clerk-js/src/ui/hooks/useLoadingStatus.ts

@@ -2,10 +2,11 @@ import { useSafeState } from './useSafeState';
 
 type Status = 'idle' | 'loading' | 'error';
 
-export const useLoadingStatus = <Metadata>() => {
+export const useLoadingStatus = <Metadata>(initialState?: { status: Status; metadata?: Metadata | undefined }) => {
   const [state, setState] = useSafeState<{ status: Status; metadata?: Metadata | undefined }>({
     status: 'idle',
     metadata: undefined,
+    ...initialState,
   });
 
   return {