added init data page

src-tauri/Cargo.toml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "os-all", "shell-open", "system-tray", "window-start-dragging"] }
+tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "os-all", "shell-open", "system-tray", "window-close", "window-start-dragging"] }
 
 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"

src-tauri/migrations/20230226004139_create_tables.sql

@@ -87,4 +87,18 @@ CREATE TABLE
     content TEXT NOT NULL,
     parent_id TEXT,
     parent_comment_id TEXT
-  );
+  );
+
+-- create settings
+CREATE TABLE
+  settings (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    setting_key TEXT NOT NULL,
+    setting_value TEXT NOT NULL
+  );
+
+-- add default setting
+INSERT INTO
+  settings (setting_key, setting_value)
+VALUES
+  ("last_login", "0");

src-tauri/tauri.conf.json

@@ -39,7 +39,8 @@
         "all": true
       },
       "window": {
-        "startDragging": true
+        "startDragging": true,
+        "close": true
       }
     },
     "bundle": {

src/components/note/connector.tsx

@@ -4,12 +4,14 @@ import { activeAccountAtom } from '@stores/account';
 import { hasNewerNoteAtom } from '@stores/note';
 import { relaysAtom } from '@stores/relays';
 
-import { dateToUnix, hoursAgo } from '@utils/getDate';
-import { createCacheNote, getAllFollowsByID } from '@utils/storage';
+import { dateToUnix } from '@utils/getDate';
+import { createCacheNote, getAllFollowsByID, updateLastLoginTime } from '@utils/storage';
 import { pubkeyArray } from '@utils/transform';
 
+import { window } from '@tauri-apps/api';
+import { TauriEvent } from '@tauri-apps/api/event';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export const NoteConnector = memo(function NoteConnector() {
   const pool: any = useContext(RelayContext);
@@ -21,29 +23,34 @@ export const NoteConnector = memo(function NoteConnector() {
   const [isOnline] = useState(true);
   const now = useRef(new Date());
 
-  useEffect(() => {
+  const subscribe = useCallback(() => {
     getAllFollowsByID(activeAccount.id).then((follows) => {
       pool.subscribe(
         [
           {
             kinds: [1],
             authors: pubkeyArray(follows),
-            since: dateToUnix(hoursAgo(12, now.current)),
+            since: dateToUnix(now.current),
           },
         ],
         relays,
         (event: any) => {
           // insert event to local database
           createCacheNote(event);
-          // ask user load newer note
-          if (event.created_at > dateToUnix(now.current)) {
-            setHasNewerNote(true);
-          }
+          setHasNewerNote(true);
         }
       );
     });
   }, [activeAccount.id, pool, relays, setHasNewerNote]);
 
+  useEffect(() => {
+    subscribe();
+    window.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, () => {
+      updateLastLoginTime(now.current);
+      window.appWindow.close();
+    });
+  }, [activeAccount.id, pool, relays, setHasNewerNote, subscribe]);
+
   return (
     <>
       <div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">

src/pages/index.tsx

@@ -14,7 +14,7 @@ export default function Page() {
     getAccounts()
       .then((res: any) => {
         if (res.length > 0) {
-          router.push('/newsfeed/following');
+          router.push('/init');
         } else {
           router.push('/onboarding');
         }

src/pages/init.tsx

@@ -0,0 +1,133 @@
+import BaseLayout from '@layouts/base';
+
+import { RelayContext } from '@components/relaysProvider';
+
+import { activeAccountAtom } from '@stores/account';
+import { relaysAtom } from '@stores/relays';
+
+import { dateToUnix, hoursAgo } from '@utils/getDate';
+import { countTotalNotes, createCacheNote, getAllFollowsByID, getLastLoginTime } from '@utils/storage';
+import { pubkeyArray } from '@utils/transform';
+
+import LumeSymbol from '@assets/icons/Lume';
+
+import { useAtom, useAtomValue } from 'jotai';
+import { useRouter } from 'next/router';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
+
+export default function Page() {
+  const router = useRouter();
+  const pool: any = useContext(RelayContext);
+
+  const relays = useAtomValue(relaysAtom);
+  const [activeAccount] = useAtom(activeAccountAtom);
+
+  const now = useRef(new Date());
+  const timer = useRef(null);
+  const unsubscribe = useRef(null);
+
+  useEffect(() => {
+    countTotalNotes().then((count) => {
+      if (count.total === 0) {
+        getAllFollowsByID(activeAccount.id).then((follows) => {
+          unsubscribe.current = pool.subscribe(
+            [
+              {
+                kinds: [1],
+                authors: pubkeyArray(follows),
+                since: dateToUnix(hoursAgo(24, now.current)),
+                until: dateToUnix(now.current),
+              },
+            ],
+            relays,
+            (event) => {
+              // insert event to local database
+              createCacheNote(event);
+            },
+            undefined,
+            () => {
+              timer.current = setTimeout(() => router.push('/newsfeed/following'), 3000);
+            }
+          );
+        });
+      } else {
+        getLastLoginTime().then((time) => {
+          const parseDate = new Date(time);
+
+          getAllFollowsByID(activeAccount.id).then((follows) => {
+            unsubscribe.current = pool.subscribe(
+              [
+                {
+                  kinds: [1],
+                  authors: pubkeyArray(follows),
+                  since: dateToUnix(parseDate),
+                  until: dateToUnix(now.current),
+                },
+              ],
+              relays,
+              (event) => {
+                // insert event to local database
+                createCacheNote(event);
+              },
+              undefined,
+              () => {
+                timer.current = setTimeout(() => router.push('/newsfeed/following'), 3000);
+              }
+            );
+          });
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe.current();
+      clearTimeout(timer.current);
+    };
+  }, [activeAccount.id, pool, relays, router]);
+
+  return (
+    <div className="relative h-full overflow-hidden">
+      {/* dragging area */}
+      <div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
+      {/* end dragging area */}
+      <div className="relative flex h-full flex-col items-center justify-center">
+        <div className="flex flex-col items-center gap-2">
+          <LumeSymbol className="h-16 w-16 text-black dark:text-white" />
+          <div className="text-center">
+            <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">Loading...</h3>
+            <p className="font-medium text-zinc-300 dark:text-zinc-600">
+              Keep calm and waiting, Lume is fetching event...
+            </p>
+          </div>
+        </div>
+        <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
+          <svg
+            className="h-5 w-5 animate-spin text-black dark:text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return <BaseLayout>{page}</BaseLayout>;
+};

src/utils/storage.tsx

@@ -143,3 +143,23 @@ export async function createCacheCommentNote(data, eid) {
     ]
   );
 }
+
+// create cache comment note
+export async function countTotalNotes() {
+  const db = await connect();
+  const result = await db.select('SELECT COUNT(*) AS "total" FROM cache_notes;');
+  return result[0];
+}
+
+// get last login time
+export async function getLastLoginTime() {
+  const db = await connect();
+  const result = await db.select('SELECT setting_value FROM settings WHERE setting_key = "last_login"');
+  return result[0];
+}
+
+// update last login time
+export async function updateLastLoginTime(time) {
+  const db = await connect();
+  return await db.execute(`UPDATE settings SET setting_value = "${time}" WHERE setting_key = "last_login"`);
+}