From 3acfdd29052c6e06bbba2bb22ac2f66bbf6d8b39 Mon Sep 17 00:00:00 2001
From: ditatompel <ditatompel@gmail.com>
Date: Mon, 6 May 2024 13:59:33 +0700
Subject: [PATCH] Frontend display countries option

---
 .../src/routes/(front)/remote-nodes/+page.svelte     | 12 ++++++++----
 .../src/routes/(front)/remote-nodes/api-handler.js   |  6 ++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/(front)/remote-nodes/+page.svelte b/frontend/src/routes/(front)/remote-nodes/+page.svelte
index 0d8422d..9e55eba 100644
--- a/frontend/src/routes/(front)/remote-nodes/+page.svelte
+++ b/frontend/src/routes/(front)/remote-nodes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { DataHandler } from '@vincjo/datatables/remote';
 	import { format, formatDistance } from 'date-fns';
-	import { loadData } from './api-handler';
+	import { loadData, loadCountries } from './api-handler';
 	import { onMount, onDestroy } from 'svelte';
 	import {
 		DtSrRowsPerPage,
@@ -27,6 +27,9 @@
 	let filterStatus = -1;
 	let checkboxCors = false;
 
+	/** @type {{total_nodes: number, cc: string, name: string}[]} */
+	let countries = [];
+
 	const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
 	let rows = handler.getRows();
 
@@ -109,6 +112,9 @@
 		clearInterval(intervalId); // Clear the interval when the component is destroyed
 	});
 	onMount(() => {
+		loadCountries().then((data) => {
+			countries = data;
+		});
 		handler.onChange((state) => loadData(state));
 		handler.invalidate();
 	});
@@ -233,8 +239,7 @@
 								}}
 							>
 								<option value="any">Any</option>
-								<!--
-								{#each data.countries as country}
+								{#each countries as country}
 									{#if country.cc === ''}
 										<option value="UNKNOWN">UNKNOWN ({country.total_nodes})</option>
 									{:else}
@@ -243,7 +248,6 @@
 										>
 									{/if}
 								{/each}
-                -->
 							</select>
 						</th>
 						<th colspan="2">
diff --git a/frontend/src/routes/(front)/remote-nodes/api-handler.js b/frontend/src/routes/(front)/remote-nodes/api-handler.js
index 138745a..1504895 100644
--- a/frontend/src/routes/(front)/remote-nodes/api-handler.js
+++ b/frontend/src/routes/(front)/remote-nodes/api-handler.js
@@ -8,6 +8,12 @@ export const loadData = async (state) => {
 	return json.data.items ?? [];
 };
 
+export const loadCountries = async () => {
+  const response = await fetch(apiUri('/api/v1/countries'));
+  const json = await response.json();
+  return json.data ?? [];
+};
+
 const getParams = ({ pageNumber, rowsPerPage, sort, filters }) => {
 	let params = `page=${pageNumber}&limit=${rowsPerPage}`;