react-redux#useDispatch TypeScript Examples

The following examples show how to use react-redux#useDispatch. 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: BackgroundWindow.tsx    From overwolf-modern-react-boilerplate with MIT License 6 votes vote down vote up
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 <></>
}
Example #2
Source File: MonitoringDialog.tsx    From Pi-Tool with GNU General Public License v3.0 6 votes vote down vote up
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>
    );

}
Example #3
Source File: TutorCard.tsx    From TutorBase with MIT License 6 votes vote down vote up
// this.props.data.profile_img
// this.props.data.first_name
// this.props.data.last_name
export default function TutorCard({tutor, checked}: IProps) {
    console.log("== DEBUG == Tutor Date: ", tutor);

    let [tutorRating, setTutorRating] = useState(0);
    let dispatch = useDispatch();

    const selectTutor = () => {
        dispatch(actions.setSelectedTutor(tutor._id));
        dispatch(actions.incrementStep());
    }

    useEffect(() => {
        const getTutorRating = async () => {
            let rate = await api.GetFeedbackByTutor(tutor._id);
            setTutorRating(rate);
        }

        getTutorRating();
    }, [])

    return (
        <Container $checked={checked} onClick={() => selectTutor()}>
            <TutorName>{tutor.first_name} {tutor.last_name}</TutorName>
            <TutorImg>
                <img src={legoDude} width={150} height={150} alt="Tutor" style={{borderRadius: '180px'}}/>
            </TutorImg>

            {tutorRating === -1 ? (
                <p style={{color: "white"}}>Tutor not rated!</p>
            ) : (
                <ReactStars count={5} size={24} color2={'#ffd700'} value={tutorRating} edit={false}/>
            )}
        </Container>
    );
}
Example #4
Source File: NativeLoader.ts    From GTAV-NativeDB with MIT License 6 votes vote down vote up
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
}
Example #5
Source File: hooks.ts    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up
// returns a function that allows adding a popup
export function useAddPopup(): (content: PopupContent, key?: string) => void {
  const dispatch = useDispatch()

  return useCallback(
    (content: PopupContent, key?: string) => {
      dispatch(addPopup({ content, key }))
    },
    [dispatch]
  )
}
Example #6
Source File: index.tsx    From frontend with GNU General Public License v3.0 6 votes vote down vote up
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>
  );
}
Example #7
Source File: AboutUsPage.tsx    From GiveNGo with MIT License 6 votes vote down vote up
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>
  );
}
Example #8
Source File: index.tsx    From GroupChat with MIT License 6 votes vote down vote up
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>
  );
}
Example #9
Source File: ArticlePage.tsx    From pola-web with MIT License 6 votes vote down vote up
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>
  );
}
Example #10
Source File: member-collection.component.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up
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>
    </>
  );
}
Example #11
Source File: Landing.tsx    From lobis-frontend with MIT License 6 votes vote down vote up
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 />;
}
Example #12
Source File: index.tsx    From avalon.ist with MIT License 6 votes vote down vote up
// Render

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App dispatch={useDispatch} />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #13
Source File: BatteryModal.tsx    From hamagen-react-native with MIT License 6 votes vote down vote up
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>
  );
}
Example #14
Source File: Toolbar.tsx    From atorch-console with MIT License 6 votes vote down vote up
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>
  );
})
Example #15
Source File: App.tsx    From Full-Stack-React-TypeScript-and-Node with MIT License 6 votes vote down vote up
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>
  );
}
Example #16
Source File: LiveStreamFooter.tsx    From twitch-live-extension with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up
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>
    );
}
Example #17
Source File: hooks.ts    From interface-v2 with GNU General Public License v3.0 6 votes vote down vote up
export function useToggleModal(modal: ApplicationModal): () => void {
  const open = useModalOpen(modal);
  const dispatch = useDispatch<AppDispatch>();
  return useCallback(() => dispatch(setOpenModal(open ? null : modal)), [
    dispatch,
    modal,
    open,
  ]);
}
Example #18
Source File: Dashboard.tsx    From rugenerous-frontend with MIT License 6 votes vote down vote up
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 />;
}
Example #19
Source File: useProtocolUpdate.ts    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up
/**
 * 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])
}
Example #20
Source File: hooks.ts    From bluebubbles-server with Apache License 2.0 5 votes vote down vote up
useAppDispatch = (): Dispatch<AnyAction> => useDispatch<AppDispatch>()
Example #21
Source File: 1_subject.tsx    From TutorBase with MIT License 5 votes vote down vote up
/* 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>
    );
}
Example #22
Source File: hooks.ts    From keycaplendar with MIT License 5 votes vote down vote up
useAppDispatch = () => useDispatch<AppDispatch>()
Example #23
Source File: ListUpdatePopup.tsx    From cuiswap with GNU General Public License v3.0 5 votes vote down vote up
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>
  )
}
Example #24
Source File: ChatPage.tsx    From GiveNGo with MIT License 5 votes vote down vote up
ProfileIcon = () => {
  const dispatch = useDispatch()
  const store = useSelector((state: any) => state.main)
  
  return (
    <Avatar shape="rounded" source={require('../../../assets/alan.jpg')} />
  );
}
Example #25
Source File: index.tsx    From GroupChat with MIT License 5 votes vote down vote up
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>
    </>
  );
}
Example #26
Source File: about.tsx    From pola-web with MIT License 5 votes vote down vote up
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>
  );
}