Merge pull request #29 from digadoo/developHEADmain

04/25 PR: New pages, state added to sidebar items, and a structure for displaying tasks

6 files changed, 180 insertions, 13 deletions

diff --git a/src/App.js b/src/App.js
index 3e3f7fc..b52fe75 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,9 @@ import PrivacyPolicy from "./pages/PrivacyPolicy";
 import Dashboard from "./pages/Dashboard";
 import {AuthProvider} from "./providers/AuthContext";
 import Profile from "./pages/Profile";
+import FindOpportunities from "./pages/FindOpportunities";
+import RecruitVolunteers from "./pages/RecruitVolunteers";
+import Messages from "./pages/Messages";
 
 function App() {
     const location = useLocation();
@@ -36,6 +39,9 @@ function App() {
                 <Route path="/login" element={<Login />} />
                 <Route path="/dashboard" element={<Dashboard />} />
                 <Route path="/profile" element={<Profile />} />
+                <Route path="/find-opportunities" element={<FindOpportunities />} />
+                <Route path="/recruit-volunteers" element={<RecruitVolunteers />} />
+                <Route path="/messages" element={<Messages />} />
                 <Route path="/forgot-password" element={<ForgotPassword />} />
                 <Route path="/sign-up" element={<SignUp />} />
             </Routes>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index a836e22..3f31f93 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -46,7 +46,7 @@ const Navbar = () => {
                                                 className="w-8"
                                             />
                                         </span>
-                                        <span>Helping Hands</span>
+                                        <span className="max-sm:hidden">Helping Hands</span>
                                     </span>
                                 </Link>
 
diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js
index 506a934..b2b61df 100644
--- a/src/layouts/GridLayout.js
+++ b/src/layouts/GridLayout.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {
     HomeIcon,
     EnvelopeIcon,
@@ -8,13 +8,34 @@ import {
 } from "@heroicons/react/24/outline"
 
 const GridLayout = ({ children }) => {
+
+    const [selectedPage, setSelectedPage] = useState(() => {
+        const storedPage = localStorage.getItem('selectedPage');
+        return storedPage ? storedPage : 'home';
+    });
+
+    useEffect(() => {
+        localStorage.setItem('selectedPage', selectedPage);
+    }, [selectedPage]);
+
+    const handlePageClick = (page) => {
+        setSelectedPage(page);
+    };
+
+
     return (
-        <div className="container px-8 mx-auto grid grid-cols-[96px,1fr,96px] gap-10">
+        <div className="container px-8 mx-auto grid md:grid-cols-[96px,1fr] lg:grid-cols-[96px,1fr,96px] gap-10">
 
             {/*Left column - sticky */}
-            <div className="self-start sticky top-0 col-span-1 pt-8 ">
-            <nav className="p-2 ">
-            <a  href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
+            <div className="max-md:hidden self-start sticky top-0 col-span-1 pt-8 text-trueGray-500 ">
+            <nav className="">
+                <a
+                    href="/"
+                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
+                        selectedPage === 'home' ? 'bg-indigo-50 text-indigo-500' : ''
+                    }`}
+                    onClick={() => handlePageClick('home')}
+                >
                <HomeIcon className="w-8 h-8" />
                 <button
                     rel="noopener"
@@ -22,7 +43,13 @@ const GridLayout = ({ children }) => {
                     Home
                 </button>
             </a>
-            <a  href="/profile" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
+                <a
+                    href="/profile"
+                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
+                        selectedPage === 'profile' ? 'bg-indigo-50 text-indigo-500' : ''
+                    }`}
+                    onClick={() => handlePageClick('profile')}
+                >
                 <UserIcon className="w-8 h-8" />
                 <button
                     rel="noopener"
@@ -30,15 +57,27 @@ const GridLayout = ({ children }) => {
                     Profile
                 </button>
             </a>
-            <a  href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
+                <a
+                    href="/find-opportunities"
+                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
+                        selectedPage === 'find-opportunities' ? 'bg-indigo-50 text-indigo-500' : ''
+                    }`}
+                    onClick={() => handlePageClick('find-opportunities')}
+                >
                 <BriefcaseIcon className="w-8 h-8" />
                 <button
                     rel="noopener"
-                    className="mb-1 text-xs font-light whitespace-nowrap">
+                    className="mb-1 text-xs font-light  whitespace-nowrap">
                     Find Opportunities
                 </button>
             </a>
-            <a  href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
+                <a
+                    href="/recruit-volunteers"
+                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${
+                        selectedPage === 'recruit-volunteers' ? 'bg-indigo-50 text-indigo-500' : ''
+                    }`}
+                    onClick={() => handlePageClick('recruit-volunteers')}
+                >
                 <BuildingStorefrontIcon className="w-8 h-8" />
                 <button
                     rel="noopener"
@@ -46,8 +85,13 @@ const GridLayout = ({ children }) => {
                      Recruit Volunteers
                 </button>
             </a>
-            <a  href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100">
-                <EnvelopeIcon className="w-8 h-8 " />
+                <a
+                    href="/messages"
+                    className={`flex items-center flex-col mb-4 hover:text-indigo-500 p-1 rounded ${
+                        selectedPage === 'messages' ? 'bg-indigo-50 text-indigo-500' : ''
+                    }`}
+                    onClick={() => handlePageClick('messages')}
+                >                <EnvelopeIcon className="w-8 h-8 " />
                 <button
                     rel="noopener"
                     className="mb-1 text-xs font-light">
@@ -58,7 +102,7 @@ const GridLayout = ({ children }) => {
             </div>
 
             {/*Middle column */}
-            <div className="overflow-auto bg-blue-300 h-screen">
+            <div className="overflow-auto h-screen">
                 {children}
             </div>
 
diff --git a/src/pages/FindOpportunities.js b/src/pages/FindOpportunities.js
new file mode 100644
index 0000000..dab7647
--- /dev/null
+++ b/src/pages/FindOpportunities.js
@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+import { CalendarIcon, MapPinIcon, BuildingOfficeIcon } from "@heroicons/react/24/outline";
+
+
+const FindOpportunities = () => {
+    const { user } = useContext(AuthContext);
+
+    const fakePosting = {
+        id: '69420',
+        name: 'Team Rocket',
+        location: 'Annapolis, MD',
+        title: 'Need Help Battling Mega Bidoof!',
+        description: "Mega Bidoof is crazy hard to battle. He's so big and strong and mega, and named Bidoof.",
+        date_posted: '04/23/2024',
+        date_scheduled: '05/01/2024',
+        time_scheduled: 'Flexible',
+        skills: ['Catch', 'Throw', 'Battle']
+    }
+
+    return (
+        <>
+            {!user ? (
+                <h1>tuna tees here</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                        <div className="flex w-full flex-col px-4 md:px-16">
+                            <div className="max-w-2xl text-2xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white pb-2"> Search for Opportunities </div>
+                            <ul className="">
+                                <div className="flex flex-row flex-grow-1 max-h-32 gap-2 p-2 flex-no-wrap border border-indigo-100 rounded-lg shadow-lg">
+
+                                {/*Photo section*/}
+                                <div className="max-md:hidden max-w-32 flex justify-center items-center">
+                                    <div className="h-16 w-16 bg-indigo-100"></div>
+                                </div>
+
+                                {/*Middle section*/}
+                                <div className="flex flex-grow flex-col text-nowrap overflow-x-clip">
+                                    <div className="text-md font-semibold"> {fakePosting.title} </div>
+                                    <div className="text-xs text-nowrap overflow-ellipsis text-gray-500">{fakePosting.description} </div>
+                                    <div className="text-[.6rem] text-nowrap grid md:grid-cols-3 sm:grid-cols-1 content-evenly">
+                                        <div className="inline-flex col-span-1 items-center text-gray-500 gap-0.5"> <BuildingOfficeIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.name} </div>
+                                        <div className="inline-flex items-center text-gray-500 gap-0.5"><CalendarIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.date_posted} </div>
+                                        <div className="inline-flex items-center text-gray-500 gap-0.5"> <MapPinIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.location} </div>
+                                    </div>
+                                    <div className="flex gap-1 text-indigo-500 text-[.6rem] mt-1 ">
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[0]} </li>
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[1]} </li>
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[2]} </li>
+                                    </div>
+                                </div>
+
+                                {/*Apply section*/}
+                                <div className="max-w-64 justify-center flex flex-col">
+                                    <button className="bg-indigo-500 text-white rounded-md focus:bg-indigo-600 focus:outline-none">Apply</button>
+                                    <div className="inline-flex text-nowrap text-[.5rem] text-gray-500 ">Posted: {fakePosting.date_posted} </div>
+                                </div>
+
+                                </div>
+                            </ul>
+                        </div>
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default FindOpportunities;
\ No newline at end of file
diff --git a/src/pages/Messages.js b/src/pages/Messages.js
new file mode 100644
index 0000000..b6aed5f
--- /dev/null
+++ b/src/pages/Messages.js
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+
+const Messages = () => {
+    const { user } = useContext(AuthContext);
+
+    return (
+        <>
+            {!user ? (
+                <h1>you got a DM from Barak Obamna</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                    you got a DM from Barak Obamna
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default Messages;
\ No newline at end of file
diff --git a/src/pages/RecruitVolunteers.js b/src/pages/RecruitVolunteers.js
new file mode 100644
index 0000000..c637656
--- /dev/null
+++ b/src/pages/RecruitVolunteers.js
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+
+const RecruitVolunteers = () => {
+    const { user } = useContext(AuthContext);
+
+    return (
+        <>
+            {!user ? (
+                <h1>uncle sam want u</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                    uncle sam want u
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default RecruitVolunteers;
\ No newline at end of file