moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

public_layout/header: convert to tsx

This commit is contained in:
Alex Gleason 2022-04-19 17:11:24 -05:00
parent 862d345e26
commit 38bb876560
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/soapbox/components/ui/form/form.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
interface IForm { interface IForm {
onSubmit?: (event: React.FormEvent) => void, onSubmit?: (event: React.FormEvent) => void,
className?: string,
} }
const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => { const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => {

24
app/soapbox/features/public_layout/components/header.js → app/soapbox/features/public_layout/components/header.tsx
View File

@ -1,17 +1,19 @@
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { logIn, verifyCredentials } from 'soapbox/actions/auth'; import { logIn, verifyCredentials } from 'soapbox/actions/auth';
import { fetchInstance } from 'soapbox/actions/instance'; import { fetchInstance } from 'soapbox/actions/instance';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
import { openModal } from '../../../actions/modals'; import { openModal } from '../../../actions/modals';
import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui'; import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
import Pulse from './pulse'; import Pulse from './pulse';
import type { AxiosError } from 'axios';
const messages = defineMessages({ const messages = defineMessages({
home: { id: 'header.home.label', defaultMessage: 'Home' }, home: { id: 'header.home.label', defaultMessage: 'Home' },
login: { id: 'header.login.label', defaultMessage: 'Log in' }, login: { id: 'header.login.label', defaultMessage: 'Log in' },
@ -24,8 +26,8 @@ const Header = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const intl = useIntl(); const intl = useIntl();
const logo = useSelector((state) => getSoapboxConfig(state).get('logo')); const { logo } = useSoapboxConfig();
const instance = useSelector((state) => state.get('instance')); const instance = useAppSelector((state) => state.instance);
const isOpen = instance.get('registrations', false) === true; const isOpen = instance.get('registrations', false) === true;
const [isLoading, setLoading] = React.useState(false); const [isLoading, setLoading] = React.useState(false);
@ -36,24 +38,24 @@ const Header = () => {
const open = () => dispatch(openModal('LANDING_PAGE')); const open = () => dispatch(openModal('LANDING_PAGE'));
const handleSubmit = (event) => { const handleSubmit: React.FormEventHandler = (event) => {
event.preventDefault(); event.preventDefault();
setLoading(true); setLoading(true);
dispatch(logIn(intl, email, password)) dispatch(logIn(intl, email, password) as any)
.then(({ access_token }) => { .then(({ access_token }: { access_token: string }) => {
return ( return (
dispatch(verifyCredentials(access_token)) dispatch(verifyCredentials(access_token) as any)
// Refetch the instance for authenticated fetch // Refetch the instance for authenticated fetch
.then(() => dispatch(fetchInstance())) .then(() => dispatch(fetchInstance()))
.then(() => setShouldRedirect(true)) .then(() => setShouldRedirect(true))
); );
}) })
.catch((error) => { .catch((error: AxiosError) => {
setLoading(false); setLoading(false);
const data = error.response && error.response.data; const data = error.response?.data;
if (data && data.error === 'mfa_required') { if (data?.error === 'mfa_required') {
setMfaToken(data.mfa_token); setMfaToken(data.mfa_token);
} }
}); });