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/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/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';