mainfeed | fix 01

config/app.settings.js

@@ -22,5 +22,5 @@ export var DevOptions = {
     CurrentBundle: 'light_ng',
     // In KB
     MaximunAPIPayload: '101376',
-    limit_post_catch: ReturnDevOption('limit_post_catch')
+    limit_post_catch: '20'
 }

package.json

@@ -2,7 +2,7 @@
   "name": "comty-development",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "",
   "main": "index.js",
   "author": "RageStudio",

src/components/MainFeed/index.js

@@ -2,12 +2,11 @@ import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
 
-import InfiniteScroll from 'react-infinite-scroller';
-
 import {PostCard} from 'components'
 
 var userData = ycore.SDCP()
 
+
 export function RefreshFeed(){
     ycore.yconsole.log('Refreshing Feed...')
     window.MainFeedComponent.handleRefreshList();
@@ -18,132 +17,127 @@ class MainFeed extends React.Component {
         super(props)
         window.MainFeedComponent = this;
         this.state = {
-            feedRaw: [],
+            loading: false,
-            loading: true,
+            data: [],
-            hasMore: true,
+            fkey: 0
         }
     }
+    handleRefreshList(){
+        this.GetPostsData.first()
+    }
 
     toogleLoader(){
         this.setState({ loading: !this.state.loading })
     }
-    
+    last (array, n) {
-    GetPostsData(fkey){
+        if (array == null) 
-        const { get, uid, filters } = this.props;
+          return void 0;
-        if (!get) {
+        if (n == null) 
-            ycore.yconsole.error('Please, fill params with an catch type...')
+           return array[array.length - 1];
-            return
+        return array.slice(Math.max(array.length - n, 0));  
-        }
+     };
-        if (!fkey) {
+    FirstGet(fkey) {
-            ycore.yconsole.warn('Please, provide a fkey for offset the feed, default using => 0');
+         try{
-            
+             const { get, uid, filters } = this.props;
-        }
+             if (!get) {
-        this.toogleLoader()
+                 ycore.yconsole.error('Please, fill params with an catch type...')
-        ycore.GetPosts(uid, get, (fkey || '0'), (err, result) => {
+                 return
-            this.setState({ feedRaw: result, loading: false })
+             }
-        })
+
+             this.toogleLoader()
+             ycore.GetPosts(uid, get, '0', (err, result) => {
+                 this.setState({ data: JSON.parse(result)['data'], loading: false })
+             })
+         }catch(err){
+             ycore.notifyError('err')
+         }
     }
 
+    GetMore(fkey){
+         try{
+             const { get, uid, filters } = this.props;
+             if (!get) {
+                 ycore.yconsole.error('Please, fill params with an catch type...')
+                 return
+             }
+             if (!fkey) {
+                 ycore.yconsole.warn('Please, provide a fkey for offset the feed, default using => 0');  
+             }
+             this.toogleLoader()
+             const getLastPost = this.last(this.state.data)
+             ycore.yconsole.log('LAST POST ID =>', getLastPost.id)
+             ycore.GetPosts(uid, get, getLastPost.id, (err, res) => { 
+                 if (err){return false} 
+           
+                 const oldData = this.state.data
+                 const parsed = JSON.parse(res)['data']
+                 const mix = oldData.concat(parsed)
+
+                 this.setState({ data: mix, loading: false })
+                 window.dispatchEvent(new Event('resize'));
+                 return true
+                
+                })
+    
+           
+         }catch(err){
+             ycore.notifyError(err)
+         }
+    
+    }
+        
+
     componentDidMount(){
-        this.GetPostsData()
+        this.FirstGet()
-        
     }
 
-    renderFeedPosts = (e) =>{
+    
-        const {feedRaw} = this.state
+    renderFeedPosts = () =>{
-        const { get, filters } = this.props
+        const {data, loading} = this.state  
+        const loadMore =
+        !loading ? (
+          <div
+            style={{
+              textAlign: 'center',
+              marginTop: 12,
+              height: 32,
+              lineHeight: '32px',
+            }}
+          >
+            <antd.Button onClick={() => this.GetMore()}>More</antd.Button>
+          </div>
+        ) : null;      
         try {
-            const feedParsed = JSON.parse(feedRaw)['data']
+      
-            ycore.yconsole.log(feedParsed)
+            ycore.yconsole.log(data)
             return (
-                feedParsed.map(item=> {
+                <antd.List
-                    const {id, postText, post_time, publisher, postFile, postFileName, is_liked, is_post_saved, is_post_reported, is_post_boosted, is_post_pinned, post_likes} = item
+                loadMore={loadMore}
-                    const paylodd = {
+
-                      id: id,
+                className="demo-loadmore-list"
-                      user: publisher.username, 
+                itemLayout="horizontal"
-                      ago: post_time, 
+                dataSource={data}
-                      avatar: publisher.avatar, 
+                renderItem={item => (<PostCard payload={item} key={item.id} />)}
-                      content: postText, 
+                />
-                      file: postFile, 
+                
-                      postFileName: postFileName, 
-                      publisher: publisher,
-                      post_likes: post_likes,
-                      is_liked: is_liked,  
-                      is_post_saved: is_post_saved,
-                      is_post_reported: is_post_reported,
-                      is_post_boosted: is_post_boosted,
-                      is_post_pinned: is_post_pinned,
-                    }
-                    return <PostCard payload={paylodd} key={id} />
-                })
             )
         } catch (err) {
-            ycore.notifyError(err)
+            return false
-            const paylodd = {user: '', ago: '', avatar: '', content: '',  publisher: '' }
-            return <PostCard payload={paylodd} />
         }
     }
 
-    handleInfiniteOnLoad = () => {
-      const { get, uid, filters } = this.props;
-      let { feedRaw } = this.state;
-      this.setState({
-        loading: true,
-      });
-      if (feedRaw.length > 300) {
-        antd.message.warning('Infinite List loaded all');
-        this.setState({
-          hasMore: false,
-          loading: false,
-        });
-        return;
-      }
-      console.log('LENGTHT', feedRaw.length)
-      ycore.GetPostsData(uid, get, feedRaw.length, (err, res) => {
-        feedRaw = feedRaw.concat(res.results);
-        this.setState({
-          feedRaw,
-          loading: false,
-        });
-      });
-    };
-    
- 
-
     render(){
-        const { loading, feedRaw } = this.state;   
+        const { loading } = this.state;
-        const loaderCard = ( <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
+
-        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
-    </antd.Card>)
-    
         return (
-            <div>      
+           <div> 
-                <InfiniteScroll
+               { loading? 
-          initialLoad={false}
+                 <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
-          pageStart={0}
+                        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
-          loadMore={this.handleInfiniteOnLoad}
+                 </antd.Card>
-          hasMore={!this.state.loading && this.state.hasMore}
+                : this.renderFeedPosts() 
-          useWindow={false}
+                }
-        >
+          
-          <List
-            dataSource={this.state.feedRaw}
-            renderItem={item => (
-              <List.Item key={item.id}>
-                <List.Item.Meta
-                  avatar={
-                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-                  }
-                  title={<a href="https://ant.design">{item.name.last}</a>}
-                  description={item.email}
-                />
-                <div>Content</div>
-              </List.Item>
-            )}
-          >
-            {this.state.loading && this.state.hasMore && (loaderCard)}
-          </List>
-        </InfiniteScroll>
-              
             </div>
         )
     }

src/components/PostCard/index.js

@@ -61,7 +61,7 @@ class PostCard extends React.PureComponent{
     render(){
         const { payload, customActions } = this.props
         const ActShowMode = ycore.DevOptions.force_show_postactions
-        const { id, user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload;
+        const { id, post_time, postText, postFile, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload;
         const defaultActions = [
             <div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,
             <MICON.InsertComment key="share" />,
@@ -88,13 +88,13 @@ class PostCard extends React.PureComponent{
           <div className={styles.cardWrapper}>
              <antd.Card hoverable className={ActShowMode? styles.showMode : null} actions={actions} >
                 <Meta
-                    avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
+                    avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={publisher.avatar} /></div>}
-                    title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${user}`)} className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? (<Icons.PushpinFilled /> ): null }</div> </div>}
+                    title={<div className={styles.titleWrapper} ><h4 onClick={() => ycore.crouter.native(`@${publisher.username}`)} className={styles.titleUser}>@{publisher.username} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> <div className={styles.PostTags}>{ycore.booleanFix(is_post_pinned)? (<Icons.PushpinFilled /> ): null }</div> </div>}
-                    description={<span className={styles.textAgo}>{ago}</span>}
+                    description={<span className={styles.textAgo}>{post_time}</span>}
                     bordered="false"
                 />
-                {content? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html:  content }}  /> </div> : null}
+                {postText? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html:  postText }}  /> </div> : null}
-                {file? <div className={styles.postContentFILE}>{this.renderPostPlayer(file)}</div> : null }
+                {postFile? <div className={styles.postContentFILE}>{this.renderPostPlayer(postFile)}</div> : null }
                 <div className={styles.ellipsisIcon}><Icons.EllipsisOutlined /></div>