changed like method & added post_autoposition setting

config/index.js

@@ -56,6 +56,7 @@ module.exports = {
         verbosity: false,
         session_noexpire: false,
         search_ontype: false,
+        post_autoposition: true,
         overlay_loosefocus: true,
         render_pagetransition_preset: 'moveToRightScaleUp',
         post_catchlimit: '20',

globals/settings.js

@@ -22,6 +22,13 @@ export default [
     title: 'Auto hide postbar',
     description: 'Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]',
   },
+  {
+    id: 'post_autoposition',
+    icon: <Icons.AlignCenter />,
+    type: 'switch',
+    title: 'Auto center on click',
+    description: '',
+  },
   {
     id: 'verbosity',
     icon: <Icons.Terminal />,

src/components/PostCard/components/like/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import styles from './index.less'
 import * as core from 'core'
 import classnames from 'classnames'
+import verbosity from 'core/libs/verbosity'
 
 export default class LikeBtn extends React.Component {
   state = {
@@ -9,22 +10,46 @@ export default class LikeBtn extends React.Component {
     count: this.props.count,
     clicked: false,
   }
-  handleClick(){
-    if (typeof(this.props.handleClick) !== "undefined") {
-      this.props.handleClick()
+
+  handleClick() {
+    let done = false
+    if (typeof (this.props.handleClick) !== "undefined") {
       this.setState({ clicked: true })
-      setTimeout(() => {
-        this.setState({ clicked: false, liked: !this.state.liked })
-      }, 500)
-    }else{
+
+      this.props.handleClick((callback) => {
+        if (typeof (callback) !== "object") {
+          this.setState({ count: callback })
+        } else {
+          verbosity(`Invalid response`)
+          this.setState({ clicked: false, liked: false })
+        }
+        setTimeout(() => {
+          this.setState({ clicked: false, liked: !this.state.liked })
+        }, 150)
+        done = true
+      }, setTimeout(() => {
+        if (!done) {
+          verbosity(`like click timeout!`)
+          this.setState({ clicked: false })
+        }
+      }, 3000))
+
+
+
+    } else {
       return false
     }
   }
 
+  getDecoratorCount(count) {
+    return `${core.abbreviateCount(new Number(count).toString())}`
+  }
+
   render() {
-    const { liked, clicked } = this.state
+    const { liked, clicked, count } = this.state
     return (
-        <button onClick={() => { this.handleClick() }} className={classnames(styles.like_button, {[styles.clickanim]: clicked })} >
+      <div>
+        <button onClick={() => { this.handleClick() }} className={classnames(styles.like_button, { [styles.clickanim]: clicked })} >
           <div className={styles.like_wrapper}>
             <div
               className={classnames(
@@ -46,6 +71,15 @@ export default class LikeBtn extends React.Component {
             </svg>
           </div>
         </button>
+        <div className={styles.likesIndicator} >
+          <span className={classnames(styles.likeCounter, {
+            [styles.active]: !clicked,
+            [styles.past]: clicked,
+          })} >
+            {this.getDecoratorCount(count)}
+          </span>
+        </div>
+      </div>
     )
   }
 }

src/components/PostCard/components/like/index.less

@@ -1,3 +1,6 @@
+@blur-transition-duration: 150ms;
+@blurFilter-transition-duration: 150ms;
+
 .like_button,
   .like_button:before,
   .like_button:after {
@@ -12,6 +15,48 @@
     box-sizing: border-box;
   }
 
+  .likesIndicator{
+    margin: auto;
+    position: absolute;
+    z-index: 12;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    border-radius: 0 12px 12px 0;
+    color: #333;
+    width: fit-content;
+    height: fit-content;
+    transition: all 150ms ease-in-out;
+    transform: translate(30px, -4px);
+    padding: 5px 14px;
+  }
+  
+  .likeCounter {
+    font-family: "Poppins", sans-serif;
+
+    opacity: 0;
+    transform: perspective(100px) translateZ(10px);
+    filter: blur(10px);
+    letter-spacing: 0.1em;
+
+    &.active {
+      opacity: 1;
+      transform: perspective(100px) translateZ(0px);
+      filter: blur(0px);
+      letter-spacing: 0.15em;
+      transition: opacity @blur-transition-duration linear, transform @blur-transition-duration linear, filter @blurFilter-transition-duration linear, letter-spacing @blur-transition-duration linear;
+    }
+
+    &.past {
+      opacity: 0;
+      transform: perspective(100px) translateZ(-10px);
+      filter: blur(10px);
+      letter-spacing: 0.2em;
+      transition: opacity @blur-transition-duration linear, transform @blur-transition-duration linear, filter @blurFilter-transition-duration linear, letter-spacing @blur-transition-duration linear;
+    }
+  }
+  
+
   .like_button {
     --color-heart: #EA442B;
     --easing: cubic-bezier(.7, 0, .3, 1);
@@ -26,7 +71,7 @@
     padding: 0;
     margin: 0;
     outline: none;
-    z-index: 2;
+    z-index: 13;
     transition: transform var(--duration) var(--easing);
     cursor: pointer;
 

src/components/PostCard/index.js

@@ -6,6 +6,7 @@ import * as Icons from 'components/Icons'
 import * as core from 'core'
 import Icon from '@ant-design/icons'
 import classnames from 'classnames'
+import verbosity from 'core/libs/verbosity'
 
 import settings from 'core/libs/settings'
 import { router } from 'core/libs'
@@ -74,11 +75,13 @@ export default class PostCard extends React.PureComponent {
   }
 
   goElementById(id) {
-    document.getElementById(id).scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-      inline: "center"
-    })
+    if (settings("post_autoposition")) {
+      document.getElementById(id).scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center"
+      })
+    }
   }
 
   toogleMoreMenu() {
@@ -131,16 +134,22 @@ export default class PostCard extends React.PureComponent {
     )
   }
 
-  handleLikeClick = (id) => {
+  handleLikeClick = (id, callback) => {
     if (typeof (this.props.handleActions)) {
-      this.props.handleActions("like", id, (callback) => {
+      this.props.handleActions("like", id, (callbackResponse) => {
         let updated = this.state.payload
-        if (callback.code == 200) {
+        if (callbackResponse.code == 200) {
+          
           updated.is_liked = !this.state.payload.is_liked
-          updated.post_likes = callback.response.count ?? 0
+          updated.post_likes = callbackResponse.response.count ?? 0
           this.setState({ payload: updated })
+
+          if (typeof(callback) !== "undefined") {
+            callback(callbackResponse.response.count)
+          }
+
         } else {
-          verbosity(`Api error response ${callback.code}`)
+          verbosity(`Api error response ${callbackResponse.code}`)
         }
       })
     } else {
@@ -163,7 +172,7 @@ export default class PostCard extends React.PureComponent {
     } = this.state.payload || defaultPayload
 
     const actions = [
-      <LikeBtn handleClick={() => { this.handleLikeClick(id) }} count={post_likes} liked={core.booleanFix(is_liked)} />,
+      <LikeBtn handleClick={(callback) => { this.handleLikeClick(id, (response) => { callback(response) }) }} count={post_likes} liked={core.booleanFix(is_liked)} />,
       <antd.Badge dot={this.state.payload.post_comments > 0 ? true : false}>
         <Icons.MessageSquare key="comments" />
       </antd.Badge>,
@@ -173,7 +182,7 @@ export default class PostCard extends React.PureComponent {
       <div ref={this.elementRef} key={this.state.payload.id} id={this.state.payload.id} className={styles.post_card_wrapper}>
         <antd.Card
           className={settings("post_hidebar") ? null : styles.showMode}
-          onClick={() => this.goElementById(this.state.payload.id)}
+          onClick={() => { this.goElementById(this.state.payload.id) }}
           actions={actions}
           hoverable
         >
@@ -209,9 +218,6 @@ export default class PostCard extends React.PureComponent {
             <div className={styles.ellipsisIcon}>
               <Icons.EllipsisOutlined />
             </div>
-            <div className={styles.likesIndicator} >
-              {post_likes} likes
-            </div>
           </div>
         </antd.Card>
       </div>

src/components/PostCard/index.less

@@ -17,20 +17,6 @@
   }
 }
 
-.likesIndicator{
-  margin: auto;
-  position: absolute;
-  bottom: 0;
-  left:0;
-  background-color: #242424;
-  border-radius: 4px;
-  color: #fff;
-  width: fit-content;
-  height: fit-content;
-  transform: translate(0, -15px);
-  padding: 5px 12px;
-}
-
 .post_card_wrapper {
   user-select: none;
   box-shadow: @post_card_wrapper_shadow;

src/core/index.js

@@ -180,6 +180,28 @@ export function isOs(os) {
   }
 }
 
+export function abbreviateCount(value) {
+  let updated = value
+  if (value >= 1000) {
+    const suffix = ["", "k", "m"]
+    let numberToSuffix = Math.floor(("" + value).length / 3)
+    let divider = ""
+
+    for (const offset = 2; offset >= 1; offset--) {
+      divider = parseFloat((numberToSuffix != 0 ? (value / Math.pow(1000, numberToSuffix)) : value).toPrecision(offset))
+      let firstDot = (divider + "").replace(/[^a-zA-Z 0-9]+/g, '')
+      if (firstDot.length <= 2) {
+        break
+      }
+    }
+    if (divider % 1 != 0) {
+      divider = divider.toFixed(1)
+    }
+    updated = divider + suffix[numberToSuffix]
+  }
+  return updated
+}
+
 export function imageToBase64(img, callback) {
   const reader = new FileReader()
   reader.addEventListener('load', () => callback(reader.result))

src/pages/explore/index.js

@@ -11,13 +11,39 @@ import styles from './index.less'
 
 @connect(({ app, socket }) => ({ app, socket }))
 export default class Explore extends React.Component {
-
   state = {
     socket: null,
     feed: null,
     renderError: false
   }
 
+  addPostToRender(payload) {
+    let postSchema = {
+      id: this.state.feed[0].id + 1,
+      post_time: "who knows",
+      postText: "empty",
+      publisher: "me",
+      post_likes: 2500
+    }
+
+    if (typeof(payload) !== "undefined") {
+      postSchema = { ...postSchema, ...payload }
+    }
+
+    let updated = this.state.feed
+    updated.push(postSchema)
+    this.setState({ feed: updated })
+    this.goPostById(postSchema.id)
+  }
+
+  goPostById(id) {
+    document.getElementById(id).scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "center"
+    })
+  }
+
   fetchFeed() {
     const { socket } = this.state
     if (socket) {
@@ -53,6 +79,8 @@ export default class Explore extends React.Component {
   }
 
   componentDidMount() {
+    window.addPostToRender = (...context) => this.addPostToRender(...context)
+
     if (this.props.app.session_valid) {
       this.props.dispatch({
         type: "socket/use",