From ee99cf6313ba565523b3c43f61ffda4b71e2c39b Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 30 May 2023 18:53:15 +0800
Subject: Refactor diffFileInfo / DiffTreeStore  (#24998)

Follow  #21012, #22399

Replace #24983, fix #24938

Help #24956

Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".

Screenshot: these two buttons both work. After complete loading, the UI
is also right.

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/cc6310fd-7f27-45ea-ab4f-24952a87b421)


![image](https://github.com/go-gitea/gitea/assets/2114189/4c11dd67-ac03-4568-8541-91204d27a4e3)


![image](https://github.com/go-gitea/gitea/assets/2114189/38a22cec-41be-41e6-a209-f347b7a4c1de)

</details>
---
 templates/repo/diff/box.tmpl | 52 +++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

(limited to 'templates/repo/diff/box.tmpl')

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 132f999808..490465ea12 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -45,33 +45,31 @@
 				{{end}}
 			</div>
 		</div>
-		<script id="diff-data-script">
-				(() => {
-					const diffData = {
-						files: [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}],
-						isIncomplete: {{.Diff.IsIncomplete}},
-						tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
-						binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
-						showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
-						statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
-						fileTreeIsVisible: false,
-						fileListIsVisible: false,
-						isLoadingNewData: false,
-						diffEnd: {{.Diff.End}},
-						link: "{{$.Link}}"
-					};
-					if(window.config.pageData.diffFileInfo) {
-						// Page is already loaded - add the data to our existing data
-						window.config.pageData.diffFileInfo.files.push(...diffData.files);
-						window.config.pageData.diffFileInfo.isIncomplete = diffData.isIncomplete;
-						window.config.pageData.diffFileInfo.diffEnd = diffData.diffEnd;
-						window.config.pageData.diffFileInfo.link = diffData.link;
-					} else {
-						// new load of page - populate initial data
-						window.config.pageData.diffFileInfo = diffData;
-					}
-				})();
-				</script>
+		<script id="diff-data-script" type="module">
+			const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}];
+			const diffData = {
+				isIncomplete: {{.Diff.IsIncomplete}},
+				tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
+				binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
+				showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
+				statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
+				linkLoadMore: "{{$.Link}}?skip-to={{.Diff.End}}&file-only=true",
+			};
+
+			// for first time loading, the diffFileInfo is a plain object
+			// after the Vue component is mounted, the diffFileInfo is a reactive object
+			// keep in mind that this script block would be executed many times when loading more files, by "loadMoreFiles"
+			let diffFileInfo = window.config.pageData.diffFileInfo || {
+				files:[],
+				fileTreeIsVisible: false,
+				fileListIsVisible: false,
+				isLoadingNewData: false,
+				selectedItem: '',
+			};
+			diffFileInfo = Object.assign(diffFileInfo, diffData);
+			diffFileInfo.files.push(...diffDataFiles);
+			window.config.pageData.diffFileInfo = diffFileInfo;
+		</script>
 		<div id="diff-file-list"></div>
 		<div id="diff-container">
 				<div id="diff-file-tree" class="gt-hidden"></div>
-- 
cgit v1.2.3