Iteration-5 Team-3 Completed criteria

src/app/Components/alerts/alert.tsx

@@ -1,34 +1,30 @@
-import React, { useState, useEffect } from 'react';
-
-interface StickyAlertProps {
-  message: string; // Explicitly declare the type of message as string
-}
-
-const StickyAlert: React.FC<StickyAlertProps> = ({ message }) => {
-  const [showAlert, setShowAlert] = useState(true);
+import { useState, useEffect } from "react";
+import Alert from "react-bootstrap/Alert";
 
+function AlertDismissible() {
+  const [show, setShow] = useState(true);
+  const [message, setMessage] = useState("");
   useEffect(() => {
-    const hideAlert = localStorage.getItem("hideAlert");
-    if (hideAlert === "true") {
-      setShowAlert(false);
-    } else {
-      const timeout = setTimeout(() => {
-        setShowAlert(false);
-        localStorage.setItem("hideAlert", "true");
-      }, 7 * 24 * 60 * 60 * 1000);
-
-      return () => clearTimeout(timeout);
-    }
+    const fetchAlert = async () => {
+      try {
+        const response = await fetch("/api/alert");
+        const data = await response.json();
+        const alert_text = data.rows[0].alert_text;
+        console.log(alert_text);
+        setMessage(alert_text);
+      } catch (error) {
+        console.error("Error fetching alert:", error);
+      }
+    };
+    fetchAlert();
   }, []);
 
-  return (
-    showAlert && (
-      <div className="sticky-alert">
-        <p>{message}</p>
-        <button onClick={() => setShowAlert(false)}>Dismiss</button>
-      </div>
-    )
-  );
-};
-
-export default StickyAlert;
+  if (show) {
+    return (
+      <Alert variant="info" onClose={() => setShow(false)} dismissible>
+        <Alert.Heading>{message}</Alert.Heading>
+      </Alert>
+    );
+  }
+}
+export default AlertDismissible;

src/app/api/alert/route.ts

@@ -0,0 +1,16 @@
+import { sql } from "@vercel/postgres";
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  const alert = await request.json();
+  const alert_text = alert.alert;
+  const result =
+    await sql`INSERT INTO alerts (alert_text,alert_time) VALUES (${alert_text},now())`;
+  return NextResponse.json(result);
+}
+
+export async function GET() {
+  const response =
+    await sql`SELECT * FROM alerts ORDER BY alert_time DESC LIMIT 1`;
+  return NextResponse.json(response);
+}

src/app/organiserlogin/page.tsx

@@ -10,20 +10,21 @@ const OrganiserMatchSchedule = () => {
   const [todayMatches, setTodayMatches] = useState([]);
   const [pastMatches, setPastMatches] = useState([]);
   const [futureMatches, setFutureMatches] = useState([]);
+  const [alert, setAlert] = useState("");
   const [todayDate, setTodayDate] = useState(
     new Date().toISOString().substring(0, 10)
   );
-  const [alertText, setAlertText] = useState(""); // State to hold alert text
-
   const handleAddMatchClick = () => {
     setShowAddMatch(true);
   };
 
-  const handleAddAlert = () => {
-    // Encode the message to handle special characters properly
-    const encodedMessage = encodeURIComponent(alertText);
-    // Navigate to the "/alert" page with the message as a query parameter
-    window.location.href = `/components/alert?message=${encodedMessage}`;
+  const handleAddAlert = (e: any) => {
+    fetch("/api/alert", {
+      method: "POST",
+      body: JSON.stringify({
+        alert: alert,
+      }),
+    });
   };
 
   useEffect(() => {
@@ -55,16 +56,12 @@ const OrganiserMatchSchedule = () => {
     <div>
       <center>
         <br />
-
-        {/* Input field for entering alert text */}
+        <h1>Organiser Dashboard</h1>
         <input
           type="text"
-          value={alertText}
-          onChange={(e) => setAlertText(e.target.value)}
-          placeholder="Enter Alert Text"
+          placeholder="Enter Alert"
+          onChange={(e) => setAlert(e.target.value)}
         />
-
-        {/* Button to add alert and navigate */}
         <Button variant="primary" onClick={handleAddAlert}>
           Add Alert
         </Button>

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import StickyAlert from "./Components/alerts/alert";
+import AlertDismisible from "@/app/Components/alerts/alert";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -48,7 +48,7 @@ export default function Page() {
 
   return (
     <div>
-      <StickyAlert message="Pickup game this Sunday at 3pm at SLU Intramural field" />
+      <AlertDismisible />
 
       <center>
         <h1>Flagrant Fowl Futbol Association</h1>