From da3d0c3462554a7d43556e58ac8648167d516bf5 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Fri, 6 Mar 2020 10:38:22 -0500 Subject: [PATCH] Progress --- app/javascript/gabsocial/assets/audio_icon.js | 27 ++ .../gabsocial/assets/audio_mute_icon.js | 26 ++ .../gabsocial/assets/fullscreen_icon.js | 29 ++ app/javascript/gabsocial/assets/index.js | 14 +- .../assets/minimize_fullscreen_icon.js | 29 ++ app/javascript/gabsocial/assets/pause_icon.js | 28 ++ app/javascript/gabsocial/components/button.js | 1 + .../column_inline_form/column_inline_form.js | 54 ---- .../column_inline_form.scss | 29 -- .../components/column_inline_form/index.js | 1 - .../components/{domain => }/domain.js | 2 +- .../gabsocial/components/domain/index.js | 1 - app/javascript/gabsocial/components/icon.js | 14 +- .../components/media_gallery/media_gallery.js | 6 +- .../components/popover/search_popover.js | 37 ++- app/javascript/gabsocial/components/search.js | 7 +- .../components/search_popout/index.js | 1 - .../components/search_popout/search_popout.js | 53 ---- .../search_popout/search_popout.scss | 36 --- .../gabsocial/components/status/status.js | 4 +- .../gabsocial/components/status/status.scss | 5 - .../status_action_bar.js | 10 +- .../components/status_action_bar/index.js | 2 +- .../status_action_bar/status_action_bar.scss | 59 ---- .../{status_list => }/status_list.js | 8 +- .../gabsocial/components/status_list/index.js | 2 +- .../{status_quote => }/status_quote.js | 4 +- .../components/status_quote/index.js | 0 .../status_revision_list.js | 15 +- .../components/status_revision_list/index.js | 0 .../account_timeline/account_timeline.js | 2 +- .../gabsocial/features/group_create.js | 53 +++- .../gabsocial/features/group_edit.js | 137 --------- .../edit_list_form/edit_list_form.js | 23 +- app/javascript/gabsocial/features/ui/ui.js | 3 +- .../features/ui/util/async-components.js | 4 - .../gabsocial/features/video/video.js | 272 ++++++++++++------ .../gabsocial/features/video/video.scss | 31 -- app/javascript/styles/global.css | 47 +++ 39 files changed, 512 insertions(+), 564 deletions(-) create mode 100644 app/javascript/gabsocial/assets/audio_icon.js create mode 100644 app/javascript/gabsocial/assets/audio_mute_icon.js create mode 100644 app/javascript/gabsocial/assets/fullscreen_icon.js create mode 100644 app/javascript/gabsocial/assets/minimize_fullscreen_icon.js create mode 100644 app/javascript/gabsocial/assets/pause_icon.js delete mode 100644 app/javascript/gabsocial/components/column_inline_form/column_inline_form.js delete mode 100644 app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss delete mode 100644 app/javascript/gabsocial/components/column_inline_form/index.js rename app/javascript/gabsocial/components/{domain => }/domain.js (96%) delete mode 100644 app/javascript/gabsocial/components/domain/index.js delete mode 100644 app/javascript/gabsocial/components/search_popout/index.js delete mode 100644 app/javascript/gabsocial/components/search_popout/search_popout.js delete mode 100644 app/javascript/gabsocial/components/search_popout/search_popout.scss rename app/javascript/gabsocial/components/{status_action_bar => }/status_action_bar.js (96%) delete mode 100644 app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss rename app/javascript/gabsocial/components/{status_list => }/status_list.js (95%) rename app/javascript/gabsocial/components/{status_quote => }/status_quote.js (90%) delete mode 100644 app/javascript/gabsocial/components/status_quote/index.js rename app/javascript/gabsocial/components/{status_revision_list => }/status_revision_list.js (77%) delete mode 100644 app/javascript/gabsocial/components/status_revision_list/index.js delete mode 100644 app/javascript/gabsocial/features/group_edit.js diff --git a/app/javascript/gabsocial/assets/audio_icon.js b/app/javascript/gabsocial/assets/audio_icon.js new file mode 100644 index 00000000..4267ad65 --- /dev/null +++ b/app/javascript/gabsocial/assets/audio_icon.js @@ -0,0 +1,27 @@ +const AudioIcon = ({ + className = '', + width = '24px', + height = '24px', + viewBox = '0 0 24 24', + title = '', +}) => ( + + + + + + + ) + +export default AudioIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/assets/audio_mute_icon.js b/app/javascript/gabsocial/assets/audio_mute_icon.js new file mode 100644 index 00000000..dadc103d --- /dev/null +++ b/app/javascript/gabsocial/assets/audio_mute_icon.js @@ -0,0 +1,26 @@ +const AudioMuteIcon = ({ + className = '', + width = '24px', + height = '24px', + viewBox = '0 0 24 24', + title = 'Error', +}) => ( + + + + + +) + +export default AudioMuteIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/assets/fullscreen_icon.js b/app/javascript/gabsocial/assets/fullscreen_icon.js new file mode 100644 index 00000000..fa50c827 --- /dev/null +++ b/app/javascript/gabsocial/assets/fullscreen_icon.js @@ -0,0 +1,29 @@ +const FullscreenIcon = ({ + className = '', + width = '24px', + height = '24px', + viewBox = '0 0 32 32', + title = 'Fullscreen', +}) => ( + + + + + + + + +) + +export default FullscreenIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/assets/index.js b/app/javascript/gabsocial/assets/index.js index b978a377..12c6d9ef 100644 --- a/app/javascript/gabsocial/assets/index.js +++ b/app/javascript/gabsocial/assets/index.js @@ -1,6 +1,8 @@ import AddIcon from './add_icon' -import AppsIcon from './apps_icon' import AngleRightIcon from './angle_right_icon' +import AppsIcon from './apps_icon' +import AudioIcon from './audio_icon' +import AudioMuteIcon from './audio_mute_icon' import BackIcon from './back_icon' import CalendarIcon from './calendar_icon' import ChatIcon from './chat_icon' @@ -10,6 +12,7 @@ import CommentIcon from './comment_icon' import DissenterIcon from './dissenter_icon' import EllipsisIcon from './ellipsis_icon' import ErrorIcon from './error_icon' +import FullscreenIcon from './fullscreen_icon' import GlobeIcon from './globe_icon' import GroupIcon from './group_icon' import HomeIcon from './home_icon' @@ -18,9 +21,11 @@ import LinkIcon from './link_icon' import ListIcon from './list_icon' import LoadingIcon from './loading_icon' import MediaIcon from './media_icon' +import MinimizeFullscreenIcon from './minimize_fullscreen_icon' import MissingIcon from './missing_icon' import MoreIcon from './more_icon' import NotificationsIcon from './notifications_icon' +import PauseIcon from './pause_icon' import PinIcon from './pin_icon' import PlayIcon from './play_icon' import PollIcon from './poll_icon' @@ -36,8 +41,10 @@ import WarningIcon from './warning_icon' export { AddIcon, - AppsIcon, AngleRightIcon, + AppsIcon, + AudioIcon, + AudioMuteIcon, BackIcon, CalendarIcon, ChatIcon, @@ -47,6 +54,7 @@ export { DissenterIcon, EllipsisIcon, ErrorIcon, + FullscreenIcon, GlobeIcon, GroupIcon, HomeIcon, @@ -55,9 +63,11 @@ export { ListIcon, LoadingIcon, MediaIcon, + MinimizeFullscreenIcon, MissingIcon, MoreIcon, NotificationsIcon, + PauseIcon, PinIcon, PlayIcon, PollIcon, diff --git a/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js b/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js new file mode 100644 index 00000000..4feb027a --- /dev/null +++ b/app/javascript/gabsocial/assets/minimize_fullscreen_icon.js @@ -0,0 +1,29 @@ +const MinimizeFullscreenIcon = ({ + className = '', + width = '24px', + height = '24px', + viewBox = '0 0 32 32', + title = 'Minimize Fullscreen', +}) => ( + + + + + + + + + ) + +export default MinimizeFullscreenIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/assets/pause_icon.js b/app/javascript/gabsocial/assets/pause_icon.js new file mode 100644 index 00000000..ab2773f3 --- /dev/null +++ b/app/javascript/gabsocial/assets/pause_icon.js @@ -0,0 +1,28 @@ +const PauseIcon = ({ + className = '', + width = '16px', + height = '16px', + viewBox = '0 0 64 64', + title = 'Pause', +}) => ( + + + + + + + +) + +export default PauseIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js index 338ff16b..1594fe04 100644 --- a/app/javascript/gabsocial/components/button.js +++ b/app/javascript/gabsocial/components/button.js @@ -92,6 +92,7 @@ export default class Button extends PureComponent { font: 1, cursorPointer: 1, textAlignCenter: 1, + outlineNone: 1, backgroundColorPrimary: backgroundColor === COLORS.white, backgroundColorBrand: backgroundColor === COLORS.brand, diff --git a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js b/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js deleted file mode 100644 index 8fabb6fd..00000000 --- a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js +++ /dev/null @@ -1,54 +0,0 @@ -import Button from '../button'; - -export default class ColumnInlineForm extends PureComponent { - - static propTypes = { - value: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - label: PropTypes.string.isRequired, - btnTitle: PropTypes.string.isRequired, - disabled: PropTypes.bool, - }; - - handleChange = e => { - this.props.onChange(e.target.value); - } - - handleSubmit = e => { - e.preventDefault(); - this.props.onSubmit(); - } - - handleClick = () => { - this.props.onSubmit(); - } - - render() { - const { value, label, btnTitle, disabled } = this.props; - - return ( -
- - - -
- ); - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss b/app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss deleted file mode 100644 index ced91843..00000000 --- a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss +++ /dev/null @@ -1,29 +0,0 @@ -.column-inline-form { - padding: 7px 5px 7px 15px; - background: lighten($ui-base-color, 4%); - - @include flex(flex-start, center); - - &__block { - flex: 1 1 auto; - } - - &__title {} - - &__input { - margin-bottom: 6px; - - @include size(100%, 36px); - - &:focus { - outline: 0; - } - } - - &__btn { - flex: 0 0 auto; - margin: 0 5px; - margin-left: 6px; - width: 112px; - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/column_inline_form/index.js b/app/javascript/gabsocial/components/column_inline_form/index.js deleted file mode 100644 index ebb67baf..00000000 --- a/app/javascript/gabsocial/components/column_inline_form/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './column_inline_form' \ No newline at end of file diff --git a/app/javascript/gabsocial/components/domain/domain.js b/app/javascript/gabsocial/components/domain.js similarity index 96% rename from app/javascript/gabsocial/components/domain/domain.js rename to app/javascript/gabsocial/components/domain.js index ccc5476b..21b9947d 100644 --- a/app/javascript/gabsocial/components/domain/domain.js +++ b/app/javascript/gabsocial/components/domain.js @@ -1,5 +1,5 @@ import { defineMessages, injectIntl } from 'react-intl'; -import IconButton from '../icon_button'; +import IconButton from './icon_button'; const messages = defineMessages({ unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, diff --git a/app/javascript/gabsocial/components/domain/index.js b/app/javascript/gabsocial/components/domain/index.js deleted file mode 100644 index de1b2bd3..00000000 --- a/app/javascript/gabsocial/components/domain/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './domain' \ No newline at end of file diff --git a/app/javascript/gabsocial/components/icon.js b/app/javascript/gabsocial/components/icon.js index 662f4c65..5128aaf3 100644 --- a/app/javascript/gabsocial/components/icon.js +++ b/app/javascript/gabsocial/components/icon.js @@ -15,10 +15,14 @@ export default class Icon extends PureComponent { switch (id) { case 'add': return - case 'apps': - return case 'angle-right': return + case 'apps': + return + case 'audio': + return + case 'audio-mute': + return case 'back': return case 'calendar': @@ -35,6 +39,8 @@ export default class Icon extends PureComponent { return case 'error': return + case 'fullscreen': + return case 'globe': return case 'group': @@ -51,12 +57,16 @@ export default class Icon extends PureComponent { return case 'media': return + case 'minimize-fullscreen': + return case 'missing': return case 'more': return case 'notifications': return + case 'pause': + return case 'pin': return case 'play': diff --git a/app/javascript/gabsocial/components/media_gallery/media_gallery.js b/app/javascript/gabsocial/components/media_gallery/media_gallery.js index 0da858c1..a2724c6e 100644 --- a/app/javascript/gabsocial/components/media_gallery/media_gallery.js +++ b/app/javascript/gabsocial/components/media_gallery/media_gallery.js @@ -27,17 +27,17 @@ class Item extends ImmutablePureComponent { displayWidth: PropTypes.number, visible: PropTypes.bool.isRequired, dimensions: PropTypes.object, - }; + } static defaultProps = { standalone: false, index: 0, size: 1, - }; + } state = { loaded: false, - }; + } handleMouseEnter = (e) => { if (this.hoverToPlay()) { diff --git a/app/javascript/gabsocial/components/popover/search_popover.js b/app/javascript/gabsocial/components/popover/search_popover.js index 1ffd6db4..fcbdecaa 100644 --- a/app/javascript/gabsocial/components/popover/search_popover.js +++ b/app/javascript/gabsocial/components/popover/search_popover.js @@ -1,8 +1,43 @@ export default class SearchPopover extends PureComponent { render() { + //
+ // + // {({ opacity, scaleX, scaleY }) => ( + //
+ //

+ // + //

+ //
    + //
  • + // #example + // + //
    • + //
  • + // @username + // + //
    • + //
  • + // URL + // + //
    • + //
  • + // URL + // + //
    • + //
+ // { + // searchEnabled + // ? + // : + // } + //
+ // )} + // + //
+ return (
- { /* */ } + { /* */}
) } diff --git a/app/javascript/gabsocial/components/search.js b/app/javascript/gabsocial/components/search.js index 80884936..cb81e48c 100644 --- a/app/javascript/gabsocial/components/search.js +++ b/app/javascript/gabsocial/components/search.js @@ -1,12 +1,9 @@ -import classNames from 'classnames/bind' -import Overlay from 'react-overlays/lib/Overlay' import { changeSearch, clearSearch, submitSearch, showSearch, } from '../actions/search' -import SearchPopout from './search_popout' import Input from './input' const mapStateToProps = state => ({ @@ -93,9 +90,9 @@ class Search extends PureComponent { { withOverlay && - + {/* - + */} } diff --git a/app/javascript/gabsocial/components/search_popout/index.js b/app/javascript/gabsocial/components/search_popout/index.js deleted file mode 100644 index b5f6eeee..00000000 --- a/app/javascript/gabsocial/components/search_popout/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './search_popout' \ No newline at end of file diff --git a/app/javascript/gabsocial/components/search_popout/search_popout.js b/app/javascript/gabsocial/components/search_popout/search_popout.js deleted file mode 100644 index c26a9afb..00000000 --- a/app/javascript/gabsocial/components/search_popout/search_popout.js +++ /dev/null @@ -1,53 +0,0 @@ -import { FormattedMessage } from 'react-intl'; -import spring from 'react-motion/lib/spring'; -import Motion from '../../features/ui/util/optional_motion'; -import { searchEnabled } from '../../initial_state'; - -export default class SearchPopout extends PureComponent { - - static propTypes = { - style: PropTypes.object, - }; - - render() { - const { style } = this.props; - - return ( -
- - {({ opacity, scaleX, scaleY }) => ( -
-

- -

-
    -
  • - #example - -
    • -
  • - @username - -
    • -
  • - URL - -
    • -
  • - URL - -
    • -
- { - searchEnabled - ? - : - } -
- )} - -
- ); - } - -} diff --git a/app/javascript/gabsocial/components/search_popout/search_popout.scss b/app/javascript/gabsocial/components/search_popout/search_popout.scss deleted file mode 100644 index 5ed294fe..00000000 --- a/app/javascript/gabsocial/components/search_popout/search_popout.scss +++ /dev/null @@ -1,36 +0,0 @@ -.search-popout-container { - width: 251px; - - @media screen and (max-width: $nav-breakpoint-2) { - width: 100%; - } -} - -.search-popout { - background: $gab-background-container; - padding: 8px 10px 17px 10px; - margin: 4px 0 0 0; - color: $gab-secondary-text; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); - - @include text-sizing(12px, 400, 14px); - @include border-design($gab-placeholder-accent, 1px, 4px); - - h4 { - color: #fff; - - @include text-sizing(14px, 600, 16px); - } - - ul { - margin: 6px 0 6px; - - li { - margin: 0 0 2px 0; - - em { - color: $gab-text-highlight; - } - } - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js index 1f295223..5452970b 100644 --- a/app/javascript/gabsocial/components/status/status.js +++ b/app/javascript/gabsocial/components/status/status.js @@ -371,6 +371,8 @@ class Status extends ImmutablePureComponent { if (status.getIn(['media_attachments', 0, 'type']) === 'video') { const video = status.getIn(['media_attachments', 0]); + console.log("VIDEO HERE") + media = ( {Component => ( @@ -460,9 +462,7 @@ class Status extends ImmutablePureComponent {
diff --git a/app/javascript/gabsocial/components/status/status.scss b/app/javascript/gabsocial/components/status/status.scss index 35c88713..53e3fd18 100644 --- a/app/javascript/gabsocial/components/status/status.scss +++ b/app/javascript/gabsocial/components/status/status.scss @@ -28,11 +28,6 @@ margin-top: 8px; } - &.status-direct:not(.read) { - background: lighten($ui-base-color, 8%); - border-bottom-color: lighten($ui-base-color, 12%); - } - &.light { .status__relative-time { color: $light-text-color; diff --git a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js similarity index 96% rename from app/javascript/gabsocial/components/status_action_bar/status_action_bar.js rename to app/javascript/gabsocial/components/status_action_bar.js index 6ce8c033..4aaf3d58 100644 --- a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js +++ b/app/javascript/gabsocial/components/status_action_bar.js @@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { defineMessages, injectIntl } from 'react-intl' import classNames from 'classnames/bind' -import { openModal } from '../../actions/modal' -import { me, isStaff } from '../../initial_state' -import ComposeFormContainer from '../../features/compose/containers/compose_form_container' -import Icon from '../icon' -import StatusActionBarItem from '../status_action_bar_item' +import { openModal } from '../actions/modal' +import { me, isStaff } from '../initial_state' +import ComposeFormContainer from '../features/compose/containers/compose_form_container' +import Icon from './icon' +import StatusActionBarItem from './status_action_bar_item' const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, diff --git a/app/javascript/gabsocial/components/status_action_bar/index.js b/app/javascript/gabsocial/components/status_action_bar/index.js index 290dff2f..acb1ab4f 100644 --- a/app/javascript/gabsocial/components/status_action_bar/index.js +++ b/app/javascript/gabsocial/components/status_action_bar/index.js @@ -1 +1 @@ -export { default } from './status_action_bar' \ No newline at end of file +export { default } from '../status_action_bar' \ No newline at end of file diff --git a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss b/app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss deleted file mode 100644 index 6c11c721..00000000 --- a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.scss +++ /dev/null @@ -1,59 +0,0 @@ -.status-action-bar { - display: block; - margin-top: 10px; - z-index: 4; - - @include horizontal-padding(10px); - - &__dropdown { - @include size(23px); - } - - &__items { - display: flex; - align-items: center; - border-top: 1px solid #161616; - - @include size(100%, 42px); - } - - &__comment { - - } -} - -.status-action-bar-item { - display: inline-flex; - align-items: center; - justify-content: center; - height: 42px; - width: 33%; - padding: 5px; - box-sizing: border-box; - - &__btn { - border-radius: 4px; - margin-right: 4px; - font-size: 14px; - font-weight: 500; - - @include size(100%); - - &:hover { - background-color: #000; - } - - i { - margin-right: 4px; - } - } - - &__link { - display: inline-block; - color: $action-button-color; - cursor: pointer; - text-decoration: none; - - @include text-sizing(14px, 500); - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/status_list/status_list.js b/app/javascript/gabsocial/components/status_list.js similarity index 95% rename from app/javascript/gabsocial/components/status_list/status_list.js rename to app/javascript/gabsocial/components/status_list.js index dda05a8a..071c3c43 100644 --- a/app/javascript/gabsocial/components/status_list/status_list.js +++ b/app/javascript/gabsocial/components/status_list.js @@ -2,10 +2,10 @@ import { Fragment } from 'react'; import { debounce } from 'lodash'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import StatusContainer from '../../containers/status_container'; -import ScrollableList from '../scrollable_list'; -import TimelineQueueButtonHeader from '../timeline_queue_button_header'; -import ColumnIndicator from '../column_indicator'; +import StatusContainer from '../containers/status_container'; +import ScrollableList from './scrollable_list'; +import TimelineQueueButtonHeader from './timeline_queue_button_header'; +import ColumnIndicator from './column_indicator'; export default class StatusList extends ImmutablePureComponent { diff --git a/app/javascript/gabsocial/components/status_list/index.js b/app/javascript/gabsocial/components/status_list/index.js index 8c6aec58..377a5417 100644 --- a/app/javascript/gabsocial/components/status_list/index.js +++ b/app/javascript/gabsocial/components/status_list/index.js @@ -1 +1 @@ -export { default } from './status_list' \ No newline at end of file +export { default } from '../status_list' \ No newline at end of file diff --git a/app/javascript/gabsocial/components/status_quote/status_quote.js b/app/javascript/gabsocial/components/status_quote.js similarity index 90% rename from app/javascript/gabsocial/components/status_quote/status_quote.js rename to app/javascript/gabsocial/components/status_quote.js index 36d6777c..053eda6b 100644 --- a/app/javascript/gabsocial/components/status_quote/status_quote.js +++ b/app/javascript/gabsocial/components/status_quote.js @@ -1,6 +1,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; -import StatusContent from '../status_content'; -import DisplayName from '../display_name'; +import StatusContent from './status_content'; +import DisplayName from './display_name'; import { NavLink } from 'react-router-dom'; const mapStateToProps = (state, { id }) => ({ diff --git a/app/javascript/gabsocial/components/status_quote/index.js b/app/javascript/gabsocial/components/status_quote/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/app/javascript/gabsocial/components/status_revision_list/status_revision_list.js b/app/javascript/gabsocial/components/status_revision_list.js similarity index 77% rename from app/javascript/gabsocial/components/status_revision_list/status_revision_list.js rename to app/javascript/gabsocial/components/status_revision_list.js index bc2d959f..a0437529 100644 --- a/app/javascript/gabsocial/components/status_revision_list/status_revision_list.js +++ b/app/javascript/gabsocial/components/status_revision_list.js @@ -1,7 +1,6 @@ import { injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import ModalLoading from './modal_loading'; import RelativeTimestamp from './relative_timestamp'; export default @@ -17,13 +16,15 @@ class StatusRevisionsList extends ImmutablePureComponent { render() { const { loading, error, data } = this.props; - if (loading || !data) return ; + if (loading || !data) return null - if (error) return ( -
-
An error occured
-
- ); + if (error) { + return ( +
+
An error occured
+
+ ) + } return (
diff --git a/app/javascript/gabsocial/components/status_revision_list/index.js b/app/javascript/gabsocial/components/status_revision_list/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/app/javascript/gabsocial/features/account_timeline/account_timeline.js b/app/javascript/gabsocial/features/account_timeline/account_timeline.js index 3f3bdda4..f54305bc 100644 --- a/app/javascript/gabsocial/features/account_timeline/account_timeline.js +++ b/app/javascript/gabsocial/features/account_timeline/account_timeline.js @@ -4,7 +4,7 @@ import { List as ImmutableList } from 'immutable' import { injectIntl, defineMessages } from 'react-intl' import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines' import { fetchAccountIdentityProofs } from '../../actions/identity_proofs' -import StatusList from '../../components/status_list/status_list' +import StatusList from '../../components/status_list' const messages = defineMessages({ empty: { id: 'empty_column.account_timeline', defaultMessage: 'No gabs here!' }, diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js index 4bbf6155..4d3f4040 100644 --- a/app/javascript/gabsocial/features/group_create.js +++ b/app/javascript/gabsocial/features/group_create.js @@ -1,5 +1,9 @@ +import ImmutablePropTypes from 'react-immutable-proptypes' +import ImmutablePureComponent from 'react-immutable-pure-component' import { defineMessages, injectIntl } from 'react-intl' -import { changeValue, submit, reset } from '../actions/group_editor' +import isObject from 'lodash.isobject' +import { changeValue, submit, setUp, reset } from '../actions/group_editor' +import ColumnIndicator from '../components/column_indicator'; import Button from '../components/button' import Divider from '../components/divider' import Input from '../components/input' @@ -13,14 +17,25 @@ const messages = defineMessages({ coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' }, coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' }, create: { id: 'groups.form.create', defaultMessage: 'Create group' }, + update: { id: 'groups.form.update', defaultMessage: 'Update group' }, }) -const mapStateToProps = state => ({ - title: state.getIn(['group_editor', 'title']), - description: state.getIn(['group_editor', 'description']), - coverImage: state.getIn(['group_editor', 'coverImage']), - disabled: state.getIn(['group_editor', 'isSubmitting']), -}) +const mapStateToProps = (state, { params }) => { + + console.log('params:', params) + + const groupId = isObject(params) ? params['id'] : null + const group = state.getIn(['groups', groupId]) + + return { + group, + error: groupId && !group, + title: state.getIn(['group_editor', 'title']), + description: state.getIn(['group_editor', 'description']), + coverImage: state.getIn(['group_editor', 'coverImage']), + disabled: state.getIn(['group_editor', 'isSubmitting']), + } +} const mapDispatchToProps = dispatch => ({ onTitleChange: value => dispatch(changeValue('title', value)), @@ -28,18 +43,20 @@ const mapDispatchToProps = dispatch => ({ onCoverImageChange: value => dispatch(changeValue('coverImage', value)), onSubmit: routerHistory => dispatch(submit(routerHistory)), reset: () => dispatch(reset()), + setUp: group => dispatch(setUp(group)), }) export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl -class Create extends PureComponent { +class Create extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object } static propTypes = { + group: ImmutablePropTypes.map, title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, coverImage: PropTypes.object, @@ -50,7 +67,17 @@ class Create extends PureComponent { } componentWillMount() { - this.props.reset() + if (!this.props.group) { + this.props.reset() + } else { + this.props.setUp(this.props.group) + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.group !== nextProps.group && !!nextProps.group) { + this.props.setUp(nextProps.group) + } } handleTitleChange = e => { @@ -72,6 +99,8 @@ class Create extends PureComponent { render() { const { + group, + error, title, description, coverImage, @@ -79,6 +108,10 @@ class Create extends PureComponent { intl } = this.props + if (!group && error) { + return + } + return (
- {intl.formatMessage(messages.create)} + {intl.formatMessage(!!group ? messages.update : messages.create)} diff --git a/app/javascript/gabsocial/features/group_edit.js b/app/javascript/gabsocial/features/group_edit.js deleted file mode 100644 index 39e17639..00000000 --- a/app/javascript/gabsocial/features/group_edit.js +++ /dev/null @@ -1,137 +0,0 @@ -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { changeValue, submit, setUp } from '../../actions/group_editor'; -import { defineMessages, injectIntl } from 'react-intl'; -import ColumnIndicator from '../../components/column_indicator'; -import classNames from 'classnames'; - -const messages = defineMessages({ - title: { id: 'groups.form.title', defaultMessage: 'Title' }, - description: { id: 'groups.form.description', defaultMessage: 'Description' }, - coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload new banner image (optional)' }, - coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' }, - update: { id: 'groups.form.update', defaultMessage: 'Update group' }, -}); - -const mapStateToProps = (state, props) => ({ - group: state.getIn(['groups', props.params.id]), - title: state.getIn(['group_editor', 'title']), - description: state.getIn(['group_editor', 'description']), - coverImage: state.getIn(['group_editor', 'coverImage']), - disabled: state.getIn(['group_editor', 'isSubmitting']), -}); - -const mapDispatchToProps = dispatch => ({ - onTitleChange: value => dispatch(changeValue('title', value)), - onDescriptionChange: value => dispatch(changeValue('description', value)), - onCoverImageChange: value => dispatch(changeValue('coverImage', value)), - onSubmit: routerHistory => dispatch(submit(routerHistory)), - setUp: group => dispatch(setUp(group)), -}); - -export default -@connect(mapStateToProps, mapDispatchToProps) -@injectIntl -class Edit extends ImmutablePureComponent { - - static contextTypes = { - router: PropTypes.object, - } - - static propTypes = { - group: ImmutablePropTypes.map, - title: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - coverImage: PropTypes.object, - disabled: PropTypes.bool, - intl: PropTypes.object.isRequired, - onTitleChange: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - }; - - componentWillMount(nextProps) { - if (this.props.group) { - this.props.setUp(this.props.group); - } - } - - componentWillReceiveProps(nextProps) { - if (!this.props.group && nextProps.group) { - this.props.setUp(nextProps.group); - } - } - - handleTitleChange = e => { - this.props.onTitleChange(e.target.value); - } - - handleDescriptionChange = e => { - this.props.onDescriptionChange(e.target.value); - } - - handleCoverImageChange = e => { - this.props.onCoverImageChange(e.target.files[0]); - } - - handleSubmit = e => { - e.preventDefault(); - this.props.onSubmit(this.context.router.history); - } - - handleClick = () => { - this.props.onSubmit(this.context.router.history); - } - - render() { - const { group, title, description, coverImage, disabled, intl } = this.props; - - if (typeof group === 'undefined') { - return - } else if (group === false) { - return - } - - return ( - -
- -
- -
-