implementing the navbar for all pages, implementing the dashboard pag…

…e, fixing google authentication, starting the development of register
TechLabs-Ruhr · Sep 21, 2023 · 0e6b910 · 0e6b910
1 parent 3770977
commit 0e6b910
Show file tree

Hide file tree

Showing 17 changed files with 251 additions and 181 deletions.
diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx
@@ -10,8 +10,12 @@ import { fetchRedis } from '@/helpers/redis';
 import { User } from '@/app/types/db';
 import { getFriendsByUserId } from '@/helpers/get-friends-by-user-id';
 import SidebarChatList from '@/components/userDashboard/SidebarChatList';
+import NavbarSignIn from '@/components/ui/navbarSignIn';
 
-
+export const metadata = {
+    title: 'Way Home Dashboard',
+    description: 'Generated by create next app',
+  }
 
 interface LayoutProps {
     children: ReactNode
@@ -45,9 +49,18 @@ const Layout = async ({children}: LayoutProps) => {
         ) as User []
         ).length
 
-    return <div className='w-full flex h-screen'>
-        <div className='flex h-full w-full max-w-xs grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 '>
-        <Link href='/dashboard' className='flex h-16 shirnk-0 items-center'></Link> 
+    return <>
+    <div className='flex'>
+    <div className='w-auto min-w-14 min-h-screen  border-gray-200 bg-white  fixed overflow-y-auto  '>
+        <div className='flex h-screen w-full max-w-xs flex-col  overflow-y-auto  bg-white px-6 '>
+            <div className="flex justify-between border-b border-black">
+                <Link  href="/" className="font-medium text-black hover:bg-grey-600  pb-3 pt-4 leading-6 flex items-center transition duration-150 ease-in-out">
+                    Home
+                </Link> 
+                <Link href='/dashboard' className='font-medium text-black hover:text-grey-600  pb-3 pt-4'>
+                    Dashboard
+                </Link> 
+            </div>
         {friends.length > 0 ? ( 
         <div className='text-xs font-semibold leading-6 text-gray-400'>
             Your chats
@@ -84,8 +97,8 @@ const Layout = async ({children}: LayoutProps) => {
                     </ul>
                 </li>
                 </ul>
-                <li className='-mx-6 mt-auto flex items-center'>
-                    <div className='flex flex-1 items-center gap-x-4 px-6 py-3 tex-sm font-semibold leading-6 text-gray-900'>
+                <li className='-mx-1 mt-auto flex items-center'>
+                    <div className='flex flex-1 items-center gap-x-4 px-4 py-3 tex-sm font-semibold leading-6 text-gray-900'>
                         <div className='relative h-8 w-8 bg-gray-50'>
                             <Image fill 
                             referrerPolicy='no-referrer'
@@ -100,12 +113,16 @@ const Layout = async ({children}: LayoutProps) => {
                             <span className='text-xs text-zinc-400' aria-hidden='true'>{ session.user.email}</span>    
                         </div>
                      </div>
-                     <SignOutButton />
+                     <SignOutButton iconStyle={true} />
                 </li>
             </nav>
         </div>
-        {children}
     </div>
+    <div className="flex-1 ml-[19.5%]  overflow-y-auto"> 
+    {children}
+    </div>
+    </div>
+    </>
 }
 
 export default Layout

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
@@ -1,12 +1,69 @@
+import Link from "next/link"
 import {FC} from "react"
+import Map from "@/app/(map)/map/Map"
 // This is the contacts overview page 
 
 
 const Page: FC = ({}) => {
     return (
-    <>
-      <h1 className="font-bold text-5xl mb-8">Dashboard </h1>
-      <a> </a>
+    <> <div className="w-full h-[130vh] overflow-y-auto">
+      <h1 className="font-bold  text-gray-500 text-5xl mx-auto text-center pt-8">Welcome to our Network!</h1>
+      <div className="flex justify-center space-x-36 pt-20 px-5" >
+        {/* Emergency Signal and Call*/}
+        <div className="text-center hover:bg-white rounded-lg p-3 transition duration-500 ease-in-out">
+        <div className="text-center flex items-center justify-center">
+        <svg className="w-20 h-20 mb-4" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="#475569">
+              <path d="M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z"/>
+              </svg>
+          </div>
+          <Link href="#" className="block text-lg font-bold mt-2 text-gray-500  hover:text-gray-900">
+          Emergency Signal and Call
+          </Link>
+        </div>
+
+        {/* GPS Data Sharing */}
+        <div className="text-center  hover:bg-white rounded-lg p-3 transition duration-500 ease-in-out">
+        <div className="text-center flex items-center justify-center">
+        <svg className="w-20 h-20 mb-4" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="#475569">
+              <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
+          </svg>
+          </div>
+          <Link href="#" className="block text-lg font-bold mt-2 text-gray-500  hover:text-gray-900">
+             GPS Data Sharing
+          </Link>
+        </div>
+
+        {/* Div 3 */}
+        <div className="text-center  hover:bg-white rounded-lg p-3 transition duration-500 ease-in-out">
+        <div className="text-center flex items-center justify-center text-gray-600">
+        <svg className="w-20 h-20 mb-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="#475569">
+              <path d="M408 120c0 54.6-73.1 151.9-105.2 192c-7.7 9.6-22 9.6-29.6 0C241.1 271.9 168 174.6 168 120C168 53.7 221.7 0 288 0s120 53.7 120 120zm8 80.4c3.5-6.9 6.7-13.8 9.6-20.6c.5-1.2 1-2.5 1.5-3.7l116-46.4C558.9 123.4 576 135 576 152V422.8c0 9.8-6 18.6-15.1 22.3L416 503V200.4zM137.6 138.3c2.4 14.1 7.2 28.3 12.8 41.5c2.9 6.8 6.1 13.7 9.6 20.6V451.8L32.9 502.7C17.1 509 0 497.4 0 480.4V209.6c0-9.8 6-18.6 15.1-22.3l122.6-49zM327.8 332c13.9-17.4 35.7-45.7 56.2-77V504.3L192 449.4V255c20.5 31.3 42.3 59.6 56.2 77c20.5 25.6 59.1 25.6 79.6 0zM288 152a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/>
+            </svg>
+        </div>
+          <Link href="#" className="block text-lg font-bold mt-2 text-gray-500 hover:text-gray-900">
+            Safety Hotspots
+          </Link>
+        </div>
+
+
+        {/* Div 4 */}
+        <div className="text-center  hover:bg-white rounded-lg p-3 transition duration-500 ease-in-out">
+        <div className="text-center flex items-center justify-center">
+          <svg className="w-20 h-20 mb-4" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" fill="#475569">
+                 <path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/>
+                 </svg>
+          </div>
+          <Link href="#" className="block text-lg font-bold mt-2 text-gray-500 hover:text-gray-900">
+            Connect with fellow Travelers
+          </Link>
+        </div>
+
+      </div>
+      {/* Map */}
+      <div className="max-w-4xl mx-auto py-20"> 
+        <Map address="Dortmund, Germany" /> 
+      </div>
+      </div>
     </>
     )
   }

diff --git a/app/(default)/page.tsx b/app/(default)/page.tsx
@@ -10,13 +10,18 @@ import Features from '@/components/landingPage/features'
 import Newsletter from '@/components/landingPage/newsletter'
 import Zigzag from '@/components/landingPage/zigzag'
 import Testimonials from '@/components/landingPage/testimonials'
+import NavBarHome from '@/components/ui/nav-barHome'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
 
 export default async function Home() {
+  const session =  await getServerSession(authOptions)
 
 
   return (
     <>
     <div style={main}> 
+      <NavBarHome isSession={session}/>
       <Hero />
       <Features />
       <Zigzag />

diff --git a/app/api/friends/add/route.ts b/app/api/friends/add/route.ts
@@ -15,15 +15,9 @@ export async function POST(req: Request) {
 
         const {email: emailToAdd} = addFriendValidator.parse(body.email) // if this parse fails a z error is going to be thrown
 
-        console.log("The email that is passed is: " + emailToAdd)
-
+
         const idToAdd = (await fetchRedis('get', `user:email:${emailToAdd}`)) as string
 
-        //const idToAdd = await fetchUserByEmail(emailToAdd);
-
-
-        console.log(`The id that is passed is: ${idToAdd}`)
-
         if(!idToAdd) {
             return new Response('This person does not exist', {status: 400} )
         }
@@ -34,9 +28,6 @@ export async function POST(req: Request) {
         if(!session) {
             return new Response('Unauthorized', {status: 401})
         }
-
-
-        //const data = await RESTResponse.json() as {result: string}
 
 
         if(idToAdd === session.user.id) {
@@ -51,7 +42,6 @@ export async function POST(req: Request) {
          if (isAlreadyAddded) {
              return new Response('Already added this user', {status: 400})
          }
-        //const idToAdd = data.result
 
           //check if user is already in the friends list 
           const isAlreadyFriends = (await fetchRedis(
@@ -64,7 +54,6 @@ export async function POST(req: Request) {
         }
 
         //valid request, send friend request
-        console.log("trigger pusher")
         pusherServer.trigger(
             toPusherKey(`user${idToAdd}:incoming_friend_requests`),
              'incoming_friend_requests', // actual function named that we're triggering
@@ -74,10 +63,6 @@ export async function POST(req: Request) {
             } 
         )
 
-
-
-        console.log("A request will be sent ");
-
           db.sadd(`user${idToAdd}:incoming_friend_requests`, session.user.id)
 
           return new Response("OK")

diff --git a/app/api/message/send/route.ts b/app/api/message/send/route.ts
@@ -38,7 +38,6 @@ export async function POST(req: Request) {
 
         const timestamp = Date.now()
 
-        console.log("sender", sender) 
         // all valid, send the message
 
          const messageData: Message = {

diff --git a/app/globals.css b/app/globals.css
@@ -2,23 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-.scrollbar-w-2::-webkit-scrollbar {
-    width: 0.25rem;
-    height: 0.25rem;
-}
-
-.scrollbar-track-blue-lighter::-webkit-scrollbar-track {
-    --bg-opacity: 1;
-    background-color: #f7fafc;
-    background-color: rgba(247, 250, 252, var(--bg-opacity));
-}
-
-.scrollbar-thumb-blue::-webikit-scrollbar-thumb {
-    --bg-opacity: 1;
-    background-color: #edf2f7;
-    background-color: rgba(237, 242, 247, var(--bg-opacity));
-}
-
-.scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
-    border-radius: 0.25rem;
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,7 +2,7 @@ import './css/style.css'
 
 import { Inter, Architects_Daughter } from 'next/font/google'
 
-import NavBar from '@/components/ui/nav-bar'
+import NavBar from '@/components/ui/nav-barHome'
 import Providers from '@/components/ui/Providers'
 import  { getServerSession } from 'next-auth'
 import { authOptions } from '@/lib/auth'
@@ -39,7 +39,6 @@ export default async function RootLayout({
     <html lang="en">
       <body className={`${inter.variable} ${architects_daughter.variable} font-inter antialiased  text-gray-200 tracking-tight`}>
         <div className="flex flex-col min-h-screen overflow-hidden">
-          {/* <NavBar session={session}/> */}
           <Providers> {children}</Providers>
         </div>
       </body>

diff --git a/app/signin/page.tsx b/app/signin/page.tsx
@@ -1,43 +1,37 @@
 'use client'
 export const metadata = {
-  title: 'Sign In - Open PRO',
+  title: 'Sign In',
   description: 'Page description',
 }
 
 import Link from 'next/link'
 import {signIn} from "next-auth/react"
 import { FC, useState } from 'react'
 import {toast} from 'react-hot-toast'
+import NavBarSignIn from '@/components/ui/navbarSignIn'
 
 interface pageProps {}
 
 const Page: FC<pageProps> = ({}) => {
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+
   async function loginWithGoogle() {
-    console.log("I am runned")
     try{
-      setIsLoading(true);
-      //throw new Error("doesn't matter
       await signIn('google')
     }catch(error) {
       toast.error("Something went wrong with your login")
-    } setIsLoading(false)
+    } 
 
   }
   async function loginWithGithub() {
-    console.log("I am runned")
     try{
-      setIsLoading(true);
       await signIn('github')
     }catch(error) {
       toast.error("Something went wrong with your login")
-    } finally {
-      setIsLoading(false)
-    }
-
+    } 
   }
   return (
     <div style={{backgroundColor: 'whitesmoke', color: 'black'}}> 
+  <NavBarSignIn/>
     <section className="relative">
       <div className="max-w-6xl mx-auto px-4 sm:px-6">
         <div className="pt-32 pb-12 md:pt-40 md:pb-20 ">
@@ -86,7 +80,7 @@ const Page: FC<pageProps> = ({}) => {
                   </button>
                   <button onClick={loginWithGithub}
                   className="btn mt-8 px-0 text-black bg-grey-300 hover:bg-white-700 w-full relative flex items-center border border-black rounded">
-                    {isLoading ? null : (
+                    {/* {isLoading ? null : ( */}
                       <svg 
                       xmlns="http://www.w3.org/2000/svg" 
                       width="24"
@@ -95,7 +89,7 @@ const Page: FC<pageProps> = ({}) => {
                       className= "ml-5 h-5 w-5">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                      </svg>
-                    )}
+             {/*        )} */}
                     <span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
                     <span className="flex-auto pl-16 pr-8 -ml-16">Sign in with GitHub</span>
                   </button>