Merge pull request #51 from quayside-app/usability

Usability

src/app/api/auth/[...nextauth]/options.js

@@ -21,7 +21,7 @@ export const options = {
     async signIn ({ user, account, profile }) {
       const existingUser = await getUsers(null, user.email)
 
-      if (existingUser) {
+      if (existingUser && existingUser.length > 0) {
         return true
       } else {
         // Get first and last name
@@ -30,24 +30,24 @@ export const options = {
         const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : ''
 
         // Create User
-        const newUser = await createUser(user.email, firstName, lastName)
-        return !!newUser // Return true if creation is successful
+        const createdUser = await createUser(user.email, firstName, lastName)
+        return !!createdUser // Return true if creation is successful
       }
     },
 
-    async session ({ session, user, token }) {
-      // Assign the user ID to the session to make it available on the client side
-      session.userId = token.sub // 'sub' is typically the field where the user ID from the provider is stored
-      return session
-    },
-
     async jwt ({ token, user, account, profile, isNewUser }) {
       // This callback is called whenever a JWT is created. So session.userId is the mongo User _id
       if (user) {
         const mongoUsers = await getUsers(null, user.email)
         token.sub = mongoUsers[0]._id
       }
       return token
+    },
+
+    async session ({ session, user, token }) {
+      // Assign the user ID to the session to make it available on the client side
+      session.userId = token.sub // 'sub' is typically the field where the user ID from the provider is stored
+      return session
     }
   }
 

src/app/api/mongoDB/createUser/createUser.js

@@ -22,14 +22,12 @@ import { URI } from '../mongoData.js'
 
 export async function createUser (email, firstName = null, lastName = null, username = null, teamIDs = []) {
   if (mongoose.connection.readyState !== 1) await mongoose.connect(URI)
-
   const user = await User.create({
     email,
     firstName,
     lastName,
     username,
     teamIDs
   })
-
   return user
 }

src/app/api/mongoDB/createUser/route.js

@@ -1,5 +1,3 @@
-import { options } from '../../auth/[...nextauth]/options'
-import { getServerSession } from 'next-auth/next'
 import { NextResponse } from 'next/server'
 import { createUser } from './createUser'
 
@@ -40,11 +38,6 @@ import { createUser } from './createUser'
  */
 export async function POST (request) {
   try {
-    const session = await getServerSession(options)
-    if (!session) {
-      return NextResponse.json({ success: false, message: 'authentication failed' }, { status: 401 })
-    }
-
     const params = await request.json()
 
     if (!params.email) {

src/app/page.js

@@ -1,9 +1,18 @@
 export default function Home () {
   return (
-    <main className='flex flex-wrap w-full'>
-      <div className='flex w-full flex-wrap '>
-        Create or Select a project.
+    <main className='m-10'>
+
+      <div className='flex justify-center w-full text-4xl md:text-7xl font-bold '>
+        quayside.app
       </div>
+
+      <div className='flex justify-center w-full md:text-3xl mt-3 '>
+        Ignite Collaborative Productivity
+      </div>
+      <div className='flex justify-center w-full text-sm md:text-xl  mt-10 p-1 bg-neutral-700   rounded-lg'>
+        Create or select a project to get started...
+      </div>
+
     </main>
   )
 }

src/components/ContactUsModal.js

@@ -83,7 +83,7 @@ export default function ContactUsModal ({ isOpen, handleClose }) {
           <Input name='email' label='Your Email' placeholder='[email protected]' changeAction={handleInput} value={formData.email} />
           <Input name='subject' label='Subject' placeholder='Subject' changeAction={handleInput} value={formData.subject} />
           <Input name='message' label='Message' placeholder='Your message here...' changeAction={handleInput} value={formData.message} />
-          <button type='submit' className='w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center'>
+          <button type='submit' className='w-full text-white bg-gray-700 hover:bg-blue-800 focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center'>
             Send
           </button>
         </form>
@@ -92,9 +92,9 @@ export default function ContactUsModal ({ isOpen, handleClose }) {
   }
 
   return (
-    <div className='fixed inset-0 bg-gray-500 bg-opacity-75'>
+    <div className='fixed inset-0 bg-gray-500 bg-opacity-75 z-50'>
       <div className='fixed w-full p-4'>
-        <div className='relative rounded-lg shadow bg-gray-900'>
+        <div className='relative rounded-lg shadow bg-black'>
           <button type='button' onClick={handleClose} className='absolute top-3 right-3 rounded-lg  w-8 h-8 inline-flex justify-center items-center hover:bg-gray-600'>
             <Image src={xIcon} alt='exit' width='10' height='10' />
           </button>

src/components/Dropdown.js

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { useState } from 'react'
 import Image from 'next/image'
 
 import dropdownIcon from '../../public/svg/dropdown.svg'
@@ -21,20 +21,27 @@ import dropdownIcon from '../../public/svg/dropdown.svg'
  *
  * @returns {React.Element} The rendered Dropdown button element.
  */
-const Dropdown = ({ label, clickAction, imagePath }) => {
+const Dropdown = ({ label, imagePath, dropdownComponents }) => {
+  const [dropdownHidden, setDropdown] = useState(false)
+
   return (
+    <div>
+      <button type='button' onClick={() => setDropdown(!dropdownHidden)} className='flex items-center w-full p-2 text-base text-white transition duration-75 rounded-lg group hover:bg-gray-700' aria-controls='dropdown-example' data-collapse-toggle='dropdown-example'>
+        <div className='flex w-full'>
+          <div className='flex w-11/12'>
+            <Image priority src={imagePath} alt={label} height='20' width='20' />
+            <span className='flex my-auto ml-3 text-left whitespace-nowrap'>{label}</span>
+          </div>
+          <div className={`flex 1-1/12 justify-end my-auto ${dropdownHidden && '-rotate-90'}`}>
+            <Image priority src={dropdownIcon} alt='Dropdown Icon' height='20' width='20' />
+          </div>
 
-    <button type='button' onClick={clickAction} className='flex items-center w-full p-2 text-base text-white transition duration-75 rounded-lg group hover:bg-gray-700' aria-controls='dropdown-example' data-collapse-toggle='dropdown-example'>
-      <div className='flex w-full'>
-        <div className='flex w-11/12'>
-          <Image priority src={imagePath} alt={label} height='20' width='20' />
-          <span className='flex my-auto ml-3 text-left whitespace-nowrap'>{label}</span>
-        </div>
-        <div className='flex 1-1/12 justify-end '>
-          <Image priority src={dropdownIcon} alt='Dropdown Icon' height='20' width='20' />
         </div>
+      </button>
+      <div className={dropdownHidden && 'hidden'}>
+        {dropdownComponents}
       </div>
-    </button>
+    </div>
 
   )
 }

src/components/LeftSidebar.js

@@ -10,7 +10,6 @@ import ContactUsButton from '../components/ContactUsButton'
 import Dropdown from '../components/Dropdown'
 import Button from '../components/Button'
 
-import plusIcon from '../../public/svg/plus.svg'
 import starIcon from '../../public/svg/star.svg'
 import tableIcon from '../../public/svg/table.svg'
 import teamIcon from '../../public/svg/team.svg'
@@ -71,19 +70,20 @@ export default function LeftSidebar ({ className }) {
         <div className='flex w-full bg-neutral-800 px-4 pt-10 min-h-screen  text-white justify-center'>
           <ul className='font-medium'>
             <NewProjectButton />
-            <li> <Button label='Task' imagePath={plusIcon} /> </li>
+
+            {/* To be implemented */}
+            {/* <li> <Button label='Task' imagePath={plusIcon} /> </li> */}
 
             <li><div className='my-10 space-y-2 font-medium border-t  border-gray-200' /></li>
 
             <li> <Dropdown label='Starred' imagePath={starIcon} /> </li>
-            <li> <Dropdown label='Projects' imagePath={tableIcon} /> </li>
-            <li> {projectsDiv}</li>
+            <li> <Dropdown label='Projects' imagePath={tableIcon} dropdownComponents={projectsDiv} /> </li>
             <li> <Dropdown label='Team' imagePath={teamIcon} /> </li>
             <li> <Dropdown label='Objectives' imagePath={targetIcon} /> </li>
           </ul>
         </div>
 
-        <div className='mt-auto sticky bottom-0 bg-neutral-700 w-full '>
+        <div className='mt-auto sticky bottom-0 bg-neutral-700 w-full z-50'>
           <ContactUsButton />
         </div>
       </div>

src/components/Navbar.js

@@ -5,6 +5,8 @@ import Image from 'next/image'
 import searchIcon from '../../public/svg/search.svg'
 import logo from '../../public/quaysideLogo.png'
 import { useSession, signOut } from 'next-auth/react'
+import Button from '../components/Button'
+import Link from 'next/link'
 
 /**
  * A Navbar component that fetches a user's name from a specified API and displays a navigation bar with several interactive elements.
@@ -49,23 +51,28 @@ const Navbar = () => {
 
         <div className='flex w-full'>
 
-          <div className='flex w-2/12  justify-start mx-1'>
+          <div className='flex w-6/12  justify-start mx-1'>
             {/* Hamburger */}
-            <div className='flex'>
+            {/* <div className='flex'>
               <div className=''>
                 <button className='text-white text-3xl md:text-4xl font-bold opacity-70 hover:opacity-100 align-super'> &#9776; </button>
               </div>
-            </div>
+            </div> */}
 
             {/* Logo */}
             <div className='flex mx-2'>
               <div className='my-auto'>
-                <Image src={logo} alt='quayside logo' height={30} width={30} className='' />
+                <Image src={logo} alt='quayside logo' height={35} width={35} className='' />
               </div>
+
             </div>
+
+            <Link href='/' className='my-auto mx-3 text-xl font-bold'> quayside.app</Link>
+
           </div>
 
           {/* Current Directory */}
+          {/*
           <div className='flex w-4/12 justify-start mx-1'>
             <div className='flex bg-neutral-600 px-4 rounded-3xl overflow-hidden'>
               <input
@@ -74,13 +81,14 @@ const Navbar = () => {
               />
             </div>
           </div>
+          */}
 
           {/* Search Bar */}
           <div className='flex w-4/12 lg:w-5/12 justify-end px-1'>
             <div className='flex overflow-hidden  bg-neutral-600 rounded-3xl'>
               <input
                 type='search'
-                placeholder='Search...'
+                placeholder='Search... coming soon'
                 className='flex  px-3 text-xs  bg-neutral-600 text-white md:text-base'
               />
               <button className='px-4 items-center justify-center '>
@@ -91,21 +99,22 @@ const Navbar = () => {
 
           {/* Sign Out */}
           <div className='flex w-2/12  lg:w-1/12 justify-end  my-auto text-right px-2'>
-            <button onClick={() => signOut()}>Sign Out</button>
+
+            <Button label='Sign Out' clickAction={() => signOut()} isCentered='true' />
           </div>
 
+          {/* User */}
+          <div className='flex w-2/12  lg:w-1/12 justify-end  my-auto text-right px-2'> {name} </div>
+
           {/* User Avatar Icon */}
           {session && session.user && (
-            <div>
+            <div className='my-auto mx-4'>
               <img
                 src={session.user.image}
-                style={{ width: '40px', height: '40px', borderRadius: '50%' }}
+                style={{ width: '35px', height: '35px', borderRadius: '50%' }}
               />
             </div>
           )}
-          {/* User */}
-          <div className='flex w-2/12  lg:w-1/12 justify-end  my-auto text-right px-2'> {name} </div>
-
         </div>
       </nav>
     </div>