[Glitch] Add button to load new replies in web UI

Port 14a781fa24 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/status/components/refresh_controller.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState, useCallback } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import {
+  fetchContext,
+  completeContextRefresh,
+} from 'flavours/glitch/actions/statuses';
+import type { AsyncRefreshHeader } from 'flavours/glitch/api';
+import { apiGetAsyncRefresh } from 'flavours/glitch/api/async_refreshes';
+import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  loading: {
+    id: 'status.context.loading',
+    defaultMessage: 'Checking for more replies',
+  },
+});
+
+export const RefreshController: React.FC<{
+  statusId: string;
+  withBorder?: boolean;
+}> = ({ statusId, withBorder }) => {
+  const refresh = useAppSelector(
+    (state) => state.contexts.refreshing[statusId],
+  );
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+  const [ready, setReady] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const scheduleRefresh = (refresh: AsyncRefreshHeader) => {
+      timeoutId = setTimeout(() => {
+        void apiGetAsyncRefresh(refresh.id).then((result) => {
+          if (result.async_refresh.status === 'finished') {
+            dispatch(completeContextRefresh({ statusId }));
+
+            if (result.async_refresh.result_count > 0) {
+              setReady(true);
+            }
+          } else {
+            scheduleRefresh(refresh);
+          }
+
+          return '';
+        });
+      }, refresh.retry * 1000);
+    };
+
+    if (refresh) {
+      scheduleRefresh(refresh);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [dispatch, setReady, statusId, refresh]);
+
+  const handleClick = useCallback(() => {
+    setLoading(true);
+    setReady(false);
+
+    dispatch(fetchContext({ statusId }))
+      .then(() => {
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, [dispatch, setReady, statusId]);
+
+  if (ready && !loading) {
+    return (
+      <button
+        className={classNames('load-more load-gap', {
+          'timeline-hint--with-descendants': withBorder,
+        })}
+        onClick={handleClick}
+      >
+        <FormattedMessage
+          id='status.context.load_new_replies'
+          defaultMessage='New replies available'
+        />
+      </button>
+    );
+  }
+
+  if (!refresh && !loading) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames('load-more load-gap', {
+        'timeline-hint--with-descendants': withBorder,
+      })}
+      aria-busy
+      aria-live='polite'
+      aria-label={intl.formatMessage(messages.loading)}
+    >
+      <LoadingIndicator />
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/status/index.jsx

@@ -62,7 +62,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 
 import ActionBar from './components/action_bar';
 import { DetailedStatus } from './components/detailed_status';
-
+import { RefreshController } from './components/refresh_controller';
 
 const messages = defineMessages({
   revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
@@ -572,7 +572,7 @@ class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants, remoteHint;
-    const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
+    const { isLoading, status, settings, ancestorsIds, descendantsIds, refresh, intl, domain, multiColumn, pictureInPicture } = this.props;
     const { fullscreen } = this.state;
 
     if (isLoading) {
@@ -604,11 +604,9 @@ class Status extends ImmutablePureComponent {
 
     if (!isLocal) {
       remoteHint = (
-        <TimelineHint
-          className={classNames(!!descendants && 'timeline-hint--with-descendants')}
-          url={status.get('url')}
-          message={<FormattedMessage id='hints.threads.replies_may_be_missing' defaultMessage='Replies from other servers may be missing.' />}
-          label={<FormattedMessage id='hints.threads.see_more' defaultMessage='See more replies on {domain}' values={{ domain: <strong>{status.getIn(['account', 'acct']).split('@')[1]}</strong> }} />}
+        <RefreshController
+          statusId={status.get('id')}
+          withBorder={!!descendants}
         />
       );
     }