Skip to content

Commit 7885d68

Browse files
jacovkimjacovkim
committed
changes to formdata
Changes made to form data
1 parent f85ac87 commit 7885d68

File tree

10 files changed

+422
-416
lines changed

10 files changed

+422
-416
lines changed

‎csm_web/frontend/src/components/UserProfile.tsx

+44-64
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,14 @@
1+
import { DateTime } from "luxon";
12
import React, { useState } from "react";
23
import { useUserInfo } from "../utils/queries/base";
3-
import { RawUserInfo, UserInfo } from "../utils/types";
44
import { useUserInfoUpdateMutation } from "../utils/queries/profiles";
5-
import { DateTime } from "luxon";
5+
import { RawUserInfo } from "../utils/types";
66

77
import "../css/profile.scss";
88

99
export const UserProfile = (): React.ReactElement => {
1010
const { data: jsonUserInfo, isSuccess: userInfoLoaded } = useUserInfo();
1111

12-
// let userInfo: UserInfo;
13-
// if (userInfoLoaded) {
14-
// let priorityEnrollment = undefined;
15-
// if (jsonUserInfo.priorityEnrollment) {
16-
// priorityEnrollment = DateTime.fromISO(jsonUserInfo.priorityEnrollment);
17-
// }
18-
// const convertedUserInfo: UserInfo = {
19-
// ...jsonUserInfo,
20-
// priorityEnrollment
21-
// };
22-
// userInfo = convertedUserInfo;
23-
// }
24-
// else {
25-
// // not done loading yet
26-
// userInfo = null;
27-
// }
28-
2912
return (
3013
<React.Fragment>
3114
<div>
@@ -54,31 +37,32 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
5437
/**
5538
* User First Name
5639
*/
57-
const [userFirstName, setUserFirstName] = useState<string>("");
40+
const userFirstName = userInfo.firstName;
5841

5942
/**
6043
* User Last Name
6144
*/
62-
const [userLastName, setUserLastName] = useState<string>("");
45+
46+
const userLastName = userInfo.lastName;
6347
/**
6448
* User email
6549
*/
66-
const [userEmail, setUserEmail] = useState<string>("");
50+
const userEmail = userInfo.email;
6751
/**
6852
* User Pronoun
6953
*/
70-
const [userPronoun, setUserPronoun] = useState<string>("");
54+
const [userPronoun, setUserPronoun] = useState<string>(userInfo.pronouns);
7155
/**
7256
* User Bio
7357
*/
74-
const [bio, setBio] = useState<string>("");
75-
/**
76-
* Pronunciation
77-
*/
78-
const [pronunciation, setPronunciation] = useState<string>("");
58+
const [userBio, setUserBio] = useState<string>(userInfo.bio);
7959
/**
8060
* Pronunciation
8161
*/
62+
const [userPreferredName, setUserPreferredName] = useState<string>(userInfo.preferredName);
63+
64+
const CHARACTER_LIMIT = 500;
65+
8266
let priority: DateTime | undefined;
8367
if (priorityEnrollment) {
8468
priority = DateTime.fromISO(priorityEnrollment);
@@ -104,10 +88,10 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
10488
lastName: userLastName,
10589
email: userEmail,
10690
isPrivate: userInfo.isPrivate,
107-
bio,
91+
bio: userBio,
10892
priorityEnrollment: priority,
10993
pronouns: userPronoun,
110-
pronunciation
94+
preferredName: userPreferredName
11195
};
11296
console.log(data);
11397
createSectionMutation.mutate(data, {
@@ -122,30 +106,25 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
122106
*/
123107
const handleChange = (name: string, value: string): void => {
124108
switch (name) {
125-
case "firstName":
126-
setUserFirstName(value);
127-
break;
128-
case "lastName":
129-
setUserLastName(value);
130-
break;
131-
case "email":
132-
setUserEmail(value);
133-
break;
134109
case "pronouns":
135110
setUserPronoun(value);
136111
break;
137112
case "bio":
138-
setBio(value);
113+
setUserBio(value);
139114
break;
140-
case "pronunciation":
141-
setPronunciation(value);
115+
case "preferredName":
116+
setUserPreferredName(value);
142117
break;
143118
default:
144119
console.error("Unknown input name: " + name);
145120
break;
146121
}
147122
};
148123

124+
// const handleBio = (value: string): void => {
125+
// setUserBio()
126+
// }
127+
149128
return (
150129
<div>
151130
{userInfo !== null ? (
@@ -160,8 +139,7 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
160139
id="firstname"
161140
defaultValue={userInfo.firstName}
162141
className="formbold-form-input"
163-
disabled={!editing}
164-
onChange={e => handleChange("firstName", e.target.value)}
142+
disabled={true}
165143
/>
166144
<label className="formbold-form-label"> First name </label>
167145
</div>
@@ -172,13 +150,24 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
172150
id="lastname"
173151
defaultValue={userInfo.lastName}
174152
className="formbold-form-input"
175-
disabled={!editing}
176-
onChange={e => handleChange("lastName", e.target.value)}
153+
disabled={true}
177154
/>
178155
<label className="formbold-form-label"> Last name </label>
179156
</div>
180157
</div>
181-
158+
<div className="formbold-textarea">
159+
<textarea
160+
name="bio"
161+
id="bio"
162+
placeholder="Write your bio..."
163+
className="formbold-form-input-bio"
164+
disabled={!editing}
165+
defaultValue={userInfo.bio}
166+
maxLength={500}
167+
onChange={e => handleChange("bio", e.target.value)}
168+
></textarea>
169+
<label className="formbold-form-label"> Bio {`[${userBio.length} / ${CHARACTER_LIMIT}]`}</label>
170+
</div>
182171
<div className="formbold-input-flex">
183172
<div>
184173
<input
@@ -188,7 +177,6 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
188177
defaultValue={userInfo.email}
189178
className="formbold-form-input"
190179
disabled={true}
191-
onChange={e => handleChange("email", e.target.value)}
192180
/>
193181
<label className="formbold-form-label"> Email </label>
194182
</div>
@@ -201,32 +189,24 @@ const DisplayUser = ({ userInfo, priorityEnrollment }: UserInfoProps) => {
201189
className="formbold-form-input"
202190
defaultValue={userInfo.pronouns}
203191
disabled={!editing}
192+
maxLength={20}
204193
onChange={e => handleChange("pronouns", e.target.value)}
205194
/>
206195
<label className="formbold-form-label"> Pronouns </label>
207196
</div>
208197
</div>
209198
<div className="formbold-textarea">
210199
<textarea
211-
name="pronunciation"
212-
id="pronunciation"
213-
placeholder="How to pronounce your name"
214-
className="formbold-form-input"
215-
disabled={true}
216-
></textarea>
217-
<label className="formbold-form-label"> Pronunciation </label>
218-
</div>
219-
<div className="formbold-textarea">
220-
<textarea
221-
name="bio"
222-
id="bio"
223-
placeholder="Write your bio..."
200+
name="preferredName"
201+
id="preferredName"
202+
placeholder=""
224203
className="formbold-form-input"
225204
disabled={!editing}
226-
defaultValue={userInfo.bio}
227-
onChange={e => handleChange("bio", e.target.value)}
205+
defaultValue={userInfo.preferredName}
206+
maxLength={50}
207+
onChange={e => handleChange("preferredName", e.target.value)}
228208
></textarea>
229-
<label className="formbold-form-label"> Bio </label>
209+
<label className="formbold-form-label"> Preferred Name </label>
230210
</div>
231211
</form>
232212
<div className="button-wrapper">

‎csm_web/frontend/src/components/section/MentorSectionInfo.tsx

+4-13
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,14 @@ import LoadingSpinner from "../LoadingSpinner";
66
import { CoordinatorAddStudentModal } from "./CoordinatorAddStudentModal";
77
import MetaEditModal from "./MetaEditModal";
88
import { InfoCard, SectionSpacetime } from "./Section";
9-
<<<<<<< HEAD
10-
=======
11-
import SpacetimeEditModal from "./SpacetimeEditModal";
12-
import ProfileModal from "./ProfileModal";
13-
import StudentDropper from "./StudentDropper";
14-
>>>>>>> f904047 (modal for profile)
159
import SpacetimeDeleteModal from "./SpacetimeDeleteModal";
1610
import SpacetimeEditModal from "./SpacetimeEditModal";
17-
import ProfileModal from "./ProfileModal";
11+
// import ProfileModal from "./ProfileModal";
1812
import StudentDropper from "./StudentDropper";
1913

2014
import PencilIcon from "../../../static/frontend/img/pencil.svg";
21-
<<<<<<< HEAD
15+
// import EyeIcon from "../../../static/frontend/img/eye.svg";
2216
import XIcon from "../../../static/frontend/img/x.svg";
23-
=======
24-
import EyeIcon from "../../../static/frontend/img/eye.svg";
25-
>>>>>>> f904047 (modal for profile)
2617

2718
import "../../css/coordinator-add-student.scss";
2819

@@ -101,7 +92,7 @@ export default function MentorSectionInfo({
10192
/>
10293
)}
10394
<span className="student-info">{name || email}</span>
104-
<button
95+
{/* <button
10596
className="secondary-link-btn info-card-edit-btn"
10697
onClick={() => {
10798
setShowModal(ModalStates.SPACETIME_EDIT);
@@ -111,7 +102,7 @@ export default function MentorSectionInfo({
111102
</button>
112103
{showModal === ModalStates.SPACETIME_EDIT && (
113104
<ProfileModal id={studentId} closeModal={closeModal} />
114-
)}
105+
)} */}
115106
</td>
116107
</tr>
117108
)

0 commit comments

Comments
 (0)