Merge branch 'main' into fix-landingpage

.github/workflows/main.test.yml

@@ -0,0 +1,23 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Check envs
+        run: echo "url env is $NEXT_PUBLIC_SUPABASE_URL"
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          build: npm run build
+          start: npm start
+        env:
+          NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: ${{ secrets.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY}}
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL}}

cypress/e2e/carousel.cy.ts

@@ -4,28 +4,27 @@ describe('carousel stress tests', () => {
     cy.get('[data-id="listing-1"] #carousel > [alt="image-1"]').should(
       'be.visible',
     )
-    cy.get('#left-arrow').click()
-    cy.wait(2000)
-
+    cy.wait(150)
+    cy.get('#left-arrow').trigger('click')
     cy.get('[data-id="listing-1"] #carousel > :last-child()').should(
       'be.visible',
     )
-    cy.get('#right-arrow').click()
-    cy.get('#right-arrow').click()
-    cy.wait(2000)
+    cy.wait(150)
+    cy.get('#right-arrow').trigger('click')
+    cy.wait(150)
+    cy.get('#right-arrow').trigger('click')
     cy.get('[data-id="listing-1"] #carousel > [alt="image-2"]').should(
       'be.visible',
     )
   })
   it('should change the image when the dots are clicked', () => {
     cy.visit('/listings')
-    cy.wait(2000)
     cy.get('[data-id="listing-1"] [alt="image-1"]').should('be.visible')
-    cy.get('#slide-2').click()
-    cy.wait(2000)
+    cy.wait(150)
+    cy.get('#slide-2').trigger('click')
     cy.get('[data-id="listing-1"] [alt="image-2"]').should('be.visible')
-    cy.get('#slide-1').click()
-    cy.wait(2000)
+    cy.wait(150)
+    cy.get('#slide-1').trigger('click')
     cy.get('[data-id="listing-1"] [alt="image-1"]').should('be.visible')
   })
 })

cypress/e2e/landlordSubmit.cy.ts

@@ -0,0 +1,45 @@
+describe('A landlord should be able to submit a property, with feedback', () => {
+  it('should attempt to submit an empty form and not be able to submit', () => {
+    cy.visit('/add-listing')
+    cy.get('[data-testid="flowbite-card"] button[type="submit"]').click()
+    cy.url().should('include', '/add-listing')
+  })
+  //     it('should submit a valid form and be able to submit', () => {
+  //         cy.visit('/add-listing')
+  //         // checkbox
+  //         cy.get('input[type="checkbox"]').check()
+  //         // // radio
+  //         // cy.get('input[type="radio"]').check()
+
+  //         // // select
+  //         // cy.get('input[type="select"]').select(0)
+
+  //         // text
+  //         cy.get('input[type="text"]').each(($el) => {cy.wrap($el).type('test')})
+  //         // number
+  //         cy.get('input[type="number"]').each(($el) => {cy.wrap($el).type('2')})
+
+  //         // files
+  //         // cy.get('#floor_plans[type="file"]').selectFile(['cypress/images/jpgTest.jpg', 'cypress/images/pdfTest.pdf'])
+  //         // cy.get('#property_video[type="file"]').selectFile('cypress/images/movTest.mov')
+  //         // cy.get('#property_images[type="file"]').selectFile('cypress/images/pngTest.png')
+  //         // cy.get('#epcCertificate[type="file"]').selectFile('cypress/images/pdfTest.pdf')
+
+  //         // submit
+  //         cy.get('[data-testid="flowbite-card"] button[type="submit"]').click()
+
+  //         // if successful it will redirect
+  //         cy.url().should('include', '/listings')
+  //     })
+  //     // it('should display an error message or indicate that something went wrong', () => {
+  //         // button should say try again rather than advertise listings
+  //     // })
+})
+
+// describe('Only a landlord should be able to land on the add-listings page', () => {
+
+// })
+
+// describe('Should throw an error if a landlord tries to submit a property where either required fields are missing, or supabase couldnt connect', () => {
+
+// })

cypress/e2e/spec.cy.ts

@@ -1,26 +1,21 @@
-describe('/ page spec', () => {
-  it('passes', () => {
-    cy.visit('http://localhost:3000/')
-  })
-})
-
 describe('/listings page spec', () => {
   it('loads listings available', () => {
-    cy.visit('http://localhost:3000/listings')
+    cy.visit('/listings')
     cy.get('.test-class-property').should('be.visible')
   })
 })
 
 describe('/search-preferences spec', () => {
+  beforeEach(() => {
+    cy.visit('/search-preferences')
+  })
   it('loads the SearchPreferencesForm', () => {
-    cy.visit('http://localhost:3000/search-preferences')
     cy.get('form').should('be.visible')
   })
   it('submits preferences to the url', () => {
-    cy.visit('http://localhost:3000/search-preferences')
     cy.get('#location').type('hackney')
     cy.get('#max-rooms').invoke('val', 1).trigger('change')
-    cy.get('button').click({ multiple: true })
+    cy.get('[data-cy="SearchPreferencesForm"] button').click({ multiple: true })
     cy.url().should('include', '&location=hackney')
     cy.url().should('include', '&max_rooms=1')
   })

src/components/Header.tsx

@@ -4,16 +4,32 @@ import Link from 'next/link'
 import { Dropdown, Navbar, Avatar } from 'flowbite-react'
 import { RxHamburgerMenu } from 'react-icons/rx'
 import HamburgerSidebar from './HamburgerSidebar'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import {
+  Session,
+  createClientComponentClient,
+} from '@supabase/auth-helpers-nextjs'
 import { Database } from '../../types/supabase'
 
 const Header = () => {
   const [showSidebar, setShowSidebar] = useState(false)
+  const [session, setSession] = useState<Session | null>(null)
   const router = useRouter()
   const supabase = createClientComponentClient<Database>()
 
+  useEffect(() => {
+    // check whether user is logged in
+    const getSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession()
+      console.log(session)
+      if (session) return setSession(session)
+    }
+    getSession()
+  }, [])
+
   const handleLogout = async () => {
     await supabase.auth.signOut()
     router.refresh()
@@ -30,11 +46,11 @@ const Header = () => {
           <Navbar.Brand href="/" className="flex gap-3 items-center">
             {
               <Image
-                width="30"
-                height="30"
+                src="/rs-logo.svg"
+                width={30}
+                height={30}
                 alt="Rent-shield logo"
                 className="h-6 sm:h-9"
-                src="/rs-logo.svg"
               />
             }
             <span className="hidden whitespace-nowrap text-xl font-semibold dark:text-white md:block">
@@ -54,16 +70,39 @@ const Header = () => {
               />
             }
           >
-            <Dropdown.Header>
-              <span className="block text-lg">Gertrude Pickle</span>
-              <span className="block truncate text-md font-medium">
-                [email protected]
-              </span>
-            </Dropdown.Header>
-            <Dropdown.Item>Settings</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item>Sign out</Dropdown.Item>
-            <Dropdown.Divider />
+            {session ? (
+              <>
+                <Dropdown.Header>
+                  {/* <span className="block text-lg">Gertrude Pickle</span> */}
+                  <span className="block truncate text-lg font-medium">
+                    {session.user.email}
+                  </span>
+                </Dropdown.Header>
+                <Dropdown.Item>Settings</Dropdown.Item>
+                {session.user.user_metadata.role_id === 2 ? (
+                  <>
+                    <Dropdown.Divider />
+                    <Link href="/add-listing">
+                      <Dropdown.Item>Add Listing</Dropdown.Item>
+                    </Link>
+                  </>
+                ) : (
+                  ''
+                )}
+
+                <Dropdown.Divider />
+                <Dropdown.Item>Sign out</Dropdown.Item>
+              </>
+            ) : (
+              <>
+                <Link href="/log-in">
+                  <Dropdown.Item>Log In</Dropdown.Item>
+                </Link>
+                <Link href="/sign-up">
+                  <Dropdown.Item>Sign Up</Dropdown.Item>
+                </Link>
+              </>
+            )}
           </Dropdown>
         </div>
       </Navbar>

src/components/Map.tsx

@@ -6,7 +6,6 @@ import { IMapProps } from '../../types/types'
 
 const Map = ({ center, markers, id }: IMapProps) => {
   useEffect(() => {
-    if (typeof window === 'undefined') return
     initializeMap({ id, center, markers })
   }, [center, markers, id])
 

src/components/Property.tsx

@@ -23,7 +23,6 @@ const Property = ({ id, listing }: { id: string; listing: ListingType }) => {
   })
   const [markers, setMarkers] = useState<ILocation[]>([])
   const [loading, setLoading] = useState(true) // added a loading state in case the map doesn't load...
-  const [loggedIn, setLoggedIn] = useState(false)
   const [userId, setUserId] = useState<string>('')
   const supabase = createClientComponentClient<Database>()
   const router = useRouter()
@@ -47,7 +46,6 @@ const Property = ({ id, listing }: { id: string; listing: ListingType }) => {
           throw new Error('No userID found.')
         }
         setUserId(sessionUserId as string)
-        setLoggedIn(true)
       } catch (error) {
         console.error(error)
       }
@@ -94,7 +92,7 @@ const Property = ({ id, listing }: { id: string; listing: ListingType }) => {
   fetchFavourites(listing.id, userId)
 
   const handleFavourite = async (property_id: number, user_id: string) => {
-    if (!loggedIn) return router.push('/log-in')
+    if (!userId) return router.push('/log-in')
     liked
       ? await deleteFavourite(property_id, user_id)
       : await addFavourite(property_id, user_id)