From e85a5e571eaf20f7dba6b85fcb52430e53dce128 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 3 Mar 2023 15:44:51 +0700
Subject: [PATCH] updated load newest button

---
 src/pages/feed/following.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/feed/following.tsx b/src/pages/feed/following.tsx
index a47e7518..05fa43fb 100644
--- a/src/pages/feed/following.tsx
+++ b/src/pages/feed/following.tsx
@@ -10,6 +10,7 @@ import { Single } from '@components/note/single';
 
 import { dateToUnix } from '@utils/getDate';
 
+import { ArrowUpIcon } from '@radix-ui/react-icons';
 import { writeStorage } from '@rehooks/local-storage';
 import { useCallback, useState } from 'react';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
@@ -39,6 +40,18 @@ export default function Page() {
     setData((data) => [...data, ...result]);
   }, [db]);
 
+  const loadNewest = useCallback(async () => {
+    const result = await db.select(
+      `SELECT * FROM
+        cache_notes
+        WHERE created_at > ${dateToUnix(now.current)}
+        ORDER BY created_at DESC
+        LIMIT ${limit.current}`
+    );
+    setData((data) => [...result, ...data]);
+    setHasNewNote(false);
+  }, [db]);
+
   const ItemContent = useCallback(
     (index: string | number) => {
       const event = data[index];
@@ -78,8 +91,13 @@ export default function Page() {
     <div className="relative h-full w-full">
       <NoteConnector setParentReload={setParentReload} setHasNewNote={setHasNewNote} currentDate={now.current} />
       {hasNewNote && (
-        <div className="fixed top-10 left-1/2 z-50 -translate-x-1/2 transform">
-          <button>Load newest</button>
+        <div className="absolute top-16 left-1/2 z-50 -translate-x-1/2 transform">
+          <button
+            onClick={() => loadNewest()}
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 pl-3 pr-3.5 text-sm shadow-lg active:translate-y-1">
+            <ArrowUpIcon className="h-4 w-4" />
+            <span className="drop-shadow-md">Load newest</span>
+          </button>
         </div>
       )}
       <Virtuoso