Merge pull request #6 from vishalkondle45/feature/notes

fix: todos sort | sidebar API issue | removed unwanted code | todo li…
vishalkondle-dev · Jun 24, 2024 · c32f4d5 · c32f4d5
2 parents 55acc2b + cfb45d1
commit c32f4d5
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 40 deletions.
diff --git a/app/(private)/todos/[_id]/page.tsx b/app/(private)/todos/[_id]/page.tsx
@@ -32,7 +32,7 @@ import { COLORS, STYLES } from '@/lib/constants';
 import { failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = ({ params }: { params: { _id: string } }) => {
-  const { data, refetch, loading } = useFetchData(`/api/todos?type=list&_id=${params._id}`);
+  const { data, refetch, loading } = useFetchData(`/api/todos?type=list&list=${params._id}`);
   const [todoList, setTodoList] = useState<any[]>([]);
 
   const form = useForm({
@@ -97,7 +97,7 @@ const TodosPage = ({ params }: { params: { _id: string } }) => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >

diff --git a/app/(private)/todos/important/page.tsx b/app/(private)/todos/important/page.tsx
@@ -97,7 +97,7 @@ const TodosPage = () => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >

diff --git a/app/(private)/todos/page.tsx b/app/(private)/todos/page.tsx
@@ -97,7 +97,7 @@ const TodosPage = () => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >
@@ -109,7 +109,12 @@ const TodosPage = () => {
           ) : (
             <Stack>
               {data?.map((todo: TodoType) => (
-                <Todo setSelected={setSelected} refetch={refetch} todo={todo} />
+                <Todo
+                  key={String(todo._id)}
+                  setSelected={setSelected}
+                  refetch={refetch}
+                  todo={todo}
+                />
               ))}
             </Stack>
           )}

diff --git a/app/(private)/todos/recent/page.tsx b/app/(private)/todos/recent/page.tsx
@@ -97,7 +97,7 @@ const TodosPage = () => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >

diff --git a/app/(private)/todos/today/page.tsx b/app/(private)/todos/today/page.tsx
@@ -97,7 +97,7 @@ const TodosPage = () => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >

diff --git a/app/(private)/todos/upcoming/page.tsx b/app/(private)/todos/upcoming/page.tsx
@@ -97,7 +97,7 @@ const TodosPage = () => {
     <AppShell
       aside={{
         width: 400,
-        breakpoint: 'xs',
+        breakpoint: 'sm',
         collapsed: { mobile: !form.values._id, desktop: !form.values._id },
       }}
     >

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: { children: any }) {
           content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
         />
       </head>
-      <body style={{ backgroundColor: '#F5F5F8' }}>
+      <body style={{ backgroundColor: '#EFF3F7' }}>
         <AuthProvider>
           <MantineProvider theme={theme}>
             <NavigationProgress />

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -7,12 +7,14 @@ import {
   Button,
   Container,
   Group,
+  Indicator,
   Popover,
   rem,
   SimpleGrid,
   Stack,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useNetwork } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
 import { IconGridDots, IconList } from '@tabler/icons-react';
 import { signOut, useSession } from 'next-auth/react';
 import { usePathname, useRouter } from 'next/navigation';
@@ -21,8 +23,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 import axios from 'axios';
 import { App } from '../App';
 import { APPS } from '@/lib/constants';
+import { failure } from '@/lib/client_functions';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const network = useNetwork();
   const [mobileOpened, { toggle: toggleMobile, close }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
   const [opened, setOpened] = useState(false);
@@ -48,9 +52,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   );
 
   const getList = async () => {
-    setAPP(APPS.find((app) => `/${rootpath}` === app?.path));
-    const { data } = await axios.get(`/api/list?schema=${rootpath}`);
-    setAPP((old = { sidebar: [] }) => ({ ...old, sidebar: [...old.sidebar, ...data] }));
+    try {
+      setAPP(APPS.find((app) => `/${rootpath}` === app?.path));
+      const { data } = await axios.get(`/api/list?schema=${rootpath}`);
+      setAPP((old = { sidebar: [] }) => ({ ...old, sidebar: [...old.sidebar, ...data] }));
+    } catch (error) {
+      failure('Something went wrong');
+    }
   };
 
   if (isLoggedOff) {
@@ -63,6 +71,22 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     nprogress.complete();
   }, [pathname]);
 
+  useEffect(() => {
+    if (!network.online) {
+      notifications.clean();
+      notifications.show({
+        title: 'Waiting for connection.. ',
+        message: 'Please connect to the internet...',
+        color: 'red',
+        autoClose: false,
+        loading: true,
+        withCloseButton: false,
+      });
+    } else {
+      notifications.clean();
+    }
+  }, [network.online]);
+
   if (loading) {
     return <></>;
   }
@@ -116,15 +140,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                   shadow="md"
                 >
                   <Popover.Target>
-                    <ActionIcon
-                      variant="subtle"
-                      color="gray"
-                      radius="xl"
-                      size="lg"
-                      onClick={() => setOpened((o) => !o)}
-                    >
-                      <IconGridDots stroke={3} style={{ width: rem(20), height: rem(20) }} />
-                    </ActionIcon>
+                    <Indicator color={network.online ? 'teal' : 'red'} offset={5}>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        radius="xl"
+                        size="lg"
+                        onClick={() => setOpened((o) => !o)}
+                      >
+                        <IconGridDots stroke={3} style={{ width: rem(20), height: rem(20) }} />
+                      </ActionIcon>
+                    </Indicator>
                   </Popover.Target>
                   <Popover.Dropdown p="xs">
                     <SimpleGrid spacing="xs" cols={3}>
@@ -184,7 +210,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                   leftSection={item?.icon || <IconList />}
                   radius={0}
                   variant={pathname === item?.path ? 'filled' : 'subtle'}
-                  color={item?.color || APP.color}
+                  color={`${item?.color || APP.color}${pathname === item?.path ? '.3' : '.5'}`}
                   fullWidth
                 >
                   {item?.label}

diff --git a/components/Note/Note.tsx b/components/Note/Note.tsx
@@ -10,7 +10,7 @@ const Note = ({ note, handleClick }: Props) => (
   <Paper
     shadow="sm"
     p="md"
-    radius="md"
+    radius="lg"
     withBorder
     bg={`${note.color}.3`}
     onClick={() => handleClick(note)}

diff --git a/components/Todo/TodoPageActions.tsx b/components/Todo/TodoPageActions.tsx
@@ -22,7 +22,6 @@ import {
   IconPlaylistAdd,
   IconPlus,
   IconPrinter,
-  IconShare,
   IconTrash,
 } from '@tabler/icons-react';
 import axios from 'axios';
@@ -52,6 +51,7 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
     color: '',
     title: '',
   });
+  const selected = todoList.find((l) => l._id === pathname.split('/')[2]);
 
   const form = useForm({
     initialValues: {
@@ -124,14 +124,13 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
 
   return (
     <Group mt="sm" mb="xl" justify="space-between">
-      <Text fw={700}>{todoList.find((l) => l._id === pathname.split('/')[2])?.title}</Text>
+      <Text c={selected?.color} tt="capitalize" fw={700}>
+        {selected?.title || pathname.split('/')[pathname.split('/').length - 1]}
+      </Text>
       <Group gap={rem(6)} justify="right">
         <ActionIcon variant="subtle" color="gray" onClick={() => window.print()} title="Print">
           <IconPrinter />
         </ActionIcon>
-        <ActionIcon variant="subtle" color="gray" title="Share">
-          <IconShare />
-        </ActionIcon>
         <ActionIcon onClick={open} variant="subtle" color="gray" title="Add new todo">
           <IconPlus />
         </ActionIcon>
@@ -153,7 +152,6 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
               color="gray"
               title="Rename list"
               onClick={() => {
-                const selected = todoList.find((l) => l._id === pathname.split('/')[2]);
                 setList({
                   _id: pathname.split('/')[2],
                   title: selected?.title,

diff --git a/lib/client_functions.tsx b/lib/client_functions.tsx
@@ -9,7 +9,7 @@ export const failure = (message: string) =>
     title: 'Error',
     message,
     color: 'red',
-    autoClose: 5000,
+    autoClose: 2000,
     withCloseButton: true,
     icon: <IconX />,
   });
@@ -19,7 +19,7 @@ export const success = (message: string) =>
     title: 'Success',
     message,
     color: 'green',
-    autoClose: 5000,
+    autoClose: 2000,
     withCloseButton: true,
     icon: <IconCheck />,
   });

diff --git a/lib/constants.tsx b/lib/constants.tsx
@@ -44,8 +44,8 @@ export const APPS: AppType[] = [
   {
     label: 'Todos',
     path: '/todos',
+    color: 'teal',
     icon: <IconCheckbox />,
-    color: 'red',
     sidebar: [
       { label: 'All', path: '/todos', icon: <IconCheckbox /> },
       { label: 'Today', path: '/todos/today', icon: <IconCalendar /> },
@@ -56,7 +56,7 @@ export const APPS: AppType[] = [
   },
   { label: 'Calendar', path: '/calendar', icon: <IconCalendar />, color: 'green', sidebar: [] },
   { label: 'Forum', path: '/forum', icon: <IconMessageQuestion />, color: 'indigo', sidebar: [] },
-  { label: 'Passwords', path: '/passwords', icon: <IconLock />, color: 'teal', sidebar: [] },
+  { label: 'Passwords', path: '/passwords', icon: <IconLock />, color: 'red', sidebar: [] },
   {
     label: 'Document',
     path: '/document',

diff --git a/lib/functions.ts b/lib/functions.ts
@@ -37,25 +37,27 @@ export const getTodaysTodos = async (user: any) =>
     date: { $gte: dayjs().startOf('day').toDate(), $lte: dayjs().endOf('day').toDate() },
   })
     .populate({ path: 'list', select: 'title color' })
-    .sort('-updatedAt');
+    .sort({ isCompleted: -1 });
 export const getUpcomingTodos = async (user: any) =>
   Todo.find({ user, date: { $gt: dayjs().startOf('day').toDate() } })
     .populate({ path: 'list', select: 'title color' })
-    .sort('-updatedAt');
+    .sort({ isCompleted: -1 });
 export const getRecentTodos = async (user: any) =>
   Todo.find({ user, date: { $lt: dayjs().startOf('day').toDate() } })
     .populate({ path: 'list', select: 'title color' })
-    .sort('-updatedAt');
+    .sort({ isCompleted: -1 });
 export const getImportantTodos = async (user: any) =>
   Todo.find({ user, isImportant: true })
     .populate({ path: 'list', select: 'title color' })
-    .sort('-updatedAt');
+    .sort({ isCompleted: -1 });
 export const getListTodos = async (user: any, list: string) =>
-  Todo.find({ user, list }).populate({ path: 'list', select: 'title color' }).sort('-updatedAt');
+  Todo.find({ user, list })
+    .populate({ path: 'list', select: 'title color' })
+    .sort({ isCompleted: -1 });
 export const getAllTodos = async (user: any) =>
   Todo.find({ user })
     .populate({
       path: 'list',
       select: 'title color',
     })
-    .sort('-updatedAt');
+    .sort({ isCompleted: -1 });