How to use the preact/hooks.useContext function in preact

function PanelListMode(props) {
	const { children, useStyles, handleAddBtn, stopParamFn, ksParamFn, pullFn, dataStore, header, renderRowFn, ...other } = props;
	const classes = useStyles();
	const [anchorEl, setAnchorEl] = useState(null);
	const srvStore = useContext(dataStore);

	// popover for stop
	const handleClick = (ev, val) => {
		console.log('[anchorEl]', ev, val);
		setAnchorEl({
			el: ev.currentTarget,
			val: val,
		});
	};
	const handleClose = () => {
		setAnchorEl(null);
	};
	const handleStop = () => {
		console.log('[stop]', anchorEl.val);
		const val = anchorEl.val;
		const param = stopParamFn(val);

function ReversePanel(props) {
	const classes = useStyles();
	const { children, ...other } = props;
	const store = useContext(NodeStore);
	const [isAddMode, setAddMode] = useState(false);

	// TODO: merge to one State
	const [useNode, setUseNode] = useState(null);
	const [bindType, setBindType] = useState('any');
	const [bindPort, setBindPort] = useState(19000);
	const [bindAddr, setBindAddr] = useState('127.0.0.1');
	const [targetAddr, setTargetAddr] = useState('127.0.0.1:443');

	const [dialogData, setDialog] = useState(null);

	// add req
	const handleAdd = (e) => {
		if (!useNode) {
			// alert
			setDialog({

function LocalPanel(props) {
	const classes = useStyles();
	const { children, ...other } = props;
	const store = useContext(NodeStore);
	const [isAddMode, setAddMode] = useState(false);

	// TODO: merge to one State
	const [srvType, setSrvType] = useState('socks');
	const [useNode, setUseNode] = useState(null);
	const [bindType, setBindType] = useState('local');
	const [bindPort, setBindPort] = useState(1080);
	const [bindAddr, setBindAddr] = useState('127.0.0.1');
	const [targetAddr, setTargetAddr] = useState('192.168.1.215:3389');

	const [dialogData, setDialog] = useState(null);

	// add req
	const handleAdd = (e) => {
		if (!useNode) {
			// alert

const useFetchGrade = student => {
  const {
    api: { authToken },
  } = useContext(Config);
  const [grade, setGrade] = useState('');
  const [gradeLoading, setGradeLoading] = useState(false);

  useEffect(() => {
    let didCancel;
    if (student) {
      // Fetch the grade from the service api
      // See https://www.robinwieruch.de/react-hooks-fetch-data for async in useEffect
      const fetchData = async () => {
        setGradeLoading(true);
        setGrade(''); // Clear previous grade so we don't show the wrong grade with the new student

        const response = await fetchGrade({ student, authToken });
        if (!didCancel) {
          // Only set these values if we didn't cancel this request
          if (response.currentScore) {

function Foo() {
				let v = useContext(Ctx);
				return <div>{v}</div>;
			}

export default function DialogTestsAndExamples() {
  const config = useContext(Config);
  const [dialogName, setDialogName] = useState();

  const changeDialog = name => {
    setDialogName(name);
  };

  const close = () => {
    setDialogName('');
  };

  const apiErrorText = useMemo(() => {
    return new ApiError(400, {
      details: `Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

      “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
      The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

export const useStore = () => useContext(AppCtx);

function MainComponent() {
  const { setLang, t, lang } = useContext(TranslateContext);

  return (
    <div>
      <div>Lang: {lang}</div>
      <div>{t('title')}</div>
      <div>{t('subtitle')}</div>
      <div>Formatted: {t('hello', { name: 'Bob' })}</div>
      <div>Fallback: {t('fallback')}</div>
      <div>Nested: {t('messages.errors.404')}</div>
      <div>
        <button> setLang('en')}&gt;EN</button>
        <button> setLang('ua')}&gt;UA</button>
      </div>
    </div>
  );
}

module.exports = function () {
  var keys = [].slice.call(arguments)

  var store = hooks.useContext(StoreContext)
  if (process.env.NODE_ENV !== 'production' && !store) {
    throw new Error(
      'Could not find storeon context value.' +
      'Please ensure the component is wrapped in a '
    )
  }

  var rerender = hooks.useState({ })

  useIsomorphicLayoutEffect(function () {
    return store.on('@changed', function (_, changed) {
      var changesInKeys = keys.some(function (key) {
        return key in changed
      })
      if (changesInKeys) rerender[1]({ })
    })

const Text = (props: { testId: string; valueKey: string; params?: any }) => {
  const { t } = useContext(TranslateContext);
  return (
    <div data-testid="{props.testId}">{t(props.valueKey, props.params)}</div>
  );
};