tsk-5: Add profile page (#12)

Closes #5

Reviewed-on: phoenix/textsender#12

src/App.jsx

@@ -8,6 +8,7 @@ import {
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
+import ProfileForm from './components/ProfileForm';
 
 import './App.css';
 
@@ -19,6 +20,7 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/user/profile" element={<ProfileForm />} />
       </Routes>
     </Router>
   );

src/api/loginApi.js

@@ -20,3 +20,21 @@ export const loginApi = {
     }
   },
 };
+
+export const userApi = {
+  get_user_profile: async (userId) => {
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`,
+      {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/components/Dashboard.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import AddContact from './AddContact';
-// import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
@@ -9,12 +9,12 @@ import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
 import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 
 const Dashboard = () => {
+  const navigate = useNavigate();
   const [activeView, setActiveView] = useState('dashboard');
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false);
   const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
   const [showContactForm, setShowContactForm] = useState(false);
-  // const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
     setShowContactForm(true);
@@ -22,15 +22,9 @@ const Dashboard = () => {
 
   const handleContactSuccess = (contactData) => {
     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 handleWizardComplete = () => {
-    // Add your logic here for each button
     setIsWizardOpen(false);
   };
 
@@ -47,7 +41,11 @@ const Dashboard = () => {
   };
 
   const handleNavClick = (view) => {
-    setActiveView(view);
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      setActiveView(view);
+    }
   };
 
   return (

src/components/ProfileForm.css

@@ -0,0 +1,41 @@
+.profile-form {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+}
+
+.profile-form h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.profile-form form {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-form div {
+  margin-bottom: 15px;
+}
+
+.profile-form label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.profile-form input[type='text'],
+.profile-form input[type='tel'] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.profile-form input[readonly] {
+  background-color: #f9f9f9;
+}

src/components/ProfileForm.jsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { tokenService } from '../services/TokenService';
+import { userApi } from '../api/loginApi';
+
+import './ProfileForm.css';
+
+const ProfileForm = () => {
+  const navigate = useNavigate();
+  const [activeView, setActiveView] = useState('profile');
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    phone: '',
+    username: '',
+    createdDate: new Date().toISOString().split('T')[0],
+    lastLoginDate: new Date().toISOString().split('T')[0],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const userId = tokenService.getUserId();
+      const response = await userApi.get_user_profile(userId);
+
+      if (response) {
+        const userProfile = response.data[0];
+        setFormData((prev) => ({
+          ...prev,
+          firstname: userProfile.firstname,
+          lastname: userProfile.lastname,
+          phone: userProfile.phone_number,
+          username: userProfile.username,
+          createdDate: userProfile.created,
+          lastLoginDate: userProfile.last_login,
+        }));
+      } else {
+        console.error('Error getting user profile');
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
+  return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <div className="profile-form">
+        <h2>User Profile</h2>
+        <form>
+          <div>
+            <label htmlFor="firstname">First Name:</label>
+            <input
+              type="text"
+              id="firstname"
+              name="firstname"
+              value={formData.firstname}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="lastname">Last Name:</label>
+            <input
+              type="text"
+              id="lastname"
+              name="lastname"
+              value={formData.lastname}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="phone">Phone:</label>
+            <input
+              type="tel"
+              id="phone"
+              name="phone"
+              value={formData.phone}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="username">Username:</label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="createdDate">Created Date:</label>
+            <input
+              type="text"
+              id="createdDate"
+              name="createdDate"
+              value={formData.createdDate}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="lastLoginDate">Last Login Date:</label>
+            <input
+              type="text"
+              id="lastLoginDate"
+              name="lastLoginDate"
+              value={formData.lastLoginDate}
+              readOnly
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileForm;