Merge pull request #52 from erland-syafiq/philanthropy

Philanthropy page completed

site/app/api/db/dynamodb.js

@@ -8,6 +8,25 @@ AWS.config.update({
 
 const dynamoClient = new AWS.DynamoDB.DocumentClient();
 const TABLE_NAME = "vtmunc_applicants";
+const SITE_METADATA_TABLE_NAME = "site_metadata";
+
+export async function getSiteMetaData () {
+    const params = {
+        TableName: SITE_METADATA_TABLE_NAME
+    }
+
+    const res = await dynamoClient.scan(params).promise();
+    return res.Items;
+}
+
+export async function putSiteMetaData(data) {
+    const params = {
+        TableName: SITE_METADATA_TABLE_NAME,
+        Item: data
+    }
+
+    await dynamoClient.put(params).promise();
+}
 
 export async function getApplicants () {
     const params = {

site/app/api/philanthropy/route.js

@@ -0,0 +1,39 @@
+/**
+ * Endpoint: api/philanthropy
+ * 
+ * For philanthropy we are hardcoding 'id' to 1
+ */
+
+import { getCurrentDate } from "@/app/utils/util";
+import { getSiteMetaData, putSiteMetaData } from "../db/dynamodb";
+
+
+export async function GET() {
+    try {
+        const data = await getSiteMetaData();
+        return Response.json(data);
+    }
+    catch (e) {
+        console.log(e);
+        return new Response("Error with fetching meta data", {status: 500});
+    }
+}
+
+export async function POST(request) {
+    try {
+        const body = await request.json();
+        const philanthropy_data = {
+            fundsRaised: body["fundsRaised"],
+            // Consistent id 1 for this information
+            id: 1,
+            date: getCurrentDate()
+        }
+
+        await putSiteMetaData(philanthropy_data);
+        return Response.json(body);
+    }
+    catch (e) {
+        console.log(e);
+        return new Response("Error with inserting philanthropy funds raised", {status: 500});
+    }
+}

site/app/components/Navbar.jsx

@@ -28,6 +28,7 @@ function Navbar() {
                         <Link className="nav-link" href="/"> Home </Link>
                         <Link className="nav-link" href="/about"> About Us </Link>
                         <Link className="nav-link" href="/committees/temp">Committees </Link>
+                        <Link className="nav-link" href="/philanthropy">Philanthropy</Link>
                         {/* <Link className="nav-link" href="/resources">Resources </Link>
                         <Link className="nav-link" href="/sponsors"> Sponsors </Link> */}
                         <Link className="nav-link" href="/register"> Register </Link>

site/app/philanthropy/Philanthropy.css

@@ -0,0 +1,95 @@
+.philanthropyPage {
+    text-align: center;
+    background-color: #290014;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.philanthropyTitle {
+    margin-top: 40px;
+    margin-bottom: 40px;
+    color: #F2F1E8;        
+}
+
+.brp1Img {
+    height: 525px;
+    width: auto;
+    margin: 20px;
+    position: relative;
+    border: 30px solid #F2F1E8;
+}
+
+.philanthropyBlurb {
+    padding: 20px;
+    margin-left: 4em;
+    margin-right: 4em;
+}
+
+.philanthropyBlurb p {
+    color: #F2F1E8;
+    text-align: left;
+    padding: 20px;
+    margin: 15px;
+}
+
+.fundTracker {
+    margin: 20px;
+    justify-items: center;
+}
+
+.fundTracker p {
+    color: #F2F1E8;
+    padding: 20px;
+}
+
+.fundTracker h4 {
+    color: #F2F1E8;
+}
+
+.philanthropyA {
+    color: #DEBB8F;
+}
+
+.philanthropyA:hover {
+    color: #CF4420;
+}
+
+.pictureRow {
+    background-color:  #F2F1E8
+}
+
+.philanthropyRowImg {
+    height: 300px;
+    width: auto;
+    margin: 20px;
+    padding: 20px;
+    position: relative;
+}
+
+.progressBar {
+    width: 150px; 
+    background-color: #F2F1E8; 
+    border-radius: 10px; 
+    height: 400px; 
+    margin-bottom: 10px; 
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.progressFill {
+    width: 80%; 
+    background-color: #3A506B; 
+    border-radius: 5px; 
+    transition: height 0.3s ease; 
+}
+
+.amountInput {
+    width: 70px; 
+    padding: 8px; 
+    margin-bottom: 10px; 
+    border: 1px solid #ccc; 
+    border-radius: 4px;
+    background-color: #fff; 
+    color: #333; 
+}

site/app/philanthropy/page.jsx

@@ -0,0 +1,126 @@
+"use client"
+import React, {useState, useEffect} from 'react';
+import './Philanthropy.css';
+import { useAuth } from '../components/AuthProvider';
+
+export default function Philanthropy() {
+    const { isAuthenticated } = useAuth();
+
+    const [amountRaised, setAmountRaised] = useState(0);
+    const [amountRaisedChange, setAmountRaisedChange] = useState(0);
+
+    const goal = 2000;
+
+    // GET from philanthropy funds and setAmountRaised to the value
+    useEffect(() => {
+        const getData = async () => {
+            const res = await fetch("/api/philanthropy", {cache: "no-store"});
+            const site_metadata = await res.json();
+            if (site_metadata[0]) {
+                setAmountRaised(site_metadata[0].fundsRaised)
+            } else {
+                setAmountRaised(0);
+            }            
+        }
+        getData();
+    }, []);
+
+    const handleInputChange = (e) => {
+        // Check input so it is between 0 and 2000
+        const value = Math.max(0, Math.min(goal, parseInt(e.target.value, 10) || 0));
+        setAmountRaisedChange(value);
+    };
+
+    const handleInputSubmit = async () => {
+        const philanthropy_data = {fundsRaised: amountRaisedChange};
+        const URL = `/api/philanthropy`;
+        try {
+            const response = await fetch(URL, {
+                method: "POST",
+                mode: "cors",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(philanthropy_data)
+            });
+            setAmountRaised(amountRaisedChange);
+
+        } catch (error) {
+            console.error('There was an error submitting philanthropy funds raised:', error);
+        }
+    }
+
+    const percentageRaised = (amountRaised / goal) * 100;
+
+    return (
+    <main className="philanthropyPage">
+        <div className='row'>
+
+        </div>
+        <h1 className='philanthropyTitle'>
+            Blacksburg Refugee Partnership
+        </h1>
+
+        <div className='row'>
+            <div className='col-md-6'>
+                <img className="brp1Img" src={"/../Images/Philanthropy/brp1.jpg"} />
+            </div>
+
+            <div className='col-md-5 fundTracker'>
+                <div className="progressBar">
+                    <div 
+                        className="progressFill" 
+                        style={{ height: `${percentageRaised}%` }}
+                    ></div>
+                </div>
+
+                { isAuthenticated && (                
+                    <input 
+                        type="number" 
+                        value={amountRaisedChange} 
+                        onChange={handleInputChange} 
+                        min={0} 
+                        max={goal} 
+                        className="amountInput"
+                    /> 
+                )}
+                { isAuthenticated && ( 
+                    <button onClick={handleInputSubmit}>                    
+                        Submit
+                    </button>
+                )}
+
+                <h4>Total Raised: ${amountRaised}</h4>
+                <p>Our goal for this conference is to raise $2,000. This is approximately the cost to support one family for one month. We are committed to donating 100% of merch sales and 50% of delegation fees to BRP.</p>
+
+            </div>
+        </div>
+        <div className='row'>
+            <div className='philanthropyBlurb'>
+                <p>
+                    The Blacksburg Refugee Partnership (BRP) is a nonprofit organization dedicated to supporting refugees from Syria, Afghanistan, Burundi, and Somalia. Community volunteers work to provide displaced families with resources, education, and guidance to ultimately empower these individuals to rebuild their lives and become integrated into the New River Valley. 
+                    <br></br><br></br>We chose the BRP because their mission to empower humanity embodies the spirit of our conference. We believe that to “Reach for the Stars,” we must chase our dreams and encourage those around us to do the same despite adversities that may arise. BRP’s work allows the local community to engage in global humanitarian aid and provide families with social integration. Virginia Tech’s Secretariat team hopes to inspire delegates to apply creative solutions, not just during the conference, but in their own lives and in their own communities. Our desire is that delegates will reflect on and investigate ways in which they can implement positive, sustainable changes. The determination and resilience that we seek to encourage in our delegates is the same drive and dedication that the BRP has in assisting refugees at every step of their journey and equipping them with the tools for long-term success exemplifies.
+                    <br></br><br></br>For more information about the Blacksburg Refugee Partnership please visit their website:<br></br>
+                    <a className='philanthropyA' href="https://www.blacksburgrefugeepartnership.org" target="_blank">
+                        Blacksburg Refugee Partnership
+                    </a>
+                </p>
+            </div>
+
+        </div>
+
+        <div className='row pictureRow'>
+            <div className='col-md-4'>
+                <img className="philanthropyRowImg" src={"/../Images/Philanthropy/brp2.jpg"} />
+            </div>
+            <div className='col-md-4'>
+                <img className="philanthropyRowImg" src={"/../Images/Philanthropy/brp3.jpg"} />
+            </div>
+            <div className='col-md-4'>
+                <img className="philanthropyRowImg" src={"/../Images/Philanthropy/brp4.jpg"} />
+            </div>
+        </div>
+
+    </main>          
+    )
+}

site/middleware.js

@@ -19,5 +19,12 @@ export async function middleware(request) {
         }
     }
 
+    // Check if it is protected path '/philanthropy' for POST
+    if (pathname.toLowerCase() === '/api/philanthropy' && request.method == "POST") {
+        if (!await isUserAdmin(request)) {
+            return new Response("Unauthorized", {status: 401});
+        }
+    }
+
     return NextResponse.next();
 }