fixing data fetching from external API, spesifically in achievement and projects categories and name of team member

2026-06-04 15:47:47 +07:00
parent b8099c1dca
commit b5fba9238e
8 changed files with 195 additions and 82 deletions
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ACAAB — Dev Preview</title>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ACAAB — Dev Preview</title>
  <style>
    #dev-banner {
      background: #feb401; color: #003150; font-size: 11px; font-weight: 700;
      text-align: center; padding: 6px; letter-spacing: .05em; position: sticky; top: 0; z-index: 999;
    }
-  </style>
+  </style>
  <script type="module" crossorigin src="../acaab.js"></script>
  <link rel="stylesheet" crossorigin href="../acaab.css">
-</head>
-<body>
-  <div id="dev-banner">⚡ DEV MODE — Navbar &amp; footer tidak tampil di sini. Gunakan kit dev server (root) untuk preview lengkap.</div>
-  <div id="root"></div>
-</body>
-</html>
+</head>
+<body>
+  <div id="dev-banner">⚡ DEV MODE — Navbar &amp; footer tidak tampil di sini. Gunakan kit dev server (root) untuk preview lengkap.</div>
+  <div id="root"></div>
+</body>
+</html>
@@ -88,10 +88,30 @@ export default function AchievementModal({ achievement, onClose }: AchievementMo
            <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={achievement.category} />
          </div>

+          {/* Members list */}
+          {achievement.members && achievement.members.length > 0 && (
+            <div className="border-t border-slate-100 pt-4 mb-4">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
+              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {achievement.members.map((m, i) => (
+                  <li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md">
+                    <span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
+                      {m.nama.charAt(0).toUpperCase()}
+                    </span>
+                    <div className="flex flex-col">
+                      <span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
+                      {m.angkatan && <span className="text-[10px] text-slate-500 mt-1">Angkatan {m.angkatan}</span>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
          {/* Description */}
          <div className="border-t border-slate-100 pt-4">
            <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
-            <p className="text-slate-600 text-sm leading-relaxed">{achievement.description}</p>
+            <p className="text-slate-600 text-sm leading-relaxed">{achievement.description.replace(/\*\*/g, '')}</p>
          </div>

          {/* Close button */}
@@ -23,7 +23,7 @@ export default function ProjectCarousel() {
  const [filterYear, setFilterYear] = useState('');

  const categories = useMemo(
-    () => [...new Set(projects.map((p) => p.category))].sort(),
+    () => [...new Set(projects.flatMap((p) => p.category))].sort(),
    [projects]
  );
  
@@ -40,9 +40,9 @@ export default function ProjectCarousel() {
        !q ||
        p.title.toLowerCase().includes(q) ||
        p.studentName.toLowerCase().includes(q) ||
-        p.category.toLowerCase().includes(q) ||
+        p.category.join(' ').toLowerCase().includes(q) ||
        p.description.toLowerCase().includes(q);
-      const matchCategory = !filterCategory || p.category === filterCategory;
+      const matchCategory = !filterCategory || p.category.includes(filterCategory);
      const matchYear = !filterYear || String(p.year) === filterYear;
      return matchSearch && matchCategory && matchYear;
    });
@@ -271,11 +271,15 @@ export default function ProjectCarousel() {
                        <h4 className="text-lg font-bold font-display text-white leading-snug mb-1">
                          {project.title}
                        </h4>
-                        {project.category && (
-                          <span className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider">
-                            <Tag size={10} />
-                            {project.category}
-                          </span>
+                        {project.category && project.category.length > 0 && (
+                          <div className="flex flex-wrap gap-2 mt-1">
+                            {project.category.map((cat, i) => (
+                              <span key={i} className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider bg-black/30 px-2 py-1 rounded backdrop-blur-sm">
+                                <Tag size={10} />
+                                {cat}
+                              </span>
+                            ))}
+                          </div>
                        )}
                      </div>
                    </div>
@@ -56,12 +56,14 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
          </button>

          {/* Category badge */}
-          {project.category && (
-            <div className="absolute bottom-4 left-4">
-              <span className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5 uppercase tracking-wide">
-                <Tag size={12} />
-                {project.category}
-              </span>
+          {project.category && project.category.length > 0 && (
+            <div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
+              {project.category.map((cat, i) => (
+                <span key={i} className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5 uppercase tracking-wide">
+                  <Tag size={12} />
+                  {cat}
+                </span>
+              ))}
            </div>
          )}
        </div>
@@ -81,15 +83,41 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
            {project.year && (
              <InfoRow icon={<Calendar size={14} />} label={t.modal.tahun} value={String(project.year)} />
            )}
-            {project.category && (
-              <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category} />
+            {project.category && project.category.length > 0 && (
+              <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category.join(', ')} />
            )}
          </div>

+          {/* Members list */}
+          {project.members && project.members.length > 0 && (
+            <div className="border-t border-slate-100 pt-4 mb-4">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
+              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {project.members.map((m, i) => (
+                  <li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md border border-slate-100">
+                    <span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
+                      {m.nama.charAt(0).toUpperCase()}
+                    </span>
+                    <div className="flex flex-col">
+                      <span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
+                      {m.nim && <span className="text-[10px] text-slate-500 mt-1">{m.nim}</span>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
          {/* Description */}
          <div className="border-t border-slate-100 pt-4 mb-5">
            <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
            <p className="text-slate-600 text-sm leading-relaxed">{project.description}</p>
+            {project.catatan && (
+              <div className="mt-4 p-3 bg-blue-50/50 border border-blue-100 rounded-lg">
+                <p className="text-[10px] font-bold uppercase tracking-wider text-blue-400 mb-1">Catatan Tambahan</p>
+                <p className="text-sm text-slate-600 italic">{project.catatan}</p>
+              </div>
+            )}
          </div>

          {/* Project link */}
@@ -12,6 +12,7 @@ export interface Achievement {
  generation: string;
  image: string;
  avatar: string;
+  members?: Array<{nama: string; angkatan?: number}>;
 }

 export interface Project {
@@ -20,10 +21,12 @@ export interface Project {
  studentName: string;
  nim?: string;
  year: number;
-  category: string;
+  category: string[];
  description: string;
  image: string;
  link?: string;
+  catatan?: string;
+  members?: Array<{nama: string; nim?: string}>;
 }

 /*
@@ -3,6 +3,21 @@ import { Achievement, Project } from '../data';
 // Determine API Base URL dynamically from Vite env, fallback to hardcoded if not set
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api.ifuntanhub.dev';

+const BIDANG_MAP: Record<number, string> = {
+  1: 'Kecerdasan Buatan',
+  2: 'Cyber Security',
+  3: 'Data',
+  4: 'Software Engineering',
+  5: 'Competitive Programming',
+  6: 'IoT',
+  7: 'Smart City',
+  8: 'Web3',
+  9: 'Karya Tulis Ilmiah',
+  10: 'Robotik',
+};
+
+
+
 /**
 * Helper to parse Rank/Juara from Achievement title
 */
@@ -53,7 +68,7 @@ function extractCompetition(title: string): string {
 * Fetch achievements from API
 */
 export async function fetchAchievementsFromAPI(): Promise<Achievement[]> {
-  const response = await fetch(`${API_BASE_URL}/items/prestasi`);
+  const response = await fetch(`${API_BASE_URL}/items/prestasi?fields=*.*`);
  if (!response.ok) {
    throw new Error(`Failed to fetch achievements: ${response.statusText}`);
  }
@@ -65,24 +80,39 @@ export async function fetchAchievementsFromAPI(): Promise<Achievement[]> {
    .map((item: any) => {
      const id = String(item.id);
      const title = item.nama_prestasi || 'Untitled Achievement';
-      const category = item.bidang || 'Akademik';
+      
+      let category = 'Umum';
+      if (item.bidang_id) {
+        if (typeof item.bidang_id === 'object' && item.bidang_id.nama_bidang) {
+          category = item.bidang_id.nama_bidang;
+        } else {
+          category = BIDANG_MAP[item.bidang_id as number] || 'Umum';
+        }
+      }
+      
      const rank = extractRank(title);
      const level = extractLevel(title, category);
      const competition = extractCompetition(title);
      const year = parseInt(item.tahun) || new Date().getFullYear();
-      const team = item.nama_tim || 'Mahasiswa';
+      
+      const anggota = Array.isArray(item.anggota) ? item.anggota : [];
+      const team = item.nama_tim || (anggota.length > 0 ? anggota[0].nama : 'Mahasiswa');
      
      // Handle image url mapping for directus assets
-      const image = item.foto
-        ? `${API_BASE_URL}/assets/${item.foto}`
-        : `https://picsum.photos/seed/prestasi-${id}/800/600`;
+      let image = `https://picsum.photos/seed/prestasi-${id}/800/600`;
+      if (item.galeri && Array.isArray(item.galeri) && item.galeri.length > 0) {
+        const firstImg = item.galeri[0];
+        const imgId = typeof firstImg === 'string' ? firstImg : (firstImg.directus_files_id || firstImg.id);
+        if (imgId) image = `${API_BASE_URL}/assets/${imgId}`;
+      } else if (item.foto) {
+        image = `${API_BASE_URL}/assets/${item.foto}`;
+      }
      
      const avatar = (item.nama_tim || item.nama_prestasi || 'IF')
        .substring(0, 2)
        .toUpperCase();

-      // Create a friendly fallback description since Directus model lacks one
-      const description = `${team} berhasil meraih prestasi luar biasa sebagai ${rank} dalam ajang ${competition} tahun ${year} pada bidang ${category.toLowerCase()}.`;
+      const description = item.deskripsi || `${team} berhasil meraih prestasi luar biasa sebagai ${rank} dalam ajang ${competition} tahun ${year} pada bidang ${category.toLowerCase()}.`;

      return {
        id,
@@ -98,6 +128,7 @@ export async function fetchAchievementsFromAPI(): Promise<Achievement[]> {
        generation: item.angkatan ? `Angkatan ${item.angkatan}` : 'Informatika',
        image,
        avatar,
+        members: anggota.map((m: any) => ({ nama: m.nama, angkatan: m.angkatan ? parseInt(m.angkatan) : undefined })),
      };
    });
 }
@@ -106,7 +137,7 @@ export async function fetchAchievementsFromAPI(): Promise<Achievement[]> {
 * Fetch projects/portfolio from API
 */
 export async function fetchProjectsFromAPI(): Promise<Project[]> {
-  const response = await fetch(`${API_BASE_URL}/items/portfolio`);
+  const response = await fetch(`${API_BASE_URL}/items/portfolio?fields=*,bidang.bidang_id.nama_bidang,galeri.*`);
  if (!response.ok) {
    throw new Error(`Failed to fetch portfolio: ${response.statusText}`);
  }
@@ -118,18 +149,43 @@ export async function fetchProjectsFromAPI(): Promise<Project[]> {
    .map((item: any) => {
      const id = String(item.id);
      const title = item.nama_proyek || 'Untitled Project';
-      const studentName = item.nama_mahasiswa || 'Mahasiswa';
+      
+      const anggota = Array.isArray(item.anggota) ? item.anggota : [];
+      const studentName = item.nama_mahasiswa || (anggota.length > 0 ? anggota[0].nama : 'Mahasiswa');
+      
      const year = parseInt(item.tahun) || new Date().getFullYear();
-      const category = item.bidang || 'Software Development';
      const description = item.deskripsi || 'Tidak ada deskripsi.';
+      
+      let categories: string[] = [];
+      if (item.bidang && Array.isArray(item.bidang)) {
+        categories = item.bidang.map((b: any) => {
+          if (b.bidang_id && typeof b.bidang_id === 'object' && b.bidang_id.nama_bidang) {
+            return b.bidang_id.nama_bidang;
+          }
+          if (typeof b.bidang_id === 'number') {
+             return BIDANG_MAP[b.bidang_id] || 'Umum';
+          }
+          return 'Umum';
+        }).filter(Boolean);
+      }
+      
+      if (categories.length === 0) {
+        categories = ['Umum'];
+      }
+      
      let link = item.url || undefined;
      if (link && !/^https?:\/\//i.test(link)) {
        link = `https://${link}`;
      }
      
-      const image = item.foto
-        ? `${API_BASE_URL}/assets/${item.foto}`
-        : `https://picsum.photos/seed/project-${id}/800/600`;
+      let image = `https://picsum.photos/seed/project-${id}/800/600`;
+      if (item.galeri && Array.isArray(item.galeri) && item.galeri.length > 0) {
+        const firstImg = item.galeri[0];
+        const imgId = typeof firstImg === 'string' ? firstImg : (firstImg.directus_files_id || firstImg.id);
+        if (imgId) image = `${API_BASE_URL}/assets/${imgId}`;
+      } else if (item.foto) {
+        image = `${API_BASE_URL}/assets/${item.foto}`;
+      }

      return {
        id,
@@ -137,10 +193,12 @@ export async function fetchProjectsFromAPI(): Promise<Project[]> {
        studentName,
        nim: item.nim || undefined,
        year,
-        category,
+        category: categories,
        description,
        image,
        link,
+        catatan: item.catatan || undefined,
+        members: anggota.map((m: any) => ({ nama: m.nama, nim: m.nim || undefined })),
      };
    });
 }