sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor internify components and services

Browse Source 
- Updated LoginInternify to remove unnecessary state initialization.
- Cleaned up NotificationList by removing unused code and fixing button click handler.
- Added project_id prop to InternClaimCert for better data handling.
- Enhanced CertificateNotAvailable to include claim functionality with loading and error states.
- Modified HomeHeader to display a default user name.
- Corrected ProjectTimeline to import ProjectTask from the correct type file.
- Implemented loading and error handling in CertificateListPage.
- Improved MentorProjectDetailPage to handle task updates and navigation correctly.
- Enhanced MentorSettingsPage to manage profile picture errors and state.
- Updated AddInternsDialog to use the correct hook for fetching interns.
- Refactored EditSubmissionTask to handle task updates and errors more effectively.
- Improved MentorProjectCard to include project archiving functionality.
- Removed deprecated useInterns hook and replaced it with useUser for fetching user data.
- Added new useMentors hook for managing mentor-related operations.
- Cleaned up CertificateService by removing unused verifyCertificate function.
- Created MentorServices for managing mentor data operations.
- Updated UserService to include fetching Mahasiswa data and removed unused UserServices file.
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-29 15:42:48 +07:00
parent 4084ccf1bf
commit da67ad86d8
29 changed files with 1099 additions and 5581 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/mentor/CertificateListPage.tsx
+8
View File
@@ -2,6 +2,7 @@
import { useNavigate } from "react-router-dom";
import CertificateProjectCard from "./components/CertificateProjectCard";
import { useProjects } from "../../../hooks/useProjects";
// ─── Main Page ────────────────────────────────────────────────────────────────
export default function CertificateList() {
const navigate = useNavigate();
@@ -11,6 +12,13 @@ export default function CertificateList() {
navigate(`/mentor/certificates/${slug}`);
};
if (loading){
<p>on loading</p>
}
if (error){
<p>error: {error}</p>
}
return (
<div>
{/* Page Header */}
src/Pages/internify/mentor/MentorProjectDetailPage.tsx
+16 -1
View File
@@ -3,14 +3,27 @@ import { useState } from "react";
import { Calendar, Edit } from "lucide-react";
import EditSubmissionModal from "./components/EditSubmissionTask";
import { useTaskSubmissions } from "../../../hooks/useTasks";
import type { ProjectTask } from "../../../types/task.types";
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function MentorProjectsDetailPage() {
const navigate = useNavigate();
const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
const { task, loading, error } = useTaskSubmissions(taskSlug!, slug);
const { task, loading, error, refetch } = useTaskSubmissions(taskSlug!, slug);
const [openModal, setOpenModal] = useState(false);
// Di MentorProjectsDetailPage
const handleEditSuccess = (updatedTask: ProjectTask) => {
if (updatedTask.slug !== taskSlug) {
// Slug berubah, navigate ke URL baru
navigate(`/mentor/projects/${slug}/${updatedTask.slug}`, { replace: true });
} else {
// Slug sama, cukup refetch
refetch();
}
};
if (loading) return (
<div className="space-y-4">
{[...Array(3)].map((_, i) => (
@@ -152,6 +165,8 @@ export default function MentorProjectsDetailPage() {
<EditSubmissionModal
isOpen={openModal}
onClose={() => setOpenModal(false)}
task={task}
onSuccess={handleEditSuccess}
/>
)}
</div>
src/Pages/internify/mentor/MentorSettingsPage.tsx
+17 -3
View File
@@ -14,19 +14,26 @@ export default function MentorSettingsPage() {
// File state untuk profile_picture
const [photoFile, setPhotoFile] = useState<File | null>(null);
const [photoPreview, setPhotoPreview] = useState<string | null>(null);
const [imageError, setImageError] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
// Sync form data ketika user sudah di-fetch
useEffect(() => {
if (user) {
setFormData({
fullName: user.full_name || "",
fullName:
user.full_name ||
`${user.nama_depan ?? ""} ${user.nama_belakang ?? ""}`.trim() ||
"",
email: user.email || "",
bio: user.professional_bio || "",
});
if (user.profile_picture) {
setPhotoPreview(user.profile_picture);
} else {
setPhotoPreview(null);
}
setImageError(false);
}
}, [user]);
@@ -48,6 +55,7 @@ export default function MentorSettingsPage() {
const handleRemovePhoto = () => {
setPhotoFile(null);
setPhotoPreview(null);
setImageError(false);
if (fileInputRef.current) fileInputRef.current.value = "";
};
@@ -62,6 +70,7 @@ export default function MentorSettingsPage() {
// Reset file state setelah berhasil save
if (!errorMsg) {
setPhotoFile(null);
setImageError(false);
}
};
@@ -104,8 +113,13 @@ export default function MentorSettingsPage() {
{/* Avatar dengan badge edit */}
<div className="relative flex-shrink-0">
<div className="w-20 h-20 rounded-xl border-2 border-red-100 overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm">
{photoPreview ? (
<img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
{photoPreview && !imageError ? (
<img
src={photoPreview}
alt="Profile"
className="w-full h-full object-cover"
onError={() => setImageError(true)}
/>
) : (
<span className="text-3xl font-black text-gray-900">{initialLetter}</span>
)}
src/Pages/internify/mentor/components/AddInternsDialog.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
// ManageInternsModal.tsx
import { useRef, useEffect, useState } from "react";
import { Search, Plus, Trash2 } from "lucide-react";
import { useMahasiswa } from "../../../../hooks/useInterns";
import { useMahasiswa } from "../../../../hooks/useUser";
import { useAssignMember } from '../../../../hooks/useProjects';
import type { ProjectMember } from '../../../../types/project.types';
import type { Mahasiswa } from '../../../../types/project.types';
src/Pages/internify/mentor/components/EditSubmissionTask.tsx
+89 -35
View File
@@ -1,21 +1,44 @@
import { useRef, useEffect, useState } from "react";
import { X } from "lucide-react";
import { LuSave } from "react-icons/lu";
import { useUpdateTask } from "../../../../hooks/useTasks";
import type { ProjectTask, SubmissionType, UpdateTaskPayload } from "../../../../types/task.types";
interface EditTaskModalProps {
isOpen: boolean;
onClose: () => void;
task: ProjectTask;
onSuccess: (updatedTask: ProjectTask) => void;
}
export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalProps) {
export default function EditSubmissionModal({
isOpen,
onClose,
task,
onSuccess,
}: EditTaskModalProps) {
const dialogRef = useRef<HTMLDialogElement>(null);
const { update, loading, error } = useUpdateTask();
// Form States
const [taskTitle, setTaskTitle] = useState("");
const [description, setDescription] = useState("");
const [deadlineDate, setDeadlineDate] = useState("");
const [specificTime, setSpecificTime] = useState("");
const [submissionType, setSubmissionType] = useState<"file" | "url">("file");
// Form States — diinisialisasi dari props task
const [taskTitle, setTaskTitle] = useState(task.title);
const [description, setDescription] = useState(task.description);
const [deadlineDate, setDeadlineDate] = useState(
task.deadline_at ? task.deadline_at.split("T")[0] : ""
);
const [specificTime, setSpecificTime] = useState(
task.deadline_at ? task.deadline_at.split("T")[1]?.slice(0, 5) ?? "" : ""
);
const [submissionType, setSubmissionType] = useState<SubmissionType>(task.submission_type);
// Sync form ketika task berubah (misal modal dibuka untuk task berbeda)
useEffect(() => {
setTaskTitle(task.title);
setDescription(task.description);
setDeadlineDate(task.deadline_at ? task.deadline_at.split("T")[0] : "");
setSpecificTime(task.deadline_at ? task.deadline_at.split("T")[1]?.slice(0, 5) ?? "" : "");
setSubmissionType(task.submission_type);
}, [task]);
useEffect(() => {
const dialog = dialogRef.current;
@@ -41,12 +64,26 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
};
}, [isOpen, onClose]);
const handleSubmit = (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const payload = { taskTitle, description, deadlineDate, specificTime, submissionType };
console.log("Saving Task:", payload);
alert("Task Saved Successfully!");
onClose();
const payload: UpdateTaskPayload = {};
if (taskTitle.trim() !== task.title) payload.title = taskTitle.trim();
if (description !== task.description) payload.description = description;
if (deadlineDate !== task.deadline_at.split("T")[0]) payload.deadline_date = deadlineDate;
if (specificTime !== (task.deadline_at.split("T")[1]?.slice(0, 5) ?? "")) payload.specific_time = specificTime;
if (submissionType !== task.submission_type) payload.submission_type = submissionType;
if (Object.keys(payload).length === 0) {
onClose();
return;
}
const result = await update(task.id, payload, String(task.id_project));
if (result) {
onSuccess(result);
onClose();
}
};
return (
@@ -54,7 +91,7 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
{/* Header */}
<div className="dialog-header">
<h2 className="text-xl font-bold text-gray-900 tracking-tight">Task</h2>
<h2 className="text-xl font-bold text-gray-900 tracking-tight">Edit Task</h2>
<button
onClick={onClose}
className="rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
@@ -66,6 +103,13 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
{/* Form Body */}
<form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">
{/* Error Message */}
{error && (
<div className="px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-600 font-medium">
{error}
</div>
)}
{/* Title */}
<div className="space-y-1.5">
<label className="text-xs font-bold text-gray-700 tracking-wide">Title</label>
@@ -93,8 +137,6 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
{/* Deadline & Submission Type Grid */}
<div className="grid grid-cols-2 gap-4">
{/* Deadline Date */}
<div className="space-y-1.5">
<label className="text-xs font-bold text-gray-700 tracking-wide">Tenggat Waktu</label>
<div className="relative">
@@ -103,32 +145,42 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
required
value={deadlineDate}
onChange={(e) => setDeadlineDate(e.target.value)}
className="w-full p-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
className="w-full p-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
/>
</div>
</div>
{/* Submission Type Dropdown */}
<div className="space-y-1.5">
<label className="text-xs font-bold text-gray-700 tracking-wide">Tipe Pengumpulan</label>
<label className="text-xs font-bold text-gray-700 tracking-wide">Waktu Spesifik</label>
<div className="relative">
<select
value={submissionType}
onChange={(e) => setSubmissionType(e.target.value as "file" | "url")}
className="w-full pl-3 pr-9 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none cursor-pointer"
>
<option value="file">File</option>
<option value="url">URL Link</option>
</select>
{/* Custom chevron icon */}
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</span>
<input
type="time"
required
value={specificTime}
onChange={(e) => setSpecificTime(e.target.value)}
className="w-full p-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none"
/>
</div>
</div>
</div>
<div className="space-y-1.5">
<label className="text-xs font-bold text-gray-700 tracking-wide">Tipe Pengumpulan</label>
<div className="relative">
<select
value={submissionType}
onChange={(e) => setSubmissionType(e.target.value as SubmissionType)}
className="w-full pl-3 pr-9 py-2.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] appearance-none cursor-pointer"
>
<option value="file_upload">File</option>
<option value="url_link">URL Link</option>
</select>
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</span>
</div>
</div>
<div className="h-px bg-gray-100" />
@@ -138,16 +190,18 @@ export default function EditSubmissionModal({ isOpen, onClose }: EditTaskModalPr
<button
type="button"
onClick={onClose}
className="px-5 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
disabled={loading}
className="px-5 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50"
>
Batal
</button>
<button
type="submit"
className="px-5 py-2.5 bg-[#B30000] hover:bg-[#990000] text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center gap-2"
disabled={loading}
className="px-5 py-2.5 bg-[#B30000] hover:bg-[#990000] text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
>
<LuSave className="w-4 h-4 stroke-[2.5]" />
Simpan Tugas
{loading ? "Menyimpan..." : "Simpan Tugas"}
</button>
</div>
src/Pages/internify/mentor/components/MentorProjectCard.tsx
+23 -3
View File
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
import * as LucideIcons from 'lucide-react';
import type { LucideProps } from 'lucide-react';
import type { Project } from '../../../../types/project.types';
import { useArchiveProject } from '../../../../hooks/useProjects';
const getDynamicIcon = (iconName: string) => {
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
@@ -14,14 +15,28 @@ const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
export default function MentorProjectCard(project: Project) {
const navigate = useNavigate();
const { archive, loading } = useArchiveProject();
const handleCardClick = () => {
navigate(`/mentor/projects/${toSlug(project.slug)}`)
};
const Icon = getDynamicIcon(project.project_icon);
const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
const handleDeleteClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
}
const confirmed = window.confirm(`Arsipkan project "${project.project_name}"?`);
if (!confirmed) return;
const result = await archive(project.id);
if (result) {
window.alert("Project berhasil diarsipkan.");
window.location.reload();
} else {
window.alert("Gagal mengarsipkan project.");
}
};
return (
<div
onClick={handleCardClick}
@@ -50,7 +65,12 @@ export default function MentorProjectCard(project: Project) {
{/* Footer */}
<div className="border-t border-gray-300 text-gray-400 flex justify-end p-2 bg-gray-50/50">
<button onClick={handleDeleteClick} className="hover:text-red-600 transition-colors">
<button
onClick={handleDeleteClick}
disabled={loading}
className="hover:text-red-600 transition-colors disabled:opacity-50"
aria-label={`Archive ${project.project_name}`}
>
<Trash2 className="w-4 h-4" />
</button>
</div>