tsk-4: Fix contacts not being saved (#14)
Closes #4 Reviewed-on: phoenix/textsender#14
This commit was merged in pull request #14.
This commit is contained in:
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "textsender",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "textsender",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"dependencies": {
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "textsender",
|
||||
"private": true,
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import { API_BASE_URL } from '../constants/api';
|
||||
|
||||
export class CreateContactRequest {
|
||||
first_name = '';
|
||||
last_name = '';
|
||||
firstname = '';
|
||||
lastname = '';
|
||||
nickname = '';
|
||||
phone_number = '';
|
||||
user_id = '';
|
||||
}
|
||||
|
||||
export class UpdateContactNamesRequest {
|
||||
first_name = '';
|
||||
last_name = '';
|
||||
firstname = '';
|
||||
lastname = '';
|
||||
nickname = '';
|
||||
contact_id = '';
|
||||
id = '';
|
||||
user_id = '';
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
|
||||
phoneNumber: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
nickName: '',
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
@@ -66,8 +67,9 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
|
||||
const userId = tokenService.getUserId();
|
||||
let contact = new CreateContactRequest();
|
||||
contact.phone_number = formData.phoneNumber;
|
||||
contact.first_name = formData.firstName;
|
||||
contact.last_name = formData.lastName;
|
||||
contact.firstname = formData.firstName;
|
||||
contact.lastname = formData.lastName;
|
||||
contact.nickname = formData.nickName;
|
||||
contact.user_id = userId;
|
||||
const result = await contactApi.createContact(
|
||||
contact,
|
||||
@@ -178,6 +180,23 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
|
||||
<span className="form-hint">Optional field</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="nickName" className="form-label">
|
||||
Nick Name
|
||||
</label>
|
||||
<input
|
||||
id="nickName"
|
||||
name="nickName"
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={formData.nickName}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter nick name (optional)"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<span className="form-hint">Optional field</span>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -33,11 +33,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
|
||||
<span className={styles.reviewLabel}>First Name</span>
|
||||
<div className={styles.reviewComparison}>
|
||||
<span className={styles.oldValue}>
|
||||
{selectedContact.first_name || 'Not set'}
|
||||
{selectedContact.firstname || 'Not set'}
|
||||
</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
<span className={styles.newValue}>
|
||||
{contactDetails.first_name || 'Not set'}
|
||||
{contactDetails.firstname || 'Not set'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,11 +46,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
|
||||
<span className={styles.reviewLabel}>Last Name</span>
|
||||
<div className={styles.reviewComparison}>
|
||||
<span className={styles.oldValue}>
|
||||
{selectedContact.last_name || 'Not set'}
|
||||
{selectedContact.lastname || 'Not set'}
|
||||
</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
<span className={styles.newValue}>
|
||||
{contactDetails.last_name || 'Not set'}
|
||||
{contactDetails.lastname || 'Not set'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,8 +3,8 @@ import styles from './ModifyForm.module.css';
|
||||
|
||||
function ModifyForm({ contactDetails, setContactDetails }) {
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
nickname: '',
|
||||
});
|
||||
|
||||
@@ -12,8 +12,8 @@ function ModifyForm({ contactDetails, setContactDetails }) {
|
||||
useEffect(() => {
|
||||
if (contactDetails) {
|
||||
setFormData({
|
||||
first_name: contactDetails.first_name || '',
|
||||
last_name: contactDetails.last_name || '',
|
||||
firstname: contactDetails.firstname || '',
|
||||
lastname: contactDetails.lastname || '',
|
||||
nickname: contactDetails.nickname || '',
|
||||
});
|
||||
}
|
||||
@@ -37,16 +37,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
|
||||
<h3 className={styles.sectionTitle}>Edit Contact Information</h3>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="first_name" className={styles.formLabel}>
|
||||
<label htmlFor="firstname" className={styles.formLabel}>
|
||||
First Name
|
||||
<span className={styles.requiredIndicator}>*</span>
|
||||
</label>
|
||||
<div className={styles.inputContainer}>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
value={formData.first_name}
|
||||
id="firstname"
|
||||
name="firstname"
|
||||
value={formData.firstname}
|
||||
onChange={handleChange}
|
||||
className={styles.formInput}
|
||||
placeholder="Enter contact's first name"
|
||||
@@ -61,16 +61,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<label htmlFor="last_name" className={styles.formLabel}>
|
||||
<label htmlFor="lastname" className={styles.formLabel}>
|
||||
Last Name
|
||||
<span className={styles.requiredIndicator}>*</span>
|
||||
</label>
|
||||
<div className={styles.inputContainer}>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
value={formData.last_name}
|
||||
id="lastname"
|
||||
name="lastname"
|
||||
value={formData.lastname}
|
||||
onChange={handleChange}
|
||||
className={styles.formInput}
|
||||
placeholder="Enter contact's last name"
|
||||
|
||||
@@ -49,15 +49,15 @@ function ViewContact({ selectedContact, onSelectedContact }) {
|
||||
const filteredContacts = contacts.filter(
|
||||
(contact) =>
|
||||
contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
contact.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
contact.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
contact.firstname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
contact.lastname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const formatContactDisplay = (contact) => {
|
||||
const phone = contact.phone_number || 'No phone';
|
||||
const name =
|
||||
[contact.first_name, contact.last_name].filter(Boolean).join(' ') ||
|
||||
[contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
|
||||
'Unnamed';
|
||||
const nickname = contact.nickname ? `"${contact.nickname}"` : '';
|
||||
|
||||
@@ -117,7 +117,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
|
||||
onClick={() => onSelectedContact(contact)}
|
||||
>
|
||||
<div className={styles.contactAvatar}>
|
||||
{contact.first_name?.[0]?.toUpperCase() || '?'}
|
||||
{contact.firstname?.[0]?.toUpperCase() || '?'}
|
||||
</div>
|
||||
<div className={styles.contactInfo}>
|
||||
<div className={styles.contactMainInfo}>
|
||||
@@ -131,7 +131,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.contactName}>
|
||||
{[contact.first_name, contact.last_name]
|
||||
{[contact.firstname, contact.lastname]
|
||||
.filter(Boolean)
|
||||
.join(' ') || 'Unnamed Contact'}
|
||||
</div>
|
||||
|
||||
@@ -21,13 +21,13 @@ const useViewContactWizard = () => {
|
||||
case 'modify':
|
||||
if (!state.contactDetails) return false;
|
||||
if (
|
||||
!state.contactDetails.first_name ||
|
||||
state.contactDetails.first_name.trim() === ''
|
||||
!state.contactDetails.firstname ||
|
||||
state.contactDetails.firstname.trim() === ''
|
||||
) {
|
||||
return false;
|
||||
} else if (
|
||||
!state.contactDetails.last_name ||
|
||||
state.contactDetails.last_name.trim() === ''
|
||||
!state.contactDetails.lastname ||
|
||||
state.contactDetails.lastname.trim() === ''
|
||||
) {
|
||||
return false;
|
||||
} else {
|
||||
@@ -61,8 +61,8 @@ const useViewContactWizard = () => {
|
||||
? null
|
||||
: {
|
||||
id: contactId,
|
||||
first_name: contact.first_name,
|
||||
last_name: contact.last_name,
|
||||
firstname: contact.firstname,
|
||||
lastname: contact.lastname,
|
||||
phone_number: contact.phone_number,
|
||||
user_id: contact.user_id,
|
||||
nickname: contact.nickname || '',
|
||||
@@ -90,8 +90,8 @@ const useViewContactWizard = () => {
|
||||
step: nextStepValue,
|
||||
submissionError: null,
|
||||
contactDetails: {
|
||||
first_name: prev.selectedContact.first_name || '',
|
||||
last_name: prev.selectedContact.last_name || '',
|
||||
firstname: prev.selectedContact.firstname || '',
|
||||
lastname: prev.selectedContact.lastname || '',
|
||||
nickname: prev.selectedContact.nickname || '',
|
||||
phone_number: prev.selectedContact.phone_number || '',
|
||||
id: prev.selectedContact.id,
|
||||
@@ -139,10 +139,10 @@ const useViewContactWizard = () => {
|
||||
console.log('Contact details to update: ', state.contactDetails);
|
||||
|
||||
let reqBody = new UpdateContactNamesRequest();
|
||||
reqBody.first_name = state.contactDetails.first_name;
|
||||
reqBody.last_name = state.contactDetails.last_name;
|
||||
reqBody.firstname = state.contactDetails.firstname;
|
||||
reqBody.lastname = state.contactDetails.lastname;
|
||||
reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
|
||||
reqBody.contact_id = state.selectedContact.id;
|
||||
reqBody.id = state.selectedContact.id;
|
||||
reqBody.user_id = userId;
|
||||
|
||||
const response = await contactApi.updateContactNames(
|
||||
|
||||
Reference in New Issue
Block a user