From a1625308cb7a9f8989a2d53da8b838a741f73572 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 2 Nov 2021 00:35:35 -0500
Subject: [PATCH] Developers: scaffold createApp page at
 /developers/apps/create

---
 .../features/developers/apps/create.js        | 41 +++++++++++++++++++
 app/soapbox/features/developers/index.js      |  6 +--
 app/soapbox/features/ui/index.js              |  4 +-
 .../features/ui/util/async-components.js      |  4 ++
 4 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/features/developers/apps/create.js

diff --git a/app/soapbox/features/developers/apps/create.js b/app/soapbox/features/developers/apps/create.js
new file mode 100644
index 000000000..e9aa77d8f
--- /dev/null
+++ b/app/soapbox/features/developers/apps/create.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import Column from 'soapbox/features/ui/components/column';
+import { SimpleForm, TextInput } from 'soapbox/features/forms';
+
+const messages = defineMessages({
+  heading: { id: 'column.app_create', defaultMessage: 'Create app' },
+  namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },
+});
+
+export default @injectIntl
+class CreateApp extends React.Component {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Column heading={intl.formatMessage(messages.heading)}>
+        <SimpleForm>
+          TODO: This page is incomplete
+
+          <TextInput
+            label={<FormattedMessage id='app_create.name_label' defaultMessage='App name' />}
+            placeholder={intl.formatMessage(messages.namePlaceholder)}
+            required
+          />
+          <TextInput
+            label={<FormattedMessage id='app_create.website_label' defaultMessage='Website' />}
+            placeholder='https://soapbox.pub'
+          />
+        </SimpleForm>
+      </Column>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/developers/index.js b/app/soapbox/features/developers/index.js
index 173f82c81..19b7c7b61 100644
--- a/app/soapbox/features/developers/index.js
+++ b/app/soapbox/features/developers/index.js
@@ -23,12 +23,12 @@ class Developers extends React.Component {
       <Column heading={intl.formatMessage(messages.heading)}>
         <div className='dashcounters'>
           <div className='dashcounter'>
-            <Link to='/error'>
+            <Link to='/developers/apps/create'>
               <div className='dashcounter__icon'>
-                <Icon src={require('@tabler/icons/icons/mood-sad.svg')} />
+                <Icon src={require('@tabler/icons/icons/apps.svg')} />
               </div>
               <div className='dashcounter__label'>
-                <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
+                <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
               </div>
             </Link>
           </div>
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 924c5a757..4256988b6 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -116,6 +116,7 @@ import {
   NewStatus,
   IntentionalError,
   Developers,
+  CreateApp,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -320,8 +321,9 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/admin/users' page={AdminPage} component={UserIndex} content={children} exact />
         <WrappedRoute path='/info' page={EmptyPage} component={ServerInfo} content={children} />
 
-        <WrappedRoute path='/error' page={EmptyPage} component={IntentionalError} content={children} />
+        <WrappedRoute path='/developers/apps/create' page={DefaultPage} component={CreateApp} content={children} />
         <WrappedRoute path='/developers' page={DefaultPage} component={Developers} content={children} />
+        <WrappedRoute path='/error' page={EmptyPage} component={IntentionalError} content={children} />
 
         <WrappedRoute path='/donate/crypto' publicRoute page={DefaultPage} component={CryptoDonate} content={children} />
         <WrappedRoute path='/federation_restrictions' publicRoute page={DefaultPage} component={FederationRestrictions} content={children} />
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 9bd0418b6..b01582ac1 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@@ -429,3 +429,7 @@ export function IntentionalError() {
 export function Developers() {
   return import(/* webpackChunkName: "features/developers" */'../../developers');
 }
+
+export function CreateApp() {
+  return import(/* webpackChunkName: "features/developers" */'../../developers/apps/create');
+}