Added demographic information to the user
This commit is contained in:
Tiago Ribeiro
@@ -22,6 +22,10 @@ import {useRouter} from "next/router";
|
||||
import Link from "next/link";
|
||||
import axios from "axios";
|
||||
import {ErrorMessage} from "@/constants/errors";
|
||||
import {RadioGroup} from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import {EmploymentStatus, EMPLOYMENT_STATUS, Gender} from "@/interfaces/user";
|
||||
import countryCodes from "country-codes-list";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
const user = req.session.user;
|
||||
@@ -51,10 +55,15 @@ export default function Home() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [profilePicture, setProfilePicture] = useState("");
|
||||
|
||||
const [country, setCountry] = useState<string>();
|
||||
const [phone, setPhone] = useState<string>();
|
||||
const [gender, setGender] = useState<Gender>();
|
||||
const [employment, setEmployment] = useState<EmploymentStatus>();
|
||||
|
||||
const profilePictureInput = useRef(null);
|
||||
const router = useRouter();
|
||||
|
||||
const {user} = useUser({redirectTo: "/login"});
|
||||
const {user, mutateUser} = useUser({redirectTo: "/login"});
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
@@ -62,6 +71,10 @@ export default function Home() {
|
||||
setEmail(user.email);
|
||||
setBio(user.bio);
|
||||
setProfilePicture(user.profilePicture);
|
||||
setCountry(user.demographicInformation?.country);
|
||||
setPhone(user.demographicInformation?.phone);
|
||||
setGender(user.demographicInformation?.gender);
|
||||
setEmployment(user.demographicInformation?.employment);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
@@ -100,10 +113,23 @@ export default function Home() {
|
||||
return;
|
||||
}
|
||||
|
||||
const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword, profilePicture});
|
||||
const request = await axios.post("/api/users/update", {
|
||||
bio,
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
newPassword,
|
||||
profilePicture,
|
||||
demographicInformation: {
|
||||
phone,
|
||||
country,
|
||||
employment,
|
||||
gender,
|
||||
},
|
||||
});
|
||||
if (request.status === 200) {
|
||||
toast.success("Your profile has been updated!");
|
||||
setTimeout(() => router.reload(), 800);
|
||||
mutateUser();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -130,39 +156,147 @@ export default function Home() {
|
||||
<div className="flex flex-col gap-8 w-2/3">
|
||||
<h1 className="text-4xl font-bold mb-6">Edit Profile</h1>
|
||||
<form className="flex flex-col items-center gap-6 w-full">
|
||||
<Input
|
||||
label="Name"
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={(e) => setName(e)}
|
||||
placeholder="Enter your name"
|
||||
defaultValue={name}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="E-mail Address"
|
||||
type="email"
|
||||
name="email"
|
||||
onChange={(e) => setEmail(e)}
|
||||
placeholder="Enter email address"
|
||||
defaultValue={email}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Old Password"
|
||||
type="password"
|
||||
name="password"
|
||||
onChange={(e) => setPassword(e)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="New Password"
|
||||
type="password"
|
||||
name="newPassword"
|
||||
onChange={(e) => setNewPassword(e)}
|
||||
placeholder="Enter your new password (optional)"
|
||||
/>
|
||||
<div className="flex flex-row gap-8 w-full">
|
||||
<Input
|
||||
label="Name"
|
||||
type="text"
|
||||
name="name"
|
||||
onChange={(e) => setName(e)}
|
||||
placeholder="Enter your name"
|
||||
defaultValue={name}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="E-mail Address"
|
||||
type="email"
|
||||
name="email"
|
||||
onChange={(e) => setEmail(e)}
|
||||
placeholder="Enter email address"
|
||||
defaultValue={email}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row gap-8 w-full">
|
||||
<Input
|
||||
label="Old Password"
|
||||
type="password"
|
||||
name="password"
|
||||
onChange={(e) => setPassword(e)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="New Password"
|
||||
type="password"
|
||||
name="newPassword"
|
||||
onChange={(e) => setNewPassword(e)}
|
||||
placeholder="Enter your new password (optional)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-8 w-full">
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
|
||||
<select
|
||||
name="country"
|
||||
className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
||||
onChange={(e) => {
|
||||
setCountry(e.target.value);
|
||||
}}
|
||||
defaultValue={country}>
|
||||
<option value={undefined} disabled selected>
|
||||
Select a country
|
||||
</option>
|
||||
{countryCodes.all().map((x) => (
|
||||
<option key={x.countryCode} value={x.countryCode}>
|
||||
{x.flag} {x.countryNameLocal}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<Input
|
||||
type="tel"
|
||||
name="phone"
|
||||
label="Phone number"
|
||||
onChange={(e) => setPhone(e)}
|
||||
placeholder="Enter phone number"
|
||||
defaultValue={phone}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row gap-8 w-full">
|
||||
<div className="relative flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
|
||||
<RadioGroup
|
||||
value={employment}
|
||||
onChange={setEmployment}
|
||||
className="grid grid-cols-2 items-center gap-4 place-items-center">
|
||||
{EMPLOYMENT_STATUS.map(({status, label}) => (
|
||||
<RadioGroup.Option value={status} key={status}>
|
||||
{({checked}) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-mti-purple-light border-mti-purple-dark text-white",
|
||||
)}>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="relative flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
|
||||
<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
|
||||
<RadioGroup.Option value="male">
|
||||
{({checked}) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-mti-purple-light border-mti-purple-dark text-white",
|
||||
)}>
|
||||
Male
|
||||
</span>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option value="female">
|
||||
{({checked}) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-mti-purple-light border-mti-purple-dark text-white",
|
||||
)}>
|
||||
Female
|
||||
</span>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option value="other">
|
||||
{({checked}) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-mti-purple-light border-mti-purple-dark text-white",
|
||||
)}>
|
||||
Other
|
||||
</span>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 items-center w-48">
|
||||
|
||||
Reference in New Issue
Block a user