Stoppen Sie die Live-Updates, während der Benutzer den Kommentar bearbeitet?

Question

Ich habe ein Kommentarsystem in meinem Blog. Die Kommentare werden live über WebSockets aktualisiert. Während die Kommentare aktualisiert werden, muss der Besitzer natürlich in der Lage sein, ihre Kommentare zu bearbeiten. Ich möchte die In-Place-Bearbeitung aktivieren (was bedeutet, dass der Kommentar durch ein Textfeld und die Schaltflächen zum Speichern/Verwerfen ersetzt wird). Meine React-App abonniert Socket-Ereignisse und ändert das Array comments im Komponentenstatus. Dies bedeutet, dass, während der Benutzer einen Kommentar bearbeitet, wenn etwas Neues hereinkommt, die Bearbeitung brutal gestoppt wird.

Having said dies, dachte ich an zwei mögliche Ansätze: 1. Während der Benutzer einen Kommentar bearbeitet, stoppen die Live-Updates 2. Halten Sie die Aktualisierung der Kommentare (dh vorübergehend Socket-Ereignisse ignorieren), sondern blättern halten auf den Kommentar Editor (mit dem ich nicht umzugehen weiß)

Ich denke, es wäre dumm, die Live-Updates zu stoppen, während der Benutzer einen Kommentar bearbeitet, also frage ich Sie, wie sollte man den Editor dort halten beim Aktualisieren von Kommentaren?

Mehr über meine Anwendungsstruktur:

ich die Komponente <PostComments /> dessen haben state enthält das Array comments. Das Array wird dann als ein Bündel von <Comment /> gemacht.

renderComments =() => { 
    const { comments } = this.state; 

    return comments.map(comment => { 
     return (
      <Comment key={comment['comment_id']} data={comment} /> 
     ); 
    }); 
}; 

Die <Comment /> Komponente statische Daten zu machen (dh ein Objekt mit einer Standardform

export const commentDataType = React.PropTypes.shape({ 
    comment_id: React.PropTypes.number.isRequired, 
    user_info: React.PropTypes.shape({ 
     preferred_name: React.PropTypes.string.isRequired, 
     profile_picture: React.PropTypes.string.isRequired, 
    }).isRequired, 
    post_timestamp: React.PropTypes.number.isRequired, 
    comment_text: React.PropTypes.string.isRequired, 
}); 

Und diese es irgendwie bekommt Danke !

Answer 1

Abschluss des kurzen Gespräch in den Kommentaren - mit allen Mitteln, ich glaube, der beste Ansatz eine Kopie des Kommentars separat irgendwo im Zustand Baum zu retten wäre (möglicherweise currentlyEditing oder etwas si milar), sobald der Benutzer sie zur Bearbeitung öffnet.

Dann kann der Benutzer stattdessen die Kopie bearbeiten, und Sie können die Logik in der Rückseite intakt so viel wie möglich beibehalten.

Wenn der Benutzer festlegt, speichern Sie die Änderungen des Kommentars für den Kommentar mit einer bestimmten comment_id.

Nachdenken, können Sie optional eine edited_timestamp vorstellen, um sicherzustellen, dass gleichzeitige Updates einander nicht überschreiben und eine Warnung anzeigen, wenn der Benutzer nicht die neuesten Änderungen hat und eine Änderung speichern möchte.

Auf diese Weise werden Sie die Updates erhalten, der Benutzerfluss und die Benutzererfahrung sollten nicht gestört werden und Sie werden es schaffen, so viel wie möglich von Ihrem Code zu verwenden, während Sie immer noch die Nachsicht und den Komfort haben, verwerfen zu können bearbeitete Änderungen auf Knopfdruck, ohne sich um Nebenwirkungen kümmern zu müssen.

Sie können häufig ähnliche Verhaltensweisen und Benutzererfahrung in Foren und Foren sehen. Oder Blogs, die Ihrem Anwendungsfall sehr ähnlich sind.