Added Timeline Injections

• Added:
- Timeline Injections
- FeaturedGroupsInjection, GroupCategoriesInjection, ProUpgradeInjection, PWAInjection, ShopInjection, TimelineInjectionBase, TimelineInjectionLayout, TimelineInjectionRoot, UserSuggestionsInjection
- Constants
- Redux for timeline_injections
- settings for setting
- popover for dismissing and saving weight

app/javascript/gabsocial/components/popover/popover_root.js

@@ -14,6 +14,7 @@ import {
   POPOVER_STATUS_OPTIONS,
   POPOVER_STATUS_EXPIRATION_OPTIONS,
   POPOVER_STATUS_VISIBILITY,
+  POPOVER_TIMELINE_INJECTION_OPTIONS,
   POPOVER_USER_INFO,
   POPOVER_VIDEO_STATS,
 } from '../../constants'
@@ -32,6 +33,7 @@ import {
   StatusExpirationOptionsPopover,
   StatusOptionsPopover,
   StatusVisibilityPopover,
+  TimelineInjectionOptionsPopover,
   UserInfoPopover,
   VideoStatsPopover,
 } from '../../features/ui/util/async_components'
@@ -64,6 +66,7 @@ POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
 POPOVER_COMPONENTS[POPOVER_STATUS_EXPIRATION_OPTIONS] = StatusExpirationOptionsPopover
 POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
+POPOVER_COMPONENTS[POPOVER_TIMELINE_INJECTION_OPTIONS] = TimelineInjectionOptionsPopover
 POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
 POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover
 

app/javascript/gabsocial/components/popover/timeline_injection_options_popover.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { hideTimelineInjection } from '../../actions/timeline_injections'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+class TimelineInjectionOptionsPopover extends React.PureComponent {
+
+  handleOnClick = () => {
+    this.props.onDismissInjection()
+    this.props.onDismiss()
+    this.props.onClosePopover()
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const { intl, isXS } = this.props
+
+    return (
+      <PopoverLayout
+        width={280}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          size={isXS ? 'large' : 'small'}
+          scrollKey='timeline_injection_options'
+          items={[{
+            hideArrow: true,
+            title: intl.formatMessage(messages.dismissMessage),
+            onClick: this.handleOnClick,
+          }]}
+        />
+      </PopoverLayout>
+    )
+  }
+}
+
+const messages = defineMessages({
+  dismissMessage: { id: 'timeline_injection_popover.dismiss_message', defaultMessage: 'Show this content less often' },
+})
+
+
+const mapDispatchToProps = (dispatch, { timelineInjectionId }) => ({
+  onDismissInjection() {
+    dispatch(hideTimelineInjection(timelineInjectionId))
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+TimelineInjectionOptionsPopover.propTypes = {
+  intl: PropTypes.object.isRequired,
+  isXS: PropTypes.bool,
+  timelineInjectionId: PropTypes.string.isRequired,
+  onClosePopover: PropTypes.func.isRequired,
+  onDismissInjection: PropTypes.func.isRequired,
+  onDismiss: PropTypes.func.isRequired,
+}
+
+export default injectIntl(connect(null, mapDispatchToProps)(TimelineInjectionOptionsPopover))