feat: add recent list of notes to HomePage

afspeirs · Jun 18, 2024 · ee575e6 · ee575e6
1 parent 4862e18
commit ee575e6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/src/components/AuthUserInformation/SignInButton.tsx b/src/components/AuthUserInformation/SignInButton.tsx
@@ -2,20 +2,24 @@ import { UserIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { Button } from '@/components/Button';
+import { Tooltip } from '@/components/Tooltip';
 import { UserInformationModal } from './UserInformationModal';
 
 export function SignInButton() {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <Button
-        active={open}
-        Icon={UserIcon}
-        onClick={() => setOpen(true)}
-      >
-        Sign in
-      </Button>
+      <Tooltip content="Sign in">
+        <Button
+          active={open}
+          Icon={UserIcon}
+          iconOnly
+          onClick={() => setOpen(true)}
+        >
+          Sign in
+        </Button>
+      </Tooltip>
 
       <UserInformationModal
         open={open}

diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
@@ -1,35 +1,44 @@
 import { useAtomValue } from 'jotai';
+import { useCallback } from 'react';
+import { useRxData } from 'rxdb-hooks';
 
+import { NoteDocType, NoteQuery } from '@/api/types';
 import { SignInButton } from '@/components/AuthUserInformation/SignInButton';
+import { NotesList } from '@/components/NotesList';
 import { Page } from '@/components/Page';
 import { authAtom } from '@/context/auth';
+import { notesSortOptions } from '@/context/notesSort';
 
 export function Home() {
   const auth = useAtomValue(authAtom);
+  const notesQuery: NoteQuery = useCallback(
+    (collection) => collection.find({
+      sort: [notesSortOptions['date_modified-desc'].value],
+      limit: 10,
+    }),
+    [],
+  );
+  const { result: notes, isFetching } = useRxData<NoteDocType>('notes', notesQuery);
 
   return (
     <Page
       title="NoteMe"
-      // icons={(
-      //   // TODO: add something
-      // )}
+      icons={!auth?.user && (
+        <SignInButton />
+      )}
     >
       <div className="flex flex-col gap-3 p-4">
-        <p>Hello and welcome to NoteMe</p>
+        <p>Hello and welcome to NoteMe.</p>
 
-        {!auth?.user ? (
-          <>
-            <p>Store and edit your notes as Markdown formatted text</p>
-            <p>
-              Once signed in you can access your notes from any device,
-              and changes will be reflected across other devices seamlessly.
-            </p>
+        <p>
+          Select a note from the sidebar to get started,
+          or select a recently edited note below:
+        </p>
 
-            <SignInButton />
-          </>
-        ) : (
-          <p>Select a note from the sidebar to get started</p>
-        )}
+        <NotesList
+          isFetching={isFetching}
+          notes={notes}
+        />
       </div>
     </Page>
   );