Skip to content

Commit 30bb0bb

Browse files
cryolinscryolins
committed
restyling & mock default fetching
1 parent 3195fd9 commit 30bb0bb

File tree

2 files changed

+75
-36
lines changed

2 files changed

+75
-36
lines changed

‎gs/frontend/aro/src/components/profile/profile-form/profile-form.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,13 @@
1616

1717
.form-field {
1818
width: 100%;
19-
padding: var(--spacing);
19+
padding-inline: calc(var(--spacing) * 2);
20+
padding-block: var(--spacing);
2021
border-radius: calc(var(--radius) - 2px);
21-
outline: 2px solid var(--color-gray-200);
22-
}
23-
.form-field:disabled {
24-
background-color: var(--color-gray-200);
25-
cursor: not-allowed;
22+
outline: 1px solid var(--color-gray-200);
2623
}
24+
/*
2725
.form-field:focus {
2826
background-color: var(--color-slate-100);
29-
}
27+
}
28+
*/

‎gs/frontend/aro/src/components/profile/profile-form/profile-form.tsx‎

Lines changed: 69 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,60 @@
1-
import { useRef, useState, type FormEventHandler } from "react";
1+
import { useEffect, useRef, useState, type FormEventHandler } from "react";
22
import "./profile-form.css"
33

4+
interface FormInputs {
5+
fname: string
6+
lname: string
7+
email: string
8+
phone: string
9+
callsign: string
10+
}
11+
const emptyInputs: FormInputs = {
12+
fname: "",
13+
lname: "",
14+
email: "",
15+
phone: "",
16+
callsign: ""
17+
}
18+
const mockInputsData: FormInputs = {
19+
fname: "first",
20+
lname: "last",
21+
email: "hi@hi.com",
22+
phone: "8880001234",
23+
callsign: "V0V0V0"
24+
}
25+
26+
427
export default function ProfileForm() {
5-
const [isEditing, setIsEditing] = useState(false); // state of form being editable or not
628
const [fileName, setFileName] = useState(""); // state of file name of file uploaded
29+
const [inputDefaults, setInputDefaults] = useState<FormInputs>(emptyInputs); // defaults for (form) input
730
const fileInputRef = useRef<HTMLInputElement>(null); // ref to more easily access file input element
831

32+
useEffect(() => {
33+
// fetch initial data on mount
34+
const initialDefaultData = fetchInitialData();
35+
setInputDefaults(initialDefaultData);
36+
}, []);
37+
38+
const fetchInitialData = () => {
39+
// TODO, fetch user data here
40+
return mockInputsData;
41+
}
42+
943
const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
1044
e.preventDefault();
11-
// TODO: handle submit, if we implement pfps
12-
console.log(e.currentTarget.callsign.value);
45+
// set defaults to new values
46+
const submitFormInputs: FormInputs = {
47+
fname: e.currentTarget.fname.value,
48+
lname: e.currentTarget.lname.value,
49+
email: e.currentTarget.email.value,
50+
phone: e.currentTarget.phone.value,
51+
callsign: e.currentTarget.callsign.value
52+
}
53+
console.log(submitFormInputs);
54+
// TODO: do something with the submitted data
55+
56+
57+
setInputDefaults(submitFormInputs);
1358
}
1459

1560
const handleUpload = () => {
@@ -31,11 +76,12 @@ export default function ProfileForm() {
3176
return;
3277
}
3378
console.log(`${file.name} can be uploaded! (success message)`);
79+
// TODO: do something with image if we decide to use pfps
3480
}
3581

3682
return (
37-
<div className="flex w-auto h-[calc(100vh-7rem)] max-h-full max-w-screen justify-center mt-24 mx-4 p-4 overflow-auto">
38-
<div className="flex flex-wrap items-center justify-evenly max-w-full max-h-full min-h-fit rounded-2xl bg-white gap-4 p-6">
83+
<div className="flex w-auto h-[calc(100vh-7rem)] max-h-full max-w-screen justify-center items-center-safe mt-24 mx-4 p-4 overflow-auto">
84+
<div className="flex flex-wrap items-center justify-evenly max-w-full h-fit rounded-2xl bg-white gap-4 p-6">
3985

4086
{/* profile picture left bar */}
4187
<div className="flex flex-col w-60 max-w-full items-center h-fit max-h-full gap-2">
@@ -46,7 +92,7 @@ export default function ProfileForm() {
4692
</div>
4793

4894
{/* pfp edit buttons */}
49-
<label htmlFor="pfp-upload" className="w-full max-w-full p-1 transition-colors hover:bg-gray-200 text-gray-900 border-black border rounded-lg text-center cursor-pointer shadow">
95+
<label htmlFor="pfp-upload" className="w-full max-w-full px-2 py-1 transition-colors hover:bg-gray-200 text-gray-900 border-black border rounded-lg text-center cursor-pointer shadow">
5096
Edit profile image
5197
</label>
5298
<input id="pfp-upload" type="file" hidden ref={fileInputRef} accept="image/*" onChange={(e) => setFileName(e.currentTarget.files?.item(0)?.name ?? "")}/>
@@ -60,7 +106,7 @@ export default function ProfileForm() {
60106

61107
{/* edit form right bar */}
62108
<form id="edit-form" onSubmit={handleSubmit} className="flex flex-col items-end w-xl h-fit p-1 gap-4 overflow-x-auto">
63-
<label className="w-full text-2xl font-medium text-black wrap-break-word">Edit Information</label>
109+
<label className="w-full text-2xl font-medium text-black wrap-break-word">Edit information</label>
64110

65111
{/* form text fields */}
66112
<div className="flex flex-col w-full h-auto gap-2">
@@ -69,56 +115,50 @@ export default function ProfileForm() {
69115
<div className="flex flex-wrap w-full gap-x-4 gap-y-2">
70116
<div className="field-label-container grow shrink">
71117
<label htmlFor="fname-field">First name</label>
72-
<input id="fname-field" name="firstname" placeholder="First name" disabled={!isEditing}
73-
className="form-field"/>
118+
<input id="fname-field" name="fname" placeholder="First name"
119+
className="form-field" defaultValue={inputDefaults.fname}/>
74120
</div>
75121
<div className="field-label-container grow shrink">
76122
<label htmlFor="lname-field">Last name</label>
77-
<input id="lname-field" name="lastname" placeholder="Last name" disabled={!isEditing}
78-
className="form-field"/>
123+
<input id="lname-field" name="lname" placeholder="Last name"
124+
className="form-field" defaultValue={inputDefaults.lname}/>
79125
</div>
80126
</div>
81127

82128
{/* field 3: email */}
83129
<div className="field-label-container">
84130
<label htmlFor="email-field">Email</label>
85-
<input id="email-field" name="email" type="email" placeholder="Email" disabled={!isEditing}
86-
className="form-field"/>
131+
<input id="email-field" name="email" type="email" placeholder="Email"
132+
className="form-field" defaultValue={inputDefaults.email}/>
87133
</div>
88134

89135
{/* field 4: phone */}
90136
<div className="field-label-container">
91137
<label htmlFor="phone-field">Phone</label>
92-
<input id="phone-field" name="phone" type="tel" placeholder="Phone" disabled={!isEditing}
93-
className="form-field"/>
138+
<input id="phone-field" name="phone" type="tel" placeholder="Phone"
139+
className="form-field" defaultValue={inputDefaults.phone}/>
94140
</div>
95141

96142
{/* field 5: callsign */}
97143
<div className="field-label-container">
98144
<label htmlFor="callsign-field">Callsign</label>
99-
<input id="callsign-field" name="callsign" placeholder="Callsign" disabled={!isEditing}
100-
className="form-field"/>
145+
<input id="callsign-field" name="callsign" placeholder="Callsign"
146+
className="form-field" defaultValue={inputDefaults.callsign}/>
101147
</div>
102148

103149
</div>
104150

105151
{/* form buttons */}
106152
<div className="flex flex-wrap size-fit gap-x-3 gap-y-1">
107-
<button type="submit" className="form-buttons transition-colors bg-gray-900 hover:bg-gray-700 shadow"
108-
onClick={() => (setIsEditing(prev => !prev))} hidden={!isEditing}>
153+
<button type="submit" className="form-buttons transition-colors bg-gray-900 hover:bg-gray-700 shadow">
109154
Submit
110155
</button>
111-
<button type="button" className="form-buttons transition-colors hover:bg-gray-200 border border-solid border-gray-900 text-gray-900 shadow"
112-
onClick={() => (setIsEditing(prev => !prev))} hidden={isEditing}>
113-
Edit
114-
</button>
115-
<button type="reset" className="form-buttons transition-colors hover:bg-gray-200 border border-solid border-gray-900 text-gray-900 shadow"
116-
onClick={() => (setIsEditing(prev => !prev))} hidden={!isEditing}>
117-
Cancel
118-
</button>
156+
{/*<button type="reset" className="form-buttons transition-colors hover:bg-gray-200 border border-solid border-gray-900 text-gray-900 shadow">
157+
Reset
158+
</button>*/}
119159
</div>
120160
</form>
121161
</div>
122162
</div>
123163
);
124-
}
164+
}

0 commit comments

Comments
 (0)