fixed insights->users scroll; replaced react-tweet-embed with react-t…

…witter-embed; using explore tweet component instead of tweet embed wherever possible

package.json

@@ -94,7 +94,7 @@
     "react-redux": "^7.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-tweet-embed": "^1.2.2",
+    "react-twitter-embed": "^3.0.3",
     "redis": "^2.8.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

src/archive/app/Archive.js

@@ -12,7 +12,6 @@ import WebpagesBody from '../../client/components/Insights/WebpagesBody'
 import styles from '../../client/containers/App.css'
 
 const search = window.searchData
-console.log(search)
 
 class App extends MediaQueryComponent {
   constructor(props) {
@@ -25,6 +24,7 @@ class App extends MediaQueryComponent {
       ii_tweets: [],
       vi_tweets: [],
       wi_tweets: [],
+      users: search.users.slice(0, 100),
       isHome: true
     }
   }
@@ -45,11 +45,17 @@ class App extends MediaQueryComponent {
 
   getTweets(searchId, includeRetweets, offset, page) {
     this.setState({
-      ti_tweets: search.tweets.slice(offset, offset + 101),
+      ti_tweets: search.users.slice(offset, offset + 101),
       ti_page: page
     })
   }
 
+  getUsers(searchId, total) {
+    this.setState({
+      users: search.users.slice(0, total),
+    })
+  }
+
   makeModalData(tweet) {
     // Structure data from tweet into a minimal object for TweetsModal
     const userInfo = {
@@ -148,7 +154,9 @@ class App extends MediaQueryComponent {
             <Route exact name="tweets" path="/search/:searchId/users/" component={() => (
               <div>{header} <UsersBody
                 searchId={search.id}
-                search={search}
+                users={this.state.users}
+                userCount={search.userCount}
+                getUsers={(s, o) => this.getUsers(s, o)}
                 getTweetsForUser={(s, u) => this.getTweetsForUser(s, u)}
                 resetTweets={() => {this.setState({ui_tweets: []})}}
                 tweets={this.state.ui_tweets}

src/client/components/Collections/Collection.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
-import TweetEmbed from 'react-tweet-embed'
+import {TwitterTweetEmbed} from 'react-twitter-embed'
 import FindMe from './FindMe'
 
 import Grid from '@material-ui/core/Grid'
@@ -103,7 +103,7 @@ export default class CollectionList extends Component {
     let tweets = 'Loading tweets...'
     if (this.props.search.tweets.length > 0) {      
       tweets = this.props.search.tweets.slice(this.randomTweet, this.randomTweet + 2).map((t, i) => {
-        return <TweetEmbed key={`t${i}`} id={t.id} />
+        return <TwitterTweetEmbed key={`t${i}`} tweetId={t.id} />
       })
     }
 
@@ -135,7 +135,7 @@ export default class CollectionList extends Component {
             return (
               <Grid container spacing={0} key={`ut${i}`}>
                 <Grid item xs={2}><Checkbox color="primary" checked={this.state.checkedTweets[i] || false} onChange={() => this.toggleOneTweet(i)} /></Grid>
-                <Grid item xs={10}><TweetEmbed id={tweetId} /></Grid>
+                <Grid item xs={10}><TwitterTweetEmbed tweetId={tweetId} /></Grid>
               </Grid>
             )            
           })}

src/client/components/Explore/Tweet.css

@@ -1,5 +1,7 @@
 
 .Tweet {
+  background-color: #fff;
+  break-inside: avoid;
   margin: 2px;
   padding: 6px;
   padding-left: 2px;

src/client/components/Insights/InsightsBody.js

@@ -5,7 +5,7 @@ import UserList from '../Explore/UserList'
 import HashtagChart from '../Explore/HashtagChart'
 import ImageList from '../Explore/ImageList'
 import VideoList from '../Explore/VideoList'
-import TweetEmbed from 'react-tweet-embed'
+import Tweet from '../Explore/Tweet'
 
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
@@ -104,7 +104,7 @@ export default class InsightsBody extends Component {
         <Card raised className={card.Card} >
           <CardContent className={`${card.Scroll} ${card.NoPadding}`}>
             {this.props.search.tweets.slice(0, 10).map((t, i) => {
-              return <TweetEmbed key={`t${i}`} id={t.id} />
+              return <Tweet key={`t${i}`} data={t} />
             })}
           </CardContent>
           <CardActions className={card.CardActions}>

src/client/components/Insights/Tweets.css

@@ -1,8 +1,8 @@
 .Holder {
   margin: 45px auto;
+  min-height: 250px;
   max-width: 90%;
   background-color: #002984;
-  line-height: 0;
   column-width: 300px;
   column-count: auto;
   column-gap: 5px;

src/client/components/Insights/TweetsBody.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import TweetEmbed from 'react-tweet-embed'
 import Slider from '@material-ui/core/Slider'
 import FormControl from '@material-ui/core/FormControl'
 import FormGroup from '@material-ui/core/FormGroup'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Checkbox from '@material-ui/core/Checkbox'
-import TablePagination from '@material-ui/core/TablePagination';
+import TablePagination from '@material-ui/core/TablePagination'
+import Tweet from '../Explore/Tweet'
 
 import style from './Tweets.css' 
 
@@ -17,21 +17,18 @@ class TweetsBody extends Component {
     this.timerId = null
     this.state = {
       postsToShow: this.props.chunkSize,
-      rangeValue: [1, 100],
-      displayRetweets: this.props.displayRetweets
+      rangeValue: [0, 99],
+      displayRetweets: this.props.displayRetweets,
     }
     this.tweets = this.props.tweets
+    this.rendered = 0
     // NB. Page is handled as a property by default,
     // but it can also be passed as a prop, in which case 
     // the parent component should handle state update
     // to trigger render.
     this.page = 0
   }
 
-  componentDidMount() {
-    window.addEventListener(`scroll`, () => this.handleScroll())
-  }
-
   componentDidUpdate() {
     if (this.tweets.length > 0 && this.props.tweets.length > 0) {
       if (this.tweets[0].id !== this.props.tweets[0].id) {
@@ -45,32 +42,12 @@ class TweetsBody extends Component {
     if (offset <= this.props.tweetCount) {
       this.props.getTweets(this.props.searchId, true, offset, p)
       this.page = p
-    }    
-  }
-
-  update() {
-    const distanceToBottom =
-      document.documentElement.offsetHeight -
-      (window.scrollY + window.innerHeight)
-    if (distanceToBottom < 150) {
-      this.setState({
-        postsToShow: this.state.postsToShow + this.props.chunkSize
-      })
-    }
-    this.ticking = false
-  }
-
-  handleScroll() {
-    if (!this.ticking) {
-      this.ticking = true
-      requestAnimationFrame(() => this.update())
     }
   }
 
   handleSlide(e, newValue) {
     this.setState({
-      rangeValue: newValue,
-      postsToShow: this.props.chunkSize
+      rangeValue: [newValue[0] - 1, newValue[1] - 1]
     })
   }
 
@@ -81,7 +58,10 @@ class TweetsBody extends Component {
   render() {
     let tweets = this.tweets
     // Reduce tweets based on selected range
-    tweets = tweets.filter((t, i) => i > this.state.rangeValue[0] && i <= this.state.rangeValue[1] + 1)
+    tweets = tweets.filter((t, i) => i >= this.state.rangeValue[0] && i <= this.state.rangeValue[1])
+
+    const page = this.props.page ? this.props.page : this.page
+
     return (
       <div>
         <div className={style.Controls}>     
@@ -97,7 +77,7 @@ class TweetsBody extends Component {
           <div>
             <div style={{paddingTop: "40px"}}>
               <Slider
-                value={this.state.rangeValue}
+                value={[this.state.rangeValue[0] + 1, this.state.rangeValue[1] + 1]}
                 valueLabelFormat={(v) => {
                   const c = v + (this.page * 100)
                   if (c > this.props.tweetCount) {
@@ -123,7 +103,7 @@ class TweetsBody extends Component {
               rowsPerPage={100}
               rowsPerPageOptions={[100]}
               labelRowsPerPage="Tweets per page:"
-              page={this.props.page ? this.props.page : this.page}
+              page={page}
               onChangePage={(e, p) => {this.handlePageChange(e, p)} }
             />
           </div>
@@ -133,10 +113,9 @@ class TweetsBody extends Component {
         <div className={style.Holder}>{
           tweets
             .filter(t => this.state.displayRetweets || !t.retweet)
-            .slice(0, this.state.postsToShow).map((t, i) => {
-              return <TweetEmbed key={`t${i}`} id={t.id} />
-            })
-        }</div>
+            .slice(0, this.state.postsToShow).map((t, i) => <Tweet key={`t${i}`} data={t} />)
+        }
+        </div>
 
       </div>
     )

src/client/components/Insights/TweetsModal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import TweetEmbed from 'react-tweet-embed'
+import {TwitterTweetEmbed} from 'react-twitter-embed'
 import Modal from 'react-modal'
 
 import style from './TweetsModal.css'
@@ -49,8 +49,8 @@ export default class TweetsModal extends Component {
           return (
             <div key={tweet.id} className={className}>
               {userInfo}
-              <TweetEmbed
-                id={tweet.id}
+              <TwitterTweetEmbed
+                tweetId={tweet.id}
                 options={{cards: 'hidden'}} />
             </div>
           )

src/client/components/Insights/UsersBody.js

@@ -4,6 +4,8 @@ import User from './User'
 import TweetsModal from './TweetsModal'
 
 import cardStyle from '../Card.css'
+import animations from '../animations.css'
+import exploreStyles from '../Explore/Explore.css'
 
 export default class UsersBody extends Component {
 
@@ -12,46 +14,54 @@ export default class UsersBody extends Component {
     this.modalOpen = true
     this.users = this.props.users
     this.offset = 0
+    this.loading = false
+
+    this.handleScroll = () => {
+      requestAnimationFrame(() => this.update())
+    }
   }
 
   closeModal() {
     this.props.resetTweets()
   }
 
-  componentDidMount() {
-    window.addEventListener(`scroll`, () => this.handleScroll())
-  }
-
   componentDidUpdate() {
     if (this.users && this.props.users.length > 0) {
       if (this.users[this.users.length - 1].id !== this.props.users[this.props.users.length - 1].id) {
         this.users = this.users.concat(this.props.users)
+        this.loading = true
+        window.addEventListener('scroll', this.handleScroll)
       }
     }
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
   update() {
     const distanceToBottom =
       document.documentElement.offsetHeight -
       (window.scrollY + window.innerHeight)
     if (distanceToBottom < 150) {
+      window.removeEventListener(`scroll`, this.handleScroll)
       this.offset = this.offset + 100
-      if (this.offset <= this.props.userCount) {
+      if (this.offset <= this.props.userCount) {        
+        this.loading = true
         this.props.getUsers(this.props.searchId, this.offset)
       }
     }
-    this.ticking = false
-  }
-
-  handleScroll() {
-    if (!this.ticking) {
-      this.ticking = true
-      requestAnimationFrame(() => this.update())
-    }
   }
 
   render() {
     const modalOpen = this.props.tweets.length > 0
+    const loader = !this.loading ? '' : (<span className={`${animations.Spin} ${exploreStyles.Loader}`}>
+      <ion-icon name="logo-ionic"></ion-icon>
+    </span>)
 
     return (
       <div>
@@ -62,23 +72,24 @@ export default class UsersBody extends Component {
           tweets={this.props.tweets} />
 
         <div className={cardStyle.CardHolder}>
-          {this.users.map((i) => {
-            return (
+          {this.users.map((t, i) => {
+            return (<>{i}
               <User
-                key={i.id}
-                name={i.name}
-                screenName={i.screenName}
-                avatarUrl={i.avatarUrl}
-                url={i.url}
-                created={i.created}
-                desc={i.description}
-                count={i.tweetsInSearch}
-                friends={i.friendsCount}
-                followers={i.followersCount}
+                key={t.id}
+                name={t.name}
+                screenName={t.screenName}
+                avatarUrl={t.avatarUrl}
+                url={t.url}
+                created={t.created}
+                desc={t.description}
+                count={t.tweetsInSearch}
+                friends={t.friendsCount}
+                followers={t.followersCount}
                 searchId={this.props.searchId}
-                getTweetsForUser={this.props.getTweetsForUser} />
+                getTweetsForUser={this.props.getTweetsForUser} /></>
             )
           })}
+          {loader}
         </div>
 
       </div>