0.1.16-T1 Layout Update

2025-06-09 10:34:17 +00:00 · 2020-02-16 17:20:14 +01:00 · 2020-02-16 17:20:14 +01:00 · 44127d77f4
commit 44127d77f4
parent 2140218680
20 changed files with 530 additions and 177 deletions
--- a/globals/endpoints.js
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/@ycore/libs/comty_ng/pre.js
+++ b/src/@ycore/libs/comty_ng/pre.js
@ -49,12 +49,22 @@ export function SeachKeywords(key, callback){
    })
 }

-export function GetUserPosts(id, callback) {
+export function GetPosts(userid, type, callback) {
  let formdata = new FormData();
  formdata.append("server_key", ycore.yConfig.server_key);
+  switch (type) {
+    case 'feed':
+      formdata.append("type", "get_news_feed");
+      break;
+    case 'user':
      formdata.append("type", "get_user_posts");
-    formdata.append("id", id)
-    const urlOBJ = `${ycore.endpoints.get_user_posts}${ycore.GetUserToken.decrypted().UserToken}`
+      formdata.append("id", userid)
+      break;
+    default:
+      formdata.append("type", "get_news_feed");
+      break;
+  }
+  const urlOBJ = `${ycore.endpoints.get_posts}${ycore.GetUserToken.decrypted().UserToken}`
  const settings = {
      "url":  urlOBJ,
      "method": "POST",
@ -74,24 +84,6 @@ export function GetUserPosts(id, callback) {
  })
 }

-export function GetFeedPosts(callback) {
-    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}`
-    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 = {
    get_id: (callback) => {
      const fromSto = sessionStorage.getItem('se_src')
--- a/src/components/Layout/Sider.less
+++ b/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;
      }
--- a/src/components/LikeBtn/index.js
+++ b/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
--- a/src/components/LikeBtn/index.scss
+++ b/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;
+  }
--- a/src/components/MainFeed/index.js
+++ b/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;
--- a/src/components/MicroHeader/index.js
+++ b/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
--- a/src/components/MicroHeader/index.less
+++ b/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;
+        }
+    }
+}
--- a/src/components/PostCard/index.js
+++ b/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"
                />
--- a/src/components/PostCreator/index.js
+++ b/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)
-              refreshPull()
+              setTimeout( () => { this.ToogleVisibility(),this.setState({ posting_ok: false }) }, 1000)
+              RefreshFeed()
             // console.warn(`[EXCEPTION] refreshPull or/and toogleShow is not set, the controller handlers not working...`)
              
            })
@ -102,8 +110,9 @@ 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>
@ -137,5 +146,7 @@ class PostCreator extends React.PureComponent{
          </div>
        )
        }
+        return null
+    }
 }          
 export default PostCreator
--- a/src/components/UserProfile/index.js
+++ b/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.GetUserPosts(userData.id, (exception, response) => {
-            this.setState({ RenderValue: userData, rawbody: response, loading: false})
-          })) 
-              :
-         (ycore.FindUser(string, (exception, response)=> {
+        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) => {
-                exception? ycore.notifyError(exception) : null
-                try {
-                  this.setState({ rawbody: response })
-                } catch (err) {
-                  core.notifyError(err)
-                }
-              })
-              this.setState({ RenderValue: rp['0'], loading: false })
+              this.setState({ UUID: rp['0'].user_id,  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>
--- a/src/components/UserProfile/styles.less
+++ b/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 @@
  }
 }

-.pageHeaderContent {
-  vertical-align: top;
-  display: flex;
 .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;
+
  .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 {
--- a/src/components/index.js
+++ b/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}
--- a/src/layouts/BaseLayout.js
+++ b/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,
--- a/src/layouts/BaseLayout.less
+++ b/src/layouts/BaseLayout.less
@ -2,7 +2,9 @@
@import '~themes/index.less';

 :global {
-  
+  #root {
+    width: 100%;
+  }
  #nprogress {
    pointer-events: none;

--- a/src/layouts/PrimaryLayout.js
+++ b/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,6 +153,7 @@ 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} )}>
--- a/src/layouts/PrimaryLayout.less
+++ b/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;
--- a/src/pages/main/index.js
+++ b/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}
-                {loading? 
-                    <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>}
+                <PostCreator />
+                <MainFeed get="feed" />
            </div>
        )
    }
--- a/src/pages/settings/style.less
+++ b/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) {