CreateApp: convert to TSX+FC

app/soapbox/actions/oauth.ts

@@ -18,7 +18,7 @@ export const OAUTH_TOKEN_REVOKE_REQUEST = 'OAUTH_TOKEN_REVOKE_REQUEST';
 export const OAUTH_TOKEN_REVOKE_SUCCESS = 'OAUTH_TOKEN_REVOKE_SUCCESS';
 export const OAUTH_TOKEN_REVOKE_FAIL    = 'OAUTH_TOKEN_REVOKE_FAIL';
 
-export const obtainOAuthToken = (params: Record<string, string>, baseURL?: string) =>
+export const obtainOAuthToken = (params: Record<string, string | undefined>, baseURL?: string) =>
   (dispatch: AppDispatch) => {
     dispatch({ type: OAUTH_TOKEN_CREATE_REQUEST, params });
     return baseClient(null, baseURL).post('/oauth/token', params).then(({ data: token }) => {

app/soapbox/components/ui/textarea/textarea.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */

app/soapbox/features/developers/apps/create.js

@@ -1,231 +0,0 @@
-import { Map as ImmutableMap } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { createApp } from 'soapbox/actions/apps';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
-import Column from 'soapbox/features/ui/components/column';
-import { getBaseURL } from 'soapbox/utils/accounts';
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  heading: { id: 'column.app_create', defaultMessage: 'Create app' },
-  namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },
-  scopesPlaceholder: { id: 'app_create.scopes_placeholder', defaultMessage: 'e.g. \'read write follow\'' },
-});
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  const account = state.getIn(['accounts', me]);
-
-  const instance = state.get('instance');
-  const features = getFeatures(instance);
-
-  return {
-    account,
-    defaultScopes: features.scopes,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class CreateApp extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    account: ImmutablePropTypes.record.isRequired,
-    defaultScopes: PropTypes.string,
-  }
-
-  initialState = () => {
-    return {
-      params: ImmutableMap({
-        client_name: '',
-        redirect_uris: 'urn:ietf:wg:oauth:2.0:oob',
-        scopes: '',
-        website: '',
-      }),
-      app: null,
-      token: null,
-      isLoading: false,
-    };
-  }
-
-  state = this.initialState()
-
-  handleCreateApp = () => {
-    const { dispatch, account } = this.props;
-    const { params } = this.state;
-    const baseURL = getBaseURL(account);
-
-    return dispatch(createApp(params.toJS(), baseURL))
-      .then(app => this.setState({ app }));
-  }
-
-  handleCreateToken = () => {
-    const { dispatch, account } = this.props;
-    const { app, params: appParams } = this.state;
-    const baseURL = getBaseURL(account);
-
-    const tokenParams = {
-      client_id:     app.client_id,
-      client_secret: app.client_secret,
-      redirect_uri:  appParams.get('redirect_uri'),
-      grant_type:    'client_credentials',
-      scope:         appParams.get('scopes'),
-    };
-
-    return dispatch(obtainOAuthToken(tokenParams, baseURL))
-      .then(token => this.setState({ token }));
-  }
-
-  handleSubmit = e => {
-    this.setState({ isLoading: true });
-
-    this.handleCreateApp()
-      .then(this.handleCreateToken)
-      .then(() => {
-        this.scrollToTop();
-        this.setState({ isLoading: false });
-      }).catch(error => {
-        console.error(error);
-        this.setState({ isLoading: false });
-      });
-  }
-
-  setParam = (key, value) => {
-    const { params } = this.state;
-    const newParams = params.set(key, value);
-
-    this.setState({ params: newParams });
-  }
-
-  handleParamChange = key => {
-    return e => {
-      this.setParam(key, e.target.value);
-    };
-  }
-
-  resetState = () => {
-    this.setState(this.initialState());
-  }
-
-  handleReset = e => {
-    this.resetState();
-    this.scrollToTop();
-  }
-
-  scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-
-  renderResults = () => {
-    const { intl } = this.props;
-    const { app, token } = this.state;
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
-        <Form>
-          <Stack>
-            <Text size='lg' weight='medium'>
-              <FormattedMessage id='app_create.results.explanation_title' defaultMessage='App created successfully' />
-            </Text>
-            <Text theme='muted'>
-              <FormattedMessage
-                id='app_create.results.explanation_text'
-                defaultMessage='You created a new app and token! Please copy the credentials somewhere; you will not see them again after navigating away from this page.'
-              />
-            </Text>
-          </Stack>
-
-          <FormGroup labelText={<FormattedMessage id='app_create.results.app_label' defaultMessage='App' />}>
-            <Textarea
-              value={JSON.stringify(app, null, 2)}
-              rows={10}
-              readOnly
-              isCodeEditor
-            />
-          </FormGroup>
-
-          <FormGroup labelText={<FormattedMessage id='app_create.results.token_label' defaultMessage='OAuth token' />}>
-            <Textarea
-              value={JSON.stringify(token, null, 2)}
-              rows={10}
-              readOnly
-              isCodeEditor
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button theme='primary' type='button' onClick={this.handleReset}>
-              <FormattedMessage id='app_create.restart' defaultMessage='Create another' />
-            </Button>
-          </FormActions>
-        </Form>
-      </Column>
-    );
-  }
-
-  render() {
-    const { intl } = this.props;
-    const { params, app, token, isLoading } = this.state;
-
-    if (app && token) {
-      return this.renderResults();
-    }
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
-        <Form onSubmit={this.handleSubmit}>
-          <FormGroup labelText={<FormattedMessage id='app_create.name_label' defaultMessage='App name' />}>
-            <Input
-              placeholder={intl.formatMessage(messages.namePlaceholder)}
-              onChange={this.handleParamChange('client_name')}
-              value={params.get('client_name')}
-              required
-            />
-          </FormGroup>
-
-          <FormGroup labelText={<FormattedMessage id='app_create.website_label' defaultMessage='Website' />}>
-            <Input
-              placeholder='https://soapbox.pub'
-              onChange={this.handleParamChange('website')}
-              value={params.get('website')}
-            />
-          </FormGroup>
-
-          <FormGroup labelText={<FormattedMessage id='app_create.redirect_uri_label' defaultMessage='Redirect URIs' />}>
-            <Input
-              placeholder='https://example.com'
-              onChange={this.handleParamChange('redirect_uris')}
-              value={params.get('redirect_uris')}
-              required
-            />
-          </FormGroup>
-
-          <FormGroup labelText={<FormattedMessage id='app_create.scopes_label' defaultMessage='Scopes' />}>
-            <Input
-              placeholder={intl.formatMessage(messages.scopesPlaceholder)}
-              onChange={this.handleParamChange('scopes')}
-              value={params.get('scopes')}
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button theme='primary' type='submit' disabled={isLoading}>
-              <FormattedMessage id='app_create.submit' defaultMessage='Create app' />
-            </Button>
-          </FormActions>
-        </Form>
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/developers/apps/create.tsx

@@ -0,0 +1,206 @@
+import { Map as ImmutableMap } from 'immutable';
+import React, { useState } from 'react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+
+import { createApp } from 'soapbox/actions/apps';
+import { obtainOAuthToken } from 'soapbox/actions/oauth';
+import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
+import Column from 'soapbox/features/ui/components/column';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { getBaseURL } from 'soapbox/utils/accounts';
+
+const messages = defineMessages({
+  heading: { id: 'column.app_create', defaultMessage: 'Create app' },
+  namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },
+  scopesPlaceholder: { id: 'app_create.scopes_placeholder', defaultMessage: 'e.g. \'read write follow\'' },
+});
+
+const CreateApp: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const account = useOwnAccount();
+
+  const [app, setApp] = useState<Record<string, any> | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const [params, setParams] = useState(ImmutableMap<string, string>({
+    client_name: '',
+    redirect_uris: 'urn:ietf:wg:oauth:2.0:oob',
+    scopes: '',
+    website: '',
+  }));
+
+  const handleCreateApp = () => {
+    const baseURL = getBaseURL(account!);
+
+    return dispatch(createApp(params.toJS() as Record<string, string>, baseURL))
+      .then(app => {
+        setApp(app);
+        return app;
+      });
+  };
+
+  const handleCreateToken = (app: Record<string, string>) => {
+    const baseURL = getBaseURL(account!);
+
+    const tokenParams = {
+      client_id:     app!.client_id,
+      client_secret: app!.client_secret,
+      redirect_uri:  params.get('redirect_uri'),
+      grant_type:    'client_credentials',
+      scope:         params.get('scopes'),
+    };
+
+    return dispatch(obtainOAuthToken(tokenParams, baseURL))
+      .then(setToken);
+  };
+
+  const handleSubmit = () => {
+    setLoading(true);
+
+    handleCreateApp()
+      .then(handleCreateToken)
+      .then(() => {
+        scrollToTop();
+        setLoading(false);
+      }).catch(error => {
+        console.error(error);
+        setLoading(false);
+      });
+  };
+
+  const setParam = (key: string, value: string) => {
+    const newParams = params.set(key, value);
+    setParams(newParams);
+  };
+
+  const handleParamChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      setParam(key, e.target.value);
+    };
+  };
+
+  const resetState = () => {
+    setApp(null);
+    setToken(null);
+    setLoading(false);
+
+    setParams(ImmutableMap({
+      client_name: '',
+      redirect_uris: 'urn:ietf:wg:oauth:2.0:oob',
+      scopes: '',
+      website: '',
+    }));
+  };
+
+  const handleReset = () => {
+    resetState();
+    scrollToTop();
+  };
+
+  const scrollToTop = (): void => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const renderResults = () => {
+    return (
+      <Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
+        <Form>
+          <Stack>
+            <Text size='lg' weight='medium'>
+              <FormattedMessage id='app_create.results.explanation_title' defaultMessage='App created successfully' />
+            </Text>
+            <Text theme='muted'>
+              <FormattedMessage
+                id='app_create.results.explanation_text'
+                defaultMessage='You created a new app and token! Please copy the credentials somewhere; you will not see them again after navigating away from this page.'
+              />
+            </Text>
+          </Stack>
+
+          <FormGroup labelText={<FormattedMessage id='app_create.results.app_label' defaultMessage='App' />}>
+            <Textarea
+              value={JSON.stringify(app, null, 2)}
+              rows={10}
+              readOnly
+              isCodeEditor
+            />
+          </FormGroup>
+
+          <FormGroup labelText={<FormattedMessage id='app_create.results.token_label' defaultMessage='OAuth token' />}>
+            <Textarea
+              value={JSON.stringify(token, null, 2)}
+              rows={10}
+              readOnly
+              isCodeEditor
+            />
+          </FormGroup>
+
+          <FormActions>
+            <Button theme='primary' type='button' onClick={handleReset}>
+              <FormattedMessage id='app_create.restart' defaultMessage='Create another' />
+            </Button>
+          </FormActions>
+        </Form>
+      </Column>
+    );
+  };
+
+  if (app && token) {
+    return renderResults();
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={<FormattedMessage id='app_create.name_label' defaultMessage='App name' />}>
+          <Input
+            type='text'
+            placeholder={intl.formatMessage(messages.namePlaceholder)}
+            onChange={handleParamChange('client_name')}
+            value={params.get('client_name')}
+            required
+          />
+        </FormGroup>
+
+        <FormGroup labelText={<FormattedMessage id='app_create.website_label' defaultMessage='Website' />}>
+          <Input
+            type='text'
+            placeholder='https://soapbox.pub'
+            onChange={handleParamChange('website')}
+            value={params.get('website')}
+          />
+        </FormGroup>
+
+        <FormGroup labelText={<FormattedMessage id='app_create.redirect_uri_label' defaultMessage='Redirect URIs' />}>
+          <Input
+            type='text'
+            placeholder='https://example.com'
+            onChange={handleParamChange('redirect_uris')}
+            value={params.get('redirect_uris')}
+            required
+          />
+        </FormGroup>
+
+        <FormGroup labelText={<FormattedMessage id='app_create.scopes_label' defaultMessage='Scopes' />}>
+          <Input
+            type='text'
+            placeholder={intl.formatMessage(messages.scopesPlaceholder)}
+            onChange={handleParamChange('scopes')}
+            value={params.get('scopes')}
+            required
+          />
+        </FormGroup>
+
+        <FormActions>
+          <Button theme='primary' type='submit' disabled={isLoading}>
+            <FormattedMessage id='app_create.submit' defaultMessage='Create app' />
+          </Button>
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default CreateApp;