RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 02:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

mainfeed | fix 2 & file support | fix 5

Browse Source
This commit is contained in:
srgooglo 2020-03-11 19:29:39 +01:00
parent 78a1f60e37
commit 8e8228f189
5 changed files with 86 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/@ycore/ycore_worker.js
View File

@ -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

73
src/components/MainFeed/index.js
View File

@ -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)
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')
}
}
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)
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} />)}
/>
<antd.List
loadMore={loadMore}
dataSource={data}
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 />

7
src/components/PostCard/index.less
View File

@ -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{

69
src/components/PostCreator/index.js
View File

@ -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})
}
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() {
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)
}
}
componentWillUnmount() {
let div = this.dropRef.current
div.removeEventListener('dragenter', this.handleDragIn)
div.removeEventListener('dragleave', this.handleDragOut)
}
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()}>

13
src/components/PostCreator/index.less
View File

@ -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{