mainfeed | fix 2 & file support | fix 5

src/@ycore/ycore_worker.js

@@ -55,6 +55,20 @@ export function b64toBlob(b64Data, contentType, sliceSize) {
   var blob = new Blob(byteArrays, {type: contentType});
   return blob;
 }
+export function objectLast(array, n) {
+    if (array == null) 
+      return void 0;
+    if (n == null) 
+       return array[array.length - 1];
+    return array.slice(Math.max(array.length - n, 0));  
+};
+export function gotoBottom(id){
+    const element = document.getElementById(id);
+    element.scrollTop = element.scrollHeight - element.clientHeight;
+}
+export function gotoElement(element){   
+     document.getElementById(element).scrollIntoView();   
+}
 
 /**
  * Return parsed some information about this App

src/components/MainFeed/index.js

@@ -1,15 +1,13 @@
 import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons'
 
 import {PostCard} from 'components'
 
-var userData = ycore.SDCP()
-
-
 export function RefreshFeed(){
     ycore.yconsole.log('Refreshing Feed...')
-    window.MainFeedComponent.handleRefreshList();
+    window.MainFeedComponent.FirstGet();
     return
 }
 class MainFeed extends React.Component {
@@ -22,37 +20,33 @@ class MainFeed extends React.Component {
             fkey: 0
         }
     }
-    handleRefreshList(){
+
-        this.GetPostsData.first()
+    componentDidMount(){
+        this.FirstGet()
     }
 
     toogleLoader(){
         this.setState({ loading: !this.state.loading })
     }
-    last (array, n) {
+ 
-        if (array == null) 
+    FirstGet() {
-          return void 0;
-        if (n == null) 
-           return array[array.length - 1];
-        return array.slice(Math.max(array.length - n, 0));  
-     };
-    FirstGet(fkey) {
          try{
              const { get, uid, filters } = this.props;
              if (!get) {
                  ycore.yconsole.error('Please, fill params with an catch type...')
                  return
              }
-
              this.toogleLoader()
              ycore.GetPosts(uid, get, '0', (err, result) => {
-                 this.setState({ data: JSON.parse(result)['data'], loading: false })
+                 const parsed = JSON.parse(result)['data']
+                 const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false 
+                 this.setState({ isEnd: isEnd, data: parsed, loading: false })
              })
          }catch(err){
              ycore.notifyError('err')
          }
     }
-
+   
     GetMore(fkey){
          try{
              const { get, uid, filters } = this.props;
@@ -64,62 +58,46 @@ class MainFeed extends React.Component {
                  ycore.yconsole.warn('Please, provide a fkey for offset the feed, default using => 0');  
              }
              this.toogleLoader()
-             const getLastPost = this.last(this.state.data)
+             const getLastPost = ycore.objectLast(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)
-
+                 const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false 
-                 this.setState({ data: mix, loading: false })
+                 this.setState({ isEnd: isEnd, data: mix, loading: false }, () =>  ycore.gotoElement(getLastPost.id) )
-                 window.dispatchEvent(new Event('resize'));
                  return true
-                
                 })
-    
-           
          }catch(err){
              ycore.notifyError(err)
          }
     
     }
-        
-
-    componentDidMount(){
-        this.FirstGet()
-    }
-
     
     renderFeedPosts = () =>{
-        const {data, loading} = this.state  
+        const {data, loading, isEnd} = this.state  
         const loadMore =
-        !loading ? (
+        !isEnd && !loading ? (
-          <div
+          <div style={{
-            style={{
               textAlign: 'center',
               marginTop: 12,
               height: 32,
               lineHeight: '32px',
             }}
           >
-            <antd.Button onClick={() => this.GetMore()}>More</antd.Button>
+            <antd.Button type="ghost" icon={<Icons.DownSquareOutlined />} onClick={() => this.GetMore()} />
           </div>
         ) : null;      
         try {
-      
             ycore.yconsole.log(data)
             return (
-                <antd.List
+              <antd.List
-                loadMore={loadMore}
+                  loadMore={loadMore}
-
+                  dataSource={data}
-                className="demo-loadmore-list"
+                  renderItem={item => (<div id={item.id}><PostCard payload={item} key={item.id} /></div>)}
-                itemLayout="horizontal"
+              />
-                dataSource={data}
-                renderItem={item => (<PostCard payload={item} key={item.id} />)}
-                />
-                
             )
         } catch (err) {
             return false
@@ -128,9 +106,8 @@ class MainFeed extends React.Component {
 
     render(){
         const { loading } = this.state;
-
         return (
-           <div> 
+           <div id='mainfeed'> 
                { loading? 
                  <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
                         <antd.Skeleton avatar paragraph={{ rows: 4 }} active />

src/components/PostCard/index.less

@@ -119,8 +119,11 @@
     border-radius: 3px;
     margin: 23px 24px 23px 24px;
     h3{
-        color: rgb(85, 85, 85);
+        font-family: "Poppins", sans-serif;
-        font-weight: 470;
+        color: #555555;
+        font-weight: 400;
+        font-size: 15px;
+        letter-spacing: -0.3px;
     }
 }
 .postContentFILE{

src/components/PostCreator/index.js

@@ -35,8 +35,7 @@ class PostCreator extends React.PureComponent{
             posting: false,
             posting_ok: false,
             shareWith: 'any',
-            UploadActive: false,
+            uploader: false,
-            dragging: false,
         }
     }
     renderPostPlayer(payload){
@@ -73,7 +72,7 @@ class PostCreator extends React.PureComponent{
     }
 
     ToogleUpload(){
-        this.setState({ UploadActive: !this.state.UploadActive })
+        this.setState({ uploader: !this.state.uploader })
     }
 
     handleFileUpload = info => {
@@ -82,8 +81,7 @@ class PostCreator extends React.PureComponent{
           return;
         }
         if (info.file.status === 'done') {
-          this.ToogleUpload()
+          this.setState({ file: info.file.originFileObj, uploader: false })
-          this.setState({ file: info.file.originFileObj })
           getBase64(info.file.originFileObj, fileURL =>
             this.setState({
               fileURL,
@@ -93,7 +91,7 @@ class PostCreator extends React.PureComponent{
         }
     };
 
-    beforeUpload(file) {
+    beforeUpload = (file) => {
         const filter = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
         if (!filter) {
           antd.message.error(`${file.type} This file is not valid!`);
@@ -135,7 +133,7 @@ class PostCreator extends React.PureComponent{
 
     handlePublishPost = (e) => {
         const { rawtext, shareWith, file } = this.state;
-        if(!rawtext || !file){
+        if(!rawtext){
             return null
         }
         this.setState({ posting: true, keys_remaining: ycore.DevOptions.MaxLengthPosts })        
@@ -151,45 +149,35 @@ class PostCreator extends React.PureComponent{
     dropRef = React.createRef()
 
     handleDragIn = (e) => {
-        console.log(' DRAG IN ')
         e.preventDefault()
         e.stopPropagation()
-        this.dragCounter++  
+        if (this.state.uploader == true) {
-        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            return
-          this.setState({dragging: true})
         }
+        this.setState({ uploader: true })
     }
     handleDragOut = (e) => {
-        console.log(' DRAG OUT ')
-        e.preventDefault()
-        e.stopPropagation()
-        this.dragCounter--
-        if (this.dragCounter > 0) return
-        this.setState({dragging: false})
-    }
-    handleDrop = (e) => { 
-        console.log(' DRAG DROP ')   
         e.preventDefault()
         e.stopPropagation()
+        if (this.state.uploader == false) {
+            return
+        }
+        this.setState({ uploader: false })
     }
 
     componentDidMount() {
-        this.dragCounter = 0
         let div = this.dropRef.current
         div.addEventListener('dragenter', this.handleDragIn)
         div.addEventListener('dragleave', this.handleDragOut)
-        div.addEventListener('drop', this.handleDrop)
+    }  
-      }  
+    componentWillUnmount() {
-      componentWillUnmount() {
+      let div = this.dropRef.current
-        let div = this.dropRef.current
+      div.removeEventListener('dragenter', this.handleDragIn)
-        div.removeEventListener('dragenter', this.handleDragIn)
+      div.removeEventListener('dragleave', this.handleDragOut)
-        div.removeEventListener('dragleave', this.handleDragOut)
+    }
-        div.removeEventListener('dragover', this.handleDrag)
+
-        div.removeEventListener('drop', this.handleDrop)
-        
-      }
     render(){
-        const { keys_remaining, visible } = this.state;
+        const { keys_remaining, visible, fileURL, file } = this.state;
         const percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) )
         const changeShare = ({ key }) => {
             this.setState({ shareWith: key })
@@ -209,25 +197,26 @@ class PostCreator extends React.PureComponent{
           <div className={styles.cardWrapper}>
              <antd.Card bordered="false">
           
-                <div    ref={this.dropRef} className={styles.inputWrapper}>
+                <div ref={this.dropRef} className={styles.inputWrapper}>
                
-                 {this.state.dragging? 
+                 {this.state.uploader? 
                     <div className={styles.uploader}>
-                   
                         <antd.Upload.Dragger 
-                            multiple={true}
+                            multiple={false}
                             listType="picture"
-                            showUploadList={true}
+                            showUploadList={false}
                             beforeUpload={this.beforeUpload}
                             onChange={this.handleFileUpload}
                         >
-                           
+                            <Icons.CloudUploadOutlined />
+                           <span>Drop your file here o click for upload</span>
                         </antd.Upload.Dragger>
                      </div> 
                      :  <>
                         <div className={styles.titleAvatar}><img src={userData.avatar} /></div>
                         <antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.handlePublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} dragable="false" placeholder="What are you thinking?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={8} />
                         <div><antd.Button disabled={this.state.posting? true : (keys_remaining < ycore.DevOptions.MaxLengthPosts? false : true)} onClick={this.handlePublishPost} type="primary" icon={this.state.posting_ok? <Icons.CheckCircleOutlined/> : (this.state.posting? <Icons.LoadingOutlined /> : <Icons.ExportOutlined /> )} /></div>
+                      
                     </> }
          
       
@@ -235,9 +224,9 @@ class PostCreator extends React.PureComponent{
                    
                 </div>
                 <div className={styles.progressHandler}><antd.Progress strokeWidth="4px" className={this.state.posting? styles.proccessUnset : (keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()} showInfo={false} percent={percent} /></div>
-                
+                {fileURL? this.renderPostPlayer(this.state.fileURL) : null}
                 <div className={styles.postExtra} > 
-                    <antd.Button type="ghost" onClick={() => this.ToogleUpload()} > {this.state.UploadActive? <MICONS.Cancel /> : <MICONS.AddCircle />} </antd.Button>
+                    <antd.Button styles={this.state.uploader? {fontSize: '20px'} : null} type="ghost" onClick={() => this.ToogleUpload()} > {this.state.uploader? <MICONS.Cancel /> : <MICONS.AddCircle />} </antd.Button>
                     <antd.Button type="ghost" onClick={this.handleToggleToolbox} ><MICONS.Tune /></antd.Button>
                     <antd.Dropdown overlay={shareOptionsMenu}>
                         <a className={styles.shareWith} onClick={e => e.preventDefault()}>

src/components/PostCreator/index.less

@@ -180,12 +180,25 @@
 .uploader {
     display: flex;
     position: relative;
+    border-radius: 10px;
     z-index: 30;
     width: 100%;
     height: 100%;
     span{
         width: 100%; 
     }
+    :global{
+        .ant-upload.ant-upload-drag {
+            background: #fafafa;
+            border: 1px dashed #d9d9d9;
+            border-radius: 12px;
+            transition: border-color 0.3s;
+        }
+        .anticon svg {
+            display: inline-block;
+            font-size: 30px;
+        }
+    }
 }
 
 .imagePreviewWrapper{