From 545ee8f787279f40f00a2ee319d6f868630dc50e Mon Sep 17 00:00:00 2001
From: Eunice Sarah Siregar <13521013@mahasiswa.itb.ac.id>
Date: Tue, 14 Nov 2023 00:57:11 +0700
Subject: [PATCH] feat: show psikolog list
---
src/pages/Consultation.tsx | 58 ++++++++++++++++++++------------------
1 file changed, 30 insertions(+), 28 deletions(-)
diff --git a/src/pages/Consultation.tsx b/src/pages/Consultation.tsx
index 2b7eb20..619fd4c 100644
--- a/src/pages/Consultation.tsx
+++ b/src/pages/Consultation.tsx
@@ -1,54 +1,56 @@
-import React from 'react';
-import { Link } from 'react-router-dom'; // Pastikan Anda telah mengatur routing sesuai kebutuhan Anda.
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
import '../styles/Consultation.css';
-const psychologists = [
- {
- id: 1,
- name: 'Yuyun SP.G',
- photo: 'photo1.jpg',
- phone: '0812345678',
- office: 'koica',
- },
- {
- id: 2,
- name: 'asmi S.L(X)',
- photo: 'photo2.jpg',
- phone: '0810101010',
- office: 'koica',
- },
+import axios from 'axios';
-];
+type Psychologist = {
+ psikolog_id: number;
+ psikolog_email: string;
+ psikolog_name: string;
+ psikolog_password: string;
+ psikolog_klinik: string;
+ psikolog_phone: string;
+};
const Consultation = () => {
+ const [psychologists, setPsychologists] = useState<Psychologist[]>([]);
const [selectedPsychologistId, setSelectedPsychologistId] = React.useState<number | null>(null);
+
+ const fetchPsiko = () => {
+ return axios.get('http://localhost:3000/psikolog/consultation')
+ .then((response) => setPsychologists(response.data.data));
+ };
+
+ useEffect(() => {
+ fetchPsiko();
+ }, []);
+
return (
<div className='consultation'>
<h1>Daftar Psikolog</h1>
{psychologists.map((psychologist) => (
- <div key={psychologist.id} className="psychologist-card">
+ <div key={psychologist.psikolog_id} className="psychologist-card">
<div className='psikologInfo'>
<div className="psikologImg">
- <img src="yunis.jpg" alt={psychologist.name} />
+ <img src="yunis.jpg" alt={psychologist.psikolog_name} />
</div>
<div className="psikolofDesc">
- <h2>{psychologist.name}</h2>
- <p>{psychologist.phone}</p>
- <p>{psychologist.office}</p>
-
+ <h2>{psychologist.psikolog_name}</h2>
+ <p>{psychologist.psikolog_phone}</p>
+ <p>{psychologist.psikolog_klinik}</p>
</div>
</div>
<div className="psikolofInfo">
- <Link to={`/chat/${psychologist.id}`}>
- <button onClick={() => setSelectedPsychologistId(psychologist.id)}>Chat</button>
+ <Link to={`/chat/${psychologist.psikolog_id}`}>
+ <button onClick={() => setSelectedPsychologistId(psychologist.psikolog_id)}>Chat</button>
</Link>
</div>
</div>
))}
- {selectedPsychologistId && <Link to={`/chat/${selectedPsychologistId}`}></Link>}
</div>
);
};
-export default Consultation;
+export default Consultation;
\ No newline at end of file
--
GitLab