PostCreator and Post functionality

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comty-development",
-  "version": "0.1.05",
+  "version": "0.1.06",
   "description": "",
   "main": "index.js",
   "author": "",

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

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%;
+    max-width: 510px;
-    min-width: 312px;
+    min-width: 265px;
-    width: 50.6vw;
+    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;

src/components/PostCreator/index.js

@@ -15,7 +15,11 @@ class PostCreator extends React.PureComponent{
         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 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} />
-                    <antd.Input.TextArea 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>
+                <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>
         )
     }

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-input-affix-wrapper{
+            height: 100%;
+        }
+    }
+}
+.progressHandler{
+    margin: 0 7px 0 7px;
+  
+    :global{
+        .ant-progress-bg{
+            border-radius: 0 0 10px 10px;
         }
         .ant-progress-inner{
-            height: 4px;
+            border-radius: 0 0 14px 14px;
-            position: absolute;
+            width: calc(100% - 32px);
-            bottom: -2px;
+            vertical-align: top;
-            z-index: 10;
-            border-radius: 10px 10px 0 0;
-            transition: height 150ms linear;
-        }
-        .ant-progress{
-            transition: height 150ms linear;
-            height: 4px;
-            vertical-align: bottom;
         }
     }
 }
+.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;
  }

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

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',
+        message: 'Wopss',
-        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>),
+        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)