From e36d0a98cc10575e67c526ef3cc9eeb431a1af3f Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 26 Jan 2020 20:07:26 +0100
Subject: [Glitch] Add streaming API updates for announcements being modified
 or deleted

Port b9d74d407673a6dbdc87c3310618b22c85358c85 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 app/javascript/flavours/glitch/components/animated_number.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js
index 4d14d2924..6f3d30d4e 100644
--- a/app/javascript/flavours/glitch/components/animated_number.js
+++ b/app/javascript/flavours/glitch/components/animated_number.js
@@ -27,7 +27,8 @@ export default class AnimatedNumber extends React.PureComponent {
     }
 
     const styles = [{
-      key: value,
+      key: `${value}`,
+      data: value,
       style: { y: spring(0, { damping: 35, stiffness: 400 }) },
     }];
 
@@ -35,8 +36,8 @@ export default class AnimatedNumber extends React.PureComponent {
       <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
         {items => (
           <span className='animated-number'>
-            {items.map(({ key, style }) => (
-              <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={key} /></span>
+            {items.map(({ key, data, style }) => (
+              <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={data} /></span>
             ))}
           </span>
         )}
-- 
cgit 


From 41d0869d7f40a51246cf50a34bed8c27fa30df23 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 26 Jan 2020 23:13:48 +0100
Subject: [Glitch] Change last_status_at to be a date, not datetime

Port 42d2a915e4aa31533032e37aaa46354cee2386da to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../flavours/glitch/components/relative_timestamp.js     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/relative_timestamp.js b/app/javascript/flavours/glitch/components/relative_timestamp.js
index aa4b73cfe..711181dcd 100644
--- a/app/javascript/flavours/glitch/components/relative_timestamp.js
+++ b/app/javascript/flavours/glitch/components/relative_timestamp.js
@@ -3,6 +3,7 @@ import { injectIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 
 const messages = defineMessages({
+  today: { id: 'relative_time.today', defaultMessage: 'today' },
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
   seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
   minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
@@ -65,12 +66,14 @@ const getUnitDelay = units => {
   }
 };
 
-export const timeAgoString = (intl, date, now, year) => {
+export const timeAgoString = (intl, date, now, year, timeGiven = true) => {
   const delta = now - date.getTime();
 
   let relativeTime;
 
-  if (delta < 10 * SECOND) {
+  if (delta < DAY && !timeGiven) {
+    relativeTime = intl.formatMessage(messages.today);
+  } else if (delta < 10 * SECOND) {
     relativeTime = intl.formatMessage(messages.just_now);
   } else if (delta < 7 * DAY) {
     if (delta < MINUTE) {
@@ -91,12 +94,14 @@ export const timeAgoString = (intl, date, now, year) => {
   return relativeTime;
 };
 
-const timeRemainingString = (intl, date, now) => {
+const timeRemainingString = (intl, date, now, timeGiven = true) => {
   const delta = date.getTime() - now;
 
   let relativeTime;
 
-  if (delta < 10 * SECOND) {
+  if (delta < DAY && !timeGiven) {
+    relativeTime = intl.formatMessage(messages.today);
+  } else if (delta < 10 * SECOND) {
     relativeTime = intl.formatMessage(messages.moments_remaining);
   } else if (delta < MINUTE) {
     relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) });
@@ -173,8 +178,9 @@ class RelativeTimestamp extends React.Component {
   render () {
     const { timestamp, intl, year, futureDate } = this.props;
 
+    const timeGiven    = timestamp.includes('T');
     const date         = new Date(timestamp);
-    const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year);
+    const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now, timeGiven) : timeAgoString(intl, date, this.state.now, year, timeGiven);
 
     return (
       <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
-- 
cgit 


From cf230d551f3081115402f74d4326a2682f27fedc Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 27 Jan 2020 11:04:11 +0100
Subject: [Glitch] Change number animations direction based on decrease or
 increase

Port 10e209d8e0601ded06e05df573e76935e175cb1c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../flavours/glitch/components/animated_number.js  | 27 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js
index 6f3d30d4e..e3235e368 100644
--- a/app/javascript/flavours/glitch/components/animated_number.js
+++ b/app/javascript/flavours/glitch/components/animated_number.js
@@ -11,16 +11,33 @@ export default class AnimatedNumber extends React.PureComponent {
     value: PropTypes.number.isRequired,
   };
 
-  willEnter () {
-    return { y: -1 };
+  state = {
+    direction: 1,
+  };
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.value > this.props.value) {
+      this.setState({ direction: 1 });
+    } else if (nextProps.value < this.props.value) {
+      this.setState({ direction: -1 });
+    }
   }
 
-  willLeave () {
-    return { y: spring(1, { damping: 35, stiffness: 400 }) };
+  willEnter = () => {
+    const { direction } = this.state;
+
+    return { y: -1 * direction };
+  }
+
+  willLeave = () => {
+    const { direction } = this.state;
+
+    return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) };
   }
 
   render () {
     const { value } = this.props;
+    const { direction } = this.state;
 
     if (reduceMotion) {
       return <FormattedNumber value={value} />;
@@ -37,7 +54,7 @@ export default class AnimatedNumber extends React.PureComponent {
         {items => (
           <span className='animated-number'>
             {items.map(({ key, data, style }) => (
-              <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={data} /></span>
+              <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={data} /></span>
             ))}
           </span>
         )}
-- 
cgit