diff --git a/src/App.css b/src/App.css index 3da01cd..54252c8 100644 --- a/src/App.css +++ b/src/App.css @@ -55,7 +55,7 @@ body { } .mantine-TextInput-input:focus, .mantine-DateInput-input:focus, .mantine-Textarea-input:focus { - outline: 2px solid var(--highlight-color); + outline: 2px solid var(--text-color); } .mantine-Checkbox-icon { diff --git a/src/pages/Profile/PartnerClass.tsx b/src/pages/Profile/PartnerClass.tsx new file mode 100644 index 0000000..09c512b --- /dev/null +++ b/src/pages/Profile/PartnerClass.tsx @@ -0,0 +1,20 @@ +import User from "./UserClass"; + +class Partner extends User { + type: string; + numOrdersTotal: number; + location: string; + address: string; + deliveryInstructions: string; + + constructor(firstName="NA", lastName="NA", type="NA", phoneNumber="NA", email="NA", numOrdersTotal=0, location="NA", address="NA", deliveryInstructions="NA") { + super(firstName, lastName, phoneNumber, email); + this.type=type; + this.numOrdersTotal=numOrdersTotal; + this.location=location; + this.address=address; + this.deliveryInstructions=deliveryInstructions; + } +} + +export default Partner; \ No newline at end of file diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx index 574e287..2259fa9 100644 --- a/src/pages/Profile/Profile.tsx +++ b/src/pages/Profile/Profile.tsx @@ -12,33 +12,144 @@ import { } from "@mantine/core"; import { useAuth } from "../../AuthContext"; import { IconPencil } from "@tabler/icons-react"; - -type User = { - displayName: string | null; - email: string | null; - phoneNumber: string | null; -}; +import Staff from "./StaffClass"; +import Partner from "./PartnerClass"; +import User from "./UserClass"; const Profile: React.FC = () => { - const { logout, getUser, isStaff } = useAuth(); + const { mongoId, currentUser, logout, getUser, isStaff } = useAuth(); const navigate = useNavigate(); const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); - const currentUser = getUser(); + const [editing, setEditing] = useState(false); + const [email, setEmail] = useState(""); + const [phoneNumber, setPhoneNumber] = useState(""); + const [address, setAddress] = useState(""); + const [deliveryInstructions, setDeliveryInstructions] = useState< + string | undefined + >(""); useEffect(() => { - if (currentUser) { - setUser(currentUser); + const getUsers = async () => { + const token = await currentUser?.getIdToken(); + console.log(isStaff); + if (isStaff) { + let resStaff = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/staff?id=${mongoId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + } + ); + let dataStaff = await resStaff.json(); + console.log(dataStaff); + console.log("staff"); + let newUser = new Staff( + dataStaff.firstName, + dataStaff.lastName, + dataStaff.phoneNumber, + dataStaff.email + ); + setUser(newUser); + setEmail(newUser.email); + setPhoneNumber(newUser.phoneNumber); + } else { + let resPartner = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/partner?id=${mongoId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + } + ); + let dataPartner = await resPartner.json(); + console.log(dataPartner); + let newUser = new Partner( + dataPartner.firstName, + dataPartner.lastName, + dataPartner.type, + dataPartner.phoneNumber, + dataPartner.email, + dataPartner.numOrdersTotal, + dataPartner.location, + dataPartner.address, + dataPartner.deliveryInstructions + ); + setUser(newUser); + setEmail(newUser.email); + setPhoneNumber(newUser.phoneNumber); + if (newUser instanceof Partner) { + setAddress(newUser.address); + setDeliveryInstructions(newUser.deliveryInstructions); + } + } + setIsLoading(false); - } - }, [currentUser]); + }; + + getUsers(); + }, []); const handleLogout = () => { void logout(); navigate("/login"); }; + const handleSave = async () => { + setEditing(false); + try { + const token = await currentUser?.getIdToken(); + if (isStaff) { + const staff = JSON.stringify({ + phoneNumber: phoneNumber, + email: email, + }); + + const response = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/staff?id=${mongoId}`, + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: staff, + } + ); + console.log(response); + } else { + const partner = JSON.stringify({ + id: mongoId, + phoneNumber: phoneNumber, + email: email, + deliveryInstructions: deliveryInstructions, + address: address + }) + const response = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/partner?id=${mongoId}`, + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: partner, + } + ); + console.log(response); + } + + } catch (error) { + console.log("ERROR " + error); + } + }; + /*

Profile

{isLoading ? ( @@ -72,16 +183,36 @@ const Profile: React.FC = () => { align="center" > Profile - + ) : ( + + )} + + + + { gap="md" justify="space-between" > - - - - - + + + Organization Name + + + {user instanceof Partner + ? user?.location + : "Nashville Diaper Connection"} + + + + + First Name + + {String(user?.firstName)} + + + + Last Name + + + {String(user?.lastName)} + + {editing ? ( + <> + + setEmail(e.target.value) + } + /> + + setPhoneNumber( + e.target.value + ) + } + /> + + ) : ( + <> + + + Email + + + {email} + + + + Phone Number + + + {phoneNumber} + + + )} @@ -180,16 +351,52 @@ const Profile: React.FC = () => { justify="space-between" flex="1" > - - + + Street Address + + {user instanceof Partner ? ( + editing ? ( + + setAddress( + e.target.value + ) + } + /> + ) : ( + {address} + ) + ) : ( + + Nashville Diaper Connection + )} - /> + + + + + Delivery Instructions + + {user instanceof Partner && + (editing ? ( + + setDeliveryInstructions( + e.target.value + ) + } + /> + ) : ( + + {deliveryInstructions} + + ))} + { > diff --git a/src/pages/Profile/StaffClass.tsx b/src/pages/Profile/StaffClass.tsx new file mode 100644 index 0000000..657968a --- /dev/null +++ b/src/pages/Profile/StaffClass.tsx @@ -0,0 +1,9 @@ +import User from "./UserClass"; + +class Staff extends User { + constructor(firstName="NA", lastName="NA", phoneNumber="NA", email="NA") { + super(firstName, lastName, phoneNumber, email); + } +} + +export default Staff; \ No newline at end of file diff --git a/src/pages/Profile/UserClass.tsx b/src/pages/Profile/UserClass.tsx new file mode 100644 index 0000000..e0c248c --- /dev/null +++ b/src/pages/Profile/UserClass.tsx @@ -0,0 +1,15 @@ +class User { + firstName: string; + lastName: string; + phoneNumber: string; + email: string; + + constructor(firstName="NA", lastName="NA", phoneNumber="NA", email="NA") { + this.firstName = firstName; + this.lastName = lastName; + this.phoneNumber = phoneNumber; + this.email = email; + } +} + +export default User; \ No newline at end of file