PostCreator and Post functionality

2025-06-09 10:34:17 +00:00 · 2020-02-06 15:01:53 +01:00 · 2020-02-06 15:01:53 +01:00 · f920bcfb64
commit f920bcfb64
parent e03d360a7d
8 changed files with 229 additions and 59 deletions
--- a/config/ycore.config.js
+++ b/config/ycore.config.js
@ -26,7 +26,9 @@ module.exports = {
      openwheater_apiKey:'2acf34be0b8f033b89ba4de1e674d42a',
    },
    Endpoints: {
+       get_sessions: "https://api.ragestudio.net/RS-YIBTP/yid/session_id?access_token=",
       auth_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/auth",
+       new_post: "https://api.ragestudio.net/RS-YIBTP/yid/new_post?access_token=",
       get_servicesHandler: 'https://api.ragestudio.net/RS-YIBTP/rs/servicesHandler',
       get_modhandler: "https://api.ragestudio.net/RS-YIBTP/rs/modHandler",
       get_subscriptionHandler: "https://api.ragestudio.net/RS-YIBTP/rs/subscriptionHandler",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "comty-development",
-  "version": "0.1.05",
+  "version": "0.1.06",
  "description": "",
  "main": "index.js",
  "author": "",
--- a/src/components/PostCard/index.js
+++ b/src/components/PostCard/index.js
@ -21,14 +21,14 @@ class PostCard extends React.PureComponent{
        const ident = payload
        if (ident.includes('.mp4')) {
           return (
-                <video id="player" playsinline controls > 
+                <video id="player" playsInline controls > 
                     <source src={payload} type="video/mp4"/>
                </video>
           )
        }
        if (ident.includes('.webm')) {
            return (
-                <video id="player" playsinline controls > 
+                <video id="player" playsInline controls > 
                     <source src={payload} type="video/webm"/>
                </video>
           )
--- a/src/components/PostCard/index.less
+++ b/src/components/PostCard/index.less
@ -1,9 +1,9 @@
 .cardWrapper{
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 7px;
-    max-width: 70%;
-    min-width: 312px;
-    width: 50.6vw;
+    max-width: 510px;
+    min-width: 265px;
+    width: auto;
    margin: 23px auto 50px auto;
    :global{
        .ant-card-meta-detail > div:not(:last-child){
@ -109,6 +109,7 @@
 }

 .ellipsisIcon{
+    color:rgba(0, 0, 0, 0.45);
    width: 100%;
    position: absolute;
    text-align: center;
--- a/src/components/PostCreator/index.js
+++ b/src/components/PostCreator/index.js
@ -8,14 +8,18 @@ const { Meta } = antd.Card;

 // Set default by configuration
 const emptyPayload = {user: 'Post Empty', ago: 'This Post is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' }
-const defaultActions = [<antd.Icon type="heart"  className={styles.likebtn} key="like" />,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
+const defaultActions = [<antd.Icon type="heart" className={styles.likebtn} key="like" />,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]

 class PostCreator extends React.PureComponent{
    constructor(props){
        super(props),
        this.state = {
            FadeIN: true,
-            keys_remaining: '512'
+            keys_remaining: '512',
+            toolbox_open: false,
+            rawtext: '',
+            posting: false,
+            posting_ok: false
        }
    }

@ -66,6 +70,38 @@ class PostCreator extends React.PureComponent{
            return 'exception'
        }else return('active')
    }
+    handleToggleToolbox = () =>{
+        this.setState({ toolbox_open: !this.state.toolbox_open })
+    }
+    PublishPost = (e) => {
+        const { rawtext } = this.state;
+        const { refreshPull } = this.props
+        
+        if(!rawtext){
+            return null
+        }
+        this.setState({ posting: true, keys_remaining: '512' })
+        let formdata = new FormData();
+        formdata.append("user_id", ycore.GetUserToken.decrypted().UserID);
+        formdata.append("server_key", ycore.yConfig.server_key);
+        formdata.append("postText", rawtext);
+      
+        const requestOptions = {
+          method: 'POST',
+          body: formdata,
+          redirect: 'follow'
+        };  
+        ycore.DevOptions.ShowFunctionsLogs? console.log(`Sending new post => ${rawtext} `) : null
+        const urlObj = `${ycore.endpoints.new_post}${ycore.GetUserToken.decrypted().UserToken}`
+        fetch(urlObj, requestOptions)
+          .then(response => {
+              console.log(response)
+              this.setState({ posting_ok: true, posting: false, rawtext: ''})
+              refreshPull()
+              setTimeout( () => { this.setState({ posting_ok: false }) }, 1000)
+            })
+          .catch(error => console.log('error', error));
+    }
   
    render(){
        const { keys_remaining, } = this.state;
@ -80,12 +116,26 @@ class PostCreator extends React.PureComponent{
                    bordered="false"
                />
                <div className={styles.inputWrapper}>
-                    <antd.Progress className={(keys_remaining < 512? styles.proccessSet : styles.proccessUnset)} status={this.handleKeysProgressBar()}  showInfo={false} percent={percent} />
-                    <antd.Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder="What's going on?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} />
-                    
+                    <antd.Input.TextArea disabled={this.state.posting? true : false} onPressEnter={this.PublishPost} value={this.state.rawtext} autoSize={{ minRows: 3, maxRows: 5 }} placeholder="What's going on?" onChange={this.handleChanges} allowClear maxLength={ycore.DevOptions.MaxLengthPosts} rows={4} />
+                    <div><antd.Button disabled={this.state.posting? true : (keys_remaining < 512? false : true)} onClick={this.PublishPost} type="primary" icon={this.state.posting_ok? "check-circle" : (this.state.posting? "loading" : "export")} /></div>
                </div>
-                
-            </antd.Card>
+                <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>
+                <div className={styles.postExtra} > 
+                    <antd.Button icon="upload" type="ghost"> Upload File </antd.Button>
+                    <antd.Button onClick={this.handleToggleToolbox} icon="container" type="ghost"> Toolbox </antd.Button>
+                    <antd.Button icon="setting" type="ghost"> Settings </antd.Button>
+                </div>
+             </antd.Card>
+                <antd.Drawer
+                     title={<h1 className={styles.fontct}> Toolbox </h1>}
+                     placement="top"
+                     closable={false}
+                     onClose={this.handleToggleToolbox}
+                     visible={this.state.toolbox_open}
+                 >
+                     <antd.Button icon="upload" type="ghost"> Create Poll </antd.Button>
+                     <antd.Button icon="upload" type="ghost"> StickerPost </antd.Button>
+                </antd.Drawer>
          </div>
        )
    }
--- a/src/components/PostCreator/index.less
+++ b/src/components/PostCreator/index.less
@ -138,39 +138,84 @@
 }

 .inputWrapper{
+    display: flex;
+    z-index: 10;
    width: 100%;
-    padding: 0 4px 22px 4px;
+    padding: 18px 7px 0 7px;
    transition: height 150ms linear;
    :global{
-        transition: height 150ms linear;
+        .ant-btn-primary {
+            border-radius: 0 10px 10px 0;
+            height: 100%;
+            vertical-align: bottom;
+            border: none;
+            box-shadow: none;
+        }
        .ant-input {
-            height: 6vh;
+            border-color: #1890ff;
+            box-shadow: none;
+            border-radius: 3px 0 0 0;
+            height: 100%;
            padding: 5px 10px 5px 10px;
            transition: height 150ms linear;
+            width: 100%;
+            textarea{
+                resize: none; 
+            }
        }
-        .ant-input-affix-wrapper .ant-input-affix-wrapper-textarea-with-clear-btn{
-            border-top: 0;
+        .ant-input:hover{
+            border-color: #1890ff;
        }
-        .ant-progress-inner{
-            height: 4px;
-            position: absolute;
-            bottom: -2px;
-            z-index: 10;
-            border-radius: 10px 10px 0 0;
-            transition: height 150ms linear;
-        }
-        .ant-progress{
-            transition: height 150ms linear;
-            height: 4px;
-            vertical-align: bottom;
+        .ant-input-affix-wrapper{
+            height: 100%;
        }
    }
 }
+.progressHandler{
+    margin: 0 7px 0 7px;
+  
+    :global{
+        .ant-progress-bg{
+            border-radius: 0 0 10px 10px;
+        }
+        .ant-progress-inner{
+            border-radius: 0 0 14px 14px;
+            width: calc(100% - 32px);
+            vertical-align: top;
+        }
+    }
+}
+.postExtra{
+    width: 100%;
+    
+    display: flex;
+    :global{
+        .ant-btn{
+            margin: auto;
+            
+        }
+    }
+}
+
+
 .proccessUnset{
    opacity: 0;
    transition: opacity 250ms linear;
+    animation: proccessUnset 250ms linear;
 }
 .proccessSet{
-    opacity: 1;
    transition: opacity 250ms linear;
+    animation: proccessSet 250ms linear;
 }
+@keyframes proccessSet {
+   0% { opacity: 0; }
+   100% { opacity: 1; }
+}
+@keyframes proccessUnset {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+ }
+  
+ .fontct{
+     font-family: "Poppins", sans-serif;
+ }
--- a/src/pages/main/index.js
+++ b/src/pages/main/index.js
@ -14,30 +14,14 @@ class Main extends React.Component {
            loading: true,
        }
    }
-    GetFeedPosts() {
-        let global;
-        let formdata = new FormData();
-        formdata.append("server_key", ycore.yConfig.server_key);
-        formdata.append("type", "get_news_feed");
     
-        const requestOptions = {
-          method: 'POST',
-          body: formdata,
-          redirect: 'follow'
-        };
-        const objUrl = `${ycore.endpoints.get_userPostFeed}${ycore.GetUserToken.decrypted().UserToken}`
-        console.log(objUrl)
-        fetch(objUrl, requestOptions)
-          .then(response => response.text())
-          .then(result => {
-            this.setState({ feedRaw: result, loading: false })
-          })
-          .catch(error => console.log('error', error));
-    
-    }
    componentDidMount(){
-        this.GetFeedPosts()
+        ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
    }
+    handleRefreshList(){
+        ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
+    }
+   
    
    renderFeedPosts(){
        const {feedRaw} = this.state
@ -47,7 +31,7 @@ class Main extends React.Component {
                feedParsed.map(item=> {
                    const {postText, post_time, publisher, postFile, postFileName} = item
                    const paylodd = {user: publisher.username, ago: post_time, avatar: publisher.avatar, content: postText, file: postFile, postFileName: postFileName, publisher: publisher }
-                    console.log([item], paylodd)
+                    ycore.DevOptions.ShowFunctionsLogs? console.log([item], paylodd) : null
                    return <PostCard payload={paylodd} />
                })
            )
@ -60,10 +44,12 @@ class Main extends React.Component {
    }
    render(){
        const { loading } = this.state;
+       
+        
        return (
            <div> 
                <MainSidebar />
-                <PostCreator />
+                <PostCreator refreshPull={() => this.handleRefreshList()} />
                {loading? <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} ><antd.Skeleton avatar paragraph={{ rows: 4 }} active /></antd.Card> : <div className={styles.PostsWrapper}> {this.renderFeedPosts()} </div>}
            </div>
        )
--- a/src/ycore_worker.js
+++ b/src/ycore_worker.js
@ -3,6 +3,7 @@ import axios from "axios";
 import {SetControls, CloseControls} from "./components/Layout/Control"
 import {secretOrKey} from "../config/keys.js"
 import * as antd from "antd"
+import { func } from "prop-types";

 var react = require("react");
 var package_json = require("../package.json");
@ -42,11 +43,96 @@ export const infoServer = (ycore_worker.ServerType + ' Server | v' + ycore_worke

 export function notifyError(err){
    antd.notification.error({
-        message: 'Uupss, Error',
-        description: (<div><span>Some boring stuff: </span><br/><br/><div style={{ position: 'absolute', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
+        message: 'Wopss',
+        description: (<div><span>An wild error appear! : </span><br/><br/><div style={{ position: 'absolute', width: '100%',backgroundColor: 'rgba(243, 19, 19, 0.329)', bottom: '0', color: 'black', padding: '3px' }} >{err.toString()}</div></div>),
        placement: 'bottomLeft'
    })
 }
+export function notifyProccess(cust){
+    antd.notification.open({
+        icon: <antd.Icon type="loading" style={{ color: '#108ee9' }} />,
+        message: 'Please wait',
+        placement: 'bottomLeft'
+    })
+}
+export function GetFeedPosts(callback) {
+    let formdata = new FormData();
+    formdata.append("server_key", yConfig.server_key);
+    formdata.append("type", "get_news_feed");
+
+    const requestOptions = {
+      method: 'POST',
+      body: formdata,
+      redirect: 'follow'
+    };
+    const objUrl = `${endpoints.get_userPostFeed}${GetUserToken.decrypted().UserToken}`
+    console.log(objUrl)
+    fetch(objUrl, requestOptions)
+      .then(response => response.text())
+      .then(result => {
+       return callback( null, result)
+      })
+      .catch(error => console.log('error', error));
+
+}
+
+export const get_app_session = {
+    get_id: (callback) => {
+      const fromSto = sessionStorage.getItem('se_src')
+      if (!fromSto){
+        DevOptions.ShowFunctionsLogs? console.log("Missing session_id, setting up...") : null
+        let formdata = new FormData();
+        formdata.append("server_key", yConfig.server_key);
+        formdata.append("type", "get");
+        const requestOptions = {
+          method: 'POST',
+          body: formdata,
+          redirect: 'follow'
+        };
+        const uriObj = `${endpoints.get_sessions}${GetUserToken.decrypted().UserToken}`
+        notifyProccess()
+        fetch(uriObj, requestOptions)
+          .then(response => response.text())
+          .then(result => {
+            const pre = JSON.stringify(result)
+            const pre2 = JSON.parse(pre)
+            const pre3 = JSON.stringify(JSON.parse(pre2)["data"])
+  
+            const obj = JSON.parse(pre3)["session_id"]
+            
+           return asyncSessionStorage.setItem('se_src', btoa(obj)).then( callback(null, obj) )
+          
+          })
+        .catch(error => console.log('error', error));
+      }
+        DevOptions.ShowFunctionsLogs? console.log("Returning from storage") : null
+        return callback( null, atob(fromSto) )
+    },
+    raw: (callback) => {
+        const formdata = new FormData();
+        formdata.append("server_key", yConfig.server_key);
+        formdata.append("type", "get");
+
+        const requestOptions = {
+          method: 'POST',
+          body: formdata,
+          redirect: 'follow'
+        };
+        const uriObj = `${endpoints.get_sessions}${GetUserToken.decrypted().UserToken}`
+        fetch(uriObj, requestOptions)
+          .then(response => response.text())
+          .then(result => {
+            const pre = JSON.stringify(result)
+            const parsed = JSON.parse(pre)
+            const obj = JSON.parse(parsed)["data"]
+            DevOptions.ShowFunctionsLogs? console.log(result, obj) : null
+            return callback(null, obj)
+          })
+        .catch(error => console.log('error', error));
+    }
+
+ 
+}

 export function InitSocket(id, params){
    console.log('Starting socket with _id: ', id)