From b9f15b28a62c8b22f17842bba9ffc6e5e3cec156 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Thu, 29 Oct 2020 23:33:50 -0500
Subject: [PATCH] Added timeline injections when empty Home timeline or
 Notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- timeline injections when empty Home timeline or Notifications on all tab
---
 .../gabsocial/components/status_list.js       | 23 ++++++++++++++++
 .../gabsocial/features/notifications.js       | 26 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/app/javascript/gabsocial/components/status_list.js b/app/javascript/gabsocial/components/status_list.js
index a32b264d..f0975cc0 100644
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -7,6 +7,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { createSelector } from 'reselect'
 import debounce from 'lodash.debounce'
 import { me, promotions } from '../initial_state'
+import {
+  TIMELINE_INJECTION_FEATURED_GROUPS,
+  TIMELINE_INJECTION_GROUP_CATEGORIES,
+  TIMELINE_INJECTION_USER_SUGGESTIONS,
+} from '../constants'
 import { dequeueTimeline, scrollTopTimeline } from '../actions/timelines'
 import { showTimelineInjection } from '../actions/timeline_injections'
 import { fetchStatus, fetchContext } from '../actions/statuses'
@@ -15,6 +20,7 @@ import StatusPlaceholder from './placeholder/status_placeholder'
 import ScrollableList from './scrollable_list'
 import TimelineQueueButtonHeader from './timeline_queue_button_header'
 import TimelineInjectionBase from './timeline_injections/timeline_injection_base'
+import TimelineInjectionRoot from './timeline_injections/timeline_injection_root'
 
 class StatusList extends ImmutablePureComponent {
 
@@ -175,6 +181,8 @@ class StatusList extends ImmutablePureComponent {
     }
 
     let scrollableContent = []
+    let emptyContent = []
+    const canShowEmptyContent = scrollableContent.length === 0 && statusIds.size === 0 && scrollKey === 'home_timeline'
     
     if (isLoading || statusIds.size > 0) {
       for (let i = 0; i < statusIds.count(); i++) {
@@ -255,6 +263,15 @@ class StatusList extends ImmutablePureComponent {
       )).concat(scrollableContent)
     }
 
+    if (canShowEmptyContent) {
+      emptyContent = [
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} key='empty-injection-0' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_FEATURED_GROUPS} key='empty-injection-1' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} props={{suggestionType:'verified'}} key='empty-injection-2' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_GROUP_CATEGORIES} key='empty-injection-3' />,
+      ]
+    }
+
     return (
       <React.Fragment>
         <TimelineQueueButtonHeader
@@ -278,6 +295,12 @@ class StatusList extends ImmutablePureComponent {
         >
           {scrollableContent}
         </ScrollableList>
+        {
+          canShowEmptyContent &&
+          <div className={[_s.d, _s.mt15, _s.w100PC].join(' ')}>
+            {emptyContent}
+          </div>
+        }
       </React.Fragment>
     )
   }
diff --git a/app/javascript/gabsocial/features/notifications.js b/app/javascript/gabsocial/features/notifications.js
index f6afe3c0..31033898 100644
--- a/app/javascript/gabsocial/features/notifications.js
+++ b/app/javascript/gabsocial/features/notifications.js
@@ -13,12 +13,18 @@ import {
   dequeueNotifications,
   forceDequeueNotifications,
 } from '../actions/notifications'
+import {
+  TIMELINE_INJECTION_FEATURED_GROUPS,
+  TIMELINE_INJECTION_GROUP_CATEGORIES,
+  TIMELINE_INJECTION_USER_SUGGESTIONS,
+} from '../constants'
 import NotificationContainer from '../containers/notification_container'
 import ScrollableList from '../components/scrollable_list'
 import TimelineQueueButtonHeader from '../components/timeline_queue_button_header'
 import Block from '../components/block'
 import Account from '../components/account'
 import NotificationPlaceholder from '../components/placeholder/notification_placeholder'
+import TimelineInjectionRoot from '../components/timeline_injections/timeline_injection_root'
 
 class Notifications extends ImmutablePureComponent {
 
@@ -78,6 +84,7 @@ class Notifications extends ImmutablePureComponent {
 
   render() {
     const {
+      notifications,
       sortedNotifications,
       isLoading,
       hasMore,
@@ -87,6 +94,8 @@ class Notifications extends ImmutablePureComponent {
     const { changedTabs } = this.state
 
     let scrollableContent = null
+    let emptyContent = []
+    const canShowEmptyContent = !scrollableContent && !isLoading && notifications.size === 0 && selectedFilter === 'all'
 
     if (isLoading && this.scrollableContent && !changedTabs) {
       scrollableContent = this.scrollableContent
@@ -122,6 +131,16 @@ class Notifications extends ImmutablePureComponent {
       })
     }
 
+    if (canShowEmptyContent) {
+      emptyContent = [
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} key='empty-injection-0' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_FEATURED_GROUPS} key='empty-injection-1' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_USER_SUGGESTIONS} props={{suggestionType:'verified'}} key='empty-injection-2' />,
+        <TimelineInjectionRoot type={TIMELINE_INJECTION_GROUP_CATEGORIES} key='empty-injection-3' />,
+      ]
+    }
+
+
     this.scrollableContent = scrollableContent
 
     return (
@@ -147,6 +166,13 @@ class Notifications extends ImmutablePureComponent {
             {scrollableContent}
           </ScrollableList>
         </Block>
+
+        {
+          canShowEmptyContent &&
+          <div className={[_s.d, _s.mt15, _s.w100PC].join(' ')}>
+            {emptyContent}
+          </div>
+        }
       </React.Fragment>
     )
   }