PTB-fe/components/Main/Timeline.js

import moment from "moment";
import { useSelector } from "react-redux";

function Timeline({ data, noFile = false, noJadwal = false }) {
	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
	const user = useSelector((state) => state.user);
	return (
		<ul className="timeline-alt">
			{date.map((value) => (
				<>
					<li className="timeline-separator" data-datetime={value}></li>
					{data
						.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
						.map((data, i) => (
							<>
								<li className={data.user.role?.id === 2022 ? "timeline-inverted" : ""}>
									<div className={`timeline-badge ${data.user.role?.id === 2022 ? " danger" : "info"}`}>
										<em className={`fas fa-${data.user.role?.id === 2022 ? "graduation-cap" : "file"}`}></em>
									</div>

									<div className="timeline-card">
										<div className="popover right">
											<div className="arrow"></div>
											<div className="popover-body">
												<div className="d-flex align-items-center mb-3">
													<img
														className="mr-3 rounded-circle thumb48"
														src={`/static/img${data.user.role?.id === 2022 ? "/univ-avatar.png" : data.user.isPublic ? "/user/user.png" : "/logo-single.png"}`}
														alt="Avatar"
													/>
													<p className="m-0">
														<strong>
															{!data.user.isPrivate && data.user.nama ? data.user.nama : "Rahasia"} - {data.user.isPublic ? "Umum" : data.user.role.nama}
														</strong>
														<br />
														{data.keterangan}
														<br />
														{data.alasan && (
															<>
																{data.alasan}
																<br />
															</>
														)}
														{data.sanksi?.no_sanksi ? `No. Sanksi ${data.sanksi.no_sanksi}` : `No. Laporan ${data.laporan.no_laporan}`}
														<p className="text-muted m-0">{moment(data.createdAt).format("hh:mm")}</p>
													</p>
												</div>
												{!data.user.isPublic && user?.role.id !== 2022 && data.jawaban && (
													<>
														<p className="text-muted my-2">Jawaban</p>
														<div className="p-2">
															<b>{data.jawaban}</b>
														</div>
													</>
												)}
												{!data.user.isPublic && data.jadwal && (
													<>
														<p className="text-muted my-2">Jadwal Pemeriksaan</p>
														<div className="p-2">
															Tanggal {moment(data.jadwal.dari_tanggal).format("DD MMMM YYYY")} - {moment(data.jadwal.sampai_tanggal).format("DD MMMM YYYY")}
														</div>
													</>
												)}
												{!data.user.isPublic && data.dokumen?.length ? (
													<>
														<p className="text-muted my-2">Dokumen</p>
														{data.dokumen.map((e) => (
															<div className="media bb p-2">
																<div className="media-body">
																	<p className="m-0">
																		<a href={e.path} target="_blank" download={e.judul}>
																			<strong>{e.judul}</strong>
																		</a>
																	</p>
																</div>
															</div>
														))}
													</>
												) : (
													""
												)}
											</div>
										</div>
									</div>
								</li>
							</>
						))}
				</>
			))}

			<li className="timeline-end">
				<a className="timeline-badge">
					<em className="fa fa-plus"></em>
				</a>
			</li>
		</ul>
	);
}

export default Timeline;