Donor page improvements #77

PantryNodeReact/src/pages/donor.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/Add';
 import { Button, Table, TableBody, TableHead, TableRow, TableContainer, Paper, TableCell, DialogTitle, TextField, DialogContent, Dialog, DialogActions } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
@@ -22,18 +24,41 @@ var Donor = () => {
 
   const [showModal, setShowModal] = useState<boolean>(false);
   const [data, setData] = useState<Entry[]>(initialData);
+  const [emailError, setEmailError] = useState("");
+  const [isEmailError, setIsEmailError] = useState(false);
   const [newEntry, setNewEntry] = useState<Entry>({ name: '', email: '', location: '' });
   const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: null });
 
   const handleAddEntry = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    console.log(data, "Forma data");
     setData([...data, newEntry]);
     setNewEntry({ name: '', email: '', location: '' });
     setShowModal(false);
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewEntry({ ...newEntry, [e.target.name]: e.target.value });
+    console.log(e.target.value, "test");
+  };
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewEntry({ ...newEntry, [e.target.name]: e.target.value });
+    console.log(e.target.value, "email");
+    let emailValue = e.target.value;
+
+    if (emailValue.trim() === "") {
+      setEmailError("Email is required");
+      setIsEmailError(true);
+      return;
+    }
+    if (!/\S+@\S+\.\S+/.test(emailValue)) {
+      setEmailError("Email is invalid");
+      setIsEmailError(true);
+      return;
+    }
+    setEmailError("");
+    setIsEmailError(false);
+
   };
 
   const onSort = (key: keyof Entry) => {
@@ -64,9 +89,21 @@ var Donor = () => {
 
   return <div>
 
-    <Button variant="contained" color="primary" onClick={() => setShowModal(true)}>
-      Add Entry
-    </Button>
+    <div style={{ width: '100%', display: 'flex' }}>
+      <div style={{ flex: '1', textAlign: 'left' }}>
+
+        <Typography variant="h6" align="left" sx={{ color: "#8c2332" }}>
+          <h2> Donor List</h2>
+        </Typography>
+      </div>
+
+      <div style={{ display: 'flex', flex: '1', textAlign: 'right', flexDirection: 'column', justifyContent: 'center' }}>
+        <Button variant="contained" color="primary" onClick={() => setShowModal(true)} sx={{ marginLeft: 'auto', paddingRight: 2 }} >
+          <AddIcon />Add Donor
+        </Button>
+      </div>
+    </div>
+
 
     <Dialog open={showModal} onClose={() => setShowModal(false)}>
       <DialogTitle>Add New Entry</DialogTitle>
@@ -86,7 +123,10 @@ var Donor = () => {
             label="Email"
             name="email"
             value={newEntry.email}
-            onChange={handleChange}
+            autoComplete="email"
+            onChange={handleEmailChange}
+            error={Boolean(emailError)}
+            helperText={emailError}
             fullWidth
           />
           <TextField
@@ -102,15 +142,15 @@ var Donor = () => {
             <Button onClick={() => setShowModal(false)} color="primary">
               Cancel
             </Button>
-            <Button type="submit" color="primary">
+            <Button type="submit" color="primary" disabled={isEmailError || newEntry.location == '' || newEntry.name == ''}>
               Add
             </Button>
           </DialogActions>
         </form>
       </DialogContent>
     </Dialog>
 
-    <TableContainer component={Paper} style={{ marginTop: '1rem' }}>
+    <TableContainer component={Paper} style={{ marginTop: '1rem', boxShadow: 'none' }}>
       <Table>
         <TableHead>
           <TableRow>
@@ -154,7 +194,7 @@ var Donor = () => {
         </TableBody>
       </Table>
     </TableContainer>
-  </div>;
+  </div >;
 };
 
 export default Donor;

PantryNodeReact/src/pages/login.tsx

@@ -13,18 +13,17 @@ import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 import Copyright from "../Components/Copyright";
-
 import { useAppDispatch, useAppSelector } from "../hooks";
 import { login } from "../redux-features/user";
 import CircularProgress from "@mui/material/CircularProgress";
-
 import { useState } from "react";
 import { useFormik } from "formik";
 
-type LoginFormInput = {
+interface LoginFormInput {
   email?: string;
   password?: string;
 };
+
 export default function Login() {
   const [remember, setRemember] = useState(false);
 

PantryNodeReact/src/pages/register.tsx

@@ -20,7 +20,7 @@ import { useState } from "react";
 import Success from "./success";
 import { useFormik } from "formik";
 
-type RegisterFormInput = {
+interface RegisterFormInput {
   firstName?: string;
   lastName?: string;
   phone?: string;

PantryNodeReact/src/pages/stock.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+// import { useAppSelector,useAppDispatch } from '../hooks'
+// import { login } from '../redux-features/user';
 
-//import { useAppSelector,useAppDispatch } from '../hooks'
-//import { login } from '../redux-features/user';
 
 const Stock = () => {
- 
+
   return (
     <div>
       stock

PantryNodeReact/src/redux-features/user.ts

@@ -1,20 +1,18 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-//import { PayloadAction } from '@reduxjs/toolkit'
+// import { PayloadAction } from '@reduxjs/toolkit'
 import axiosInstance from '../util/axiosInstance'
-
 //Docs: https://redux-toolkit.js.org/api/createAsyncThunk
 //Docs: https://redux-toolkit.js.org/introduction/getting-started
 // First, create the thunk
 export const login = createAsyncThunk(
     'user/login',
     async (payload: FormData, { fulfillWithValue, rejectWithValue }) =>
         axiosInstance.post("auth/login", payload)
-        .then((res: any) => fulfillWithValue(res))
-        .catch((err: any) => rejectWithValue(err))
+            .then((res: any) => fulfillWithValue(res))
+            .catch((err: any) => rejectWithValue(err))
 
 )
 
-
 const initialState = {
     name: "",
     email: "",