add medication button
This commit is contained in:
Joseph J Helfenbein
@@ -1,167 +1,162 @@
|
|||||||
"use client"
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { useUser } from '@clerk/nextjs';
|
import { useUser } from '@clerk/clerk-react';
|
||||||
import { Button } from '../../../components/ui/button';
|
import { Button, Input, Label, Card, CardHeader, CardContent, CardFooter } from 'components/ui';
|
||||||
import { Input } from '../../../components/ui/input';
|
|
||||||
import { Label } from '../../../components/ui/label';
|
|
||||||
import { Card, CardHeader, CardContent, CardFooter } from '../../../components/ui/card';
|
|
||||||
|
|
||||||
|
|
||||||
const AccountPage = () => {
|
const AccountPage = () => {
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const [userData, setUserData] = useState(null);
|
const [userData, setUserData] = useState(null);
|
||||||
const [patients, setPatients] = useState([]);
|
const [patients, setPatients] = useState([]);
|
||||||
const [selectedPatient, setSelectedPatient] = useState(null);
|
const [selectedPatient, setSelectedPatient] = useState(null);
|
||||||
const [medications, setMedications] = useState([]);
|
const [medications, setMedications] = useState([]);
|
||||||
const [diagnoses, setDiagnoses] = useState([]);
|
const [diagnoses, setDiagnoses] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user) {
|
if (user) {
|
||||||
axios.get(`/api/user?userId=${user.id}`).then(response => {
|
axios.get(`/api/user?userId=${user.id}`).then(response => {
|
||||||
setUserData(response.data);
|
setUserData(response.data);
|
||||||
if (response.data.role === 'caregiver') {
|
if (response.data.role === 'caregiver') {
|
||||||
axios.get('/api/patients').then(res => setPatients(res.data));
|
axios.get('/api/patients').then(res => setPatients(res.data));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
const handleRoleChange = async () => {
|
const handleRoleChange = async () => {
|
||||||
const newRole = userData.role === 'patient' ? 'caregiver' : 'patient';
|
const newRole = userData.role === 'patient' ? 'caregiver' : 'patient';
|
||||||
await axios.put(`/api/user?userId=${user.id}`, { role: newRole });
|
await axios.put(`/api/user?userId=${user.id}`, { role: newRole });
|
||||||
setUserData({ ...userData, role: newRole });
|
setUserData({ ...userData, role: newRole });
|
||||||
if (newRole === 'caregiver') {
|
if (newRole === 'caregiver') {
|
||||||
axios.get('/api/patients').then(res => setPatients(res.data));
|
axios.get('/api/patients').then(res => setPatients(res.data));
|
||||||
} else {
|
} else {
|
||||||
setPatients([]);
|
setPatients([]);
|
||||||
setSelectedPatient(null);
|
setSelectedPatient(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePatientSelect = (patient) => {
|
const handlePatientSelect = (patient) => {
|
||||||
setSelectedPatient(patient);
|
setSelectedPatient(patient);
|
||||||
setMedications(patient.medications);
|
setMedications(patient.medications);
|
||||||
setDiagnoses(patient.medicalConditions);
|
setDiagnoses(patient.medicalConditions);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMedicationsChange = (index, field, value) => {
|
const handleMedicationsChange = (index, field, value) => {
|
||||||
const updatedMedications = [...medications];
|
const updatedMedications = [...medications];
|
||||||
updatedMedications[index][field] = value;
|
updatedMedications[index][field] = value;
|
||||||
setMedications(updatedMedications);
|
setMedications(updatedMedications);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDiagnosesChange = (e) => {
|
const handleDiagnosesChange = (e) => {
|
||||||
setDiagnoses(e.target.value.split(','));
|
setDiagnoses(e.target.value.split(','));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleAddMedication = () => {
|
||||||
try {
|
setMedications([...medications, { name: '', dosage: '', frequency: '' }]);
|
||||||
await axios.put(`/api/patients?email=${selectedPatient.email}`, {
|
};
|
||||||
medications,
|
|
||||||
medicalConditions: diagnoses,
|
|
||||||
});
|
|
||||||
alert('Patient data updated successfully');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating patient data:', error);
|
|
||||||
alert('Failed to update patient data');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!userData) return <div>Loading...</div>;
|
const handleSave = async () => {
|
||||||
|
await axios.put(`/api/patients/${selectedPatient.email}`, {
|
||||||
|
medications,
|
||||||
|
medicalConditions: diagnoses,
|
||||||
|
});
|
||||||
|
alert('Patient data updated successfully');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
if (!userData) return <div>Loading...</div>;
|
||||||
<div className="container mx-auto p-4">
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<h1 className="text-2xl font-bold">Account Page</h1>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="mb-4">
|
|
||||||
<Label>Name:</Label>
|
|
||||||
<p>{userData.name}</p>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<Label>Email:</Label>
|
|
||||||
<p>{userData.email}</p>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<Label>Role:</Label>
|
|
||||||
<p>{userData.role}</p>
|
|
||||||
</div>
|
|
||||||
<Button onClick={handleRoleChange} className="mb-4">
|
|
||||||
Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{userData.role === 'caregiver' && (
|
return (
|
||||||
<div>
|
<div className="container mx-auto p-4">
|
||||||
<h2 className="text-xl font-bold mb-4">Patients</h2>
|
<Card>
|
||||||
<ul className="mb-4">
|
<CardHeader>
|
||||||
{patients.map(patient => (
|
<h1 className="text-2xl font-bold">Account Page</h1>
|
||||||
<li
|
</CardHeader>
|
||||||
key={patient.email}
|
<CardContent>
|
||||||
onClick={() => handlePatientSelect(patient)}
|
<div className="mb-4">
|
||||||
className="cursor-pointer hover:bg-gray-200 p-2"
|
<Label>Name:</Label>
|
||||||
>
|
<p>{userData.name}</p>
|
||||||
{patient.name}
|
</div>
|
||||||
</li>
|
<div className="mb-4">
|
||||||
))}
|
<Label>Email:</Label>
|
||||||
</ul>
|
<p>{userData.email}</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4">
|
||||||
|
<Label>Role:</Label>
|
||||||
|
<p>{userData.role}</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleRoleChange} className="mb-4">
|
||||||
|
Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
{selectedPatient && (
|
{userData.role === 'caregiver' && (
|
||||||
<Card>
|
<div>
|
||||||
<CardHeader>
|
<h2 className="text-xl font-bold mb-4">Patients</h2>
|
||||||
<h3 className="text-xl font-bold">Edit Patient: {selectedPatient.name}</h3>
|
<ul className="mb-4">
|
||||||
</CardHeader>
|
{patients.map(patient => (
|
||||||
<CardContent>
|
<li
|
||||||
<div className="mb-4">
|
key={patient.email}
|
||||||
<Label>Medications:</Label>
|
onClick={() => handlePatientSelect(patient)}
|
||||||
{medications.map((medication, index) => (
|
className="cursor-pointer hover:bg-gray-200 p-2"
|
||||||
<div key={index} className="mb-2">
|
>
|
||||||
<Input
|
{patient.name}
|
||||||
type="text"
|
</li>
|
||||||
placeholder="Name"
|
))}
|
||||||
value={medication.name}
|
</ul>
|
||||||
onChange={(e) => handleMedicationsChange(index, 'name', e.target.value)}
|
|
||||||
className="mb-2"
|
{selectedPatient && (
|
||||||
/>
|
<Card>
|
||||||
<Input
|
<CardHeader>
|
||||||
type="text"
|
<h3 className="text-xl font-bold">Edit Patient: {selectedPatient.name}</h3>
|
||||||
placeholder="Dosage"
|
</CardHeader>
|
||||||
value={medication.dosage}
|
<CardContent>
|
||||||
onChange={(e) => handleMedicationsChange(index, 'dosage', e.target.value)}
|
<div className="mb-4">
|
||||||
className="mb-2"
|
<Label>Medications:</Label>
|
||||||
/>
|
{medications.map((medication, index) => (
|
||||||
<Input
|
<div key={index} className="mb-2">
|
||||||
type="text"
|
<Input
|
||||||
placeholder="Frequency"
|
type="text"
|
||||||
value={medication.frequency}
|
placeholder="Name"
|
||||||
onChange={(e) => handleMedicationsChange(index, 'frequency', e.target.value)}
|
value={medication.name}
|
||||||
className="mb-2"
|
onChange={(e) => handleMedicationsChange(index, 'name', e.target.value)}
|
||||||
/>
|
className="mb-2"
|
||||||
</div>
|
/>
|
||||||
))}
|
<Input
|
||||||
</div>
|
type="text"
|
||||||
<div className="mb-4">
|
placeholder="Dosage"
|
||||||
<Label>Diagnoses:</Label>
|
value={medication.dosage}
|
||||||
<Input
|
onChange={(e) => handleMedicationsChange(index, 'dosage', e.target.value)}
|
||||||
type="text"
|
className="mb-2"
|
||||||
value={diagnoses.join(',')}
|
/>
|
||||||
onChange={handleDiagnosesChange}
|
<Input
|
||||||
/>
|
type="text"
|
||||||
</div>
|
placeholder="Frequency"
|
||||||
</CardContent>
|
value={medication.frequency}
|
||||||
<CardFooter>
|
onChange={(e) => handleMedicationsChange(index, 'frequency', e.target.value)}
|
||||||
<Button onClick={handleSave}>Save</Button>
|
className="mb-2"
|
||||||
</CardFooter>
|
/>
|
||||||
</Card>
|
</div>
|
||||||
)}
|
))}
|
||||||
</div>
|
<Button onClick={handleAddMedication} className="mt-2">Add Medication</Button>
|
||||||
)}
|
</div>
|
||||||
</CardContent>
|
<div className="mb-4">
|
||||||
</Card>
|
<Label>Diagnoses:</Label>
|
||||||
</div>
|
<Input
|
||||||
);
|
type="text"
|
||||||
|
value={diagnoses.join(',')}
|
||||||
|
onChange={handleDiagnosesChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button onClick={handleSave}>Save</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AccountPage;
|
export default AccountPage;
|
||||||
Reference in New Issue
Block a user