mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
mainfeed | fix 2 & file support | fix 5
This commit is contained in:
srgooglo
parent
78a1f60e37
commit
8e8228f189
@ -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
|
||||
|
||||
@ -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,31 +20,27 @@ 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)
|
||||
return void 0;
|
||||
if (n == null)
|
||||
return array[array.length - 1];
|
||||
return array.slice(Math.max(array.length - n, 0));
|
||||
};
|
||||
FirstGet(fkey) {
|
||||
|
||||
FirstGet() {
|
||||
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')
|
||||
@ -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)
|
||||
|
||||
this.setState({ data: mix, loading: false })
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
const isEnd = parsed.length < ycore.DevOptions.limit_post_catch? true : false
|
||||
this.setState({ isEnd: isEnd, data: mix, loading: false }, () => ycore.gotoElement(getLastPost.id) )
|
||||
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 ? (
|
||||
<div
|
||||
style={{
|
||||
!isEnd && !loading ? (
|
||||
<div 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
|
||||
loadMore={loadMore}
|
||||
|
||||
className="demo-loadmore-list"
|
||||
itemLayout="horizontal"
|
||||
dataSource={data}
|
||||
renderItem={item => (<PostCard payload={item} key={item.id} />)}
|
||||
renderItem={item => (<div id={item.id}><PostCard payload={item} key={item.id} /></div>)}
|
||||
/>
|
||||
|
||||
)
|
||||
} 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 />
|
||||
|
||||
@ -119,8 +119,11 @@
|
||||
border-radius: 3px;
|
||||
margin: 23px 24px 23px 24px;
|
||||
h3{
|
||||
color: rgb(85, 85, 85);
|
||||
font-weight: 470;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #555555;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
}
|
||||
.postContentFILE{
|
||||
|
||||
@ -35,8 +35,7 @@ class PostCreator extends React.PureComponent{
|
||||
posting: false,
|
||||
posting_ok: false,
|
||||
shareWith: 'any',
|
||||
UploadActive: false,
|
||||
dragging: false,
|
||||
uploader: 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 })
|
||||
this.setState({ file: info.file.originFileObj, uploader: false })
|
||||
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 (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
this.setState({dragging: true})
|
||||
if (this.state.uploader == true) {
|
||||
return
|
||||
}
|
||||
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})
|
||||
if (this.state.uploader == false) {
|
||||
return
|
||||
}
|
||||
handleDrop = (e) => {
|
||||
console.log(' DRAG DROP ')
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
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() {
|
||||
let div = this.dropRef.current
|
||||
div.removeEventListener('dragenter', this.handleDragIn)
|
||||
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 })
|
||||
@ -211,23 +199,24 @@ class PostCreator extends React.PureComponent{
|
||||
|
||||
<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()}>
|
||||
|
||||
@ -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{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user