From b1fce64f9d9411c1284ae6acbfe83771a8be1088 Mon Sep 17 00:00:00 2001
From: vishal <vishal.kondle@gmail.com>
Date: Sat, 22 Jun 2024 23:47:40 +0530
Subject: [PATCH 1/2] fix: notes skelton added

---
 app/(private)/notes/archive/page.tsx | 10 ++++---
 app/(private)/notes/page.tsx         | 39 ++++++++++++++++++++--------
 app/(private)/notes/trashed/page.tsx | 10 ++++---
 components/Note/Notes.tsx            | 17 ------------
 components/Note/index.ts             |  1 -
 5 files changed, 42 insertions(+), 35 deletions(-)
 delete mode 100644 components/Note/Notes.tsx

diff --git a/app/(private)/notes/archive/page.tsx b/app/(private)/notes/archive/page.tsx
index 9a1e13d..2641568 100644
--- 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
index 8d90d64..88a8d63 100644
--- 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 TodoSkelton from '@/components/Todo/TodoSkelton';
 
 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 }}>
+            <TodoSkelton 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
index 87599ff..d5bd5ce 100644
--- 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
deleted file mode 100644
index 458992e..0000000
--- a/components/Note/Notes.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import React from 'react';
-import Note from './Note';
-import { NoteDocument } from '@/models/Note';
-
-interface Props {
-  data: NoteDocument[];
-  handleClick: (note: NoteDocument) => void;
-}
-
-export const Notes = ({ data, handleClick }: Props) => (
-  <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
-    {data?.map((note: NoteDocument) => (
-      <Note key={String(note._id)} note={note} handleClick={handleClick} />
-    ))}
-  </SimpleGrid>
-);
diff --git a/components/Note/index.ts b/components/Note/index.ts
index 3697556..d30f688 100644
--- 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;

From 5d76974e5312f2b9ecf4abf4ffe3dce6bbdcf8a8 Mon Sep 17 00:00:00 2001
From: vishal <vishal.kondle@gmail.com>
Date: Sat, 22 Jun 2024 23:51:24 +0530
Subject: [PATCH 2/2] fix: skelton error

---
 app/(private)/notes/page.tsx   | 4 ++--
 components/Skelton/Skelton.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 components/Skelton/Skelton.tsx

diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
index 88a8d63..e304c60 100644
--- a/app/(private)/notes/page.tsx
+++ b/app/(private)/notes/page.tsx
@@ -10,7 +10,7 @@ import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
-import TodoSkelton from '@/components/Todo/TodoSkelton';
+import Skelton from '@/components/Skelton/Skelton';
 
 export default function NotesPage() {
   const { data, loading, refetch } = useFetchData('/api/notes');
@@ -124,7 +124,7 @@ export default function NotesPage() {
       <Container px={0} size="md">
         {loading ? (
           <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
-            <TodoSkelton items={6} />
+            <Skelton items={6} />
           </SimpleGrid>
         ) : (
           <>
diff --git a/components/Skelton/Skelton.tsx b/components/Skelton/Skelton.tsx
new file mode 100644
index 0000000..af6aea8
--- /dev/null
+++ 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;