react-redux#shallowEqual TypeScript Examples

The following examples show how to use react-redux#shallowEqual. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: hooks.tsx    From panther-frontend-dex with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #2
Source File: SentryIdentify.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
SentryIdentifyUser = () => {
  const user = useSelector<ReduxState, Client.UserMe | undefined>(state => state.users.loggedIn.user, shallowEqual);
  if (windowIso.isSsr) {
    return null;
  } else if (user) {
    trackingBlock(() => {
      Sentry.setUser({
        id: user.userId,
        username: user.name,
        email: user.email,
      });
    });
  } else {
    Sentry.configureScope(scope => scope.setUser(null));
  }
  return null;
}
Example #3
Source File: utils.ts    From webminidisc with GNU General Public License v2.0 6 votes vote down vote up
export function useShallowEqualSelector<TState = RootState, TSelected = unknown>(selector: (state: TState) => TSelected): TSelected {
    return useSelector(selector, shallowEqual);
}
Example #4
Source File: hooks.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #5
Source File: hooks.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #6
Source File: hooks.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up
export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}
Example #7
Source File: hooks.tsx    From pancake-swap-exchange-testnet with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #8
Source File: hooks.tsx    From pancake-swap-exchange-testnet with GNU General Public License v3.0 6 votes vote down vote up
export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}
Example #9
Source File: FormikAutoSave.tsx    From assisted-ui-lib with Apache License 2.0 6 votes vote down vote up
useFormikAutoSave: UseFormikAutoSave = (debounce = 1000) => {
  const [autoSaveIDs, setAutoSaveIDs] = React.useState<number[]>([]);
  const { values, isSubmitting, submitForm } = useFormikContext();
  const prevValuesRef = React.useRef(values);
  const commitRef = React.useRef(
    debouncer(async (autoSaveID: number) => {
      await submitForm();
      setAutoSaveIDs((ids) => ids.filter((id) => id > autoSaveID));
    }, debounce),
  );

  React.useEffect(() => {
    if (!shallowEqual(prevValuesRef.current, values) && !isSubmitting) {
      const autoSaveID = Date.now();
      setAutoSaveIDs((ids) => {
        ids.push(autoSaveID);
        return ids;
      });
      commitRef.current(autoSaveID);
    }
    if (!isSubmitting) {
      prevValuesRef.current = values;
    }
  }, [values, isSubmitting, setAutoSaveIDs]);

  React.useEffect(() => {
    const commit = commitRef.current;
    return () => commit.cancel();
  }, []);

  return !!autoSaveIDs.length;
}
Example #10
Source File: FormikAutoSave.tsx    From assisted-ui-lib with Apache License 2.0 6 votes vote down vote up
FormikAutoSave: React.FC<{ debounce?: number }> = ({ debounce = 1000 }) => {
  const { values, dirty, isSubmitting, submitForm } = useFormikContext();
  const prevValuesRef = React.useRef(values);
  const commitRef = React.useRef(debouncer(submitForm, debounce));

  React.useEffect(() => {
    if (!shallowEqual(prevValuesRef.current, values) && dirty && !isSubmitting) {
      commitRef.current();
    }
    if (!isSubmitting) {
      prevValuesRef.current = values;
    }
  }, [values, dirty, isSubmitting]);

  React.useEffect(() => {
    const commit = commitRef.current;
    return () => commit.cancel();
  }, []);

  return null;
}
Example #11
Source File: hooks.tsx    From interface-v2 with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual,
  );

  return userDarkMode === null ? matchesDarkMode : userDarkMode;
}
Example #12
Source File: hooks.tsx    From panther-frontend-dex with GNU General Public License v3.0 6 votes vote down vote up
export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}
Example #13
Source File: useShallowSelector.ts    From querybook with Apache License 2.0 6 votes vote down vote up
/**
 * Use this instead of useSelect ONLY IF the select would produce
 * a new object or array and not via Reselect.
 *
 * The shallow comparsion would prevent a React state update
 * via shallow comparsion instead of ===.
 *
 * Examples to use useShallowSelect
 * - useShallowSelect((state) => ({ a: state.a, b: state.b }))
 * - useShallowSelect((state) => [...state.a, ...state.b])
 *
 * Examples to NOT use useShallowSelect
 * - useSelect((state) => state.a)
 * - useSelect(reselectSelector)
 *
 * @param selector The same selector you would put in useSelect
 */
export function useShallowSelector<
    F extends (state: IStoreState, ...args: any[]) => any
>(selector: F): ReturnType<F> {
    return useSelector(selector, shallowEqual);
}
Example #14
Source File: hooks.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #15
Source File: hooks.tsx    From sushiswap-exchange with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #16
Source File: hooks.tsx    From luaswap-interface with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #17
Source File: Rigging.tsx    From majsoul-api with MIT License 6 votes vote down vote up
function RiggingSessions(props: {}): JSX.Element {
	return null;
	const sessions = useSelector((state: IState) => [], shallowEqual);

	if (!sessions) {
		return null;
	}

	return <Container>
		{sessions.map(session => <Row key={session._id} className="mt-2">
			<Session session={session} />
		</Row>)}
	</Container>
}
Example #18
Source File: hooks.tsx    From pancakeswap-testnet with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )
  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #19
Source File: hooks.tsx    From pancakeswap-testnet with GNU General Public License v3.0 6 votes vote down vote up
export function useDarkModeManager(): [boolean, () => void] {
  const dispatch = useDispatch<AppDispatch>()
  const { userDarkMode } = useSelector<AppState, { userDarkMode: boolean | null }>(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    ({ user: { userDarkMode } }) => ({
      userDarkMode,
    }),
    shallowEqual
  )
  const darkMode = useIsDarkMode()

  const toggleSetDarkMode = useCallback(() => {
    setThemeCache(!userDarkMode)
    dispatch(updateUserDarkMode({ userDarkMode: !userDarkMode }))
  }, [userDarkMode, dispatch])

  return [darkMode, toggleSetDarkMode]
}
Example #20
Source File: hooks.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #21
Source File: hooks.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { userDarkMode, matchesDarkMode } = useSelector<
    AppState,
    { userDarkMode: boolean | null; matchesDarkMode: boolean }
  >(
    ({ user: { matchesDarkMode, userDarkMode } }) => ({
      userDarkMode,
      matchesDarkMode,
    }),
    shallowEqual
  )

  return userDarkMode === null ? matchesDarkMode : userDarkMode
}
Example #22
Source File: useActionState.ts    From animation-editor with MIT License 6 votes vote down vote up
useActionState = <T>(selector: Selector<T>, { shallow = true } = {}): T => {
	const result = useSelector<ApplicationState, T>(
		(state) => {
			const actionState = getActionStateFromApplicationState(state);
			return selector(actionState);
		},
		shallow ? shallowEqual : undefined,
	);
	return result;
}
Example #23
Source File: HomeNavigator.tsx    From celo-web-wallet with MIT License 6 votes vote down vote up
export function HomeNavigator() {
  const isUnlocked = useAccountLockStatus()

  // Force navigation to fail screen if providers are unable to connect
  const isConnected = useAppSelector((s) => s.wallet.isConnected, shallowEqual)
  if (isConnected === false) throw new Error('Unable to connect to network.')

  // If password has been entered already
  if (isUnlocked) {
    return (
      <ScreenFrame>
        <Outlet />
      </ScreenFrame>
    )
  }

  // If wallet exists in storage but is not unlocked yet
  if (hasAccounts() || hasAccount_v1()) {
    return <LoginScreen />
  }

  // Otherwise, account must not be set up yet
  return <Navigate to="/setup" replace={true} />
}
Example #24
Source File: OnboardingNavigator.tsx    From celo-web-wallet with MIT License 6 votes vote down vote up
export function OnboardingNavigator() {
  // If wallet exists in storage don't allow user back into onboarding flow
  if (hasAccounts() || hasAccount_v1()) {
    return <Navigate to="/" replace={true} />
  }

  // Force navigation to fail screen if providers are unable to connect
  const isConnected = useAppSelector((s) => s.wallet.isConnected, shallowEqual)
  if (isConnected === false) throw new Error('Unable to connect to network.')

  // Otherwise, render screen as normal
  return <Outlet />
}
Example #25
Source File: password.ts    From celo-web-wallet with MIT License 6 votes vote down vote up
export function useAccountLockStatus() {
  // Using individual selects here to avoid re-renders this high-level
  // components that use this hook
  const address = useAppSelector((s) => s.wallet.address, shallowEqual)
  const type = useAppSelector((s) => s.wallet.type, shallowEqual)
  const isWalletUnlocked = useAppSelector((s) => s.wallet.isUnlocked, shallowEqual)

  // Call to hasPasswordCached() is for security reasons (so user can't change a persisted value in local storage)
  // and isWalletUnlocked is for flow reasons - so the UI reacts to changes after authenticating
  const isUnlocked = !!(
    address &&
    isWalletUnlocked &&
    (hasPasswordCached() || type === SignerType.Ledger)
  )

  return isUnlocked
}
Example #26
Source File: hooks.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up
export function useIsDarkMode(): boolean {
  const { matchesDarkMode } = useSelector<AppState, { matchesDarkMode: boolean }>(
    ({ user: { matchesDarkMode } }) => ({
      matchesDarkMode
    }),
    shallowEqual
  )

  return matchesDarkMode
}
Example #27
Source File: CookieConsenter.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
CookieConsenter = () => {
  const cookieConsentBuiltIn = useSelector<ReduxState, Client.BuiltIn | undefined>(state => state.conf.conf?.cookieConsent?.builtIn, shallowEqual);
  const cookieConsentCookieYes = useSelector<ReduxState, Client.CookieYes | undefined>(state => state.conf.conf?.cookieConsent?.cookieYes, shallowEqual);
  if (cookieConsentBuiltIn) {
    return (
      <BannerBuiltIn form={cookieConsentBuiltIn} />
    );
  } else if (cookieConsentCookieYes) {
    return (
      <BannerCookieYes opts={cookieConsentCookieYes} />
    );
  } else {
    trackingImplicitConsent();
    return null;
  }
}
Example #28
Source File: SetAppFavicon.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
SetAppFavicon = () => {
  const faviconUrl = useSelector<ReduxState, string | undefined>(state => state.conf.conf?.logoUrl, shallowEqual);
  if (faviconUrl) {
    if (windowIso.isSsr) {
      windowIso.setFaviconUrl(faviconUrl);
    } else {
      const faviconEl = windowIso.document.getElementById('favicon');
      if (!!faviconEl) faviconEl['href'] = faviconUrl;
    }
  }
  return null;
}
Example #29
Source File: ConnectedPost.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
ConnectedPostById = (props: {
  postId: string;
} & Omit<React.ComponentProps<typeof ConnectedPost>, 'post'>) => {
  const { postId, server, ...ConnectedPostProps } = props;
  const ideaAndStatus = useSelector<ReduxState, { status: Status, idea?: Client.Idea } | undefined>(state => state.ideas.byId[postId], shallowEqual);
  React.useEffect(() => {
    if (ideaAndStatus?.status === undefined) {
      server.dispatch().then(d => d.ideaGet({
        projectId: server.getProjectId(),
        ideaId: postId,
      }));
    }
  }, [ideaAndStatus?.status, postId, server]);

  if (!ideaAndStatus?.idea) return null;

  return (
    <ConnectedPost
      {...ConnectedPostProps}
      server={server}
      post={ideaAndStatus.idea}
    />
  );
}