Browse Source

feat(ui): Add `usePageFilters` hook (#35014)

We have been steadily migrating to FCs, so instead of promoting the usage of HoCs, lets instead use custom hooks. By having a specific hook for page filters, it:

1) makes it easier to discover (e.g. fuzzy file finding)
2) wraps the usage of `useLegacyStore` and `PageFiltersStore` which will make it easier in the future to migrate out of our existing stores usage.
Billy Vong 2 years ago
parent
commit
7666419cbe
2 changed files with 15 additions and 4 deletions
  1. 11 0
      static/app/utils/usePageFilters.tsx
  2. 4 4
      static/app/utils/withPageFilters.tsx

+ 11 - 0
static/app/utils/usePageFilters.tsx

@@ -0,0 +1,11 @@
+import PageFiltersStore from 'sentry/stores/pageFiltersStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+
+/**
+ * Custom hook that returns the state of page filters
+ */
+function usePageFilters() {
+  return useLegacyStore(PageFiltersStore);
+}
+
+export default usePageFilters;

+ 4 - 4
static/app/utils/withPageFilters.tsx

@@ -1,8 +1,8 @@
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {PageFilters} from 'sentry/types';
 import getDisplayName from 'sentry/utils/getDisplayName';
 
+import usePageFilters from './usePageFilters';
+
 type InjectedPageFiltersProps = {
   isGlobalSelectionReady?: boolean;
   selection?: PageFilters;
@@ -18,11 +18,11 @@ function withPageFilters<P extends InjectedPageFiltersProps>(
   type Props = Omit<P, keyof InjectedPageFiltersProps> & InjectedPageFiltersProps;
 
   const WithPageFilters: React.FC<Props> = props => {
-    const {selection, isReady} = useLegacyStore(PageFiltersStore);
+    const {selection, isReady: isGlobalSelectionReady} = usePageFilters();
 
     const selectionProps = {
       selection,
-      isGlobalSelectionReady: isReady,
+      isGlobalSelectionReady,
     };
 
     return <WrappedComponent {...selectionProps} {...(props as P)} />;