WIP <Compose> Refactor; <OnboardingModal> ed.

app/javascript/flavours/glitch/features/composer/index.js

@@ -434,6 +434,12 @@ Composer.propTypes = {
   }).isRequired,
 };
 
+//  Default props.
+Composer.defaultProps = {
+  dispatch: {},
+  state: {},
+};
+
 //  Connecting and export.
 export { Composer as WrappedComponent };
 export default wrap(Composer, mapStateToProps, mapDispatchToProps, true);

app/javascript/flavours/glitch/features/drawer/index.js

@@ -143,6 +143,12 @@ Drawer.propTypes = {
   }).isRequired,
 };
 
+//  Default props.
+Drawer.defaultProps = {
+  dispatch: {},
+  state: {},
+};
+
 //  Connecting and export.
 export { Drawer as WrappedComponent };
 export default wrap(Drawer, mapStateToProps, mapDispatchToProps, true);

app/javascript/flavours/glitch/features/drawer/search/index.js

@@ -109,7 +109,7 @@ export default class DrawerSearch extends React.PureComponent {
           <input
             type='text'
             placeholder={intl.formatMessage(messages.placeholder)}
-            value={value}
+            value={value || ''}
             onChange={change}
             onKeyUp={keyUp}
             onFocus={focus}
@@ -129,7 +129,7 @@ export default class DrawerSearch extends React.PureComponent {
 
         <Overlay
           placement='bottom'
-          show={expanded && !value.length && !submitted}
+          show={expanded && !(value || '').length && !submitted}
           target={this}
         ><DrawerSearchPopout /></Overlay>
       </div>

app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

@@ -6,14 +6,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import classNames from 'classnames';
 import Permalink from 'flavours/glitch/components/permalink';
-import ComposeForm from 'flavours/glitch/features/compose/components/compose_form';
-import Search from 'flavours/glitch/features/compose/components/search';
-import NavigationBar from 'flavours/glitch/features/compose/components/navigation_bar';
+import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer';
+import DrawerPagerAccount from 'flavours/glitch/features/drawer/pager/account';
+import DrawerSearch from 'flavours/glitch/features/drawer/search';
 import ColumnHeader from './column_header';
-import {
-  List as ImmutableList,
-  Map as ImmutableMap,
-} from 'immutable';
 import { me } from 'flavours/glitch/util/initial_state';
 
 const noop = () => { };
@@ -44,52 +40,39 @@ PageOne.propTypes = {
   domain: PropTypes.string.isRequired,
 };
 
-const PageTwo = ({ myAccount }) => (
+const composerState = {
+  showSearch: true,
+  text: 'Awoo! #introductions',
+};
+
+const PageTwo = ({ intl, myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-two'>
     <div className='figure non-interactive'>
       <div className='pseudo-drawer'>
-        <NavigationBar onClose={noop} account={myAccount} />
-      </div>
-      <ComposeForm
-        text='Awoo! #introductions'
-        suggestions={ImmutableList()}
-        mentionedDomains={[]}
-        spoiler={false}
-        onChange={noop}
-        onSubmit={noop}
-        onPaste={noop}
-        onPickEmoji={noop}
-        onChangeSpoilerText={noop}
-        onClearSuggestions={noop}
-        onFetchSuggestions={noop}
-        onSuggestionSelected={noop}
-        onPrivacyChange={noop}
-        showSearch
-        settings={ImmutableMap.of('side_arm', 'none')}
+        <DrawerPagerAccount account={myAccount} />
+        <RawComposer
+          intl={intl}
+          state={composerState}
         />
       </div>
+    </div>
 
     <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
   </div>
 );
 
 PageTwo.propTypes = {
+  intl: PropTypes.object.isRequired,
   myAccount: ImmutablePropTypes.map.isRequired,
 };
 
-const PageThree = ({ myAccount }) => (
+const PageThree = ({ intl, myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-three'>
     <div className='figure non-interactive'>
-      <Search
-        value=''
-        onChange={noop}
-        onSubmit={noop}
-        onClear={noop}
-        onShow={noop}
-      />
+      <DrawerSearch intl={intl} />
 
       <div className='pseudo-drawer'>
-        <NavigationBar onClose={noop} account={myAccount} />
+        <DrawerPagerAccount account={myAccount} />
       </div>
     </div>
 
@@ -99,6 +82,7 @@ const PageThree = ({ myAccount }) => (
 );
 
 PageThree.propTypes = {
+  intl: PropTypes.object.isRequired,
   myAccount: ImmutablePropTypes.map.isRequired,
 };
 
@@ -192,8 +176,8 @@ export default class OnboardingModal extends React.PureComponent {
     const { myAccount, admin, domain, intl } = this.props;
     this.pages = [
       <PageOne acct={myAccount.get('acct')} domain={domain} />,
-      <PageTwo myAccount={myAccount} />,
-      <PageThree myAccount={myAccount} />,
+      <PageTwo myAccount={myAccount} intl={intl} />,
+      <PageThree myAccount={myAccount} intl={intl} />,
       <PageFour domain={domain} intl={intl} />,
       <PageSix admin={admin} domain={domain} />,
     ];