From 7cf3133e4fab39c9e967ace16ea426d34de7a88e Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Sun, 24 Mar 2024 14:49:25 +0000
Subject: [PATCH] moved contacts into auth group

---
 src/app/@auth/(.)contacts/page.tsx         | 85 ++++++++++++++++++++
 src/app/components/BottomNav/BottomNav.tsx |  8 +-
 src/app/contacts/page.tsx                  | 91 ++++++++++++++++++++++
 3 files changed, 181 insertions(+), 3 deletions(-)
 create mode 100644 src/app/@auth/(.)contacts/page.tsx
 create mode 100644 src/app/contacts/page.tsx

diff --git a/src/app/@auth/(.)contacts/page.tsx b/src/app/@auth/(.)contacts/page.tsx
new file mode 100644
index 0000000..69cfe8f
--- /dev/null
+++ b/src/app/@auth/(.)contacts/page.tsx
@@ -0,0 +1,85 @@
+'use client';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/app/components/ui/drawer';
+// react
+import { useEffect, useState } from 'react';
+// framer motion
+import { motion } from 'framer-motion';
+// redux
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/GlobalRedux/store';
+// hooks
+import useGetAddress from '@/app/hooks/useGetAddress';
+import {
+  CardTitle,
+  CardHeader,
+  Card,
+  CardContent,
+} from '@/app/components/ui/card';
+import { Avatar } from '@/app/components/ui/avatar';
+
+// next
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+
+import { Contact } from '@/app/types/types';
+
+export default function Page() {
+  //next
+  const searchParams = useSearchParams();
+  let isNavOpen = searchParams.get('isNavOpen');
+
+  const dispatch = useDispatch();
+
+  // address
+  const address = useGetAddress();
+
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
+
+  return (
+    <>
+      
+          <DrawerHeader>
+            <DrawerTitle>Contacts</DrawerTitle>
+          </DrawerHeader>
+          <Card style={{ border: '0px' }}>
+            <CardContent className='border-0 border-none'>
+              {contactsState.map((contact, index) => (
+                <motion.div
+                  key={contact.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                >
+                  <Link
+                    href={{
+                      pathname: `/payee`,
+                      query: { payeeAddress: contact.address },
+                    }}
+                  >
+                    <div className='space-y-8'>
+                      <div className='flex w-full items-center '>
+                        <Avatar className='h-9 w-9 bg-white'></Avatar>
+                        <div className='ml-4 space-y-1'>
+                          <div className='text-sm font-medium leading-none'>
+                            {contact.name}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                </motion.div>
+              ))}
+            </CardContent>
+          </Card>
+        
+    </>
+  );
+}
diff --git a/src/app/components/BottomNav/BottomNav.tsx b/src/app/components/BottomNav/BottomNav.tsx
index 3cc9777..906f32c 100644
--- a/src/app/components/BottomNav/BottomNav.tsx
+++ b/src/app/components/BottomNav/BottomNav.tsx
@@ -46,11 +46,13 @@ const BottomNavbar = () => {
           </Link>
           <Link
             href={{
-              pathname: '/menu',
-              query: { isNavOpen: true },
+              pathname: '/contacts',
+            }}
+            onClick={() => {
+              dispatch(setSheet(true));
             }}
           >
-            <BookUser onClick={() => router.push(`/contacts`)} />
+            <BookUser />
           </Link>
           <Link
             href={{
diff --git a/src/app/contacts/page.tsx b/src/app/contacts/page.tsx
new file mode 100644
index 0000000..884ca4a
--- /dev/null
+++ b/src/app/contacts/page.tsx
@@ -0,0 +1,91 @@
+'use client';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/app/components/ui/drawer'; 
+// react
+import { useEffect, useState } from 'react';
+// framer motion
+import { motion } from 'framer-motion';
+// redux
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/GlobalRedux/store';
+// hooks
+import useGetAddress from '@/app/hooks/useGetAddress';
+import {
+  CardTitle,
+  CardHeader,
+  Card,
+  CardContent,
+} from '@/app/components/ui/card';
+import { Avatar } from '../components/ui/avatar';
+
+// next
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+
+import { Contact } from '@/app/types/types';
+
+export default function Page() {
+  //next
+  const searchParams = useSearchParams();
+  let isNavOpen = searchParams.get('isNavOpen');
+
+  const dispatch = useDispatch();
+
+  // address
+  const address = useGetAddress();
+
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
+
+
+
+  return (
+    <>
+      <Drawer  shouldScaleBackground={true} open={isNavOpen}>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Contacts</DrawerTitle>
+          </DrawerHeader>
+          <Card style={{ border: '0px' }}>
+            
+            <CardContent className='border-0 border-none'>
+              
+              {contactsState.map((contact, index) => (
+                <motion.div
+                  key={contact.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                >
+                    <Link
+                      href={{
+                        pathname: `/payee`,
+                        query: { payeeAddress: contact.address },
+                      }}
+                    >
+                      <div className='space-y-8'>
+                        <div className='flex w-full items-center '>
+                          <Avatar className='h-9 w-9 bg-white'></Avatar>
+                          <div className='ml-4 space-y-1'>
+                            <div className='text-sm font-medium leading-none'>
+                              {contact.name}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </Link>
+                </motion.div>
+              ))}
+            </CardContent>
+          </Card>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}