react-redux#useDispatch TypeScript Examples

useRefreshReduxMe = (): UseRefreshReduxMeResult => {
  const [execMe, { data }] = useLazyQuery(Me);
  const reduxDispatcher = useDispatch();

  const deleteMe = () => {
    reduxDispatcher({
      type: UserProfileSetType,
      payload: null,
    });
  };
  const updateMe = () => {
    if (data && data.me && data.me.userName) {
      reduxDispatcher({
        type: UserProfileSetType,
        payload: data.me,
      });
    }
  };

  return { execMe, deleteMe, updateMe };
}

Dashboard = (params: IParams) => {
    let dispatch = useDispatch();
    let sidebarToggled = useSelector(selectSidebarToggled);
    let clientData = useSelector(selectClientData);
    const [loading, setLoading] = useState(true);
    const [isTutor, setIsTutor] = useState(false);
    useEffect(() => {
        const getTutor = async () => {
            return (await api.GetTutorById(clientData.clientId)).data[0];
        }
        getTutor().then(value => {
            setIsTutor(value !== null);
            dispatch(clientDataActions.setIsTutor((value !== null)));
            
        setLoading(false);
        }).catch(err => {
            
        setLoading(false);
        });
    });
    return (
        <div className={classNames("d-flex", (sidebarToggled) ? "toggled" : "")} id="dashboard-wrapper" style={{maxWidth:'100vw'}}>
            <Sidebar 
                mode={params.mode}
                isTutor = {isTutor}/>
            {params.mode === "Tutor" ? (isTutor ? <TutorPanel/> : <TutorPanelSignup isLoading={loading}/>) : <ClientPanel/>}
        </div>
    );
}

export default function useSetAppBarSettings(id: string, settings: AppBarSettings) {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(registerAppBarSettings(id, settings))

    return () => {
      dispatch(removeAppBarSettings(id))
    }
  }, [dispatch, id, settings])
}

// returns a function that allows removing a popup via its key
export function useRemovePopup(): (key: string) => void {
  const dispatch = useDispatch()
  return useCallback(
    (key: string) => {
      dispatch(removePopup({ key }))
    },
    [dispatch]
  )
}

ProgressBar = ({ steps, activeStep, changeStep, formData }: IProgressBar): JSX.Element => {
  const dispatch = useDispatch();
  const { updateForm } = reducer.actions;

  const onChange = (step: number) => () => {
    if (activeStep > step) {
      changeStep(step);
      dispatch(updateForm(formData));
    }
  };

  return (
    <StyledProgressBar>
      {steps.map((step: number) => (
        <StyledProgressBarItemWrapper key={step} activeBar={activeStep > step}>
          <StyledProgressBarItem onClick={onChange(step)} active={activeStep > step - 1}>
            {step + 1}
          </StyledProgressBarItem>
        </StyledProgressBarItemWrapper>
      ))}
    </StyledProgressBar>
  );
}

Footer = (props:any) => {
  const dispatch = useDispatch()
  const store = useSelector((state: any) => state.main)
  const [activeChecked, setActiveChecked] = React.useState(false);

  const onActiveCheckedChange = (isChecked: React.SetStateAction<boolean>) => {
    setActiveChecked(isChecked);
    if(store.anonymous === 'Anonymous'){
      dispatch(setAnonymous(store.userName))
    } else {
      dispatch(setAnonymous('Anonymous'))
    }
  };

  return (
  <View {...props} style={[props.style, styles.footerContainer]}>
    <Toggle
      style={styles.toggle}
      checked={activeChecked}
      onChange={onActiveCheckedChange}>
      Anonymous 
    </Toggle>
  </View>
  )
}

Welcome: React.FC<Props> = props => {
  const dispatch = useDispatch();

  // Async Requests
  const guestRequest = async () => {
    let response;
    try {
      response = await axios.post(`${process.env.REACT_APP_SERVER_URL}/users/guest`);
    } catch (error) {
      console.log('[ERROR][AUTH][GUEST]: ', error);
      return;
    }
    if (!response.data.access) return;
    dispatch({ type: 'GUEST', payload: { ...response.data.user } });
  };

  return (
    <div className={styles.container}>
      <img className={styles.logo} alt="GroupChat Logo" src={logo} />
      <Link to="/login">
        <CustomButton onClick={() => {}} isPurple={false} title="Login" small={false} />
      </Link>
      <Link to="/signup">
        <CustomButton onClick={() => {}} isPurple={true} title="Signup" small={false} />
      </Link>
      <p className={styles.guest} onClick={guestRequest}>
        Continue as guest
      </p>
    </div>
  );
}

ArticlePage = (props: IArticlePage) => {
  const { location, article, author, slug, facebook, articles, friends } = props;
  const title = ((article || {}).frontmatter || {}).title;
  const subTitle = ((article || {}).frontmatter || {}).subTitle;
  const category = ((article || {}).frontmatter || {}).category;
  const date = ((article || {}).fields || {}).prefix;
  const html = (article || {}).html;
  const fluid = ((article || {}).frontmatter || {}).cover.childImageSharp.fluid;

  const dispatch = useDispatch();

  useEffect(() => {
    if (location) {
      dispatch(LoadBrowserLocation(location));
      dispatch(SelectActivePage(PageType.ARTICLE));
    }
  }, []);

  return (
    <PageLayout>
      <SEOMetadata pageTitle={title} image={fluid.src} />
      <PageSection>
        <Wrapper>
          <FirstColumn>
            <PageSection>
              <ArticleHeader title={title} subTitle={subTitle} date={date} fluid={fluid} category={category} />
            </PageSection>
            <PageSection>
              <Content html={html} />
            </PageSection>
          </FirstColumn>
          <SecondColumn>
            <SideInformations actualArticleId={article.id} articles={articles} friends={friends} />
          </SecondColumn>
        </Wrapper>
      </PageSection>
    </PageLayout>
  );
}

MemberCollectionComponent = (props: Props) => {
  const memberCollection = useSelector((state: State) => state.memberReducer);
  const dispatch = useDispatch();
  
  // TODO Excercise port this to a table
  return (
    <>
      <button onClick={() => dispatch(memberRequest())}>Load</button>
      <ul>
        {memberCollection.map((member) => (
          <li>{member.login}</li>
        ))}
      </ul>
    </>
  );
}

function App() {
    const dispatch = useDispatch();

    const { provider, chainID, connected } = useWeb3Context();

    const loadApp = useCallback(
        loadProvider => {
            dispatch(loadAppDetails({ networkID: chainID, provider: loadProvider }));
        },
        [connected],
    );

    useEffect(() => {
        loadApp(provider);
    }, []);

    return <Landing />;
}

// Render

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App dispatch={useDispatch} />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

BatteryModal: FunctionComponent<Props> = ({ navigation }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleExit);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleExit);
    };
  });

  const handleExit = async () => {
    dispatch({ type: USER_DISABLED_BATTERY, payload: false });
    await AsyncStorage.setItem(USER_AGREED_TO_BATTERY, 'false');
    navigation.goBack();
    return true;
  };

  return (
    <View style={styles.container}>
      <HeaderButton type="close" onPress={handleExit} />
      <BatteryPermission
        onEnd={() => {
          navigation.goBack();
        }}
      />
    </View>
  );
}

Toolbar = React.memo<Props>(({ type }) => {
  const dispatch = useDispatch();
  const btnFn: Record<string, () => Buffer> = {
    'Setup': CommandSet.setup.bind(null, type),
    '\u2795': CommandSet.setPlus.bind(null, type),
    '\u2796': CommandSet.setMinus.bind(null, type),
    'Enter': CommandSet.enter.bind(null, type),
    'Reset All': CommandSet.resetAll.bind(null, type),
  };
  const makeCommand = (cb: () => Buffer | undefined) => () => {
    dispatch(sendCommand(cb()));
  };
  return (
    <ButtonGroup>
      {_.map(btnFn, (builder, text) => (
        <Button key={text} outline onClick={makeCommand(builder)}>
          {text}
        </Button>
      ))}
    </ButtonGroup>
  );
})

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    // todo: replace with GraphQL call
    dispatch({
      type: UserProfileSetType,
      payload: {
        id: 1,
        userName: "testUser",
      },
    });
  }, [dispatch]);

  const renderHome = (props: any) => <Home {...props} />;
  const renderThread = (props: any) => <Thread {...props} />;
  const renderUserProfile = (props: any) => <UserProfile {...props} />;

  return (
    <Switch>
      <Route exact={true} path="/" render={renderHome} />
      <Route path="/categorythreads/:categoryId" render={renderHome} />
      <Route path="/thread/:id" render={renderThread} />
      <Route path="/userprofile/:id" render={renderUserProfile} />
    </Switch>
  );
}

LiveStreamFooter = () => {
    const classes = useStyles();
    const dispatch: AppDispatch = useDispatch();

    const { loading } = useSelector((state: RootState) => state.common);

    return (
        <div className={classes.root}>
            {!loading && (
                <Button
                    className={classes.button}
                    variant="outlined"
                    color="default"
                    size={'small'}
                    disabled={loading}
                    startIcon={<SyncIcon />}
                    onClick={() => dispatch(getLiveStreams())}
                >
                    Refresh
                </Button>
            )}

            <Button
                component={Link}
                className={classes.button}
                variant="outlined"
                size={'small'}
                disabled={loading}
                startIcon={<SettingsIcon />}
                to="/settings"
            >
                Settings
            </Button>
        </div>
    );
}

export function useToggleModal(modal: ApplicationModal): () => void {
  const open = useModalOpen(modal);
  const dispatch = useDispatch<AppDispatch>();
  return useCallback(() => dispatch(setOpenModal(open ? null : modal)), [
    dispatch,
    modal,
    open,
  ]);
}

function App() {
  const dispatch = useDispatch();

  const { provider, chainID, connected } = useWeb3Context();

  const loadApp = useCallback(
    loadProvider => {
      dispatch(loadAppDetails({ networkID: chainID, provider: loadProvider }));
    },
    [connected],
  );

  useEffect(() => {
    loadApp(provider);
  }, []);

  return <Dashboard />;
}

/**
 * If valid id, update global state with new protocol
 * @param protocolID protocol id for supported protocol
 */
export function useProtocolUpdate(protocolID: string | undefined) {
  const dispatch = useDispatch<AppDispatch>()
  const [, setActiveProtocol] = useActiveProtocol()
  useEffect(() => {
    if (protocolID && Object.keys(SUPPORTED_PROTOCOLS).includes(protocolID)) {
      setActiveProtocol(SUPPORTED_PROTOCOLS[protocolID])
    }
  }, [dispatch, protocolID, setActiveProtocol])
}

BackgroundWindow = () => {
  const [currentGame] = useRunningGame(OVERWOLF_HOOKS_OPTIONS)
  const [desktopWindow] = useWindow(DESKTOP, OVERWOLF_HOOKS_OPTIONS)
  const [ingameWindow] = useWindow(INGAME, OVERWOLF_HOOKS_OPTIONS)
  const [{ event, info }, setGameFeatures] = useGameEventProvider<
    HeathstoneOverwolfGEP.Info,
    HeathstoneOverwolfGEP.Event
  >(OVERWOLF_HOOKS_OPTIONS)
  const dispatch = useDispatch()

  const openStartupWindow = useCallback(() => {
    const gameRunning =
      currentGame?.id === Game.HearhtStone &&
      (currentGame?.gameRunning || currentGame?.gameChanged)
    const currentWindow = gameRunning ? ingameWindow : desktopWindow
    gameRunning && setGameFeatures(REQUIRED_FEATURES)

    currentWindow?.restore()
  }, [desktopWindow, ingameWindow, currentGame, setGameFeatures])

  useEffect(() => {
    event && dispatch(setEvent({ event }))
  }, [event, dispatch])

  useEffect(() => {
    info && dispatch(setInfo({ info }))
  }, [info, dispatch])

  useEffect(() => {
    openStartupWindow()
  }, [openStartupWindow])

  return <></>
}

useAppDispatch = (): Dispatch<AnyAction> => useDispatch<AppDispatch>()

MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}

/* Step one of the appointment scheduler is for
   the user to pick their tutor subject */
export function Step1() {
    let clientFlowData = useSelector(selectClientFlowData);
    let [subjects, setSubjects] = useState<Array<Subject>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        // Get all avaliable subjects from API
        const getSubjects = async () => {
            return (await api.GetSubjects()).data;
        }

        getSubjects().then(value => {
                setSubjects(value);
                dispatch(clientFlowActions.setAvailableSubjects(value));
            }
        )
    }, [])

    return (
        <Container>
            <h3 className="hr mt-1">Select a Subject</h3>
            <Cards>
                {subjects.length === 0 ? <div>No subjects found!</div> : <></>}
                {subjects.map((subject, index) => {
                    return <ClientFlowCard
                        onClick={() => {
                            dispatch(clientFlowActions.incrementStep());
                            dispatch(clientFlowActions.setSelectedSubject(subject));
                        }}
                        color={SubjectToColor(subject._id)}
                        title={subject.id}
                        checked={clientFlowData.selectedSubject.id === subject.id}
                    ></ClientFlowCard>
                })}
            </Cards>
        </Container>
    );
}

export default function NativeLoader() {
  const { sources } = useSettings()
  const dispatch = useDispatch()
  useEffect(() => {
    (async () => {
      const loader = new NativeDataLoader()
      if (_.includes(sources, NativeSources.Alloc8or)) {
        await loader.loadAlloc8or()
      }
      if (_.includes(sources, NativeSources.FiveM)) {
        await loader.loadFiveM()
      }
      if (_.includes(sources, NativeSources.DottieDot)) {
        await loader.loadDottieDot()
      }

      dispatch(setNatives(loader))
    })()
  }, [dispatch, sources])

  return null
}

useAppDispatch = () => useDispatch<AppDispatch>()

export default function ListUpdatePopup({
  popKey,
  listUrl,
  oldList,
  newList,
  auto
}: {
  popKey: string
  listUrl: string
  oldList: TokenList
  newList: TokenList
  auto: boolean
}) {
  const removePopup = useRemovePopup()
  const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
  const dispatch = useDispatch<AppDispatch>()
  const theme = useContext(ThemeContext)

  const updateList = useCallback(() => {
    if (auto) return
    dispatch(acceptListUpdate(listUrl))
    removeThisPopup()
  }, [auto, dispatch, listUrl, removeThisPopup])

  return (
    <AutoRow>
      <div style={{ paddingRight: 16 }}>
        {auto ? <Info color={theme.text2} size={24} /> : <AlertCircle color={theme.red1} size={24} />}{' '}
      </div>
      <AutoColumn style={{ flex: '1' }} gap="8px">
        {auto ? (
          <TYPE.body fontWeight={500}>
            The token list &quot;{oldList.name}&quot; has been updated to{' '}
            <strong>{versionLabel(newList.version)}</strong>.
          </TYPE.body>
        ) : (
          <>
            <div>
              A token list update is available for the list &quot;{oldList.name}&quot; ({versionLabel(oldList.version)}{' '}
              to {versionLabel(newList.version)}).
            </div>
            <AutoRow>
              <div style={{ flexGrow: 1, marginRight: 6 }}>
                <ButtonPrimary onClick={updateList}>Update list</ButtonPrimary>
              </div>
              <div style={{ flexGrow: 1 }}>
                <ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>
              </div>
            </AutoRow>
          </>
        )}
      </AutoColumn>
    </AutoRow>
  )
}

ExampleForm = (): JSX.Element => {
  const dispatch = useDispatch();
  const { updateForm, clearForm } = reducer.actions;

  const handleSubmit = (formData: IFormData) => {
    console.log('formData', formData);
  };

  const handleNext = (formData: IFormData) => {
    dispatch(updateForm(formData));
  };

  const handleBack = (formData: IFormData) => {
    dispatch(updateForm(formData));
  };

  const handleCancel = () => {
    dispatch(clearForm());
  };

  return (
    <MultiStepForm
      title="Example Form"
      onCancel={handleCancel}
      onSubmit={handleSubmit}
      onNext={handleNext}
      onBack={handleBack}
    >
      <Step1 />
      <Step2 />
      <Step3 />
    </MultiStepForm>
  );
}

AboutUsPage = () => {
  const dispatch = useDispatch()
  const store = useSelector((state: any) => state.main)
  
  return (
    <Layout
      style={{
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'white-ish',
      }}
    >
      <Card style={styles.card}>
        <Text category="p1" style={styles.text}>
          Give 'n' Go is here to connect people in need of basic goods with
          those who live nearby and are willing to donate and deliver those
          items.{'\n'}
          {'\n'}
          Our goal is to help build community while helping those in need. We
          hope that neighbors everywhere will use Give 'n' Go to support others
          in their neighborhood who are struggling to fulfill their basic needs
          due to illness, loss of job, change in childcare, or any other reason.
          This application is meant to make asking for what you need easy, and
          anyone nearby can help as little or as much as they are able to.
          {'\n'}
          {'\n'} Give what you can... and go!
        </Text>
      </Card>
    </Layout>
  );
}

Modal: React.FC<Props> = props => {
  const dispatch = useDispatch();

  const [isValid, setIsValid] = useState(true);
  const [title, setTitle] = useState('');
  const [titleError, setTitleEror] = useState(false);
  const [titleHelper, setTitleHelper] = useState('');
  const [description, setDescription] = useState('');

  const createHandler = (title: string, description: string) => {
    if (titleError) {
      setIsValid(false);
      return;
    }

    props.onCreate(title, description);
  };

  const titleHandler = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    if (e.target.value.length <= 2 || e.target.value.length > 12) {
      setTitleEror(true);
      setTitleHelper('Title should contain 3 to 12 characters.');
    } else {
      setTitleEror(false);
      setTitleHelper('');
      setIsValid(true);
    }

    setTitle(e.target.value);
  };

  return (
    <>
      <div className={styles.backdrop} onClick={() => dispatch({ type: 'MODAL', payload: { modal: null } })}></div>
      <div className={styles.modal}>
        <h2>{props.title}</h2>
        <ThemeProvider theme={darkTheme}>
          <form className={styles.form} onSubmit={e => e.preventDefault()}>
            <TextField
              className={styles.input}
              id="title"
              label="Title"
              variant="outlined"
              onChange={e => titleHandler(e)}
              helperText={titleHelper}
              error={titleError}
              value={title}
            />
            <TextField
              className={styles.input}
              id="description"
              rows={3}
              label="Description"
              variant="outlined"
              multiline
              value={description}
              onChange={e => setDescription(e.target.value)}
            />
            <CustomButton onClick={() => createHandler(title, description)} isPurple title="Create" small />
            {!isValid && <p className={styles.error}>Invalid entries.</p>}
          </form>
        </ThemeProvider>
      </div>
    </>
  );
}

AboutPage = (props: IAboutPage) => {
  const { location } = props;
  const dispatch = useDispatch();

  React.useEffect(() => {
    if (location) {
      dispatch(LoadBrowserLocation(location));
      dispatch(SelectActivePage(PageType.ABOUT));
    }
  }, []);

  return (
    <PageLayout styles={{ marginTop: padding.big }}>
      <SEOMetadata pageTitle="O Poli" />
      <ColumnsLayout>
        <ContentColumn fraction={60}>
          <PageSection>
            <TitleSection>O Poli</TitleSection>
            <Text>
              Masz dość masówki globalnych koncernów? Szukasz lokalnych firm tworzących unikatowe produkty? Pola pomoże
              Ci odnaleźć polskie wyroby. Zabierając Polę na zakupy, odnajdujesz produkty „z duszą” i wspierasz polską
              gospodarkę.
            </Text>
            <Text>
              Zeskanuj kod kreskowy z dowolnego produktu i dowiedz się więcej o firmie, która go wyprodukowała. Pola
              powie Ci, czy dany producent opiera się na polskim kapitale, ma u nas swoją produkcję, tworzy
              wykwalifikowane miejsca pracy, jest częścią zagranicznego koncernu.
            </Text>
            <Text>
              Jeśli znajdziesz firmę, której nie ma w naszej bazie, koniecznie zgłoś ją do nas. Pomożesz nam w ten
              sposób uzupełniać unikatową bazę polskich producentów.
            </Text>
          </PageSection>
          <PageSection>
            <TitleSection>Algorytm</TitleSection>
            <Text>
              Każdemu producentowi Pola przypisuje od 0 do 100 punktów. Pierwsze 35 punktów przyznaje proporcjonalnie do
              udziału polskiego kapitału w konkretnym przedsiębiorstwie. Dalsze 10 punktów otrzymuje ta firma, która
              jest zarejestrowana w Polsce, a kolejne 30, o ile produkuje w naszym kraju. Dalsze 15 punktów zależy od
              tego, czy zatrudnia w naszym kraju w obszarze badań i rozwoju. Wreszcie ostatnie 10 punktów otrzymują
              firmy, które nie są częścią zagranicznych koncernów.
            </Text>
            <Text>
              Liczba punktów zwizualizowana jest przy pomocy czerwonego paska. Dokładamy wszelkich starań aby dane w
              aplikacji zawsze odpowiadały rzeczywistości i były aktualizowane na bieżąco. Prosimy o zgłaszanie
              wszelkich uwag i niejasności.
            </Text>
          </PageSection>
          <PageSection>
            <TitleSection>Filozofia działania</TitleSection>
            <Text>
              Staramy się być maksymalnie przejrzyści w naszych działaniach. Całość kodu źródłowego serwisu udostępniamy
              na zasadach otwartego oprogramowania na{' '}
              <a href={urls.external.links.polaGitHub.href} target="__blank">
                koncie Klubu Jagiellońskiego
              </a>{' '}
              w serwisie GitHub. Wktórce planujemy udostępnić w Internecie całość bazy danych producentów wraz z
              historią zmian i źródłami, na podstawie których podejmujemy decyzję o liczbie punktów, które im
              przyznajemy. Działamy zgodnie z naszą{' '}
              <a href={urls.external.links.polaPrivacyPolicy.href} target="__blank">
                polityką prywatności
              </a>
              .
            </Text>
          </PageSection>
        </ContentColumn>
        <ContentColumn hideOnMobile={true} fraction={40}>
          <Image>
            <ResponsiveImage imageSrc="3-bez_loga.png" />
          </Image>
        </ContentColumn>
      </ColumnsLayout>
      <PageSection>
        <Faq />
      </PageSection>
    </PageLayout>
  );
}