-
+
+
{selectedFile && (
- 
+
)}
);
};
-export default InsertImage;
\ No newline at end of file
+export default InsertImage;
diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx
index ee1e2fc..bc2f15c 100644
--- a/client/src/components/NavigationBar.tsx
+++ b/client/src/components/NavigationBar.tsx
@@ -19,6 +19,7 @@ import { retrieveUserInformation } from "../security/users";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import EcoconnectFullLogo from "./EcoconnectFullLogo";
+import EcoconnectSearch from "./EcoconnectSearch";
export default function NavigationBar() {
const [userProfileImageURL, setUserProfileImageURL] = useState("");
@@ -58,7 +59,7 @@ export default function NavigationBar() {
}
>
-
+
{userInformation && (
-
-
-
-
-
-
-
-
- ) => {
+ const { value } = e.target;
+ field.onChange(e);
+ if (setFieldValue) {
+ setFieldValue(props.name, value);
+ }
+ };
+
return (
) : null
}
+ readOnly={readOnly}
+ onChange={handleChange}
/>
);
};
diff --git a/client/src/components/SignInModule.tsx b/client/src/components/SignInModule.tsx
index ecc7bb1..3d810bc 100644
--- a/client/src/components/SignInModule.tsx
+++ b/client/src/components/SignInModule.tsx
@@ -1,7 +1,6 @@
import { Button, Link } from "@nextui-org/react";
import { Formik, Form } from "formik";
import * as Yup from "yup";
-import axios from "axios";
import config from "../config";
import NextUIFormikInput from "./NextUIFormikInput";
import { useNavigate } from "react-router-dom";
@@ -74,13 +73,24 @@ export default function SignInModule() {
placeholder="johndoe@email.com"
labelPlacement="outside"
/>
-
+ );
+}
diff --git a/client/src/icons.tsx b/client/src/icons.tsx
index f40819b..0b6d7cf 100644
--- a/client/src/icons.tsx
+++ b/client/src/icons.tsx
@@ -520,3 +520,22 @@ export const LifebuoyIcon = () => {
);
};
+
+export const ArrowTopRightOnSquare = () => {
+ return (
+
+ );
+};
diff --git a/client/src/layouts/default.tsx b/client/src/layouts/default.tsx
index fd9cdc9..4087eb4 100644
--- a/client/src/layouts/default.tsx
+++ b/client/src/layouts/default.tsx
@@ -2,14 +2,18 @@ import { Toaster } from "react-hot-toast";
import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip";
import NavigationBar from "../components/NavigationBar";
import { Outlet } from "react-router-dom";
+import SiteFooter from "../components/SiteFooter";
export default function DefaultLayout() {
return (
-
-
)}
{!userInformation && doneLoading && (
diff --git a/client/src/components/NextUIFormikInput.tsx b/client/src/components/NextUIFormikInput.tsx
index 97bd714..8c5cd33 100644
--- a/client/src/components/NextUIFormikInput.tsx
+++ b/client/src/components/NextUIFormikInput.tsx
@@ -10,16 +10,28 @@ interface NextUIFormikInputProps {
placeholder: string;
labelPlacement?: "inside" | "outside";
startContent?: JSX.Element;
+ readOnly?: boolean;
+ setFieldValue?: (field: string, value: any, shouldValidate?: boolean) => void;
}
const NextUIFormikInput = ({
label,
startContent,
+ readOnly = false,
+ setFieldValue,
...props
}: NextUIFormikInputProps) => {
const [field, meta] = useField(props.name);
const [inputType, setInputType] = useState(props.type);
+ const handleChange = (e: React.ChangeEventSigned in as
-- {userInformation.firstName}{" "} - {userInformation.lastName} -
-{userInformation.email}
+
+
+
+
+
+
+
+
+
-
+
+
+
-
+
Signed in as
++ {userInformation.firstName}{" "} + {userInformation.lastName} +
++ {userInformation.email} +
+
+
-
-
+
+ (null);
+ const [communityList, setCommunityList] = useState([]);
+ const [search, setSearch] = useState(""); // Search Function
+ const [userInformation, setUserInformation] = useState>({});
+
let accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
return (
setTimeout(() => {
navigate("/signin");
- }, 1000)
+ }, 1000)
&&
+
+
+
+
+
+ );
+}
diff --git a/client/src/pages/CommunityPage.tsx b/client/src/pages/CommunityPage.tsx
index fffe686..f700dc1 100644
--- a/client/src/pages/CommunityPage.tsx
+++ b/client/src/pages/CommunityPage.tsx
@@ -16,6 +16,7 @@ import {
ModalFooter,
useDisclosure,
Spinner,
+ User,
} from "@nextui-org/react";
import config from "../config";
import instance from "../security/http";
@@ -28,7 +29,8 @@ import {
XMarkIcon,
} from "../icons";
import { useNavigate } from "react-router-dom";
-// import { retrieveUserInformation } from "../security/users";
+import { retrieveUserInformationById } from "../security/usersbyid";
+import { number } from "yup";
// import UserPostImage from "../components/UserPostImage";
interface Post {
@@ -37,17 +39,29 @@ interface Post {
content: string;
tags: string;
id: number;
+ userId: number;
}
+type User = {
+ id: number;
+ firstName: string;
+ lastName: string;
+};
+
export default function CommunityPage() {
const navigate = useNavigate();
-
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const [selectedPost, setSelectedPost] = useState
+
+
+
+
+
+
+
+
+
+
+ ·
++ © Copyright {new Date().getFullYear()}. All rights reserved. +
+
@@ -59,29 +73,40 @@ export default function CommunityPage() {
);
}
- const { isOpen, onOpen, onOpenChange } = useDisclosure();
- const [selectedPost, setSelectedPost] = useState(null);
-
- // const [userInformation, setUserInformation] = useState(null);
-
- // communityList is a state variable
- // function setCommunityList is the setter function for the state variable
- // e initial value of the state variable is an empty array []
- // After getting the api response, call setCommunityList() to set the value of CommunityList
- const [communityList, setCommunityList] = useState([]);
-
- // Search Function
- const [search, setSearch] = useState("");
- const onSearchChange = (e: { target: { value: SetStateAction } }) => {
- setSearch(e.target.value);
- };
-
const getPosts = () => {
instance.get(config.serverAddress + "/post").then((res) => {
setCommunityList(res.data);
});
};
+ useEffect(() => {
+ getPosts();
+ }, []);
+
+ useEffect(() => {
+ const fetchUserInformation = async (userId: number) => {
+ try {
+ const user = await retrieveUserInformationById(userId);
+ setUserInformation((prevMap) => ({
+ ...prevMap,
+ [userId]: user,
+ }));
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ communityList.forEach((post) => {
+ if (!userInformation[post.userId]) {
+ fetchUserInformation(post.userId);
+ }
+ });
+ }, [communityList]);
+
+ const onSearchChange = (e: { target: { value: SetStateAction } }) => {
+ setSearch(e.target.value);
+ };
+
const searchPosts = () => {
instance
.get(config.serverAddress + `/post?search=${search}`)
@@ -90,10 +115,6 @@ export default function CommunityPage() {
});
};
- useEffect(() => {
- getPosts();
- }, []);
-
const onSearchKeyDown = (e: { key: string }) => {
if (e.key === "Enter") {
searchPosts();
@@ -108,13 +129,6 @@ export default function CommunityPage() {
getPosts();
};
- useEffect(() => {
- instance.get(config.serverAddress + "/post").then((res) => {
- console.log(res.data);
- setCommunityList(res.data);
- });
- }, []);
-
const handleDeleteClick = (post: Post) => {
setSelectedPost(post);
onOpen();
@@ -168,7 +182,7 @@ export default function CommunityPage() {
@@ -185,6 +199,7 @@ export default function CommunityPage() {
{
navigate(`edit/${post.id}`);
}}
@@ -193,6 +208,7 @@ export default function CommunityPage() {
handleDeleteClick(post)}
diff --git a/client/src/pages/CreatePostPage.tsx b/client/src/pages/CreatePostPage.tsx
index b23593c..4d7a97e 100644
--- a/client/src/pages/CreatePostPage.tsx
+++ b/client/src/pages/CreatePostPage.tsx
@@ -7,6 +7,8 @@ import NextUIFormikInput from "../components/NextUIFormikInput";
import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
import config from "../config";
import { ArrowUTurnLeftIcon } from "../icons";
+import { useEffect, useState } from "react";
+import { retrieveUserInformation } from "../security/users";
const validationSchema = Yup.object({
title: Yup.string()
@@ -31,6 +33,7 @@ const validationSchema = Yup.object({
function CreatePostPage() {
const navigate = useNavigate();
+ const [userId, setUserId] = useState(null);
const initialValues = {
title: "",
@@ -38,12 +41,28 @@ function CreatePostPage() {
tags: "",
};
+ useEffect(() => {
+ const getUserInformation = async () => {
+ try {
+ const user = await retrieveUserInformation(); // Get the user ID
+ setUserId(user.id); // Set the user ID in the state
+ } catch (error) {
+ console.error(error);
+ }
+ };
+ getUserInformation();
+ }, []);
+
const handleSubmit = async (
values: any,
{ setSubmitting, resetForm, setFieldError }: any
) => {
try {
- const response = await axios.post(config.serverAddress + "/post", values); // Assuming an API route
+ const postData = {
+ ...values,
+ userId: userId
+ }
+ const response = await axios.post(config.serverAddress + "/post", postData); // Assuming an API route
if (response.status === 200) {
console.log("Post created successfully:", response.data);
resetForm(); // Clear form after successful submit
diff --git a/client/src/pages/ForgotPasswordPage.tsx b/client/src/pages/ForgotPasswordPage.tsx
new file mode 100644
index 0000000..ed816c3
--- /dev/null
+++ b/client/src/pages/ForgotPasswordPage.tsx
@@ -0,0 +1,109 @@
+import { Button } from "@nextui-org/react";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import config from "../config";
+import NextUIFormikInput from "../components/NextUIFormikInput";
+import { popErrorToast, popToast } from "../utilities";
+import { ArrowUTurnLeftIcon } from "../icons";
+import { useNavigate } from "react-router-dom";
+import instance from "../security/http";
+
+const validationSchema = Yup.object({
+ email: Yup.string()
+ .trim()
+ .lowercase()
+ .min(5)
+ .max(69)
+ .email("Invalid email format")
+ .required("Email is required"),
+});
+
+export default function ForgotPasswordPage() {
+ const navigate = useNavigate();
+ const initialValues = {
+ email: "",
+ };
+
+ const handleSubmit = (values: any): void => {
+ instance
+ .put(
+ `${
+ config.serverAddress
+ }/users/request-reset-password/${encodeURIComponent(values.email)}`
+ )
+ .then(() => {
+ console.log("Email sent successfully");
+ popToast("Email sent to your mailbox!", 1);
+ setTimeout(() => {
+ navigate("/signin");
+ }, 1500);
+ })
+ .catch((error) => {
+ console.error("Failed to send email:", error);
+ popErrorToast("Failed to send email: " + error);
+ });
+ };
+
+ return (
+
{post.title}
-Adam
+{userInformation[post.userId]?.firstName} {userInformation[post.userId]?.lastName}
+
+ );
+}
diff --git a/client/src/pages/HBContestPage.tsx b/client/src/pages/HBContestPage.tsx
index b62ce9b..cc97f09 100644
--- a/client/src/pages/HBContestPage.tsx
+++ b/client/src/pages/HBContestPage.tsx
@@ -1,64 +1,65 @@
-import {
- Card,
- CardHeader,
- CardBody,
- CardFooter,
- Divider,
- Button,
-} from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
import { useNavigate } from "react-router-dom";
export default function HBContestPage() {
const navigate = useNavigate();
+ const handleJoinClick = () => {
+ let accessToken = localStorage.getItem("accessToken");
+ if (!accessToken) {
+ setTimeout(() => {
+ navigate("/signin");
+ }, 1000);
+ } else {
+ navigate("new-submission");
+ }
+ };
+
return (
-
+
+
+
+ 
+
+
+
+
+
+
+ {({ isValid, dirty }) => (
+
+ )}
+
+
+
+
+
+
+ Password Recovery
++ Enter your email address below, and we will send you a recovery + mail. +
+
-
-
-
-
-
-
-
- Home Bill Contest
-+
+
+
);
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/HBFormPage.tsx b/client/src/pages/HBFormPage.tsx
index 841d8a1..96ba4a5 100644
--- a/client/src/pages/HBFormPage.tsx
+++ b/client/src/pages/HBFormPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
import { Button } from "@nextui-org/react";
import { ArrowUTurnLeftIcon } from "../icons";
import { useNavigate } from "react-router-dom";
@@ -8,29 +9,25 @@ import NextUIFormikInput from "../components/NextUIFormikInput";
import axios from "axios";
import InsertImage from "../components/InsertImage";
import { retrieveUserInformation } from "../security/users";
-import { useEffect, useState } from "react";
const validationSchema = Yup.object({
electricalBill: Yup.number()
.typeError("Must be a number")
.positive("Must be a positive value")
.max(99999.99, "Value is too large")
- .required(),
+ .required("Electrical bill is a required field"),
waterBill: Yup.number()
.typeError("Must be a number")
.positive("Must be a positive value")
.max(99999.99, "Value is too large")
- .required(),
- totalBill: Yup.number()
- .typeError("Must be a number")
- .positive("Must be a positive value")
- .max(99999.99, "Value is too large")
- .required(),
+ .required("Water bill is a required field"),
noOfDependents: Yup.number()
.typeError("Must be a number")
.integer("Must be a whole number")
.positive("Must be a positive value")
- .required(),
+ .required("No. of dependents is a required field"),
+ ebPicture: Yup.mixed().required("Electrical bill picture is required"),
+ wbPicture: Yup.mixed().required("Water bill picture is required"),
});
export default function HBFormPage() {
@@ -41,11 +38,18 @@ export default function HBFormPage() {
waterBill: "",
totalBill: "",
noOfDependents: "",
+ avgBill: "",
ebPicture: null,
wbPicture: null,
userId: "",
});
+ // Add state for image selection
+ const [imagesSelected, setImagesSelected] = useState({
+ ebPicture: false,
+ wbPicture: false,
+ });
+
useEffect(() => {
const getUserInformation = async () => {
try {
@@ -78,6 +82,7 @@ export default function HBFormPage() {
formData.append("waterBill", values.waterBill);
formData.append("totalBill", values.totalBill);
formData.append("noOfDependents", values.noOfDependents);
+ formData.append("avgBill", values.avgBill);
if (values.ebPicture) {
formData.append("ebPicture", values.ebPicture);
@@ -124,78 +129,117 @@ export default function HBFormPage() {
}
};
+ // Handler for image selection
+ const handleImageSelection = (name: string, file: File | null) => {
+ setImagesSelected(prevState => ({
+ ...prevState,
+ [name]: !!file,
+ }));
+ };
+
return (
+
+
+ + Home Bill Contest +
+
+
-
-
+
+ This contest is to encourage residents to reduce the use of electricity and water usage. This contest would be won by the person with the lowest overall bill average. Join us in this - important effort to create a more sustainable future for everyone. - Participants would be required to input and upload their bills - into the form to ensure integrity and honesty.{" "} + important effort to create a more sustainable future for everyone.{" "} + + Participants would be required to input and upload their bills into the form to ensure integrity and honesty.{" "} +
- -
-
-
-
- Winners
-- There will 3 winners for each month. Each winner will receive - random food vouchers. -
-1st: 3 vouchers
-2nd: 2 vouchers
-3rd: 1 voucher
-
-
-
-
+
+ + Winners +
+
+
+ + There will 3 winners for each month. Each winner will receive + random food vouchers. +
+1st → 3 vouchers
+2nd → 2 vouchers
+3rd → 1 voucher
+
+
+
+
-
+
-
+
- {({ isValid, dirty, isSubmitting, setFieldValue }) => (
-