paging works :)

4 files changed, 38 insertions, 17 deletions

diff --git a/ui/backend/src/db.rs b/ui/backend/src/db.rs
index 36c8150b..2b9dd095 100644
--- a/ui/backend/src/db.rs
+++ b/ui/backend/src/db.rs
@@ -98,16 +98,16 @@ impl HistoryDB {
         Ok(Self(sqlite))
     }
 
-    pub async fn list(&self, start: u64, limit: Option<usize>) -> Result<Vec<History>, String> {
+    pub async fn list(&self, end: u64, limit: Option<usize>) -> Result<Vec<History>, String> {
         let query = if let Some(limit) = limit {
             sqlx::query(
-                "select * from history where timestamp > ?1 order by timestamp desc limit ?2",
+                "select * from history where timestamp < ?1 order by timestamp desc limit ?2",
             )
-            .bind(start as i64)
+            .bind(end as i64)
             .bind(limit as i64)
         } else {
-            sqlx::query("select * from history where timestamp > ?1 order by timestamp desc")
-                .bind(start as i64)
+            sqlx::query("select * from history where timestamp < ?1 order by timestamp desc")
+                .bind(end as i64)
         };
 
         let history: Vec<History> = query
diff --git a/ui/backend/src/main.rs b/ui/backend/src/main.rs
index ab855be5..6a92df1c 100644
--- a/ui/backend/src/main.rs
+++ b/ui/backend/src/main.rs
@@ -26,14 +26,14 @@ struct HomeInfo {
 }
 
 #[tauri::command]
-async fn list() -> Result<Vec<UIHistory>, String> {
+async fn list(minTimestamp: Option<u64>) -> Result<Vec<UIHistory>, String> {
     let settings = Settings::new().map_err(|e| e.to_string())?;
 
     let db_path = PathBuf::from(settings.db_path.as_str());
     let db = HistoryDB::new(db_path, settings.local_timeout).await?;
 
     let history = db
-        .list(0, Some(100))
+        .list(minTimestamp.unwrap_or(time::OffsetDateTime::now_utc().unix_timestamp_nanos() as u64), Some(100))
         .await?
         .into_iter()
         .map(|h| h.into())
diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index 5e631bcf..d6a18a7c 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -55,6 +55,7 @@ function Header() {
 export default function Search() {
   const history = useStore((state) => state.shellHistory);
   const refreshHistory = useStore((state) => state.refreshShellHistory);
+  const historyNextPage = useStore((state) => state.historyNextPage);
 
   useEffect(() => {
     (async () => {
@@ -73,6 +74,16 @@ export default function Search() {
     overscan: 5,
   });
 
+  useEffect(() => {
+    const [lastItem] = rowVirtualizer.getVirtualItems().slice(-1);
+
+    if (!lastItem) return; // no undefined plz
+    if (lastItem.index < history.length - 1) return; // if we're not at the end yet, bail
+
+    // we're at the end! more rows plz!
+    historyNextPage();
+  }, [rowVirtualizer.getVirtualItems()]);
+
   return (
     <>
       <div className="pl-60">
diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts
index 809199e5..1f1ba13c 100644
--- a/ui/src/state/store.ts
+++ b/ui/src/state/store.ts
@@ -30,7 +30,7 @@ interface AtuinState {
   historyNextPage: () => void;
 }
 
-export const useStore = create<AtuinState>()((set) => ({
+export const useStore = create<AtuinState>()((set, get) => ({
   user: DefaultUser,
   homeInfo: DefaultHomeInfo,
   aliases: [],
@@ -80,15 +80,25 @@ export const useStore = create<AtuinState>()((set) => ({
         console.log(e);
       });
   },
-  historyNextPage: () => {
-    set((state) => {
-      let newHistory = state.shellHistory.concat(
-        state.shellHistory.slice(0, 100),
-      );
 
-      return {
-        shellHistory: newHistory,
-      };
-    });
+  historyNextPage: (query?: string) => {
+    let history = get().shellHistory;
+    let minTimestamp = history[history.length - 1].timestamp;
+    console.log(minTimestamp);
+
+    if (query) {
+      invoke("search", { query: query, minTimestamp: minTimestamp })
+        .then((res: any) => {
+          set({ shellHistory: res });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    } else {
+      invoke("list", { minTimestamp: minTimestamp }).then((res: any) => {
+        console.log(res, history);
+        set({ shellHistory: [...history, ...res] });
+      });
+    }
   },
 }));