front end adjustments, new header with name, added footer

ReactFrontEnd/src/App.jsx

@@ -13,6 +13,7 @@ import CreateReview from './Components/CreateReview'
 import SearchList from './Components/SearchList'
 import ParkDetails from './Components/ParkDetails'
 import Register from './Components/Register'
+import Footer from './Components/Footer'
 
 
 // ### ORIGINAL BEFORE ROUTER ###
@@ -39,6 +40,7 @@ function App() {
         </Routes>
       </BrowserRouter>
       </AppProvider>
+      <Footer />
     </>
 
   )

ReactFrontEnd/src/Components/CreateReview.jsx

@@ -61,7 +61,7 @@ const CreateReview = () => {
   return (
     <>
       <Header />
-      {/* <div className="h-full bg-gray-400 mx-10 my-20 pt-10 pb-4"> */}
+      <div className="h-full bg-gray-400 mx-10 my-20 pt-10 pb-4">
 
         <div className="flex justify-center px-5 py-4">
           <h1 className="flex underline underline-offset-4 text-amber-950">Create a review for {parkDetails.name}</h1>
@@ -96,7 +96,7 @@ const CreateReview = () => {
             Clear
           </button>
         </div>
-      {/* </div> */}
+      </div>
     </>
   );
 };

ReactFrontEnd/src/Components/Footer.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div className="flex justify-center w-full text-nps-green-200 bg-nps-green-999 bottom-0 py-10">&#169; Park Trippin'</div>
+  )
+}
+
+export default Footer

ReactFrontEnd/src/Components/Header.jsx

@@ -1,7 +1,10 @@
 {/* KW - 3/23/24 */}
 
-import React from 'react'
-import logo from '../assets/Images/NPS-Logo.png'
+import React, {useState} from 'react'
+// import logo from '../assets/Images/NPS-Logo.png'
+// import logo from '../assets/Images/logo-mushroom.svg'
+import logo from '../assets/Images/parktrippin-logo.png'
+
 import {HiHome, HiMagnifyingGlass,HiStar,HiPaperAirplane,HiBars3} from "react-icons/hi2";
 import {HiUser} from "react-icons/hi2";
 import {HiPlus,HiDotsVertical} from "react-icons/hi";
@@ -11,6 +14,7 @@ import HeaderItem from './HeaderItem';
 
 {/* this functional component is used to define the header bar content */}
 function Header() {
+    const [toggle, setToggle] = useState(false) //for drop-down on mobile menu
 
     // menu is used to define key/values for nav bar links. 
     //Name is the string value for nav bar link, icon refers 
@@ -37,14 +41,22 @@ function Header() {
             name:'ITINERARY',
             icon:HiPaperAirplane,
             path:'/itinerary'
-        }
+        },
+        {
+            name:'PROFILE',
+            icon:HiUser,
+            path:'/profile'
+        },
+
     ]
     return (
-
-        <div className="flex items-center justify-center p-5">
-            <div className="flex gap-8 items-center">
-            <img src={logo} className="w-[80px] 
-            md:w-[115px] object-cover"></img>
+        <>
+
+        <h1 className="bg-nps-green-999 text-center text-nps-green-200 font-bold underline underline-offset-8 pt-10">Park Trippin'</h1>
+        <div className="flex items-center justify-center bg-nps-green-999">
+
+            <div className="flex gap-8 items-center py-4">
+            <img src={logo} className="w-[80px] md:w-[110px] object-cover"></img>
 
                 {/* divs below iterate through menu const above to 
                 render each into a navlink with its icon */}
@@ -59,30 +71,28 @@ function Header() {
 
                 {/* this nav bar is visible ONLY when screen width 
                 is UNDER 7## px wide */}
-                <div className="flex md:hidden gap-5">
+                {/* <div className="flex md:hidden gap-5">
                     {menu.map((item, idx)=>(
-                    <HeaderItem key={idx} name={item.name} Icon={item.icon} path={item.path}/>
+                    <HeaderItem key={idx} name={""} Icon={item.icon} path={item.path}/>
                     ))}
-                </div>
+                </div> */}
 
             {/* ### this div can be used if you want to collapse some 
             nav bar links when screen width is small (mobile) - the 
             hidden options could be displayed when clicking on 3 bars 
             or 3 dots ### */}
-                {/* <div className="md:hidden">
+                <div className="md:hidden" onClick={() => setToggle(!toggle)}>
                     <HeaderItem name={''} Icon={HiBars3} />
-                        <div>
-                            {menu.map((item,index)=>index>2&&(
-                            <HeaderItem name={''} Icon={item.icon}/>
+                    {toggle? 
+                        <div className=" absolute right-6 bg-nps-green-999 mt-4 border p-3 z-50">
+                            {menu.map((item,idx)=>idx>=0&&(
+                            <HeaderItem key={idx} name={item.name} Icon={item.icon} path={item.path}/>
                             ))}
-                        </div> 
-                    </div>  */}
-
-            {/* this is just a placeholder for an icon that could be used for the user's profile
-            which is located in the nav bar, but outside of the other nav links*/}
-                <div><HiUser size={23} color="white"/></div>
+                        </div> : null}
+                </div> 
             </div>
         </div>
+        </>
 
     )
 }

ReactFrontEnd/src/Components/HeaderItem.jsx

@@ -3,24 +3,15 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-{/* this functional component generates each nav link from the "menu" const in 
-Header.jsx into its own element in the Header */}
+{/* this generates each nav link from the "menu" const in Header.jsx into its own element in the Header */}
 function HeaderItem({name,Icon,path}) {
   return (
-    // <div className="text-white flex items-center gap-3 
-    // text-[18px] font-semibold cursor-pointer hover:underline underline-offset-8">
-    //     <Icon/>
-
-    //     {/* this will hide the text for each nav link in the header when the 
-    //     screen width is small/mobile */}
-    //     <h2 className="hidden md:block">{name}</h2>
-    // </div>
     <>
         <Link to={path}>
-          <div className="text-white flex items-center gap-3 
+          <div className="text-nps-green-200 flex items-center gap-3 
           text-[18px] font-semibold cursor-pointer hover:underline underline-offset-8">
             <Icon/>
-            <h2 className="hidden md:block">{name}</h2>
+            <h2 className="">{name}</h2>
           </div>
         </Link>
     </>

ReactFrontEnd/src/Components/Home.jsx

@@ -2,17 +2,24 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import Slideshow from './Slideshow'
 import Header from './Header'
+import Footer from './Footer'
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import axios from 'axios'
 
 
 function Home() {
-  
+
   return (
     <>
-      <Header />
-      <Slideshow />
-      <h1>THIS IS THE HOME PAGE</h1>
+      <div className="bg-nps-green-300 h-lvh">
+        <Header />
+        <Slideshow />
+        <div className="flex flex-col border border-nps-green-999 rounded-xl my-10 mx-auto p-6 lg:w-1/2">
+          <div className="text-center">"Welcome to Park Trippin'!</div>
+          <div> Here, you'll effortlessly discover the natural wonders and serene beauty of our country's most cherished landscapes. Whether you seek rugged trails, tranquil lakes, or breathtaking vistas, embark on your next adventure with us. Start exploring, and let the journey to our nation's heart begin!</div>
+        </div>
+      </div>
+
     </>
   )
 }

ReactFrontEnd/src/Components/MapMarkers.jsx

@@ -0,0 +1,62 @@
+//beginning of logic for creating multiple map markers for parks with more than one address
+
+
+function getLatLong() {
+    const [long, setLong] = useState([]);
+    const [lat, setLat] = useState([]);
+
+    const coordURL = "https://nominatim.openstreetmap.org/search?street="+street+"&postalcode="+postalcode+"&format=json";
+
+    //"https://nominatim.openstreetmap.org/search?street=511%20north%20clay&postalcode=63135&format=json"
+
+    axios
+    .get(coordURL, 
+  { headers: { 'User-Agent': 'wiegmank@gmail.com' }  } )
+    .then(response => {
+
+      console.log(response.data[0])
+      setLong(response.data[0].lon);
+      setLat(response.data[0].lat)
+    })
+    .catch(function(e) {
+      console.log(e);
+    });
+
+}
+
+        // getLatLong(address);
+
+        //TODO 1
+        //finish API call to nominatim to convert street address into lat/long
+        //remember to add header with email address
+
+        //TODO 2
+        //Use getCoords on physicalAddresses to get coordinates for new map markers
+
+        //TODO 3
+        //add lat & long keys/values to these physical addresses
+
+        //TODO4
+        //map over addresses to create markers in map component
+
+            //latlong query URI
+    //   https://nominatim.openstreetmap.org/search?<params>
+
+
+
+
+    // function getCoords(address) {
+    //     let street = address.line1; //street address with spaces
+    //     let postalcode = address.postalCode;
+
+    //     //this encodes the street to be proper URI format
+    //     console.log("ADDRESS: ")
+    //     console.log(street)
+    //     street = encodeURI(street) //street address parsed into URI format
+    //     console.log("ADDRESS FORMATTED...")
+    //     console.log(street)
+    //     console.log(parkInfo)
+
+    // }
+
+    // getCoords(physicalAddresses[0])

ReactFrontEnd/src/Components/ParkDetails.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import axios from 'axios';
 import Header from './Header';
+import Footer from './Footer';
 import { useGlobalContext } from '../context';
 import { Carousel } from 'flowbite-react';
 import {useQuery, useQueryClient} from '@tanstack/react-query';
@@ -16,7 +17,7 @@ function ParkDetails() {
     const [singlePark, setPark] = useState([]);
     const { parkCode } =  useParams();
     // const { searches } = useGlobalContext();
-    const mapRef = useRef(null);
+    const mapRef = useRef();
 
     //this sets parkId equal to the parkcode at then end of the current url
     const parkId = useParams().parkcode;
@@ -31,7 +32,7 @@ function ParkDetails() {
     });
 
     if (error) return <div>There was an error</div>;
-    if (isLoading) return <div>DATA IS LOADING...</div>
+    if (isLoading) return <div>DATA IS LOADING...</div>;
 
 //#############################
 //WORKING WITH FRESH API CALLS
@@ -129,7 +130,7 @@ function ParkDetails() {
     function MapMaker({coords}) {
         return (
             <div className="flex justify-center h-1/2 m-5">
-                <MapContainer center={coords} zoom={9} ref={mapRef} scrollWheelZoom={false} className="w-3/4 h-screen rounded-xl" >  
+                <MapContainer center={coords} zoom={11} ref={mapRef} scrollWheelZoom={false} className="w-3/4 h-screen rounded-xl" >  
                     <TileLayer
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -143,7 +144,7 @@ function ParkDetails() {
     return (
     <>
     <Header />
-    <div className="h-full bg-gray-400 pt-10 pb-4 mt-10 mx-10 mb-20 rounded-md">
+    <div className="h-full bg-nps-green-300 pt-20 pb-20 px-10 rounded-md">
         <div name="title" className="flex flex-col items-center">
             <div><h1 className="underline underline-offset-4 px-5 py-4">{parkInfo.fullName}</h1></div>
             <div name="designation" className="flex px-2">
@@ -156,8 +157,8 @@ function ParkDetails() {
             </div>
         </div>
 
-        <div name="images" className=" h-svh">
-            <Carousel slide={false} className="">
+        <div name="images" className="py-10 h-svh">
+            <Carousel slide={false} className=" shadow-2xl">
                 {parkInfo.images.map((image, idx) => (
                 <img key={idx} src={image.url} className=""/>
                 ))}
@@ -174,12 +175,12 @@ function ParkDetails() {
             })}
         </div>
 
-        <div name="contact-info" className="bg-green-600  my-20 py-5 w-1/2 flex flex-col items-center mx-auto rounded-2xl">
-            <div><p>Contact Info</p></div>
+        <div name="contact-info" className="bg-nps-green-600 drop-shadow-2xl  my-20 py-5 w-1/2 flex flex-col items-center text-center mx-auto rounded-2xl">
+            <div><p className="underline underline-offset-4 font-semibold">Park Contact Info</p></div>
             <div>
                 <p>{parkInfo.contacts.emailAddresses[0].emailAddress}</p>
                 <p>{newPhone}</p>
-                <p>place holder text</p>
+                <p className="">place holder text</p>
             </div>
         </div>
 
@@ -188,7 +189,7 @@ function ParkDetails() {
             <Link to = "/createreview"><button className="bg-yellow-300 rounded-3xl">Review</button></Link>
             <Link to = "/itinerary"><button className=" bg-yellow-300 rounded-3xl">Create Itinereary</button></Link>
         </div>
-        <div name="map">
+        <div name="map" className="pt-10 drop-shadow-2xl">
             <MapMaker coords={latlong} />
         </div>
     </div>

ReactFrontEnd/src/Components/Search.jsx

@@ -7,7 +7,7 @@ const Search = (search) => {
 
   // console.log(search.activities);
   return (
-    <div className='search-item flex flex-column flex-sb'>
+    <div className='search-item flex flex-column flex-sb drop-shadow-2xl bg-nps-green-500'>
       <div className='search-item-img'>
         <img src = {search.cover_id} alt = "photo" />
       </div>

ReactFrontEnd/src/Components/SearchForm.jsx

@@ -35,7 +35,7 @@ const SearchForm = () => {
       <div className='search-form-content'>
         <form className='search-form' onSubmit={handleSubmit}>
           <div className='search-form-elem flex flex-sb bg-white'>
-            <input type = "text" className='form-control text-gray-500' placeholder='Yellowstone Park ...' ref = {searchText}/>
+            <input type = "text" className='form-control text-gray-500 w-full' placeholder='Yellowstone Park ...' ref = {searchText}/>
             <button type = "submit" className='flex flex-c' onClick={handleSubmit}>
               <FaSearch className='text-black' size = {32} />
             </button>

ReactFrontEnd/src/Components/SearchHeader.css

@@ -5,6 +5,7 @@
     min-height: 75vh;
     background: linear-gradient(rgba(27, 141, 75, 0.3), rgba(24, 151, 52, 0.5)), url("../images/photo1.jpg") center/cover no-repeat;
     flex-direction: column;
+    background-attachment: fixed; 
 }
 .search-header-title{
     font-size: 4.2rem;

ReactFrontEnd/src/Components/SearchList.jsx

@@ -18,7 +18,7 @@ const SearchList = () => {
    //console.log(parksWithCovers);
 
   return (
-    <section className='searchlist'>
+    <section className='searchlist bg-nps-green-300'>
       <div className='container'>
         <div className='section-title'>
           <h2>{resultName}</h2>  

ReactFrontEnd/src/Components/Slideshow.jsx

@@ -17,24 +17,12 @@ function Slideshow() {
     const myArray = picList.map(item => item.fileInfo.url);
 
     return (
-        // ### PREVIOUS SLIDE SHOW ITERATION ###
-        // <div className="flex overflow-x-auto  w-full px-10 py-2 ">       
-        //     {picList.map((item,index)=>(
-
-        //         <img src={item.fileInfo.url} 
-        //         className="min-w-full h-[310px] object-cover object-left-top mr-5 rounded-sm"/>
-        //     ))}
-        // 
-        // </div>
-        //### END OF OLD SLIDE SHOW ###
-
         //this div renders slide show using images from "picList". Interval can be changed 
         //by altering 'slideInterval'. Prev/next image buttons are hidden with leftControl
         //and rightControl set to non-breaking space...delete those props to make them visible
-
         <>
-            <div className="h-80 px-5 py-2">
-                <Carousel slideInterval={7000} indicators={false} pauseOnHover leftControl="&nbsp;" rightControl="&nbsp;">
+            <div className="h-80 pt-10">
+                <Carousel slideInterval={5000} indicators={false} pauseOnHover leftControl="&nbsp;" rightControl="&nbsp;">
                     {picList.map((item, idx) => (
                         <img key={idx}src={item.fileInfo.url} className="min-w-full"/>
                     ))}