import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
// core components
import Header from "/components/Header/Header.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";
import { useAuth } from "/context/AuthContext";
import { useRouter, Router } from "next/router";
import { useState, useEffect } from "react";
import CustomInput from "/components/CustomInput/CustomInput.js";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
import { addNewPOI } from "/data/addnewpoi.js";
// Sections
import styles from "/styles/jss/nextjs-material-kit/pages/components.js";
import FeedbackMap from "../pages-sections/Feedback-Sections/FeedbackMap";
const useStyles = makeStyles(styles);
const useStyle = makeStyles((theme) => ({
// Other styles...
submitButton: {
// Your button styles
// Add hover effect
"&:hover": {
// Add your hover styles here
backgroundColor: "blue", // For example, change the background color on hover
color: "white", // Change text color on hover
},
},
}));
/**
* The function `handleSubmit` is used to handle form submission, validate input fields, construct a
* data object, add a new point of interest (POI) to the database, clear the form, and redirect to
* the main menu.
* @param event - The `event` parameter in the `handleSubmit` function is an event object that
* represents an event of submitting the new feedback form.
* @returns The `handleSubmit` function returns nothing explicitly. It either reaches a `return`
* statement if certain conditions are met (such as empty fields or invalid numbers), in which case
* the function stops execution at that point, or it continues to execute the code to add a new POI
* to the database, clear the form, and redirect to the main menu without an explicit return value.
*/
export const handleSubmit = async (event) => {
event.preventDefault();
// Check if any of the fields are empty
if (!Name || !X || !Y || !selectedPOI || !description) {
alert("Please fill in all fields");
return;
}
// Check if X and Y are valid numbers
if (isNaN(parseFloat(X)) || isNaN(parseFloat(Y))) {
// If X or Y is not a valid number, display an error message
alert("Longitude and Latitude must be valid numbers");
return;
}
// Construct the data object with the new values
const newData = {
Name,
POI: selectedPOI,
X: parseFloat(X), // Convert X to a number
Y: parseFloat(Y), // Convert Y to a number
description,
email: currentUser.email,
};
// Call the function to add the new POI to the database
await addNewPOI(selectedPOI, newData);
// Clear the form
setName("");
setX("");
setY("");
setSelectedPOI(null);
setDescription("");
// Redirect to the main menu
router.push("/mainmenu");
};
/**
* The `NewFeedbackPage` function is a React component that allows users to create new feedback by
* providing details such as name, type of point of interest, location coordinates, and description,
* with authentication and form validation included.
* @param props - In the `NewFeedbackPage` component, the `props` parameter is used to pass down
* properties from a parent component to this component.
* @returns The `NewFeedbackPage` component is being returned. It consists of JSX elements that make up
* the structure of the page for creating new feedback. The component includes a header, a parallax
* image, a form for submitting feedback, and a map component for selecting coordinates. The form
* submission is handled by the `handleSubmit` function, which validates input fields, constructs a
* data object, adds a new point
*/
export function NewFeedbackPage(props) {
const classes = useStyles();
const style = useStyle();
const { ...rest } = props;
const [Name, setName] = useState("");
const [X, setX] = useState("");
const [Y, setY] = useState("");
const [selectedPOI, setSelectedPOI] = useState();
const [description, setDescription] = useState("");
const [loading, setLoading] = useState(true);
const { currentUser } = useAuth();
const router = useRouter();
// Redirect if not logged in
useEffect(() => {
const checkAuth = async () => {
try {
if (currentUser === undefined) {
// User not logged in, redirect to login page
router.push("/login");
} else {
setLoading(false);
}
} catch (error) {
console.error("Error checking authentication:", error);
setLoading(false);
}
};
checkAuth();
}, [currentUser, Router]);
// Render nothing if not authenticated or still loading
if (currentUser === null || loading) {
console.log("Loading");
return <div></div>; // You can also render a loading spinner or message here
}
// Function to handle form submission
return (
<div>
<Header
brand="ThisIsNotFair"
rightLinks={<HeaderLinks />}
fixed
brandlink="/mainmenu"
color="transparent"
changeColorOnScroll={{
height: 400,
color: "white",
}}
{...rest}
/>
<Parallax image="/img/bg7.jpg">
<div className={classes.container}>
<GridContainer>
<GridItem>
<div className={classes.brand}>
<h1 className={classes.title}>New Feedback</h1>
<h3 className={classes.subtitle}>Create new Feedback</h3>
</div>
</GridItem>
</GridContainer>
</div>
</Parallax>
<div className={classNames(classes.main, classes.mainRaised)}>
<GridContainer>
<GridItem xs={4}>
<form onSubmit={handleSubmit} style={{ padding: "20px" }}>
<CustomInput
labelText="Name"
id="float"
formControlProps={{
fullWidth: true,
onChange: (e) => setName(e.target.value),
}}
/>
<FormControlLabel
control={
<Radio
checked={selectedPOI === "waterpoint"}
onChange={() => setSelectedPOI("waterpoint")}
value="a"
name="radio button enabled"
aria-label="A"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot,
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot,
}}
label="Water Point"
/>
<FormControlLabel
control={
<Radio
checked={selectedPOI === "foodpoint"}
onChange={() => setSelectedPOI("foodpoint")}
value="a"
name="radio button enabled"
aria-label="A"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot,
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot,
}}
label="Food Point"
/>
<FormControlLabel
control={
<Radio
checked={selectedPOI === "toiletpoint"}
onChange={() => setSelectedPOI("toiletpoint")}
value="a"
name="radio button enabled"
aria-label="A"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot,
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot,
}}
label="Toilet Point"
/>
<p
style={{
display: "flex",
alignItems: "center",
fontSize: "18px",
paddingTop: "10px",
}}
>
<span style={{ marginRight: "10px", fontWeight: "bold" }}>
Latitude:
</span>
{Y ? Y : "-"}
</p>
<p
style={{
display: "flex",
alignItems: "center",
fontSize: "18px",
}}
>
<span style={{ marginRight: "10px", fontWeight: "bold" }}>
Longitude:
</span>
{X ? X : "-"}
</p>
<CustomInput
labelText="Description"
id="float"
formControlProps={{
fullWidth: true,
onChange: (e) => setDescription(e.target.value),
}}
/>
<Button type="submit" className={style.submitButton}>
Submit
</Button>
</form>
</GridItem>
<GridItem xs={8}>
<FeedbackMap setX={setX} setY={setY} />
</GridItem>
</GridContainer>
</div>
</div>
);
}