From 971a592bca48a0b2cd6fee886291e6189787bf83 Mon Sep 17 00:00:00 2001 From: Giorgio Date: Fri, 10 Nov 2023 13:53:14 -1000 Subject: [PATCH 1/6] Make report mobile responsive --- my-app/src/middleware.js | 18 +-- my-app/src/pages/report/index.jsx | 255 ++++++++++++++++++------------ 2 files changed, 162 insertions(+), 111 deletions(-) diff --git a/my-app/src/middleware.js b/my-app/src/middleware.js index 0a93832..419bd7d 100644 --- a/my-app/src/middleware.js +++ b/my-app/src/middleware.js @@ -4,13 +4,9 @@ import { ROLES } from "./roles/roles"; // Without a defined matcher, this one line applies next-auth to entire project // export { default } from "next-auth/middleware" -export const ADMIN_ROUTES = [ - "/admin", -]; +export const ADMIN_ROUTES = ["/admin"]; -export const ORG_ADMIN_ROUTES = [ - "/organization", -] +export const ORG_ADMIN_ROUTES = ["/organization"]; export const MEMBER_ROUTES = [ "/data-insights", @@ -18,7 +14,7 @@ export const MEMBER_ROUTES = [ "/home", "/thread", "/threads", -] +]; export default withAuth( function middleware(request) { @@ -28,12 +24,16 @@ export default withAuth( ADMIN_ROUTES.some((path) => request.nextUrl.pathname.startsWith(path)) && request.nextauth.token?.role !== ROLES.ADMIN ) { + console.log("hello admin"); return NextResponse.rewrite(new URL("/denied", request.url)); } if ( - ORG_ADMIN_ROUTES.some((path) => request.nextUrl.pathname.startsWith(path)) && - request.nextauth.token?.role !== (ROLES.ORG_ADMIN || ROLES.ADMIN) + ORG_ADMIN_ROUTES.some((path) => + request.nextUrl.pathname.startsWith(path) + ) && + request.nextauth.token?.role !== ROLES.ORG_ADMIN && + request.nextauth.token?.role !== ROLES.ADMIN ) { return NextResponse.rewrite(new URL("/denied", request.url)); } diff --git a/my-app/src/pages/report/index.jsx b/my-app/src/pages/report/index.jsx index 9876e0d..ec6e3a1 100644 --- a/my-app/src/pages/report/index.jsx +++ b/my-app/src/pages/report/index.jsx @@ -1,50 +1,60 @@ import { useEffect, useState } from "react"; import Dropzone from "react-dropzone"; -import { toast } from 'react-toastify'; +import { toast } from "react-toastify"; import ClickableMap from "@/components/map/ClickableMap/ClickableMap"; -import {useSession} from "next-auth/react"; +import { useSession } from "next-auth/react"; import Loading from "@/components/Loading"; -import {uploadFiles} from "@/utils/uploadthing"; +import { uploadFiles } from "@/utils/uploadthing"; const ReportForm = () => { const { data: session, status } = useSession(); const [isLoading, setIsLoading] = useState(false); // debris description - const [debrisType, setDebrisType] = useState('"Mass of netting/fishing gear"'); - const [debrisTypeOther, setDebrisTypeOther] = useState("No additional description"); + const [debrisType, setDebrisType] = useState( + '"Mass of netting/fishing gear"' + ); + const [debrisTypeOther, setDebrisTypeOther] = useState( + "No additional description" + ); const [containerFullness, setContainerFullness] = useState(null); const [claimBoat, setClaimBoat] = useState(null); - const [biofoulingRating, setBiofoulingRating] = useState('1 - No algae or marine life at all'); + const [biofoulingRating, setBiofoulingRating] = useState( + "1 - No algae or marine life at all" + ); // debris location - const [debrisRelativeLocation, setDebrisRelativeLocation] = useState('At sea, BEYOND three miles from nearest land'); - const [debrisLocationDetails, setDebrisLocationDetails] = useState(''); + const [debrisRelativeLocation, setDebrisRelativeLocation] = useState( + "At sea, BEYOND three miles from nearest land" + ); + const [debrisLocationDetails, setDebrisLocationDetails] = useState(""); const [coordinates, setCoordinates] = useState(null); // debris detailed description - const [debrisTrappedDesc, setDebrisTrappedDesc] = useState('Caught on the reef or partially buried in sand'); - const [debrisTrappedOther, setDebrisTrappedOther] = useState(''); + const [debrisTrappedDesc, setDebrisTrappedDesc] = useState( + "Caught on the reef or partially buried in sand" + ); + const [debrisTrappedOther, setDebrisTrappedOther] = useState(""); const [imageURLArray, setImageURLArray] = useState([]); const [files, setFiles] = useState([]); // reporter contact info - const [lastName, setLastName] = useState(''); - const [firstName, setFirstName] = useState(''); - const [phoneNumber, setPhoneNumber] = useState(''); - const [email, setEmail] = useState(''); - const [confirmEmail, setConfirmEmail] = useState(''); + const [lastName, setLastName] = useState(""); + const [firstName, setFirstName] = useState(""); + const [phoneNumber, setPhoneNumber] = useState(""); + const [email, setEmail] = useState(""); + const [confirmEmail, setConfirmEmail] = useState(""); const selectedBtnStyle = { - background: '#3aa2e7', - border: '1px solid #56A9E0', - color: 'white', + background: "#3aa2e7", + border: "1px solid #56A9E0", + color: "white", }; const regularBtnStyle = { - background: '#b2b6b6', - color: '#555555', - border: 'none', + background: "#b2b6b6", + color: "#555555", + border: "none", }; const validPhone = (phone) => { @@ -66,23 +76,23 @@ const ReportForm = () => { async function submitForm() { // validation if (!coordinates) { - toast.info('Please select a location on the map'); + toast.info("Please select a location on the map"); return; } if (!firstName || !lastName) { - toast.info('Please enter your first and last name'); + toast.info("Please enter your first and last name"); return; } if (!phoneNumber || !validPhone(phoneNumber)) { - toast.info('Please enter a valid phone number'); + toast.info("Please enter a valid phone number"); return; } if (!email || !validEmail(email)) { - toast.info('Please enter a valid email address'); + toast.info("Please enter a valid email address"); return; } if (!confirmEmail || email !== confirmEmail) { - toast.info('Email and confirm email must match'); + toast.info("Email and confirm email must match"); return; } setIsLoading(true); @@ -111,30 +121,30 @@ const ReportForm = () => { mapLat: coordinates?.latitude, mapLong: coordinates?.longitude, }; - if (debrisType.includes('Container')) { - data.publicContainerFullness = containerFullness || 'Full'; - } else if (debrisType.includes('boat')) { - data.publicClaimBoat = claimBoat || 'No'; + if (debrisType.includes("Container")) { + data.publicContainerFullness = containerFullness || "Full"; + } else if (debrisType.includes("boat")) { + data.publicClaimBoat = claimBoat || "No"; } - const res = await fetch('/api/mongo/event/add-form', { - method: 'POST', + const res = await fetch("/api/mongo/event/add-form", { + method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); if (res.status === 201) { - toast.success('Form submitted - Mahalo!'); + toast.success("Form submitted - Mahalo!"); } else { - toast.error('Error submitting form - Please try again later'); + toast.error("Error submitting form - Please try again later"); } setIsLoading(false); } return ( -
+
{isLoading && } -
+

Report Marine Debris

@@ -142,7 +152,13 @@ const ReportForm = () => {

TO REPORT MARINE ANIMALS THAT ARE ENTANGLED IN DEBRIS, CALL NOAA - IMMEDIATELY AT 1-888-256-9840 + IMMEDIATELY AT{" "} + + 1-888-256-9840 +  (round-the-clock hotline)

@@ -188,11 +204,14 @@ const ReportForm = () => {

{/* 1st section */} -
+

1) I FOUND/LOCATED THE FOLLOWING*

-
setDebrisType(event.target.value)}> +
setDebrisType(event.target.value)} + >