react#useContext TypeScript Examples

function AppConsoleShell ( props: any ) {
  const { loading } = useContext( AppContext );

  return (
    <>
      <AppContextProvider>
        <Grid hasGutter>
          <GridItem span={ 3 } xl={2}>
            <Sidebar />
          </GridItem>
          <GridItem span={ 9 } xl={10}>
            { loading
              ? <Loader />
              : <main className="container">
                { props.children }
              </main> }
          </GridItem>
        </Grid>
      </AppContextProvider>
    </>
  )
}

CartIcon = () => {
	const [cart] = useContext(CartContext)
	const items = cart?.items() || []
	const badgeContent = items.reduce((prev, current) => {
		return current.quantity + prev
	}, 0)
	return (
		<Badge badgeContent={badgeContent} color="secondary">
			<ShoppingCartIcon />
		</Badge>
	)
}

LocalUserContext: React.FC<LocalUserContextInterface> = (props) => {
  const max = useContext(MaxUidContext);
  const min = useContext(MinUidContext);
  // if(min && min[0] && max )
  let localUser: UidInterface = max[0].uid === 'local' ? max[0] : min[0];
  return (
    <LocalContext.Provider value={localUser}>
      {props.children}
    </LocalContext.Provider>
  );
}

DocumentNav: FC<{}> = () => {
  const {
    state: { currentDocument, currentFileNo, documents },
    dispatch,
  } = useContext(DocViewerContext);

  if (documents.length <= 1 || !currentDocument) return null;

  let fileName = currentDocument.uri;

  const splitURL = fileName.split("/");
  if (splitURL.length) {
    fileName = splitURL[splitURL.length - 1];
  }

  return (
    <Container id="doc-nav">
      <p id="doc-nav-info">
        Doc {currentFileNo + 1} of {documents.length}
      </p>

      <ButtonPrev
        id="doc-nav-prev"
        onClick={() => dispatch(previousDocument())}
        disabled={currentFileNo === 0}
      >
        <PrevDocIcon color="#fff" size="60%" />
      </ButtonPrev>

      <ButtonNext
        id="doc-nav-next"
        onClick={() => dispatch(nextDocument())}
        disabled={currentFileNo >= documents.length - 1}
      >
        <NextDocIcon color="#fff" size="60%" />
      </ButtonNext>
    </Container>
  );
}

export function useAnchorWebapp(): App<AnchorContractAddress, AnchorConstants> &
  AnchorWebapp {
  const app = useApp<AnchorContractAddress, AnchorConstants>();
  const anchorApp = useContext(AnchorWebappContext);

  return useMemo(() => {
    return {
      ...app,
      ...anchorApp,
    };
  }, [anchorApp, app]);
}

TestView = () => {
  const snackContext = useContext(SnackContext);

  useEffect(() => {
    // alert("OPEN");
    snackContext.open({
      variant: "progress",
      message: "Preparing files for download",
      duration: undefined,
    });

    snackContext.setProgress({ value: 90, target: 120 });
  }, []);

  return <></>;
}

export function useCartCount() {
  const { cart } = useContext(Context)
  if (cart == null || cart.lineItems.length < 1) {
    return 0
  }

  const count = cart.lineItems.reduce((totalCount, lineItem) => {
    return totalCount + lineItem.quantity
  }, 0)

  return count
}

AskerInfoAssign = () => {
	const activeSession = useContext(ActiveSessionContext);
	const isLiveChat = isAnonymousSession(activeSession?.session);
	const { userData } = useContext(UserDataContext);

	return (
		!isLiveChat &&
		hasUserAuthority(AUTHORITIES.CONSULTANT_DEFAULT, userData) && (
			<>
				<Text
					text={translate('userProfile.reassign.title')}
					type="divider"
				/>
				<SessionAssign
					value={
						activeSession.consultant
							? activeSession.consultant.id
							: null
					}
				/>
			</>
		)
	);
}

export default function MinimapToolbar(props: React.PropsWithChildren<IProps>) {
    const {
        className,
        hidden,
        children,
    } = props;
    const context = useContext(AppContext);
    const { classes } = useStyles();

    const rootClass = clsx(
        className,
        classes.toolbar,
        context.settings.transparentToolbar && classes.transparent,
        hidden && classes.hidden,
        className);

    return (
        <div className={rootClass}>
            {children}
        </div>
    );
}

/** @internal */
export function CarouselOnChangeWatcher(props: {
    onChange: (index: number) => void;
}) {
    const carouselContext = useContext(CarouselContext);

    useEffect(() => {
        function onChange() {
            props.onChange(carouselContext.state.currentSlide);
        }
        carouselContext.subscribe(onChange);
        return () => carouselContext.unsubscribe(onChange);
    }, [carouselContext]);
    return <></>;
}

useBreadcrumb = (): BreadcrumbContextProps =>
  useContext(BreadcrumbContext) as BreadcrumbContextProps

useDialog = () => {
	return useContext(DialogContext)
}

BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
  const {disabled = false} = props;
  const {styleProps} = useContext(PropsContext);
  const {BtnTemplateStyles, theme, iconSize, customIcon} = styleProps || {};

  const imageRef = React.useRef(null);

  // This fixes the tint issue in safari browser
  useImageDelay(imageRef, 10, '', props?.color || '');

  return (
    <TouchableOpacity
      style={styleProps?.BtnTemplateContainer}
      disabled={disabled}
      onPress={props.onPress}>
      <View
        style={[
          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
          props.style as object,
        ]}>
        <Image
          ref={Platform.OS === 'web' ? imageRef : undefined}
          style={{
            width: iconSize || 25,
            height: iconSize || 25,
            opacity: disabled ? 0.4 : 1,
            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
          }}
          resizeMode={'contain'}
          source={{
            uri: props.name
              ? customIcon?.[props.name]
                ? customIcon[props.name]
                : icons[props.name]
              : props.icon,
          }}
        />
      </View>
      <Text
        style={{
          textAlign: 'center',
          marginTop: 5,
          color: disabled ? 'grey' : props.color || theme || '#fff',
          opacity: disabled ? 0.4 : 1,
        }}>
        {props.btnText}
      </Text>
    </TouchableOpacity>
  );
}

export function useMediaQueryContext() {
  return useContext(MediaQueryContext);
}

PDFControls: FC<{}> = () => {
  const {
    state: { mainState, paginated, zoomLevel, numPages },
    dispatch,
  } = useContext(PDFContext);

  const currentDocument = mainState?.currentDocument || null;

  return (
    <Container id="pdf-controls">
      {paginated && numPages > 1 && <PDFPagination />}

      {currentDocument?.fileData && (
        <DownloadButton
          id="pdf-download"
          href={currentDocument?.fileData as string}
          download={currentDocument?.uri}
        >
          <DownloadPDFIcon color="#000" size="75%" />
        </DownloadButton>
      )}

      <ControlButton
        id="pdf-zoom-out"
        onMouseDown={() => dispatch(setZoomLevel(zoomLevel - 0.1))}
      >
        <ZoomOutPDFIcon color="#000" size="80%" />
      </ControlButton>

      <ControlButton
        id="pdf-zoom-in"
        onMouseDown={() => dispatch(setZoomLevel(zoomLevel + 0.1))}
      >
        <ZoomInPDFIcon color="#000" size="80%" />
      </ControlButton>

      <ControlButton
        id="pdf-zoom-reset"
        onMouseDown={() => dispatch(setZoomLevel(initialPDFState.zoomLevel))}
        disabled={zoomLevel === initialPDFState.zoomLevel}
      >
        <ResetZoomPDFIcon color="#000" size="70%" />
      </ControlButton>

      {numPages > 1 && (
        <ControlButton
          id="pdf-toggle-pagination"
          onMouseDown={() => dispatch(setPDFPaginated(!paginated))}
        >
          <TogglePaginationPDFIcon
            color="#000"
            size="70%"
            reverse={paginated}
          />
        </ControlButton>
      )}
    </Container>
  );
}

useDeploymentTarget = (): UseDeploymentTargetReturn => {
  const context = useContext(DeploymentTargetContext);
  if (context === undefined) {
    throw new Error('The DeploymentTargetContext has not been defined.');
  }
  return context;
}

useConfirmation = () => useContext(ConfirmationContext)