typescript, FC

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/ui/input/input.tsx

@@ -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'
 }
 

app/soapbox/features/admin/components/latest_accounts_panel.tsx

@@ -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' },

app/soapbox/features/delete_account/index.tsx

@@ -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);

app/soapbox/features/developers/developers_challenge.js

@@ -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>
-    );
-  }
-
-}

app/soapbox/features/developers/developers_challenge.tsx

@@ -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;

app/soapbox/features/developers/developers_menu.tsx

@@ -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));

app/soapbox/features/developers/index.js

@@ -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 />;
-  }
-
-}

app/soapbox/features/developers/index.tsx

@@ -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;

app/soapbox/hooks/index.ts

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