tsk-5: Add contact (#15)

Closes #5

Reviewed-on: phoenix/textsender#15
Co-authored-by: phoenix <kundeng00@pm.me>
Co-committed-by: phoenix <kundeng00@pm.me>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/AddContact.css

@@ -0,0 +1,159 @@
+/* Contact Modal Styles */
+.contact-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.contact-modal {
+  background: transparent;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.contact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.contact-title {
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 32px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.contact-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+}
+
+.contact-form {
+  margin-bottom: 0;
+}
+
+.required {
+  color: #ef4444;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.cancel-btn {
+  flex: 1;
+  background: #f3f4f6;
+  color: #4b5563;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover:not(:disabled) {
+  background: #e5e7eb;
+  transform: translateY(-1px);
+}
+
+.cancel-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.cancel-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  flex: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .contact-card {
+    padding: 30px 20px;
+  }
+
+  .contact-title {
+    font-size: 20px;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
+.submit-error {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #ef4444;
+  font-size: 14px;
+}

src/components/AddContact.jsx

@@ -0,0 +1,224 @@
+import { useState } from 'react';
+
+import { API_BASE_URL } from '../constants/api';
+import {
+  DATA_KEY_ACCESS_TOKEN,
+  DATA_KEY_ADDED_CONTACT_ID,
+  DATA_KEY_USER_ID,
+} from '../constants/app';
+import './AddContact.css';
+
+const AddContact = ({ isOpen, onClose, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    phoneNumber: '',
+    firstName: '',
+    lastName: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+
+  if (!isOpen) return null;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+    // Clear submit error when user modifies form
+    if (submitError) {
+      setSubmitError('');
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    // Phone number is required
+    if (!formData.phoneNumber.trim()) {
+      newErrors.phoneNumber = 'Phone number is required';
+    } else if (!/^[\d\s\-\+\(\)]{10,}$/.test(formData.phoneNumber)) {
+      newErrors.phoneNumber = 'Please enter a valid phone number';
+    }
+
+    return newErrors;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const validationErrors = validateForm();
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    setIsSubmitting(true);
+    setSubmitError('');
+
+    try {
+      const userId = localStorage.getItem(DATA_KEY_USER_ID);
+      const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+      const reqBod = {
+        phone_number: formData.phoneNumber,
+        first_name: formData.firstName,
+        last_name: formData.lastName,
+        user_id: userId,
+      };
+      // Send the API request directly from the Contact component
+      const response = await fetch(`${API_BASE_URL}/api/v1/contact/new`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: JSON.stringify(reqBod),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(
+          errorData.message ||
+            `Failed to create contact. Status: ${response.status}`
+        );
+      }
+
+      const result = await response.json();
+      if (result.data.length > 0) {
+        console.log('Contact added');
+        const contactId = result.data[0].id;
+        localStorage.setItem(DATA_KEY_ADDED_CONTACT_ID, contactId);
+      }
+
+      // Reset form
+      setFormData({ phoneNumber: '', firstName: '', lastName: '' });
+
+      // Call onSuccess callback if provided
+      if (onSuccess) {
+        onSuccess(result);
+      }
+
+      // Close the modal
+      onClose();
+    } catch (error) {
+      console.error('Error submitting form:', error);
+      setSubmitError(
+        error.message || 'Failed to create contact. Please try again.'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setFormData({ phoneNumber: '', firstName: '', lastName: '' });
+    setErrors({});
+    setSubmitError('');
+    onClose();
+  };
+
+  return (
+    <div className="contact-modal-overlay">
+      <div className="contact-modal">
+        <div className="contact-header">
+          <h2 className="contact-title">Add New Contact</h2>
+          <button
+            className="close-btn"
+            onClick={handleCancel}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="contact-card">
+          {submitError && <div className="submit-error">{submitError}</div>}
+
+          <form className="contact-form" onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="phoneNumber" className="form-label">
+                Phone Number <span className="required">*</span>
+              </label>
+              <input
+                id="phoneNumber"
+                name="phoneNumber"
+                type="tel"
+                className={`form-input ${errors.phoneNumber ? 'error' : ''}`}
+                value={formData.phoneNumber}
+                onChange={handleChange}
+                placeholder="Enter phone number"
+                disabled={isSubmitting}
+                required
+              />
+              {errors.phoneNumber && (
+                <span className="error-message">{errors.phoneNumber}</span>
+              )}
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="firstName" className="form-label">
+                First Name
+              </label>
+              <input
+                id="firstName"
+                name="firstName"
+                type="text"
+                className="form-input"
+                value={formData.firstName}
+                onChange={handleChange}
+                placeholder="Enter first name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="lastName" className="form-label">
+                Last Name
+              </label>
+              <input
+                id="lastName"
+                name="lastName"
+                type="text"
+                className="form-input"
+                value={formData.lastName}
+                onChange={handleChange}
+                placeholder="Enter last name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
+            <div className="form-actions">
+              <button
+                type="button"
+                className="cancel-btn"
+                onClick={handleCancel}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="submit-btn"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Creating...' : 'Create Contact'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddContact;

src/components/Dashboard.css

@@ -211,3 +211,28 @@
     font-size: 18px;
   }
 }
+
+/* Add Contact Button Styles */
+.add-contact-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 20px;
+}
+
+.add-contact-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.add-contact-btn:active {
+  transform: translateY(0);
+}
+
+/* Existing dashboard styles... */

src/components/Dashboard.jsx

@@ -1,8 +1,25 @@
 import { useState } from 'react';
+
+import AddContact from './AddContact';
 import './Dashboard.css';
 
 const Dashboard = () => {
   const [activeView, setActiveView] = useState('dashboard');
+  const [showContactForm, setShowContactForm] = useState(false);
+
+  const handleAddContactClick = () => {
+    setShowContactForm(true);
+  };
+
+  const handleContactSuccess = (contactData) => {
+    // Optional: Handle successful creation
+    console.log('Contact created successfully:', contactData);
+
+    // You could:
+    // 1. Refresh the contacts list if you have one
+    // 2. Show a success notification
+    // 3. Update local state with the new contact
+  };
 
   const handleButtonClick = (buttonNumber) => {
     console.log(`Button ${buttonNumber} clicked`);
@@ -58,12 +75,21 @@ const Dashboard = () => {
 
             <button
               className="dashboard-btn secondary"
-              onClick={() => handleButtonClick(2)}
+              onClick={() => handleAddContactClick()}
             >
-              <span className="btn-text">Choice 2</span>
+              <span className="btn-text">Add Contact</span>
-              <span className="btn-hint">Click for action 2</span>
+              <span className="btn-hint">
+                Create contacts to send text messages
+              </span>
             </button>
 
+            {/* Contact Form Modal - Now self-contained */}
+            <AddContact
+              isOpen={showContactForm}
+              onClose={() => setShowContactForm(false)}
+              onSuccess={handleContactSuccess}
+            />
+
             <button
               className="dashboard-btn tertiary"
               onClick={() => handleButtonClick(3)}

src/components/Login.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AUTH_API_BASE_URL } from '../constants/api';
-import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
+import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
 
 import './Login.css';
 
@@ -81,6 +81,7 @@ const Login = () => {
         const token = loginResult.access_token;
         console.log(token);
         localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
+        localStorage.setItem(DATA_KEY_USER_ID, loginResult.user_id);
         alert(`Login successful! Welcome, ${formData.username}`);
         navigate('/dashboard');
       } else {

src/constants/api.js

@@ -1 +1,2 @@
 export const AUTH_API_BASE_URL = 'http://localhost:9080';
+export const API_BASE_URL = 'http://localhost:8080';

src/constants/app.js

@@ -1,2 +1,4 @@
 export const DATA_KEY_ACCESS_TOKEN = 'access_token';
 export const DATA_KEY_REGISTERED_USER_ID = 'registered_user_id';
+export const DATA_KEY_USER_ID = 'user_id';
+export const DATA_KEY_ADDED_CONTACT_ID = 'added_contact_id';