git ssb

1+

Daan Patchwork / manyverse



Commit 77ee59359c16729d71ef9d6eaeb5bb3413716d52

Browse Files

ux: bug fix: newly published message should show immediately

Andre Staltz committed on 3/15/2021, 5:42:39 PM
Parent: dd91ccc3ae3b96429d85421a6fce4d2b93b79b81

Files changed

src/frontend/components/Feed.tschanged
src/frontend/components/FullThread.tschanged
src/frontend/screens/thread/navigation.tschanged
src/frontend/components/Feed.tsView
@@ -164,17 +164,20 @@
164164 initialLoading: boolean;
165165 };
166166
167167 export default class Feed extends PureComponent<Props, State> {
168- private addedThreadsStream: any | null;
169168 private yOffset: number;
169+ private addedThreadsStream?: {push: (x: any) => {}; end: () => {}};
170170 private subscription?: Subscription;
171+ private drainSink?: {abort: () => {}};
172+ private latestPublicationTimestamp: number;
171173
172174 constructor(props: Props) {
173175 super(props);
176+ this.yOffset = 0;
177+ this.latestPublicationTimestamp = 0;
178+ this.addedThreadsStream = Pushable();
174179 this.state = {showPlaceholder: false, initialLoading: true};
175- this.addedThreadsStream = Pushable();
176- this.yOffset = 0;
177180 }
178181
179182 private _onScroll = (ev: {nativeEvent: NativeScrollEvent}) => {
180183 if (ev?.nativeEvent?.contentOffset) {
@@ -188,13 +191,23 @@
188191 };
189192
190193 public componentDidMount() {
191194 this.addedThreadsStream ??= Pushable();
192- const {publication$} = this.props;
195+ const {publication$, getPublicationsReadable} = this.props;
193196 if (publication$) {
194197 const listener = {next: this.onPublication.bind(this)};
195198 this.subscription = publication$.subscribe(listener as Listener<any>);
196199 }
200+ if (getPublicationsReadable) {
201+ pull(
202+ getPublicationsReadable({live: true, old: false}),
203+ (this.drainSink = pull.drain((thread: ThreadSummaryWithExtras) => {
204+ this.setState({showPlaceholder: false});
205+ this.addedThreadsStream?.push(thread);
206+ this.latestPublicationTimestamp = Date.now();
207+ })),
208+ );
209+ }
197210 }
198211
199212 public componentWillUnmount() {
200213 if (this.subscription) {
@@ -202,29 +215,21 @@
202215 this.subscription = void 0;
203216 }
204217 if (this.addedThreadsStream) {
205218 this.addedThreadsStream.end();
206- this.addedThreadsStream = null;
219+ this.addedThreadsStream = void 0;
207220 }
221+ if (this.drainSink) {
222+ this.drainSink.abort();
223+ this.drainSink = void 0;
224+ }
208225 }
209226
210227 private onPublication() {
211- const {getPublicationsReadable} = this.props;
212- if (!getPublicationsReadable) return;
213- const readable = getPublicationsReadable({live: true, old: false});
214- if (!readable) return;
215- const addedThreadsStream = this.addedThreadsStream;
216- const that = this;
217-
218- that.setState({showPlaceholder: true});
219- pull(
220- readable,
221- pull.take(1),
222- pull.drain((thread: ThreadSummaryWithExtras) => {
223- that.setState({showPlaceholder: false});
224- addedThreadsStream.push(thread);
225- }),
226- );
228+ // Prevent possible race condition in case ssb-db2 publication is very fast
229+ if (Date.now() > this.latestPublicationTimestamp + 200) {
230+ this.setState({showPlaceholder: true});
231+ }
227232 }
228233
229234 public renderHeader() {
230235 const {showPlaceholder} = this.state;
src/frontend/components/FullThread.tsView
@@ -1,5 +1,5 @@
1-/* Copyright (C) 2018-2020 The Manyverse Authors.
1+/* Copyright (C) 2018-2021 The Manyverse Authors.
22 *
33 * This Source Code Form is subject to the terms of the Mozilla Public
44 * License, v. 2.0. If a copy of the MPL was not distributed with this
55 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -76,8 +76,9 @@
7676 }
7777
7878 private subscription?: Subscription;
7979 private repliesSeen: Set<MsgId> = new Set();
80+ private latestPublicationTimestamp: number = 0;
8081
8182 public componentDidMount() {
8283 const {publication$} = this.props;
8384 if (publication$) {
@@ -111,8 +112,9 @@
111112 const prevMessages = prevProps.thread.messages;
112113 const nextMessages = this.props.thread.messages;
113114 if (nextMessages.length > prevMessages.length) {
114115 this.setState({showPlaceholder: false});
116+ this.latestPublicationTimestamp = Date.now();
115117 }
116118 }
117119
118120 public componentWillUnmount() {
@@ -122,9 +124,12 @@
122124 }
123125 }
124126
125127 private onPublication() {
126- this.setState({showPlaceholder: true});
128+ // Prevent possible race condition in case ssb-db2 publication is very fast
129+ if (Date.now() > this.latestPublicationTimestamp + 200) {
130+ this.setState({showPlaceholder: true});
131+ }
127132 }
128133
129134 private renderMessage = ({item, index}: any) => {
130135 const {
src/frontend/screens/thread/navigation.tsView
@@ -1,5 +1,5 @@
1-/* Copyright (C) 2018-2020 The Manyverse Authors.
1+/* Copyright (C) 2018-2021 The Manyverse Authors.
22 *
33 * This Source Code Form is subject to the terms of the Mozilla Public
44 * License, v. 2.0. If a copy of the MPL was not distributed with this
55 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -85,18 +85,16 @@
8585 .compose(sample(state$))
8686 .map((state) => {
8787 const messages = state.thread.messages;
8888 const lastMsgInThread = messages[messages.length - 1];
89- const authors = (() => {
90- const set = new Set<FeedId>();
91- for (const msg of state.thread.messages) {
92- const author = msg.value.author;
93- if (author !== state.selfFeedId && !set.has(author)) {
94- set.add(author);
95- }
89+ const set = new Set<FeedId>();
90+ for (const msg of state.thread.messages) {
91+ const author = msg.value.author;
92+ if (author !== state.selfFeedId && !set.has(author)) {
93+ set.add(author);
9694 }
97- return [...set.values()];
98- })();
95+ }
96+ const authors = [...set.values()];
9997
10098 return {
10199 type: 'push',
102100 layout: {

Built with git-ssb-web