Merge pull request #1 from vishalkondle45/feature/notes

fix: notes skelton added
vishalkondle-dev · Jun 22, 2024 · 1b198a5 · 1b198a5
2 parents 230ee75 + 5d76974
commit 1b198a5
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 35 deletions.
diff --git a/app/(private)/notes/archive/page.tsx b/app/(private)/notes/archive/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Container } from '@mantine/core';
+import { Container, SimpleGrid } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { nprogress } from '@mantine/nprogress';
 import axios from 'axios';
 import { useEffect } from 'react';
-import { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
@@ -118,7 +118,11 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        <Notes data={data} handleClick={handleClick} />
+        <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+          {data?.map((note: NoteDocument) => (
+            <Note key={String(note._id)} note={note} handleClick={handleClick} />
+          ))}
+        </SimpleGrid>
       </Container>
       <NoteModal opened={opened} form={form} onSave={onSave} />
     </>

diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
 import { useForm } from '@mantine/form';
-import { Container, Text } from '@mantine/core';
+import { Container, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { nprogress } from '@mantine/nprogress';
 import axios from 'axios';
 import { useEffect } from 'react';
-import { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
+import Skelton from '@/components/Skelton/Skelton';
 
 export default function NotesPage() {
   const { data, loading, refetch } = useFetchData('/api/notes');
@@ -121,18 +122,34 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        {pinned?.length > 0 && (
+        {loading ? (
+          <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+            <Skelton items={6} />
+          </SimpleGrid>
+        ) : (
           <>
-            <Text size="sm" mb="xs">
-              PINNED
-            </Text>
-            <Notes data={pinned} handleClick={handleClick} />
-            <Text size="sm" my="xs">
-              OTHERS
-            </Text>
+            {pinned?.length > 0 && (
+              <Stack>
+                <Text size="sm" mb="xs">
+                  PINNED
+                </Text>
+                <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+                  {pinned?.map((note: NoteDocument) => (
+                    <Note key={String(note._id)} note={note} handleClick={handleClick} />
+                  ))}
+                </SimpleGrid>
+                <Text size="sm" my="xs">
+                  OTHERS
+                </Text>
+              </Stack>
+            )}
+            <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+              {others?.map((note: NoteDocument) => (
+                <Note key={String(note._id)} note={note} handleClick={handleClick} />
+              ))}
+            </SimpleGrid>
           </>
         )}
-        <Notes data={others} handleClick={handleClick} />
       </Container>
       <NoteModal opened={opened} form={form} onSave={onSave} />
     </>

diff --git a/app/(private)/notes/trashed/page.tsx b/app/(private)/notes/trashed/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Container } from '@mantine/core';
+import { Container, SimpleGrid } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import { nprogress } from '@mantine/nprogress';
 import axios from 'axios';
 import { useEffect } from 'react';
-import { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
@@ -133,7 +133,11 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        <Notes data={data} handleClick={handleClick} />
+        <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+          {data?.map((note: NoteDocument) => (
+            <Note key={String(note._id)} note={note} handleClick={handleClick} />
+          ))}
+        </SimpleGrid>
       </Container>
       <NoteModal onDelete={onDelete} opened={opened} form={form} onSave={onSave} />
     </>

diff --git a/components/Note/Notes.tsx b/components/Note/Notes.tsx
diff --git a/components/Note/index.ts b/components/Note/index.ts
@@ -2,6 +2,5 @@ import Note from './Note';
 
 export * from './NoteModal';
 export * from './NewNote';
-export * from './Notes';
 
 export default Note;
diff --git a/components/Skelton/Skelton.tsx b/components/Skelton/Skelton.tsx
@@ -0,0 +1,7 @@
+import { Skeleton } from '@mantine/core';
+import React from 'react';
+
+const Skelton = ({ items = 4 }: { items?: number }) =>
+  [...Array(items)].map((_, i) => <Skeleton key={String(i)} height={100} mt="md" animate />);
+
+export default Skelton;