From a6459d3641586d87794ea5eee51185a1547655c7 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Wed, 8 Apr 2020 17:40:32 +0000
Subject: [PATCH] Mobile: Fixes #2941: Fixed resource download auto mode

---
 ElectronClient/gui/ResourceScreen.tsx         | 108 +++++++++---------
 .../lib/components/note-body-viewer.js        |  16 ++-
 2 files changed, 71 insertions(+), 53 deletions(-)

diff --git a/ElectronClient/gui/ResourceScreen.tsx b/ElectronClient/gui/ResourceScreen.tsx
index 0cc046a5d2..d1543cd9d3 100644
--- a/ElectronClient/gui/ResourceScreen.tsx
+++ b/ElectronClient/gui/ResourceScreen.tsx
@@ -81,34 +81,36 @@ const ResourceTable: React.FC<ResourceTable> = (props: ResourceTable) => {
 		fontWeight: 'bold',
 	};
 
-	return <table style={{ width: '100%' }}>
-		<thead>
-			<tr>
-				<th style={headerStyle}>{_('Title')} {sortOrderEngagedMarker('name')}</th>
-				<th style={headerStyle}>{_('Size')} {sortOrderEngagedMarker('size')}</th>
-				<th style={headerStyle}>{_('ID')}</th>
-				<th style={headerStyle}>{_('Action')}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{props.resources.map((resource: Resource, index: number) =>
-				<tr key={index}>
-					<td style={titleCellStyle} className="titleCell">
-						<a
-							style={{ color: props.theme.htmlLinkColor }}
-							href="#"
-							onClick={() => props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`}
-						</a>
-					</td>
-					<td style={cellStyle} className="dataCell">{prettyBytes(resource.size)}</td>
-					<td style={cellStyle} className="dataCell">{resource.id}</td>
-					<td style={cellStyle} className="dataCell">
-						<button style={props.theme.buttonStyle} onClick={() => props.onResourceDelete(resource)}>{_('Delete')}</button>
-					</td>
+	return (
+		<table style={{ width: '100%' }}>
+			<thead>
+				<tr>
+					<th style={headerStyle}>{_('Title')} {sortOrderEngagedMarker('name')}</th>
+					<th style={headerStyle}>{_('Size')} {sortOrderEngagedMarker('size')}</th>
+					<th style={headerStyle}>{_('ID')}</th>
+					<th style={headerStyle}>{_('Action')}</th>
 				</tr>
-			)}
-		</tbody>
-	</table>;
+			</thead>
+			<tbody>
+				{props.resources.map((resource: Resource, index: number) =>
+					<tr key={index}>
+						<td style={titleCellStyle} className="titleCell">
+							<a
+								style={{ color: props.theme.htmlLinkColor }}
+								href="#"
+								onClick={() => props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`}
+							</a>
+						</td>
+						<td style={cellStyle} className="dataCell">{prettyBytes(resource.size)}</td>
+						<td style={cellStyle} className="dataCell">{resource.id}</td>
+						<td style={cellStyle} className="dataCell">
+							<button style={props.theme.buttonStyle} onClick={() => props.onResourceDelete(resource)}>{_('Delete')}</button>
+						</td>
+					</tr>
+				)}
+			</tbody>
+		</table>
+	);
 };
 
 const getSortingOrderColumn = (s: SortingOrder): string => {
@@ -202,7 +204,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		const theme = themeStyle(this.props.theme);
 		const headerStyle = Object.assign({}, theme.headerStyle, { width: style.width });
 
-		const rootStyle = {
+		const rootStyle:any = {
 			...style,
 			overflowY: 'scroll',
 			color: theme.color,
@@ -212,34 +214,36 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		rootStyle.height = style.height - 35; // Minus the header height
 		delete rootStyle.width;
 
-		return <div style={{ ...theme.containerStyle, fontFamily: theme.fontFamily }}>
-			<Header style={headerStyle} />
-			<div style={rootStyle}>
-				<div style={{ ...theme.notificationBox, marginBottom: 10 }}>{
-					_('This is an advanced tool to show the attachments that are linked to your notes. Please be careful when deleting one of them as they cannot be restored afterwards.')
-				}</div>
-				{this.state.isLoading && <div>{_('Please wait...')}</div>}
-				{!this.state.isLoading && <div>
-					{!this.state.resources && <div>
-						{_('No resources!')}
+		return (
+			<div style={{ ...theme.containerStyle, fontFamily: theme.fontFamily }}>
+				<Header style={headerStyle} />
+				<div style={rootStyle}>
+					<div style={{ ...theme.notificationBox, marginBottom: 10 }}>{
+						_('This is an advanced tool to show the attachments that are linked to your notes. Please be careful when deleting one of them as they cannot be restored afterwards.')
+					}</div>
+					{this.state.isLoading && <div>{_('Please wait...')}</div>}
+					{!this.state.isLoading && <div>
+						{!this.state.resources && <div>
+							{_('No resources!')}
+						</div>
+						}
+						{this.state.resources && this.state.resources.length === MAX_RESOURCES &&
+							<div>{_('Warning: not all resources shown for performance reasons (limit: %s).', MAX_RESOURCES)}</div>
+						}
+						{this.state.resources && <ResourceTable
+							theme={theme}
+							style={style}
+							resources={this.state.resources}
+							sorting={this.state.sorting}
+							onToggleSorting={(order) => this.onToggleSortOrder(order)}
+							onResourceClick={(resource) => this.openResource(resource)}
+							onResourceDelete={(resource) => this.onResourceDelete(resource)}
+						/>}
 					</div>
 					}
-					{this.state.resources && this.state.resources.length === MAX_RESOURCES &&
-						<div>{_('Warning: not all resources shown for performance reasons (limit: %s).', MAX_RESOURCES)}</div>
-					}
-					{this.state.resources && <ResourceTable
-						theme={theme}
-						style={style}
-						resources={this.state.resources}
-						sorting={this.state.sorting}
-						onToggleSorting={(order) => this.onToggleSortOrder(order)}
-						onResourceClick={(resource) => this.openResource(resource)}
-						onResourceDelete={(resource) => this.onResourceDelete(resource)}
-					/>}
 				</div>
-				}
 			</div>
-		</div>;
+		);
 	}
 }
 
diff --git a/ReactNativeClient/lib/components/note-body-viewer.js b/ReactNativeClient/lib/components/note-body-viewer.js
index db5f19ebb9..79d185de59 100644
--- a/ReactNativeClient/lib/components/note-body-viewer.js
+++ b/ReactNativeClient/lib/components/note-body-viewer.js
@@ -21,11 +21,14 @@ class NoteBodyViewer extends Component {
 			bodyHtml: '',
 		};
 
+		this.forceUpdate_ = false;
+
 		this.isMounted_ = false;
 
 		this.markupToHtml_ = markupLanguageUtils.newMarkupToHtml();
 
 		this.reloadNote = this.reloadNote.bind(this);
+		this.watchFn = this.watchFn.bind(this);
 	}
 
 	componentDidMount() {
@@ -38,6 +41,8 @@ class NoteBodyViewer extends Component {
 	}
 
 	async reloadNote() {
+		this.forceUpdate_ = false;
+
 		const note = this.props.note;
 		const theme = themeStyle(this.props.theme);
 
@@ -183,9 +188,18 @@ class NoteBodyViewer extends Component {
 	}
 
 	rebuildMd() {
+		this.forceUpdate_ = true;
 		this.forceUpdate();
 	}
 
+	watchFn() {
+		// react-async will not fetch the data again after the first render
+		// so we use this watchFn function to force it to reload in certain
+		// cases. It is used in particular when re-rendering the note when
+		// a resource has been downloaded in auto mode.
+		return this.forceUpdate_;
+	}
+
 	render() {
 		// Note: useWebKit={false} is needed to go around this bug:
 		// https://github.com/react-native-community/react-native-webview/issues/376
@@ -206,7 +220,7 @@ class NoteBodyViewer extends Component {
 
 		return (
 			<View style={this.props.style}>
-				<Async promiseFn={this.reloadNote}>
+				<Async promiseFn={this.reloadNote} watchFn={this.watchFn}>
 					{({ data, error, isPending }) => {
 						if (error) {
 							console.error(error);