Skip to content

Commit 1d3fbb8

Browse files
gustabccantoniovini47
gustabcc
authored and
antoniovini47
committed
styling collapsibles
1 parent 2739b5f commit 1d3fbb8

1 file changed

Lines changed: 64 additions & 259 deletions

File tree

‎src/interviewReport/InterviewReportComponent.tsx‎

Lines changed: 64 additions & 259 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ const InterviewReportComponent = () => {
1919

2020
const [videoURL, setVideoURL] = useState<string | null>(null);
2121

22+
// Estados de carregamento
23+
const [videoStatus, setVideoStatus] = useState<string>("loading");
24+
2225
// Execute on first render
2326
useEffect(() => {
2427
// Get the URL params
@@ -69,32 +72,39 @@ const InterviewReportComponent = () => {
6972
console.log("recordId changed to: ", recordId);
7073
}, [recordId]);
7174

75+
// Atualizar o status do vídeo
76+
useEffect(() => {
77+
if (videoURL) {
78+
setVideoStatus("success");
79+
} else {
80+
setVideoStatus("failed");
81+
}
82+
}, [videoURL]);
83+
7284
return (
7385
<>
7486
<div>
7587
<h3>Room - {roomId}</h3>
7688
{interviewsDataList && (
77-
<select
78-
onChange={(e) => {
79-
console.log("selectedInterviewData", e.target.value);
80-
setSelectedInterviewData(
81-
interviewsDataList.find((interview: any) => interview.uuid === e.target.value)
82-
);
83-
}}
84-
value={recordId || ""}>
85-
<option value="" disabled>
86-
Select an interview
87-
</option>
88-
{interviewsDataList.map((interview: any) => (
89-
<option key={interview.uuid} value={interview.uuid}>
90-
{new Date(interview.createdAt).toUTCString()} - {interview.uuid}
89+
<>
90+
- Record Id:
91+
<select
92+
onChange={(e) => {
93+
console.log("selectedInterviewData", e.target.value);
94+
setSelectedInterviewData(
95+
interviewsDataList.find((interview: any) => interview.uuid === e.target.value)
96+
);
97+
}}
98+
value={recordId || ""}>
99+
<option value="" disabled>
100+
Select an interview
91101
</option>
92102
))}
93103
</select>
94104
)}
95105
</div>
96106
{/* Interview Video */}
97-
<CollapsibleText title="Interview Video">
107+
<CollapsibleText title="Interview Video" status={videoStatus}>
98108
{videoURL ? (
99109
<video controls width="1000">
100110
<source src={videoURL} type="video/mp4" />
@@ -107,250 +117,45 @@ const InterviewReportComponent = () => {
107117

108118
{/* TODO: The source code here */}
109119

110-
<div style={{ marginTop: 450 }}>
111-
<h1>Debug</h1>
112-
<h3>_________________________________DEBUG______________________________________</h3>
113-
{/* Get all recordings */}
114-
<h3>Etapa 1 - Get all recordings</h3>
115-
<button
116-
onClick={() => {
117-
console.log("getting recordings...");
118-
getRecordings().then((recordings) => {
119-
const textarea = document.getElementById("textAreaRecordings") as HTMLTextAreaElement;
120-
if (textarea) {
121-
textarea.value = JSON.stringify(recordings, null, 2);
122-
}
123-
});
124-
}}>
125-
Get all recordings
126-
</button>
127-
<textarea
128-
style={{ height: 50, width: 1000 }}
129-
id="textAreaRecordings"
130-
placeholder="Recordings..."></textarea>
131-
<br></br>
132-
<br></br>
133-
{/* */}
134-
{/* Generate transcript - it has to wait */}
135-
<h3>Etapa 2 - Solicitar transcrição - tem que esperar o processo terminar</h3>
136-
<input id="inputRecordingID" placeholder="Recording ID"></input>
137-
<button
138-
onClick={() => {
139-
const recordingId = (document.getElementById("inputRecordingID") as HTMLInputElement)
140-
.value;
141-
console.log("generating transcript for recordingId:", recordingId);
142-
requestGenerateTranscript(recordingId)
143-
.then(() => console.log("Transcript requested"))
144-
.catch((error) => console.error("Error generating transcript request:", error));
145-
}}>
146-
Request to generate transcript
147-
</button>
148-
<br></br>
149-
<br></br>
150-
{/* */}
151-
{/* Get recordings with transcription ready */}
152-
<h3>Etapa 3 - Solicitar todas as gravações, com transcrição</h3>
153-
<button
154-
onClick={() => {
155-
console.log("getting recordings with transcription ready...");
156-
getRecordingsWithTranscriptionReady().then((recordings) => {
157-
const textarea = document.getElementById(
158-
"textAreaRecordingsWithTranscriptionReady"
159-
) as HTMLTextAreaElement;
160-
if (textarea) {
161-
textarea.value = JSON.stringify(recordings, null, 2);
162-
}
163-
});
164-
}}>
165-
Get recordings with transcription ready
166-
</button>
167-
<textarea
168-
style={{ height: 50, width: 1000 }}
169-
id="textAreaRecordingsWithTranscriptionReady"
170-
placeholder="Recordings with transcription ready..."
171-
readOnly></textarea>
172-
<br></br>
173-
<br></br>
174-
{/* */}
175-
{/* get Transcript */}
176-
<h3>Etapa 4 - Solicitar transcrição da gravação</h3>
177-
<input
178-
id="inputRecordingIDForGetTranscript"
179-
placeholder="Recording ID for get transcript"></input>
180-
<button
181-
onClick={() => {
182-
const recordingId = (
183-
document.getElementById("inputRecordingIDForGetTranscript") as HTMLInputElement
184-
).value;
185-
console.log("getting transcript for recordingId:", recordingId);
186-
getTranscript(recordingId)
187-
.then((transcript) => {
188-
const textarea = document.getElementById(
189-
"textAreaTranscript"
190-
) as HTMLTextAreaElement;
191-
if (textarea) {
192-
textarea.value = JSON.stringify(transcript, null, 2);
193-
}
194-
})
195-
.catch((error) => console.error("Error getting transcript:", error));
196-
}}>
197-
Get transcript
198-
</button>
199-
<textarea
200-
style={{ height: 50, width: 1000 }}
201-
id="textAreaTranscript"
202-
placeholder="Transcript..."
203-
/>
204-
{/* */}
205-
{/* get Questions */}
206-
<h3>Etapa 5 - Get Questions</h3>
207-
<input
208-
id="inputRecordingIDForGetQuestions"
209-
placeholder="Recording ID for get questions"></input>
210-
<button
211-
onClick={() => {
212-
const recordingId = (
213-
document.getElementById("inputRecordingIDForGetQuestions") as HTMLInputElement
214-
).value;
215-
console.log("getting questions for recordingId:", recordingId);
216-
getQuestions(recordingId)
217-
.then((transcript) => {
218-
const textarea = document.getElementById(
219-
"textAreaGetQuestions"
220-
) as HTMLTextAreaElement;
221-
if (textarea) {
222-
textarea.value = JSON.stringify(transcript.questions, null, 2);
223-
}
224-
})
225-
.catch((error) => console.error("Error getting questions:", error));
226-
}}>
227-
Get questions
228-
</button>
229-
<textarea
230-
style={{ height: 50, width: 1000 }}
231-
id="textAreaGetQuestions"
232-
placeholder="Questions..."
233-
/>
234-
{/* */}
235-
{/* get Action itens */}
236-
<h3>Etapa 6 - Get Actions Itens</h3>
237-
<input
238-
id="inputRecordingIDForGetActionsItens"
239-
placeholder="Recording ID for get actions itens"></input>
240-
<button
241-
onClick={() => {
242-
const recordingId = (
243-
document.getElementById("inputRecordingIDForGetActionsItens") as HTMLInputElement
244-
).value;
245-
console.log("getting actions itens for recordingId:", recordingId);
246-
getActionItems(recordingId)
247-
.then((transcript) => {
248-
const textarea = document.getElementById(
249-
"textAreaGetActionsItens"
250-
) as HTMLTextAreaElement;
251-
if (textarea) {
252-
textarea.value = JSON.stringify(transcript.actionItems, null, 2);
253-
}
254-
})
255-
.catch((error) => console.error("Error getting action itens:", error));
256-
}}>
257-
Get actions itens
258-
</button>
259-
<textarea
260-
style={{ height: 50, width: 1000 }}
261-
id="textAreaGetActionsItens"
262-
placeholder="Actions Itens..."
263-
/>
264-
{/* */}
265-
{/* get Follow Ups */}
266-
<h3>Etapa 7 - Get Follow-ups</h3>
267-
<input
268-
id="inputRecordingIDForGetFollowUps"
269-
placeholder="Recording ID for get follow-ups"></input>
270-
<button
271-
onClick={() => {
272-
const recordingId = (
273-
document.getElementById("inputRecordingIDForGetFollowUps") as HTMLInputElement
274-
).value;
275-
console.log("getting follow-ups for recordingId:", recordingId);
276-
getFollowUps(recordingId)
277-
.then((transcript) => {
278-
const textarea = document.getElementById(
279-
"textAreaGetFollowUps"
280-
) as HTMLTextAreaElement;
281-
if (textarea) {
282-
textarea.value = JSON.stringify(transcript.followUps, null, 2);
283-
}
284-
})
285-
.catch((error) => console.error("Error getting follow-ups:", error));
286-
}}>
287-
Get follow-ups
288-
</button>
289-
<textarea
290-
style={{ height: 50, width: 1000 }}
291-
id="textAreaGetFollowUps"
292-
placeholder="Follow ups..."
293-
/>
294-
{/* */}
295-
{/* get Topics */}
296-
<h3>Etapa 8 - Get Topics</h3>
297-
<input id="inputRecordingIDForGetTopics" placeholder="Recording ID for get topics"></input>
298-
<button
299-
onClick={() => {
300-
const recordingId = (
301-
document.getElementById("inputRecordingIDForGetTopics") as HTMLInputElement
302-
).value;
303-
console.log("getting topics for recordingId:", recordingId);
304-
getTopics(recordingId)
305-
.then((transcript) => {
306-
const textarea = document.getElementById(
307-
"textAreaGetTopics"
308-
) as HTMLTextAreaElement;
309-
if (textarea) {
310-
textarea.value = JSON.stringify(transcript.topics, null, 2);
311-
}
312-
})
313-
.catch((error) => console.error("Error getting topics:", error));
314-
}}>
315-
Get topics
316-
</button>
317-
<textarea
318-
style={{ height: 50, width: 1000 }}
319-
id="textAreaGetTopics"
320-
placeholder="Topics..."
321-
/>
322-
{/* */}
323-
{/* get Summary */}
324-
<h3>Etapa 9 - Get Summary</h3>
325-
<input
326-
id="inputRecordingIDForGetSummary"
327-
placeholder="Recording ID for get summary"></input>
328-
<button
329-
onClick={() => {
330-
const recordingId = (
331-
document.getElementById("inputRecordingIDForGetSummary") as HTMLInputElement
332-
).value;
333-
console.log("getting summary for recordingId:", recordingId);
334-
getSummary(recordingId)
335-
.then((transcript) => {
336-
const textarea = document.getElementById(
337-
"textAreaGetSummary"
338-
) as HTMLTextAreaElement;
339-
if (textarea) {
340-
textarea.value = JSON.stringify(transcript.summary);
341-
}
342-
})
343-
.catch((error) => console.error("Error getting summary:", error));
344-
}}>
345-
Get summary
346-
</button>
347-
<textarea
348-
style={{ height: 50, width: 1000 }}
349-
id="textAreaGetSummary"
350-
placeholder="Summary..."
351-
/>
352-
<h1>END OF DEBUG</h1>
353-
</div>
120+
{/* Meeting Transcript */}
121+
<CollapsibleText title="Meeting transcript">
122+
<textarea value={meetingTranscript} readOnly={true} style={{ width: 1000, height: 200 }} />
123+
</CollapsibleText>
124+
125+
{/* Action itens */}
126+
<CollapsibleText title="Action itens">
127+
{actionItens.map((actionItem: any) => (
128+
<ReportActionItemComponent text={actionItem.text} />
129+
))}
130+
</CollapsibleText>
131+
132+
{/* Follow-ups */}
133+
<CollapsibleText title="Follow-ups">
134+
{followUps.map((followUp: any) => (
135+
<p>{followUp.text}</p>
136+
))}
137+
</CollapsibleText>
138+
139+
{/* Questions */}
140+
<CollapsibleText title="Questions">
141+
{questionsReport.map((question: any) => (
142+
<p>{question.text}</p>
143+
))}
144+
</CollapsibleText>
145+
146+
{/* Topics */}
147+
<CollapsibleText title="Topics">
148+
{topics.map((topic: any) => (
149+
<p>{topic.text}</p>
150+
))}
151+
</CollapsibleText>
152+
153+
{/* Summary */}
154+
<CollapsibleText title="Summary">
155+
{summary.map((summaryItem: any) => (
156+
<p>{summaryItem.text}</p>
157+
))}
158+
</CollapsibleText>
354159
</>
355160
);
356161
};

0 commit comments

Comments
 (0)