0.1.16-T1 Layout Update

globals/endpoints.js

@@ -1,6 +1,6 @@
 module.exports = {
     Endpoints: {
-        get_user_posts: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=",
+        get_posts: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=",
         find_user: "https://api.ragestudio.net/RS-YIBTP/yid/find_user?access_token=",
         search_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/search?access_token=",
         get_sessions: "https://api.ragestudio.net/RS-YIBTP/yid/session_id?access_token=",
@@ -12,7 +12,6 @@ module.exports = {
         get_marketplace_global: "https://api.ragestudio.net/RS-YIBTP/rs/marketplaceHandler?access_token=",
         get_config_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-site-settings?access_token=",
         get_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-user-data?access_token=",
-        get_userPostFeed: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=",
         update_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/update-user-data?access_token=",
         removeToken: "https://api.ragestudio.net/RS-YIBTP/yid/delete-access-token?access_token=",
         register_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/create-account",

package.json

@@ -2,7 +2,7 @@
   "name": "comty-development",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "",
   "main": "index.js",
   "author": "RageStudio",

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

@@ -49,47 +49,39 @@ export function SeachKeywords(key, callback){
     })
 }
 
-export function GetUserPosts(id, callback) {
+export function GetPosts(userid, type, callback) {
-    let formdata = new FormData();
+  let formdata = new FormData();
-    formdata.append("server_key", ycore.yConfig.server_key);
+  formdata.append("server_key", ycore.yConfig.server_key);
-    formdata.append("type", "get_user_posts");
+  switch (type) {
-    formdata.append("id", id)
+    case 'feed':
-    const urlOBJ = `${ycore.endpoints.get_user_posts}${ycore.GetUserToken.decrypted().UserToken}`
+      formdata.append("type", "get_news_feed");
-    const settings = {
+      break;
-        "url":  urlOBJ,
+    case 'user':
-        "method": "POST",
+      formdata.append("type", "get_user_posts");
-        "timeout": 10000,
+      formdata.append("id", userid)
-        "processData": false,
+      break;
-        "mimeType": "multipart/form-data",
+    default:
-        "contentType": false,
+      formdata.append("type", "get_news_feed");
-        "data": formdata
+      break;
-    };
+  }
-    jquery.ajax(settings)
+  const urlOBJ = `${ycore.endpoints.get_posts}${ycore.GetUserToken.decrypted().UserToken}`
-    .done(function (response) {
+  const settings = {
-        return callback(null, response);
+      "url":  urlOBJ,
-    })
+      "method": "POST",
-    .fail(function (response) {
+      "timeout": 10000,
-        const exception = 'Request Failed';
+      "processData": false,
-        return callback(exception, response);
+      "mimeType": "multipart/form-data",
-    })
+      "contentType": false,
-}
+      "data": formdata
-
+  };
-export function GetFeedPosts(callback) {
+  jquery.ajax(settings)
-    let formdata = new FormData();
+  .done(function (response) {
-    formdata.append("server_key", ycore.yConfig.server_key);
+      return callback(null, response);
-    formdata.append("type", "get_news_feed");
+  })
-    const requestOptions = {
+  .fail(function (response) {
-      method: 'POST',
+      const exception = 'Request Failed';
-      body: formdata,
+      return callback(exception, response);
-      redirect: 'follow'
+  })
-    };
-    const objUrl = `${ycore.endpoints.get_userPostFeed}${ycore.GetUserToken.decrypted().UserToken}`
-    fetch(objUrl, requestOptions)
-      .then(response => response.text())
-      .then(result => {
-       return callback( null, result)
-      })
-      .catch(error => console.log('Load Post error => ', error))
 }
 
 export const get_app_session = {

src/components/Layout/Sider.less

@@ -63,6 +63,7 @@
 }
 
 .brand {
+  cursor: pointer;
   img{
     display: flex;
     vertical-align: middle;
@@ -72,11 +73,7 @@
     max-height: 58px;
   }
 }
-.brand:hover{
+
-  img{
-    size: 9cm;
-  }
-}
 
 .avatarFull{
   width: 120px;
@@ -92,7 +89,6 @@
     bottom: 0;
     position: absolute;
     width: 100%;
- 
   }
 }
 .siderhead{
@@ -120,6 +116,9 @@
     .ant-layout-sider-dark {
       background-color: @LDarkMode-backgroud;
       color: @DarkMode-color;
+      h2{
+        color: @Theme-SiderDeco-Color;
+      }
       .ant-menu-item{
         color: @DarkMode-color;
       }
@@ -134,6 +133,9 @@
     .ant-layout-sider-light {
       background-color: @Theme-SiderDeco-Backgroud;
       color: @Theme-SiderDeco-Color;
+      h2{
+        color: @Theme-SiderDeco-Color;
+      }
       .ant-menu-item{
         color: @Theme-SiderDeco-Color;
       }

src/components/LikeBtn/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './index.scss'
+import classnames from 'classnames'
+
+class LikeBTN extends React.PureComponent {
+    render(){
+        const { active } = this.props
+        return(
+          <button className={classnames(styles.like_button, {[styles.activated]: active } )}>
+            <div className={classnames(styles.like_wrapper, {[styles.activated]: active } )}>
+              <div className={styles.ripple}></div>
+              <svg selected={true} className={styles.heart} width="24" height="24" viewBox="0 0 24 24">
+                <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
+              </svg>
+              
+            </div>
+          </button>
+        )
+    }
+}
+
+export default LikeBTN

src/components/LikeBtn/index.scss

@@ -0,0 +1,214 @@
+.like_button, .like_button:before, .like_button:after {
+    position: relative;
+    box-sizing: border-box;
+  }
+  .ripple, .ripple:before, .ripple:after {
+    position: relative;
+    box-sizing: border-box;
+  }
+  
+  :root {
+    --color-heart: #EA442B;
+    --easing: cubic-bezier(.7,0,.3,1);
+    --duration: .5s;
+  }
+  
+  
+  .like_button {
+    font-size: 40px;
+    border: none;
+    border-radius: 50%;
+    background: white;
+    width: 1em;
+    height: 1em;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    z-index: 2;
+    transition: transform var(--duration) var(--easing);
+    cursor: pointer;
+    
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      transition: inherit;
+    }
+    
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: inherit;
+      z-index: -1;
+    }
+    
+    &:active {
+      &:before {
+        animation: depress-shadow var(--duration) var(--easing) both;
+      }
+    }
+    
+    &:focus:after {
+      animation: depress var(--duration) var(--easing) both;
+    }
+    
+    @keyframes depress {
+      from, to {
+        transform: none;
+      }
+      50% {
+        transform: translateY(5%) scale(0.9);
+      }
+    }
+    
+    @keyframes depress-shadow {
+      from, to {
+        transform: none;
+      }
+      50% {
+        transform: scale(0.5);
+      }
+    }
+  }
+  
+  .like_wrapper {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    > * { 
+      margin: auto;
+      grid-area: 1 / 1; 
+    }
+  }
+  
+  .heart {
+    width: .5em;
+    height: .5em;
+    display: block;
+   
+    > path {
+      stroke: var(--color-heart);
+      stroke-width: 2;
+      fill: transparent;
+      transition: fill var(--duration) var(--easing);
+     
+      .like_button:focus & {
+        fill: var(--color-heart); 
+      }
+    }
+    
+    transform-origin:  center 80%;
+    &.activated{
+        animation: heart-bounce var(--duration) var(--easing);
+        @keyframes heart-bounce {
+          40% { transform: scale(0.7); }
+          0%, 80%, 100% { transform: scale(1); }
+        }
+    }
+    .like_button:focus & {
+      animation: heart-bounce var(--duration) var(--easing);
+      @keyframes heart-bounce {
+        40% { transform: scale(0.7); }
+        0%, 80%, 100% { transform: scale(1); }
+      }
+    }
+  }
+  
+  /* Added wrapper to prevent layout jank with resizing particles */
+  .particles {
+    
+    width: 100%;
+    height: 100%;
+  }
+  
+  .particle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: .1em;
+    width: .1em;
+    border-radius: .05em;
+    background-color: var(--color);
+    --percentage: calc( var(--i) / var(--total-particles) );
+    --Θ: calc( var(--percentage) * 1turn );
+    transform: translate(-50%, -50%) rotate( var(--Θ) ) translateY(0) scaleY(0);
+    transition: all var(--duration) var(--easing);
+    
+    .like_button:focus & {
+      animation: particles-out calc(var(--duration) * 1.2) var(--easing) forwards;
+      
+      @keyframes particles-out {
+        50% {
+          height: .3em;
+        }
+        50%, 60% {
+          height: .3em;
+          transform:
+            translate(-50%, -50%) 
+            rotate( var(--Θ) )
+            translateY(.8em)
+            scale(1)
+            ;
+        }
+        60% {
+          height: .2em;
+        }
+        100% { 
+          transform:
+            translate(-50%, -50%) 
+            rotate( var(--Θ) )
+            translateY(1em)
+            scale(0)
+            ;
+        }
+      }
+    }
+  }
+  
+  .ripple {
+    height: 1em;
+    width: 1em;
+    border-radius: 50%;
+    overflow: hidden;
+    z-index: 1;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: .4em solid var(--color-heart);
+      border-radius: inherit;
+      transform: scale(0);
+    }
+    
+    .like_button:focus & {
+      &:before {
+        animation: ripple-out var(--duration) var(--easing);
+        @keyframes ripple-out {
+          from { transform: scale(0); }
+          to { transform: scale(5); }
+        }
+      }
+    }
+  }
+  
+
+  /* Reset the animation when clicking again! */
+  .like_button:focus {
+    pointer-events: none;
+    cursor: normal;
+  }

src/components/MainFeed/index.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import * as antd from 'antd'
+import * as ycore from 'ycore'
+import {PostCard} from 'components'
+
+var userData = ycore.SDCP()
+
+export function RefreshFeed(){
+    ycore.DevOptions.ShowFunctionsLogs? console.log('Refreshing Feed...') : null
+    window.MainFeedComponent.handleRefreshList();
+    return
+}
+class MainFeed extends React.Component {
+    constructor(props){
+        super(props)
+        window.MainFeedComponent = this;
+        this.state = {
+            loading: true,
+        }
+    }
+    toogleLoader(){
+        this.setState({ loading: !this.state.loading })
+    }
+    componentDidMount(){
+        const { get, uid, filters } = this.props
+        if (!get) {
+            console.error('Please, fill params with an catch type...')
+            return
+        }
+        ycore.GetPosts(uid, get, (err, result) => this.setState({ feedRaw: result, loading: false }))
+    }
+    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 }))
+    }
+    renderFeedPosts(e){
+        const {feedRaw} = this.state
+        const { get, filters } = this.props
+        try {
+            const feedParsed = JSON.parse(feedRaw)['data']
+            ycore.DevOptions.ShowFunctionsLogs? console.log(feedParsed) : null
+            return (
+                feedParsed.map(item=> {
+                    const {id, postText, post_time, publisher, postFile, postFileName, is_liked, is_post_saved, is_post_reported, is_post_boosted, is_post_pinned, post_likes} = item
+                    const paylodd = {
+                      user: publisher.username, 
+                      ago: post_time, 
+                      avatar: publisher.avatar, 
+                      content: postText, 
+                      file: postFile, 
+                      postFileName: postFileName, 
+                      publisher: publisher,
+                      post_likes: post_likes,
+                      is_liked: is_liked,  
+                      is_post_saved: is_post_saved,
+                      is_post_reported: is_post_reported,
+                      is_post_boosted: is_post_boosted,
+                      is_post_pinned: is_post_pinned,
+                    }
+                    return <PostCard payload={paylodd} key={id} />
+                })
+            )
+        } catch (err) {
+            ycore.notifyError(err)
+            const paylodd = {user: '', ago: '', avatar: '', content: '',  publisher: '' }
+            return <PostCard payload={paylodd} />
+        }
+    
+    }
+    render(){
+        const { loading } = this.state;   
+        return (
+            <div>   
+                {loading? 
+                    <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
+                        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
+                    </antd.Card> :
+                    this.renderFeedPosts()
+                }
+            </div>
+        )
+    }
+}
+export default MainFeed;

src/components/MicroHeader/index.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+import styles from './index.less'
+import Radium, {StyleRoot}from 'radium';
+import { fadeInUp, bounceOutDown } from 'react-animations'
+
+const animationStyles = {
+    fadeInUp: {
+        animation: 'x 0.5s',
+        animationName: Radium.keyframes(fadeInUp, 'fadeInUp')
+    },
+    bounceOutDown: {
+        animation: 'x 1s',
+        animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown')
+    }
+}
+
+export function HandleShow(){
+    window.MicroHeaderComponent.toogleShow();
+    return
+}
+class MicroHeader extends React.Component {
+    constructor(props){
+        super(props),
+        window.MicroHeaderComponent = this;
+        this.state = {
+            FadeIN: true,
+            Show: false
+        }
+    }
+    toogleShow(){
+        this.setState({FadeIN: !this.state.FadeIN})
+        this.state.FadeIN? this.setState({ Show: true }) : setTimeout(() => this.setState({ Show: false }), 1000)
+    }
+    render(){
+        const { FadeIN, Show } = this.state
+        return(
+            Show? (
+            <StyleRoot>
+                <div style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
+                    <antd.Card bordered={false} className={styles.MicroHeader}> 
+                      <React.Fragment>
+                          <span>Gatitos el gai</span>
+                      </React.Fragment> 
+                    </antd.Card>
+                </div>
+            </StyleRoot>
+            ) : null
+        )
+    }
+}
+export default MicroHeader

src/components/MicroHeader/index.less

@@ -0,0 +1,23 @@
+@import '~themes/vars.less';
+.MicroHeader{
+    background-color: transparent;
+    padding: 0 5px 0 5px;
+    width: 100%;
+    height: auto;
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    text-align: center;
+    :global {
+        .ant-card-body {
+            background-color: rgba(0, 0, 0, 0.1);
+            max-width: 7%;
+            margin: auto;
+            padding: 5px;
+        }
+        .ant-btn {
+            background-color: rgba(0, 0, 0, 0.1);
+            margin: 3px;
+        }
+    }
+}

src/components/PostCard/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
-import {CustomIcons} from 'components'
+import {CustomIcons, LikeBTN} from 'components'
+import * as ycore from 'ycore'
 
 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" />]
 
 class PostCard extends React.PureComponent{
     constructor(props){
@@ -53,23 +53,19 @@ class PostCard extends React.PureComponent{
             )
         }
     }
-    isVerifiedAccount(e){
+
-       if(e.verified == 1){
+    
-           return true
-       }
-       return false
-    }
     render(){
         const { payload, customActions,  } = this.props
-        const { user, ago, avatar, content, file, postFileName, publisher } = payload || emptyPayload;
+        const { user, ago, avatar, content, file, postFileName, publisher, post_likes } = payload || emptyPayload;
+        const defaultActions = [<div><LikeBTN active={true} key="like" /><span>{post_likes}</span></div>,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
         const actions = customActions || defaultActions;
-
         return(
           <div className={styles.cardWrapper}>
              <antd.Card actions={actions} >
                 <Meta
                     avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
-                    title={<div><a href={`/@${user}`}><h4 className={styles.titleUser}>@{user} {this.isVerifiedAccount(publisher)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}</h4></a></div>}
+                    title={<div><a href={`/@${user}`}><h4 className={styles.titleUser}>@{user} {ycore.booleanFix(publisher.verified)? <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}</h4></a></div>}
                     description={<span className={styles.textAgo}>{ago}</span>}
                     bordered="false"
                 />

src/components/PostCreator/index.js

@@ -3,13 +3,20 @@ import * as antd from 'antd'
 import * as ycore from 'ycore'
 import styles from './index.less'
 import {CustomIcons} from 'components'
+import { RefreshFeed } from 'components/MainFeed'
 
 const { Meta } = antd.Card;
 
+export function HandleVisibility(){
+    window.PostCreatorComponent.ToogleVisibility();
+    return
+}
 class PostCreator extends React.PureComponent{
     constructor(props){
         super(props),
+        window.PostCreatorComponent = this;
         this.state = {
+            visible: false,
             FadeIN: true,
             keys_remaining: '512',
             toolbox_open: false,
@@ -18,7 +25,9 @@ class PostCreator extends React.PureComponent{
             posting_ok: false
         }
     }
-
+    ToogleVisibility(){
+        this.setState({ visible: !this.state.visible })
+    }
     renderPostPlayer(payload){
         const ident = payload
         if (ident.includes('.mp4')) {
@@ -58,7 +67,6 @@ class PostCreator extends React.PureComponent{
     
     handleChanges = ({ target: { value } }) => {
         this.setState({ rawtext: value, keys_remaining: (ycore.DevOptions.MaxLengthPosts - value.length) })
-        
     }
     handleKeysProgressBar(){
         const { keys_remaining } = this.state;
@@ -93,8 +101,8 @@ class PostCreator extends React.PureComponent{
           .then(response => {
               ycore.DevOptions.ShowFunctionsLogs? console.log(response) : null
               this.setState({ posting_ok: true, posting: false, rawtext: ''})
-              setTimeout( () => { this.setState({ posting_ok: false }) }, 1000)
+              setTimeout( () => { this.ToogleVisibility(),this.setState({ posting_ok: false }) }, 1000)
-              refreshPull()
+              RefreshFeed()
              // console.warn(`[EXCEPTION] refreshPull or/and toogleShow is not set, the controller handlers not working...`)
               
             })
@@ -102,11 +110,12 @@ class PostCreator extends React.PureComponent{
     }
    
     render(){
-        const { keys_remaining, } = this.state;
+        const { keys_remaining, visible } = this.state;
         const percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) )
+        if (visible) {
         return(
           <div className={styles.cardWrapper}>
-             <antd.Card  >
+             <antd.Card>
                 <Meta
                     avatar={<div className={styles.titleIcon}><antd.Icon type="plus" /></div>}
                     title={<div><h4 className={styles.titlecreate}>Create a post </h4></div>}
@@ -136,6 +145,8 @@ class PostCreator extends React.PureComponent{
                 </antd.Drawer>
           </div>
         )
+        }
+        return null
     }
 }          
 export default PostCreator

src/components/UserProfile/index.js

@@ -3,7 +3,7 @@ import styles from './styles.less'
 import * as ycore from 'ycore'
 import * as antd from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import {CustomIcons, PostCard} from 'components'
+import {CustomIcons, MainFeed} from 'components'
 
 const userData = ycore.SDCP();
 
@@ -21,10 +21,11 @@ const UserHeader = ({ values }) => {
         <div className={styles.UserCover}>
           <img src={values.cover} />
         </div>
+       
         <PageHeaderWrapper content={
           <div className={styles.pageHeaderContent}>
             <div className={styles.avatar}>
-               <antd.Avatar shape="square" size="large" src={values.avatar} /> 
+               <antd.Avatar shape="square" size={140} src={values.avatar} /> 
             </div>
             <div className={styles.content}>
               <div className={styles.contentTitle}>
@@ -37,29 +38,13 @@ const UserHeader = ({ values }) => {
       </div>
     );
 };
-const UserBody = ({ values }) => {
-    try {
-        const feedParsed = JSON.parse(values)['data']
-        return (
-            feedParsed.map(item=> {
-                const {id, 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 }
-                ycore.DevOptions.ShowFunctionsLogs? console.log([item], paylodd) : null
-                return <PostCard payload={paylodd} key={id} />
-            })
-        )
-    } catch (err) {
-        const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Error displaying data :/',  publisher: '' }
-        return <PostCard payload={paylodd} />
-    }
 
 
-}
-
 class UserProfile extends React.Component {
     constructor(props){
       super(props),
       this.state = {
+        UUID: '',
         RenderValue: {},
         loading: true
       }
@@ -67,6 +52,7 @@ class UserProfile extends React.Component {
     componentDidMount(){
         const { regx } = this.props
         this.initUser(regx)
+        // 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) => {
@@ -74,12 +60,7 @@ class UserProfile extends React.Component {
         const raw = parsed.toString()
         const string = raw.replace('/@', "")
       
-        isOwnProfile(e)? (
+        ycore.FindUser(string, (exception, response)=> {
-          ycore.GetUserPosts(userData.id, (exception, response) => {
-            this.setState({ RenderValue: userData, rawbody: response, loading: false})
-          })) 
-              :
-         (ycore.FindUser(string, (exception, response)=> {
             exception? ycore.notifyError(exception) : null
             try {
               const rp = JSON.parse(response)
@@ -96,29 +77,22 @@ class UserProfile extends React.Component {
                 ycore.DevOptions.ShowFunctionsLogs ? console.log(`Using aproximate user! => ${c1}  /  ${c2}`) : null
                 ycore.crouter.native(`@${c1}`)
               }
-              ycore.GetUserPosts(rp['0'].user_id, (exception, response) => {
+              this.setState({ UUID: rp['0'].user_id,  RenderValue: rp['0'], loading: false })
-                exception? ycore.notifyError(exception) : null
-                try {
-                  this.setState({ rawbody: response })
-                } catch (err) {
-                  core.notifyError(err)
-                }
-              })
-              this.setState({ RenderValue: rp['0'], loading: false })
             } catch (err) {
               ycore.notifyError(err)
             }
           })
-        )
+        
     }
     render(){
-        const { loading } = this.state
+        const { loading, UUID} = this.state
+        console.log(UUID)
         return(
             <div>
               {loading? <antd.Skeleton active /> : 
               (<div>
                 <UserHeader values={this.state.RenderValue} />
-                <UserBody values={this.state.rawbody} />
+                <MainFeed get='user' uid={UUID} />
               </div>)
               }
             </div>

src/components/UserProfile/styles.less

@@ -1,6 +1,10 @@
 @import '~themes/vars.less';
-
+.userWrapper{
+  padding: 0 68px 15px 68px;
+  margin: auto;
+}
 .UserCover {
+  border-radius: 15px 15px 0 0;
   position: relative;
   width: 100%;
   margin: -32px auto auto auto;
@@ -46,23 +50,30 @@
   }
 }
 
+.avatar {
+  vertical-align: top;
+  flex: 0 1 72px;
+  position: absolute;
+  z-index: 10;
+  margin: -6% 0 0 -3%;
+
+  & > span {
+    display: block;
+    width: 92px;
+    height: 92px;
+  }
+}
+
 .pageHeaderContent {
   vertical-align: top;
   display: flex;
-  .avatar {
+
-    flex: 0 1 72px;
-    & > span {
-      display: block;
-      width: 92px;
-      height: 92px;
-    }
-  }
   .content {
     font-family: "Poppins", sans-serif;
     position: relative;
     top: 4px;
     flex: 1 1 auto;
-    margin-left: 24px;
+    margin: 0 0 20px 110px;
     color: @text-color-secondary;
     line-height: 22px;
     .contentTitle {

src/components/index.js

@@ -1,4 +1,6 @@
 import CustomIcons from './CustomIcons'
+import MainFeed from './MainFeed'
+import LikeBTN from './LikeBtn'
 import UserProfile from './UserProfile'
 import MainSidebar from './MainSidebar'
 import PostCard from './PostCard'
@@ -9,5 +11,6 @@ import * as MyLayout from './Layout/index.js'
 import Page from './Page'
 import YulioID from './YulioID/experimental/index.js'
 import CoreLoader from './CoreLoader'
+import MicroHeader from './MicroHeader'
 
-export { UserProfile, MyLayout, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar}
+export { UserProfile, MyLayout, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}

src/layouts/BaseLayout.js

@@ -12,11 +12,6 @@ import PublicLayout from './PublicLayout'
 import PrimaryLayout from './PrimaryLayout'
 import './BaseLayout.less'
 
-const bundle = localStorage.getItem('resource_bundle') 
-import(`themes/${bundle}/index.less`)
-
-
-
 const LayoutMap = {
   primary: PrimaryLayout,
   public: PublicLayout,

src/layouts/BaseLayout.less

@@ -2,7 +2,9 @@
 @import '~themes/index.less';
 
 :global {
-  
+  #root {
+    width: 100%;
+  }
   #nprogress {
     pointer-events: none;
 

src/layouts/PrimaryLayout.js

@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { connect } from 'dva'
-import { MyLayout } from 'components'
+import { MyLayout, MicroHeader } from 'components'
 import classnames from 'classnames'
 import { Layout, Drawer, Result, Button, Checkbox } from 'antd'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
@@ -153,8 +153,9 @@ class PrimaryLayout extends PureComponent {
           <div className={styles.BarControlWrapper}><Control /></div>
           <Layout className={this.isDarkMode()? styles.container_dark : styles.container_light}>
            <Sider {...SiderProps}/>
+           <MicroHeader />
             <div id="primaryLayout"className={styles.container}>
-      
+            
                 <Content {...ContainerProps} className={classnames(styles.content, {[styles.collapsed]: !collapsed} )}>
                     {children}
                 </Content>

src/layouts/PrimaryLayout.less

@@ -74,6 +74,14 @@
     .ant-card{
       background-color: @DarkMode-backgroud;
     }
+    .ant-input {
+      color: @DarkMode-color_container;
+      background-color: @DarkMode-backgroud;
+    }
+    .ant-btn-primary[disabled]{
+      color: @DarkMode-color_container;
+      background-color: @DarkMode-backgroud;
+    }
     transition: background-color 200ms linear;
   }
 }
@@ -87,12 +95,10 @@
       background-color: #2d2d2d;
       color: white;
     }
-
     .ant-menu-dark {
       background-color: #2d2d2d;
       color: white;
     }
-
     .ant-layout-sider-dark .ant-layout-sider-children {
       background-color: #2d2d2d;
       display: flex;

src/pages/main/index.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import * as antd from 'antd'
 import * as ycore from 'ycore'
-import {PostCard, PostCreator, MainSidebar} from 'components'
+import {PostCreator, MainSidebar, MainFeed, MicroHeader} from 'components'
 import styles from './index.less'
+import { RefreshFeed } from 'components/MainFeed'
+import { HandleVisibility } from 'components/PostCreator'
+import { HandleShow } from 'components/MicroHeader'
 
 var userData = ycore.SDCP()
 
@@ -10,53 +13,15 @@ class Main extends React.Component {
     constructor(props){
         super(props)
         this.state = {
-            feedRaw: '',
             loading: true,
             createPost: true,
         }
     }
-     
-    componentDidMount(){
-        ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
-    }
-    handleRefreshList(){
-        this.setState({ createPost: !this.state.createPost })
-        ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false }))
-    }
-    
-    renderFeedPosts(){
-        const {feedRaw} = this.state
-        try {
-            const feedParsed = JSON.parse(feedRaw)['data']
-            return (
-                feedParsed.map(item=> {
-                    const {id, 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 }
-                    return <PostCard payload={paylodd} key={id} />
-                })
-            )
-        } catch (err) {
-            ycore.notifyError(err)
-            const paylodd = {user: '', ago: '', avatar: '', content: '',  publisher: '' }
-            return <PostCard payload={paylodd} />
-        }
-    
-    }
-    getTarget = () => document.getElementById("PostsWrapper")
     render(){
-        const target = this.getTarget();
-        const { loading, createPost } = this.state;        
         return (
             <div> 
-                {createPost? <PostCreator refreshPull={() => {this.handleRefreshList()}} /> : null}
+                <PostCreator />
-                {loading? 
+                <MainFeed get="feed" />
-                    <antd.Card style={{  maxWidth: '26.5vw', margin: 'auto' }} >
-                        <antd.Skeleton avatar paragraph={{ rows: 4 }} active />
-                    </antd.Card> :
-                    <div id="PostsWrapper" className={styles.PostsWrapper}> 
-                        <antd.BackTop target={() => document.getElementById("PostsWrapper") } />
-                        {this.renderFeedPosts()} 
-                    </div>}
             </div>
         )
     }

src/pages/settings/style.less

@@ -3,17 +3,22 @@
 .titleHead{
   font-family: "Nunito", sans-serif;
 }
+
 .main {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: @menu-bg;
+  color: @DarkMode-color_container;
+  background-color: @DarkMode-backgroud;
   .leftMenu {
     width: 224px;
     border-right: @border-width-base @border-style-base @border-color-split;
     :global {
+      
       .ant-menu-inline {
+        color: @DarkMode-color_container;
+        background-color: @DarkMode-backgroud;
         border: none;
       }
       .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
@@ -72,16 +77,6 @@
     }
   }
 
-  // 密码强度
-  font.strong {
-    color: @success-color;
-  }
-  font.medium {
-    color: @warning-color;
-  }
-  font.weak {
-    color: @error-color;
-  }
 }
 
 @media screen and (max-width: @screen-md) {