mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

typescript, FC

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
next-virtuoso
marcin mikołajczak 2 years ago
parent 92a6058f26
commit f745c9fc97
9 changed files with 102 additions and 128 deletions
Show Stats Download Patch File Download Diff File

2
app/soapbox/components/ui/input/input.tsx
Unescape View File

@ -19,7 +19,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
name?: string,
placeholder?: string,
value?: string,
onChange?: () => void,
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
type: 'text' | 'email' | 'tel' | 'password'
}

2
app/soapbox/features/admin/components/latest_accounts_panel.tsx
Unescape View File

@ -9,7 +9,7 @@ import compareId from 'soapbox/compare_id';
import { Text, Widget } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container';
import { useAppSelector } from 'soapbox/hooks';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
import { useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({
title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },

6
app/soapbox/features/delete_account/index.js → app/soapbox/features/delete_account/index.tsx
Unescape View File

@ -1,11 +1,11 @@
import PropTypes from 'prop-types';
import * as React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { deleteAccount } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({
passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
@ -18,12 +18,12 @@ const messages = defineMessages({
const DeleteAccount = () => {
const intl = useIntl();
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const [password, setPassword] = React.useState('');
const [isLoading, setLoading] = React.useState(false);
const handleInputChange = React.useCallback((event) => {
const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
event.persist();
setPassword(event.target.value);

92
app/soapbox/features/developers/developers_challenge.js
Unescape View File

@ -1,92 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import { changeSettingImmediate } from 'soapbox/actions/settings';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import Column from '../ui/components/column';
const messages = defineMessages({
heading: { id: 'column.developers', defaultMessage: 'Developers' },
answerLabel: { id: 'developers.challenge.answer_label', defaultMessage: 'Answer' },
answerPlaceholder: { id: 'developers.challenge.answer_placeholder', defaultMessage: 'Your answer' },
success: { id: 'developers.challenge.success', defaultMessage: 'You are now a developer' },
fail: { id: 'developers.challenge.fail', defaultMessage: 'Wrong answer' },
});
export default @connect()
@injectIntl
class DevelopersChallenge extends React.Component {
static propTypes = {
intl: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
}
state = {
answer: '',
}
handleChangeAnswer = e => {
this.setState({ answer: e.target.value });
}
handleSubmit = e => {
const { intl, dispatch } = this.props;
const { answer } = this.state;
if (answer === 'boxsoap') {
dispatch(changeSettingImmediate(['isDeveloper'], true));
dispatch(snackbar.success(intl.formatMessage(messages.success)));
} else {
dispatch(snackbar.error(intl.formatMessage(messages.fail)));
}
}
render() {
const { intl } = this.props;
const challenge = `function soapbox() {
return 'soap|box'.split('|').reverse().join('');
}`;
return (
<Column label={intl.formatMessage(messages.heading)}>
<Form onSubmit={this.handleSubmit}>
<Text>
<FormattedMessage
id='developers.challenge.message'
defaultMessage='What is the result of calling {function}?'
values={{ function: <span className='font-mono'>soapbox()</span> }}
/>
</Text>
<Text tag='pre' family='mono'>
{challenge}
</Text>
<FormGroup
labelText={intl.formatMessage(messages.answerLabel)}
>
<Input
name='answer'
placeholder={intl.formatMessage(messages.answerPlaceholder)}
onChange={this.handleChangeAnswer}
value={this.state.answer}
/>
</FormGroup>
<FormActions>
<Button theme='primary' type='submit'>
<FormattedMessage id='developers.challenge.submit' defaultMessage='Become a developer' />
</Button>
</FormActions>
</Form>
</Column>
);
}
}

80
app/soapbox/features/developers/developers_challenge.tsx
Unescape View File

@ -0,0 +1,80 @@
import React from 'react';
import { useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { changeSettingImmediate } from 'soapbox/actions/settings';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import Column from '../ui/components/column';
const messages = defineMessages({
heading: { id: 'column.developers', defaultMessage: 'Developers' },
answerLabel: { id: 'developers.challenge.answer_label', defaultMessage: 'Answer' },
answerPlaceholder: { id: 'developers.challenge.answer_placeholder', defaultMessage: 'Your answer' },
success: { id: 'developers.challenge.success', defaultMessage: 'You are now a developer' },
fail: { id: 'developers.challenge.fail', defaultMessage: 'Wrong answer' },
});
const DevelopersChallenge = () => {
const dispatch = useDispatch();
const intl = useIntl();
const [answer, setAnswer] = useState('');
const handleChangeAnswer = (e: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(e.target.value);
};
const handleSubmit = () => {
if (answer === 'boxsoap') {
dispatch(changeSettingImmediate(['isDeveloper'], true));
dispatch(snackbar.success(intl.formatMessage(messages.success)));
} else {
dispatch(snackbar.error(intl.formatMessage(messages.fail)));
}
};
const challenge = `function soapbox() {
return 'soap|box'.split('|').reverse().join('');
}`;
return (
<Column label={intl.formatMessage(messages.heading)}>
<Form onSubmit={handleSubmit}>
<Text>
<FormattedMessage
id='developers.challenge.message'
defaultMessage='What is the result of calling {function}?'
values={{ function: <span className='font-mono'>soapbox()</span> }}
/>
</Text>
<Text tag='pre' family='mono'>
{challenge}
</Text>
<FormGroup
labelText={intl.formatMessage(messages.answerLabel)}
>
<Input
name='answer'
placeholder={intl.formatMessage(messages.answerPlaceholder)}
onChange={handleChangeAnswer}
value={answer}
type='text'
/>
</FormGroup>
<FormActions>
<Button theme='primary' type='submit'>
<FormattedMessage id='developers.challenge.submit' defaultMessage='Become a developer' />
</Button>
</FormActions>
</Form>
</Column>
);
};
export default DevelopersChallenge;

2
app/soapbox/features/developers/developers_menu.js → app/soapbox/features/developers/developers_menu.tsx
Unescape View File

@ -20,7 +20,7 @@ const Developers = () => {
const history = useHistory();
const intl = useIntl();
const leaveDevelopers = (e) => {
const leaveDevelopers = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
dispatch(changeSettingImmediate(['isDeveloper'], false));

30
app/soapbox/features/developers/index.js
Unescape View File

@ -1,30 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { getSettings } from 'soapbox/actions/settings';
import DevelopersChallenge from './developers_challenge';
import DevelopersMenu from './developers_menu';
const mapStateToProps = state => {
const settings = getSettings(state);
return {
isDeveloper: settings.get('isDeveloper'),
};
};
export default @connect(mapStateToProps)
class Developers extends React.Component {
static propTypes = {
isDeveloper: PropTypes.bool.isRequired,
}
render() {
const { isDeveloper } = this.props;
return isDeveloper ? <DevelopersMenu /> : <DevelopersChallenge />;
}
}

15
app/soapbox/features/developers/index.tsx
Unescape View File

@ -0,0 +1,15 @@
import React from 'react';
import { getSettings } from 'soapbox/actions/settings';
import { useAppSelector } from 'soapbox/hooks';
import DevelopersChallenge from './developers_challenge';
import DevelopersMenu from './developers_menu';
const Developers: React.FC = () => {
const isDeveloper = useAppSelector((state) => getSettings(state).get('isDeveloper'));
return isDeveloper ? <DevelopersMenu /> : <DevelopersChallenge />;
};
export default Developers;

1
app/soapbox/hooks/index.ts
Unescape View File

@ -1,3 +1,4 @@
export { useAppDispatch } from './useAppDispatch';
export { useAppSelector } from './useAppSelector';
export { useFeatures } from './useFeatures';
export { useOnScreen } from './useOnScreen';

Write Preview
Loading…
Cancel
Save