Browse Source

WIP <Compose> Refactor; <OnboardingModal> ed.

closed-social-glitch-2
kibigo! 6 years ago
parent
commit
8713659dff
4 changed files with 35 additions and 39 deletions
  1. +6
    -0
      app/javascript/flavours/glitch/features/composer/index.js
  2. +6
    -0
      app/javascript/flavours/glitch/features/drawer/index.js
  3. +2
    -2
      app/javascript/flavours/glitch/features/drawer/search/index.js
  4. +21
    -37
      app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

+ 6
- 0
app/javascript/flavours/glitch/features/composer/index.js View File

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

+ 6
- 0
app/javascript/flavours/glitch/features/drawer/index.js View File

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

+ 2
- 2
app/javascript/flavours/glitch/features/drawer/search/index.js View File

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

+ 21
- 37
app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js View File

@ -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,29 +40,21 @@ 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} />
<DrawerPagerAccount account={myAccount} />
<RawComposer
intl={intl}
state={composerState}
/>
</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')}
/>
</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>
@ -74,22 +62,17 @@ const PageTwo = ({ myAccount }) => (
);
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} />,
];

Loading…
Cancel
Save