0.2.10A1

config/app.settings.js

@@ -20,5 +20,7 @@ export var DevOptions = {
     MaxJWTexpire: '1556952',
     MaxLengthPosts: '512',
     CurrentBundle: 'light_ng',
-    MaximunAPIPayload: '101376'
+    // In KB
+    MaximunAPIPayload: '101376',
+    limit_post_catch: ReturnDevOption('limit_post_catch')
 }

globals/badges_list.js

@@ -0,0 +1,8 @@
+export var BadgesType = [
+    {
+        "id": "alpha_test",
+        "title": "Alpha Tester",
+        "color": "volcano",
+        "tip": "Oh yeah!"
+    },
+]

globals/endpoints.js

@@ -1,5 +1,7 @@
 module.exports = {
     Endpoints: {
+        get_user_tags: "https://api.ragestudio.net/RSA-COMTY/r/user_tags?access_token=",
+        get_general_data: "https://api.ragestudio.net/RSA-COMTY/r/get-general-data?access_token=",
         follow_user: "https://api.ragestudio.net/RSA-COMTY/r/follow-user?access_token=",
         action_post: "https://api.ragestudio.net/RSA-COMTY/r/post-actions?access_token=",
         get_posts: "https://api.ragestudio.net/RSA-COMTY/r/posts?access_token=",

globals/settings.js

@@ -4,56 +4,65 @@ const fromStorage = JSON.parse(localStorage.getItem('app_settings'))
 export var AppSettings = [
     {
         "SettingID": "strict_lightMode",
+        "type" : "switch",
         "title": "Strict Light Mode",
         "description": "Force the app to apply full light mode theme when the light mode is activated... (Experimental)",
         "value":  fromStorage? ycore.StorageValued('strict_lightMode') : false
       },
       {
         "SettingID": "default_collapse_sider",
+        "type" : "switch",
         "title": "Default Collapse Sider",
         "description": "Force the app to apply collapsed mode theme when the app is mounted...",
         "value":  fromStorage? ycore.StorageValued('default_collapse_sider') : true
       },
       {
         "SettingID": "auto_feedrefresh",
+        "type" : "switch",
         "title": "Auto Feed Refresh",
         "description": "Force the app to auto refresh the posts feed when exist news posts for update",
         "value": fromStorage? ycore.StorageValued('auto_feedrefresh') : false 
       },
       {
         "SettingID": "force_showDevLogs",
+        "type" : "switch",
         "title": "Show Functions Logs",
         "description": "Show all console logs... [Developer]",
         "value": fromStorage? ycore.StorageValued('force_showDevLogs') : false
       },
       {
         "SettingID": "sessions_noexpire",
+        "type" : "switch",
         "title": "No expire session",
         "description": "Force the app to not expire any session... [Developer]",
         "value": fromStorage? ycore.StorageValued('sessions_noexpire') : false
       },
       {
         "SettingID": "auto_search_ontype",
+        "type" : "switch",
         "title": "Auto search",
         "description": "Force the app to automaticly search when a type input is detected... [Developer]",
         "value": fromStorage? ycore.StorageValued('auto_search_ontype') : false
       },
       {
         "SettingID": "default_showpostcreator",
+        "type" : "switch",
         "title": "Show default Post Creator",
         "description": "Force the app to automaticly search when a type input is detected... [Developer]",
         "value": fromStorage? ycore.StorageValued('default_showpostcreator') : false
       },
       {
         "SettingID": "force_show_postactions",
+        "type" : "switch",
         "title": "Not auto hide Posts Actions",
         "description": "Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]",
         "value": fromStorage? ycore.StorageValued('force_show_postactions') : false
       },
       {
         "SettingID": "use_dev_server",
+        "type" : "switch",
         "title": "Use Comty™ Development Server",
         "description": "Force the app to connect to an development server... [High Recomended]",
         "value": fromStorage? ycore.StorageValued('use_dev_server') : false
-      }
+      },
 ]

package.json

@@ -2,7 +2,7 @@
   "name": "comty-development",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.2.08",
+  "version": "0.2.10",
   "description": "",
   "main": "index.js",
   "author": "RageStudio",
@@ -53,6 +53,7 @@
     "react-helmet": "^5.2.1",
     "react-iframe": "^1.8.0",
     "react-image": "^2.4.0",
+    "react-infinite-scroller": "^1.2.4",
     "react-modal": "^3.11.1",
     "react-new-window": "^0.1.2",
     "react-notifications": "^1.4.3",
@@ -63,6 +64,7 @@
     "react-select-country-list": "^2.1.2",
     "react-sound": "^1.2.0",
     "react-transition-group": "^4.3.0",
+    "react-virtualized": "^9.21.2",
     "recompose": "^0.30.0",
     "sqlite": "^3.0.3",
     "store": "^2.0.12",

src/@ycore/libs/comty_ng/pre.js

@@ -2,6 +2,28 @@ import * as ycore from 'ycore'
 var jquery = require("jquery");
 import * as Icons from '@ant-design/icons'
 
+
+export function GetGeneralData(callback){
+  let formdata = new FormData();
+  formdata.append("user_id", id);
+  formdata.append("server_key", ycore.yConfig.server_key);
+  const requestOptions = {
+    method: 'POST',
+    body: formdata,
+    redirect: 'follow'
+  };  
+  const urlObj = `${ycore.endpoints.get_general_data}${ycore.GetUserToken.decrypted().UserToken}`
+  fetch(urlObj, requestOptions)
+    .then(response => {
+        ycore.yconsole.log(response)
+        return callback(false, response)
+      })
+    .catch(error => {
+      console.log('error', error)
+      return callback(true, error)
+    });
+}
+
 export function follow_user(id, callback) {
   let formdata = new FormData();
   formdata.append("user_id", id);
@@ -165,9 +187,38 @@ export function ActionPost(type, id, value, callback){
       return callback(true, `[Server error] We couldnt ${type} this post`);
   })
 }
-export function GetPosts(userid, type, callback) {
+export function GetUserTags(id, callback){
+  if (!id) {
+    return false
+  }
   let formdata = new FormData();
   formdata.append("server_key", ycore.yConfig.server_key);
+  formdata.append("user_id", id )
+
+  const urlOBJ = `${ycore.endpoints.get_user_tags}${ycore.GetUserToken.decrypted().UserToken}`
+  const settings = {
+      "url":  urlOBJ,
+      "method": "POST",
+      "timeout": 0,
+      "processData": false,
+      "mimeType": "multipart/form-data",
+      "contentType": false,
+      "data": formdata
+  };
+  jquery.ajax(settings)
+  .done(function (response) {
+      return callback(null, response);
+  })
+  .fail(function (response) {
+      const exception = 'Request Failed';
+      return callback(exception, response);
+  })
+}
+export function GetPosts(userid, type, fkey, callback) {
+  let formdata = new FormData();
+  formdata.append("server_key", ycore.yConfig.server_key);
+  formdata.append("after_post_id", (fkey || 0))
+  formdata.append("limit", ycore.DevOptions.limit_post_catch || 20)
   switch (type) {
     case 'feed':
       formdata.append("type", "get_news_feed");
@@ -211,7 +262,6 @@ export const get_app_session = {
         redirect: 'follow'
       };
       const uriObj = `${ycore.endpoints.get_sessions}${ycore.GetUserToken.decrypted().UserToken}`
-      ycore.notifyProccess('Getting session data...')
       fetch(uriObj, requestOptions)
         .then(response => response.text())
         .then(result => {

src/@ycore/ycore_worker.js

@@ -1,14 +1,19 @@
-import React from 'react'
+/**
-import {AppSettings} from  '../../globals/settings.js'
+ *    @yCore_Worker
-import {Endpoints} from 'globals/endpoints.js'
+ * 
-import umiRouter from 'umi/router';
+ * @author rStudio© 2020
-import * as antd from "antd"
+ * @licensed Pending...
-import * as Icons from '@ant-design/icons';
+ */
-import Icon from '@ant-design/icons'
 
-import config from 'config'
+import React from "react";
-import './libs.js'
+import {AppSettings} from  "../../globals/settings.js";
-import * as sw from '../../service-worker.js'
+import {Endpoints} from "globals/endpoints.js";
+import umiRouter from "umi/router";
+import * as antd from "antd";
+import * as Icons from '@ant-design/icons';
+
+import config from "config"
+import "./libs.js"
 
 export * from "./libs.js"
 export * from "../../config/app.settings.js"
@@ -51,6 +56,11 @@ export function b64toBlob(b64Data, contentType, sliceSize) {
   return blob;
 }
 
+/**
+ * Return parsed some information about this App
+ * 
+ * @return {object}
+ */
 export const AppInfo = {
     name: package_json.title,
     version: package_json.version,
@@ -58,11 +68,12 @@ export const AppInfo = {
     logo_dark: config.DarkFullLogoPath
 }
 
-export function RegSW(){
+/**
-    yconsole.log('Registering Service Worker...')
+ * Convert the localStorage values (AppSettings) parsed
-    sw.register()
+ * 
-}
+ * @param e {String} String of SettingID for search
-
+ * @return {string} Boolean value
+ */
 export function StorageValued(e){
     try {
       const fromStorage = JSON.parse(localStorage.getItem('app_settings'))
@@ -77,6 +88,12 @@ export function StorageValued(e){
     }
 }
 
+/**
+ * Return the values as alias (AppSettings, DevOptions)
+ * 
+ * @param e {String} String of SettingID for search
+ * @return {string} Boolean value
+ */
 export function ReturnDevOption(e){
     const Ite = AppSettings.map(item => {
       return item.SettingID === e? item.value : null
@@ -85,12 +102,23 @@ export function ReturnDevOption(e){
     return fr.toString()
 }
 
+/**
+ * Global fix for convert '1, 0' to string boolean 'true, false'
+ * 
+ * @param e {int} Numeric boolean reference
+ * @return {bool} Boolean value
+ */
 export function booleanFix(e){
     if(e == 1){
         return true
     }
     return false
 }
+
+/**
+ * Framework functionality for navigate between pages (Router)
+ * 
+ */
 export const crouter = {
     native: (e) =>{
         umiRouter.push({
@@ -102,6 +130,11 @@ export const crouter = {
         router.push(e)
     }
 }
+/**
+ * Render User Notification about an Error
+ * 
+ * @param err {String} String of error for show
+ */
 export function notifyError(err){
     antd.notification.error({
         message: 'Wopss',
@@ -109,6 +142,11 @@ export function notifyError(err){
         placement: 'bottomLeft'
     })
 }
+/**
+ * Render User Notification about an proccess
+ * 
+ * @param cust {String} String of proccess for show
+ */
 export function notifyProccess(cust){
     antd.notification.open({
         icon: <Icons.LoadingOutlined style={{ color: '#108ee9' }} />,
@@ -117,6 +155,10 @@ export function notifyProccess(cust){
         placement: 'bottomLeft'
     })
 }
+/**
+ * Request FullScreen mode
+ * 
+ */
 export function requestFullscreen(){
     var elem = document.documentElement;
     if (elem.requestFullscreen) {
@@ -129,6 +171,13 @@ export function requestFullscreen(){
       elem.msRequestFullscreen();
     }
 }
+/**
+ * Async get/set localStorage method
+ * 
+ * @param key {string} String for search
+ * @param value {string} Value for set
+ * @return {any} An callback for async/await
+ */
 export const asyncLocalStorage = {
     setItem: function (key, value) {
         return Promise.resolve().then(function () {
@@ -141,6 +190,13 @@ export const asyncLocalStorage = {
         });
     }
 };
+/**
+ * Async get/set sessionStorage method
+ * 
+ * @param key {string} String for search
+ * @param value {string} Value for set
+ * @return {any} An callback for async/await
+ */
 export const asyncSessionStorage = {
     setItem: function (key, value) {
         return Promise.resolve().then(function () {
@@ -153,11 +209,19 @@ export const asyncSessionStorage = {
         });
     }
 };
-
+/**
+ * Request browser for refresh the windows 
+ * 
+ */
 export function RefreshONCE(){
  window.location.reload(); 
 }
-
+/**
+ * Parse information about this App
+ * 
+ * @param e1 {string} Declare type
+ * @return {any} JSX Component / Object information
+ */
 export function DetectNoNStableBuild(e1) {
     switch (e1) {
         case 'TagComponent':
@@ -184,7 +248,11 @@ export function DetectNoNStableBuild(e1) {
             break;
     }
 }
-
+/**
+ * User console with setting user permissions
+ * 
+ * @param ... {any} Use for type of console
+ */
 export const yconsole = {
     log: (...cont)=>{
         ReturnDevOption('force_showDevLogs')? console.log(...cont) : null

src/components/Layout/Control.js

@@ -52,9 +52,9 @@ class Control extends React.Component {
         return(
           Show? (
             <StyleRoot>
-                <div style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
+                <div key={Math.random()} style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
-                    <antd.Card bordered={false} className={styles.ControlCard}> 
+                    <antd.Card key={Math.random()} bordered={false} className={styles.ControlCard}> 
-                      <React.Fragment>{RenderFragment} </React.Fragment> 
+                      <React.Fragment>{RenderFragment}</React.Fragment> 
                     </antd.Card>
                 </div>
             </StyleRoot>

src/components/Layout/Sider.js

@@ -141,10 +141,6 @@ class Sider extends PureComponent {
                          {collapsed ?  null : <Trans>Logout</Trans>}
                         </antd.Menu.Item>
                     </antd.Menu>
-                    <div className={styles.siderhead}>
-                      <antd.Avatar onClick={() => ycore.crouter.native(`@${userData.username}`)} size={collapsed? "small" : "large"} shape={collapsed? "circle" : "square"} src={userData.avatar} className={collapsed? styles.avatar : styles.avatarFull} />
-                    </div>  
-                    {collapsed? null : <div className={styles.userInfo}><a onClick={() => ycore.crouter.native(`@${userData.username}`)} ><h2>@{userData.username}</h2></a></div> }
                 </div>
             </ScrollBar>
         </div>

src/components/MainFeed/index.js

@@ -1,6 +1,9 @@
 import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
+
+import InfiniteScroll from 'react-infinite-scroller';
+
 import {PostCard} from 'components'
 
 var userData = ycore.SDCP()
@@ -15,30 +18,38 @@ class MainFeed extends React.Component {
         super(props)
         window.MainFeedComponent = this;
         this.state = {
+            feedRaw: [],
             loading: true,
+            hasMore: true,
         }
     }
+
     toogleLoader(){
         this.setState({ loading: !this.state.loading })
     }
-    componentDidMount(){
+    
-        const { get, uid, filters } = this.props
+    GetPostsData(fkey){
+        const { get, uid, filters } = this.props;
         if (!get) {
-            console.error('Please, fill params with an catch type...')
+            ycore.yconsole.error('Please, fill params with an catch type...')
             return
         }
-        ycore.GetPosts(uid, get, (err, result) => this.setState({ feedRaw: result, loading: false }))
+        if (!fkey) {
-    }
+            ycore.yconsole.warn('Please, provide a fkey for offset the feed, default using => 0');
-    handleRefreshList(){
+            
-        const { get, uid, filters } = this.props
-        if (!get) {
-            console.error('Please, fill params with an catch type...')
-            return
         }
         this.toogleLoader()
-        ycore.GetPosts(uid, get, (err, result) => this.setState({ feedRaw: result, loading: false }))
+        ycore.GetPosts(uid, get, (fkey || '0'), (err, result) => {
+            this.setState({ feedRaw: result, loading: false })
+        })
     }
-    renderFeedPosts(e){
+
+    componentDidMount(){
+        this.GetPostsData()
+        
+    }
+
+    renderFeedPosts = (e) =>{
         const {feedRaw} = this.state
         const { get, filters } = this.props
         try {
@@ -71,18 +82,68 @@ class MainFeed extends React.Component {
             const paylodd = {user: '', ago: '', avatar: '', content: '',  publisher: '' }
             return <PostCard payload={paylodd} />
         }
-    
     }
+
+    handleInfiniteOnLoad = () => {
+      const { get, uid, filters } = this.props;
+      let { feedRaw } = this.state;
+      this.setState({
+        loading: true,
+      });
+      if (feedRaw.length > 300) {
+        antd.message.warning('Infinite List loaded all');
+        this.setState({
+          hasMore: false,
+          loading: false,
+        });
+        return;
+      }
+      console.log('LENGTHT', feedRaw.length)
+      ycore.GetPostsData(uid, get, feedRaw.length, (err, res) => {
+        feedRaw = feedRaw.concat(res.results);
+        this.setState({
+          feedRaw,
+          loading: false,
+        });
+      });
+    };
+    
+ 
+
     render(){
-        const { loading } = this.state;   
+        const { loading, feedRaw } = this.state;   
+        const loaderCard = ( <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
+        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
+    </antd.Card>)
+    
         return (
-            <div>   
+            <div>      
-                {loading? 
+                <InfiniteScroll
-                    <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
+          initialLoad={false}
-                        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
+          pageStart={0}
-                    </antd.Card> :
+          loadMore={this.handleInfiniteOnLoad}
-                    this.renderFeedPosts()
+          hasMore={!this.state.loading && this.state.hasMore}
-                }
+          useWindow={false}
+        >
+          <List
+            dataSource={this.state.feedRaw}
+            renderItem={item => (
+              <List.Item key={item.id}>
+                <List.Item.Meta
+                  avatar={
+                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                  }
+                  title={<a href="https://ant.design">{item.name.last}</a>}
+                  description={item.email}
+                />
+                <div>Content</div>
+              </List.Item>
+            )}
+          >
+            {this.state.loading && this.state.hasMore && (loaderCard)}
+          </List>
+        </InfiniteScroll>
+              
             </div>
         )
     }

src/components/PostCreator/index.js

@@ -16,8 +16,7 @@ function getBase64(img, callback) {
     const reader = new FileReader();
     reader.addEventListener('load', () => callback(reader.result));
     reader.readAsDataURL(img);
-  }
+}
-
 
 export function HandleVisibility(){
     window.PostCreatorComponent.ToogleVisibility();
@@ -30,13 +29,14 @@ class PostCreator extends React.PureComponent{
         this.state = {
             visible: true,
             FadeIN: true,
-            keys_remaining: '512',
+            keys_remaining: ycore.DevOptions.MaxLengthPosts,
             toolbox_open: false,
             rawtext: '',
             posting: false,
             posting_ok: false,
             shareWith: 'any',
             UploadActive: false,
+            dragging: false,
         }
     }
     renderPostPlayer(payload){
@@ -46,7 +46,13 @@ class PostCreator extends React.PureComponent{
         if (imagefilter) {
            return (
                 <div className={styles.imagePreviewWrapper}>
-                    <img className={styles.imagePreview} src={fileURL} />
+                    <div className={styles.imageOverlay}>
+                        <antd.Button onClick={() => null} icon={<Icons.DeleteOutlined />} />
+                    </div>
+                    <div className={styles.imagePreview}>
+                        <img className={styles.imagePreview} src={fileURL} />
+                    </div>
+                    
                 </div>
            )
         }
@@ -54,7 +60,7 @@ class PostCreator extends React.PureComponent{
             return (
                 <div className={styles.imagePreviewWrapper}>
                 <video id="player" playsInline controls > 
-                     <source className={styles.imagePreview} src={file} type={file.type}/>
+                     <source className={styles.imagePreview} src={fileURL} type={file.type}/>
                 </video>
                 </div>
             )
@@ -90,11 +96,11 @@ class PostCreator extends React.PureComponent{
     beforeUpload(file) {
         const filter = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
         if (!filter) {
-          antd.message.error('Invalid File!');
+          antd.message.error(`${file.type} This file is not valid!`);
         }
         const maxsize = file.size / 1024 / 1024 < ycore.DevOptions.MaximunAPIPayload;
         if (!maxsize) {
-          antd.message.error('Image must smaller than 99MB!');
+          antd.message.error(`Image must smaller than ${ycore.DevOptions.MaximunAPIPayload} KB!`);
         }
         return filter && maxsize;
     }
@@ -105,7 +111,7 @@ class PostCreator extends React.PureComponent{
 
     handleKeysProgressBar(){
         const { keys_remaining } = this.state;
-        if (keys_remaining <= 80) {
+        if (keys_remaining <= (ycore.DevOptions.MaxLengthPosts/100*30)) {
             return 'exception'
         }else return('active')
     }
@@ -132,7 +138,7 @@ class PostCreator extends React.PureComponent{
         if(!rawtext || !file){
             return null
         }
-        this.setState({ posting: true, keys_remaining: '512' })        
+        this.setState({ posting: true, keys_remaining: ycore.DevOptions.MaxLengthPosts })        
         ycore.PublishPost(ycore.GetPostPrivacy.bool(shareWith), rawtext, file, (err, res) => {
            if (err) {
                ycore.notifyError(err)
@@ -142,8 +148,46 @@ 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})
+        }
+    }
+    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()
+    }
+
+    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 percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) )
@@ -164,39 +208,36 @@ class PostCreator extends React.PureComponent{
         return(
           <div className={styles.cardWrapper}>
              <antd.Card bordered="false">
-                <div className={styles.inputWrapper}>
+          
-                    {this.state.UploadActive? 
+                <div    ref={this.dropRef} className={styles.inputWrapper}>
+               
+                 {this.state.dragging? 
                     <div className={styles.uploader}>
+                   
                         <antd.Upload.Dragger 
-                            multiple={false}
+                            multiple={true}
                             listType="picture"
-                            showUploadList={false}
+                            showUploadList={true}
                             beforeUpload={this.beforeUpload}
                             onChange={this.handleFileUpload}
                         >
-                            <div>
+                           
-                                <p className="ant-upload-drag-icon">
-                                  <Icons.InboxOutlined />
-                                </p>
-                                <p className="ant-upload-text">Click or drag file to this area to upload</p>
-                                <span>*Allowed PNG, JPG, MP4 </span>
-                            </div>
                         </antd.Upload.Dragger>
-                     </div>
+                     </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={4} />
+                        <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 < 512? false : true)} onClick={this.handlePublishPost} type="primary" icon={this.state.posting_ok? <Icons.CheckCircleOutlined/> : (this.state.posting? <Icons.LoadingOutlined /> : <Icons.ExportOutlined /> )} /></div>
+                        <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>
-                    </>}
+                    </> }
+         
+      
+                     
+                   
                 </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.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} > 
-                    { this.state.file? 
+                    <antd.Button type="ghost" onClick={() => this.ToogleUpload()} > {this.state.UploadActive? <MICONS.Cancel /> : <MICONS.AddCircle />} </antd.Button>
-                        this.renderPostPlayer() : null
-                    }
-                    <antd.Button type="ghost" onClick={() => this.ToogleUpload()} > <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

@@ -82,11 +82,14 @@
 .inputWrapper{
     display: flex;
     z-index: 10;
+    position: relative;
     width: 100%;
     padding: 18px 7px 0 7px;
     transition: height 150ms linear;
     :global{
         .ant-btn-primary {
+            z-index: 10;
+            position: relative;
             border-radius: 0 10px 10px 0;
             height: 100%;
             vertical-align: bottom;
@@ -94,6 +97,8 @@
             box-shadow: none;
         }
         .ant-input {
+            z-index: 10;
+            position: relative;
             border-color: transparent !important;
             box-shadow: none;
             border-radius: 3px 0 0 0;
@@ -113,6 +118,8 @@
 }
 
 .progressHandler{
+    z-index: 10;
+    position: relative;
     margin: 0 7px 0 7px;
     :global{
         .ant-progress-bg{
@@ -182,18 +189,39 @@
 }
 
 .imagePreviewWrapper{
-    display: flex;
     position: relative;
-    z-index: 30;
     width: 100%;
     height: 100%;
-    margin: 15px 0 15px 0;
+    // top: -100px;
+    margin: 0 0 15px 0;
     .imagePreview{
+        z-index: 5;
+        position: relative;
         margin: auto;
-        max-width: 300px;
-        object-fit: cover;
         border-radius: 8px;
+        img{
+            width: 100%;
+            border: 0.5px rgba(56, 56, 56, 0.459) solid;
+        }
+        transition: all 150ms linear;
+
     }
+    .imageOverlay{
+        z-index: 10;
+        position: relative;
+        opacity: 0;
+        transition: all 150ms linear;
+
+    }
+}
+.imagePreviewWrapper:hover .imagePreview{
+    opacity: 0.5;
+    transition: all 150ms linear;
+}
+.imagePreviewWrapper:hover .imageOverlay{
+    opacity: 1;
+    transition: all 150ms linear;
+
 }
 
 .proccessUnset{

src/components/UserBadges/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './index.less'
+import * as antd from 'antd'
+import * as ycore from 'ycore'
+import { BadgesType } from 'globals/badges_list'
+
+export default class UserBadges extends React.Component {
+    render(){
+        const { values } = this.props;
+        console.log(BadgesType)
+        return(
+            <div className={styles.TagWrappers}>
+                  {ycore.booleanFix(values.nsfw_flag)? <antd.Tag color="volcano" >NSFW</antd.Tag> : null}
+                  {ycore.booleanFix(values.is_pro)? <antd.Tag color="purple">CPRO™ <Icons.RocketOutlined /></antd.Tag> : null}
+                  {ycore.booleanFix(values.dev)? <antd.Tag color="default">DEVELOPER <Icons.CodeOutlined /></antd.Tag> : null}
+            </div>
+        )
+    }
+}

src/components/UserProfile/index.js

@@ -42,9 +42,8 @@ class UserProfile extends React.Component {
         const { regx } = this.props
         this.initUser(regx)
         SetHeaderSearchType.disable()
-        // console.log('%c Halo, sabias que el gatitos es gai? ', 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)')
     }
-    
+
     initUser = (e) => {
         const parsed = e.shift()
         const raw = parsed.toString()
@@ -67,6 +66,12 @@ class UserProfile extends React.Component {
                 ycore.yconsole.log(`Using aproximate user! => ${c1}  /  ${c2}`)
                 ycore.crouter.native(`@${c1}`)
               }
+              ycore.GetUserTags(rp['0'].user_id, (err, res) => {
+                if (err) {
+                  ycore.notifyError(err)
+                  return
+                }
+              })
               this.setState({ UUID: rp['0'].user_id,  RenderValue: rp['0'], loading: false , Followed: ycore.booleanFix(rp['0'].is_following)})            
             } catch (err) {
               ycore.notifyError(err)
@@ -92,8 +97,8 @@ class UserProfile extends React.Component {
                   {ycore.booleanFix(values.nsfw_flag)? <antd.Tag color="volcano" >NSFW</antd.Tag> : null}
                   {ycore.booleanFix(values.is_pro)? <antd.Tag color="purple">CPRO™ <Icons.RocketOutlined /></antd.Tag> : null}
                   {ycore.booleanFix(values.dev)? <antd.Tag color="default">DEVELOPER <Icons.CodeOutlined /></antd.Tag> : null}
-                  {isOwnProfile(values.id)?  null : <div className={styles.follow_wrapper} onClick={() => this.handleFollowUser()} ><Follow_btn followed={this.state.Followed? true : false} /></div>}
                 </div>
+                {isOwnProfile(values.id)?  null : <div className={styles.follow_wrapper} onClick={() => this.handleFollowUser()} ><Follow_btn followed={this.state.Followed? true : false} /></div>}
                 <div className={styles.contentTitle}>
                    <h1 style={{ marginBottom: '0px' }} >{values.username}<antd.Tooltip title="User Verified">{ycore.booleanFix(values.verified)? <Icon style={{ color: 'blue', verticalAlign:'top' }} component={CustomIcons.VerifiedBadge} /> : null}</antd.Tooltip></h1> 
                    <span style={{ fontSize: '14px', fontWeight: '100', lineHeight: '0', marginBottom: '5px' }} dangerouslySetInnerHTML={{__html:  values.about }}  />

src/components/index.js

@@ -1,19 +1,50 @@
+// @alias from 'components'
+
+// Helpers & Misc
 import CustomIcons from './CustomIcons'
-import PageTransition from './PageTransition'
-import MainFeed from './MainFeed'
-import YulioID from './YulioID'
-import SearchCard from './SearchCard'
-import LikeBTN from './LikeBtn'
-import UserProfile from './UserProfile'
-import MainSidebar from './MainSidebar'
-import PostCard from './PostCard'
-import PostCreator from './PostCreator'
 import Loader from './Loader/Loader.js'
 import ScrollBar from './ScrollBar'
-import * as MyLayout from './Layout/index.js'
 import Page from './Page'
 import CoreLoader from './CoreLoader'
+
+// App Layout Components
+import * as MyLayout from './Layout/index.js'
 import MicroHeader from './MicroHeader'
 import HeaderSearch from './HeaderSearch'
+import MainSidebar from './MainSidebar'
+import PageTransition from './PageTransition'
+import YulioID from './YulioID'
 
-export { PageTransition, SearchCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}
+// User Components
+import UserBadges from './UserBadges'
+import UserProfile from './UserProfile'
+import SearchCard from './SearchCard'
+
+// Post Components
+import PostCard from './PostCard'
+import LikeBTN from './LikeBtn'
+import MainFeed from './MainFeed'
+import PostCreator from './PostCreator'
+
+// Mix & Export all
+export 
+{ 
+    UserBadges, 
+    PageTransition, 
+    SearchCard, 
+    HeaderSearch, 
+    YulioID, 
+    UserProfile, 
+    MyLayout, 
+    Loader, 
+    Page, 
+    ScrollBar, 
+    CoreLoader, 
+    PostCard, 
+    PostCreator, 
+    CustomIcons, 
+    MainSidebar, 
+    LikeBTN, 
+    MainFeed, 
+    MicroHeader
+}

src/layouts/PrimaryLayout.js

@@ -165,7 +165,7 @@ class PrimaryLayout extends PureComponent {
            <Sider {...SiderProps}/>
 
             <div id="primaryLayout" className={styles.leftContainer}>
-                <PageTransition preset="moveToLeftFromRight" id="scroller" transitionKey={location.pathname}>
+                <PageTransition preset="moveToRightScaleUp" id="scroller" transitionKey={location.pathname}>
                    
                     <Content {...ContainerProps} className={classnames(styles.content, {[styles.collapsed]: !collapsed} )}>
                         <HeaderSearch />
@@ -175,15 +175,15 @@ class PrimaryLayout extends PureComponent {
             </div>  
 
             <div id="secondaryLayout" className={styles.rightContainer}>
-                <PageTransition preset="moveToLeftFromRight" transitionKey={location.pathname}>
+                
                   <div className={styles.SecondHeader}>
                     <div className={styles.notif_box}></div>
-                    <img src={userData.avatar} />
+                    <img onClick={() => ycore.crouter.native(`@${userData.username}`)} src={userData.avatar} />
                   </div>
                   <Fragment>
                      {this.state.ContentSecondLayer}
                   </Fragment>
-                </PageTransition>
+ 
             </div>
 
           </Layout>

src/layouts/PrimaryLayout.less

@@ -6,7 +6,15 @@
   img {
     border-radius: 15px;
     width: 40px;
+    transition: all 150ms linear;
+    box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0);
+
   }
+  img:hover{
+    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
+    transition: all 150ms linear;
+  }
+  transition: all 150ms linear;
   .notif_box {
     margin: 0 15px 0 5px;
     width: 40px;

src/pages/__m/index.js

@@ -3,18 +3,21 @@ import React from 'react';
 import * as ycore from 'ycore'
 import * as antd from 'antd'
 import * as Icons from '@ant-design/icons';
+import $ from 'jquery'
 import Icon from '@ant-design/icons'
 
 import styles from './style.less'
 import { GridContent } from '@ant-design/pro-layout';
+import { json } from 'body-parser';
 
-
+const UserData = ycore.SDCP()
 
 export default class __m extends React.Component {
   constructor(props){
     super(props),
     this.state = {
       s_id: '',
+      coninfo: 'Getting info...',
     };
   }
 
@@ -33,43 +36,57 @@ export default class __m extends React.Component {
       this.setState({ s_id: response})
     })
   }
+  DescompileSDCP(){
+    let result = {};
+    for (var i = 0; i < UserData.length; i++) {
+      result[UserData[i].key] = UserData[i].value;
+    }
+    console.log([result])
+  }
 
   render() {
-    return (
+    const arrayOfSDCP = Object.entries(UserData).map((e) => ( { [e[0]]: e[1] } ));
-      <GridContent>
-        <React.Fragment>
-            <div className={styles.titleHeader}>
-              <h1><Icons.ApartmentOutlined /> Administration</h1>
-            </div>
 
-            <div className={styles.titleHeader}>
+    return (
-              <h1><Icons.BugOutlined /> Debug</h1>
+      <div className={styles.Wrapper}>
-            </div>
+          <div className={styles.titleHeader}>
-            <div className={styles.sectionWrapper}>
+            <h1><Icons.DeploymentUnitOutlined /> yCore™ Server</h1>
-              <div>
+          </div>
-                <antd.Button onClick={() => this.handleSID()} > Refresh Session ID</antd.Button>
+          <div className={styles.sectionWrapper}>
-                <span> {this.state.s_id} </span>
+            <antd.Card>
-              </div>
+              <h2><Icons.CloudServerOutlined /> Server UID</h2>
-            </div>
+              <span> {ycore.yConfig.server_key} </span>
-          <antd.Row
+            </antd.Card>  
-            gutter={24}
+            <antd.Card>
-            type="flex"
+              <h2><Icons.UserOutlined /> Your SID</h2>
-            style={{
+              <span> {this.state.s_id} </span>
-              marginTop: 24,
+            </antd.Card>
-            }}
+            <antd.Card>
-          >
+              <span> Using v{ycore.AppInfo.version} | User @{UserData.username}#{UserData.id} | </span>  
-      
+            </antd.Card>
-            <antd.Col xl={12} lg={24} md={24} sm={24} xs={24}>
+          </div>
-           
+
-                <h1>__m2</h1>
+          <div className={styles.titleHeader}>
-             
+            <h1><Icons.DatabaseOutlined  /> SDCP™</h1>
-            </antd.Col>
+          </div>
-          </antd.Row>
+          <div className={styles.sectionWrapper}>
-         
+            <antd.Card>
-            <h1>__m3 offline</h1>
+              <h2><Icons.CloudServerOutlined /> UserData</h2>
-      
+              <antd.Collapse>
-        </React.Fragment>
+                <antd.Collapse.Panel  header="WARNING: High Heap when descompile data! " key="1">
-      </GridContent>
+                  { JSON.stringify(arrayOfSDCP) }
-    );
+                </antd.Collapse.Panel>
+              </antd.Collapse>
+
+              
+              
+              
+            
+            </antd.Card>  
+            
+          </div>
+
+      </div>
+    )
   }
 }

src/pages/__m/style.less

@@ -1,5 +1,8 @@
 @import '~themes/vars.less';
 
+.Wrapper{
+  padding: 10px;
+}
 .titleHeader{
   position: relative;
   width: 100%;
@@ -16,8 +19,9 @@
   
 }
 .sectionWrapper{
-  display: flex;
+  word-break: break-all;
-  position: relative;
+  max-width: 100%;
+  text-overflow: clip;
   margin: 15px auto 15px 0;
   padding: 15px;
   background-color: rgb(236, 236, 236);

src/pages/settings/components/base.js

@@ -1,9 +1,9 @@
 import React, { Component, Fragment } from 'react';
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { List, Switch, Button, notification, InputNumber } from 'antd';
-import { List, Switch, Button, notification } from 'antd';
 import { AppSettings } from '../../../../globals/settings.js'
 import { DevOptions, ControlBar } from 'ycore'
 import * as ycore from "ycore"
+import * as Icons from '@ant-design/icons'
 import { CustomIcons } from 'components'
 
 class Base extends Component { 
@@ -20,6 +20,19 @@ class Base extends Component {
       ycore.yconsole.warn('The settings for this app in your Account isnt set yet, Using stock settings...')
     }
   }
+
+  rendersets = (item) => {
+  let e = item.type
+   switch (e) {
+     case 'switch':
+      return <Switch checkedChildren={'Enabled'} unCheckedChildren={'Disabled'} checked={item.value} onChange={() => this.onChangeSwitch(item)} />
+      case 'numeric':
+        return <InputNumber min={1} max={50} defaultValue={item.value} onChange={() => this.onChangeNumeric(item, value)} />
+     default:
+       break;
+   }
+  }
+
   SettingRender = data =>{
     try{
     return(
@@ -28,30 +41,29 @@ class Base extends Component {
           itemLayout="horizontal"
           dataSource={data}
           renderItem={item => (
-                 <List.Item actions={item.actions}  >
+                 <List.Item actions={item.actions} key={item.SettingID}  >
                    <List.Item.Meta title={item.title} description={item.description} />
-                   <Switch checkedChildren={'Enabled'} unCheckedChildren={'Disabled'} checked={item.value} onChange={() => this.onChange(item)} />
+                    { this.rendersets(item) }
                  </List.Item>
                )}
         />
-      <Button onClick={() => ycore.RegSW()} > Upload Service Worker </Button>
       </div>
       )
     }
     catch (err){
-      return console.log(err)
+      return ycore.yconsole.log(err)
     }
   }
   handleControlBar(){
     const ListControls = [
       (<div>
-          <Button type="done" icon={<LegacyIcon type='save' />} onClick={() => this.saveChanges()} >Save</Button>
+          <Button type="done" icon={<Icons.SaveOutlined />} onClick={() => this.saveChanges()} >Save</Button>
       </div>
      )
     ]
     ControlBar.set(ListControls)
   }
- 
+
   saveChanges(){
     localStorage.setItem('app_settings', JSON.stringify(this.state.SettingRepo))
     this.setState({ forSave: false })
@@ -62,24 +74,39 @@ class Base extends Component {
     setTimeout((ycore.RefreshONCE()), 1000)
     ControlBar.close()
   }
-  onChange(item) {
+
+  onChangeSwitch(item) {
     try {
       this.handleControlBar()
       const to = !item.value
       const updatedValue = [...this.state.SettingRepo]
       .map(ita => ita === item? Object.assign(ita, { "value": to }) : ita);
       this.setState({SettingRepo: updatedValue, forSave: true})
-      yconsole.log(`Changing ${item.SettingID} to value ${to}`)
+      ycore.yconsole.log(`Changing ${item.SettingID} to value ${to}`)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+  onChangeNumeric(value, item) {
+    this.HandleChangeNumeric(value)
+  }
+  HandleChangeNumeric(item, value) {
+    try {
+      this.handleControlBar()
+      console.log(item.SettingID, value)
+      const updatedValue = [...this.state.SettingRepo]
+      .map(ita => ita === item? Object.assign(ita, { "value": value }) : ita);
+      this.setState({SettingRepo: updatedValue, forSave: true})
+      ycore.yconsole.log(`Changing ${item.SettingID} to value ${to}`)
     } catch (err) {
       console.log(err)
     }
   }
-
   render() {
     return (
       <Fragment>
          <div>
-            <h1><CustomIcons.RobotOutlined /> Behaviors</h1>
+            <h1><Icons.PullRequestOutlined /> Behaviors</h1>
              {this.SettingRender(this.state.SettingRepo)}
          </div>
       </Fragment>

src/pages/settings/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { GridContent } from '@ant-design/pro-layout';
-import { Icon as LegacyIcon } from '@ant-design/compatible';
 import { Menu, Typography } from 'antd';
 import * as antd from 'antd'
 import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons'
 import styles from './style.less';
 
 import NotificationView from './components/notification.js';
@@ -60,7 +60,7 @@ class GeneralSettings extends React.Component {
     const { mode, selectKey } = this.state;
     return (
       <div>
-        <Title className={styles.titleHead}><LegacyIcon type="setting" /> Settings</Title>
+        <Title className={styles.titleHead}><Icons.SettingOutlined /> Settings</Title>
         <GridContent>
           <div
             className={styles.main}