devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Profile is now auto filled with the user data

Browse Source
This commit is contained in:
Joao Ramos
2023-12-27 22:33:11 +00:00
parent 8831729470
commit c88757c869
1 changed files with 276 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/profile.tsx
View File

@@ -50,27 +50,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
export default function Home() {
const [bio, setBio] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
interface Props {
user: User;
mutateUser: Function,
}
function UserProfile({
user,
mutateUser,
}: Props) {
const [bio, setBio] = useState(user.bio || '');
const [name, setName] = useState(user.name || '');
const [email, setEmail] = useState(user.email || '');
const [password, setPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [profilePicture, setProfilePicture] = useState("");
const [profilePicture, setProfilePicture] = useState(user.profilePicture);
const [country, setCountry] = useState<string>();
const [phone, setPhone] = useState<string>();
const [gender, setGender] = useState<Gender>();
const [employment, setEmployment] = useState<EmploymentStatus>();
const [position, setPosition] = useState<string>();
const [companyName, setCompanyName] = useState<string>("");
const [commercialRegistration, setCommercialRegistration] = useState<string>("");
const [country, setCountry] = useState<string>(user.demographicInformation?.country || '');
const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || '');
const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
const [employment, setEmployment] = useState<EmploymentStatus | undefined>(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
const [companyName, setCompanyName] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.companyName : undefined);
const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.commercialRegistration : undefined);
const profilePictureInput = useRef(null);
const {user, mutateUser} = useUser({redirectTo: "/login"});
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
const today = moment(new Date());
@@ -80,24 +85,6 @@ export default function Home() {
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
};
useEffect(() => {
if (user) {
setName(user.name);
setEmail(user.email);
setBio(user.bio);
setProfilePicture(user.profilePicture);
setCountry(user.demographicInformation?.country);
setPhone(user.demographicInformation?.phone);
setGender(user.demographicInformation?.gender);
setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
if(user.type === 'agent') {
setCompanyName(user.agentInformation?.companyName)
setCommercialRegistration(user.agentInformation?.commercialRegistration)
}
}
}, [user]);
const convertBase64 = (file: File) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
@@ -160,18 +147,6 @@ export default function Home() {
};
return (
<>
<Head>
<title>Profile | EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && (
<Layout user={user}>
<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
@@ -416,7 +391,28 @@ export default function Home() {
</div>
</section>
</Layout>
)}
</>
);
}
export default function Home() {
const {user, mutateUser } = useUser({redirectTo: "/login"});
return (
<>
<Head>
<title>Profile | EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && <UserProfile user={user} mutateUser={mutateUser} /> }
</>
);
}