UPDATE: Request from api instead of local files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mindclip",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "private": true,
   "author": "ch3nyang",
   "license": "GPL-3.0-only",

src/components/clusters.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import LinkCard from '../components/linkCard';
 import ClearFilter from '../utils/clearFilter';
-import { ClusterProps, fetchAndFilterData } from '../services/dataFetcher';
+import { fetchAndFilterData } from '../services/dataFetcher';
 import '../styles/clusters.css';
 
 interface ClustersProps {
@@ -26,7 +26,7 @@ function Clusters({ dataKey, searchTerm, setSearchTerm }: ClustersProps) {
         {clusters.length > 0 ? (
           clusters.map((cluster: ClusterProps) => (
             <LinkCard
-              key={cluster.title}
+              key={cluster.Title}
               item={cluster}
               setSelectedCategory={setSelectedCategory}
             />

src/components/linkCard.tsx

@@ -3,41 +3,34 @@ import { getRandomColor, getContrastColor } from '../utils/randomColor';
 import '../styles/linkCard.css';
 
 interface LinkCardProps {
-  item: {
-    category: string;
-    url: string;
-    title: string;
-    description: string;
-    detail: string;
-    links: { title: string, url: string }[];
-  };
+  item: ClusterProps;
   setSelectedCategory: (value: string) => void;
 }
 
 function LinkCard({ item, setSelectedCategory }: LinkCardProps) {
-  const backgroundColor = getRandomColor(item.category);
+  const backgroundColor = getRandomColor(item.Category);
   const textColor = getContrastColor(backgroundColor);
 
   const handleCategoryClick = (e: React.MouseEvent) => {
   e.preventDefault();
-  setSelectedCategory(item.category);
+  setSelectedCategory(item.Category);
 };
 
   return (
     <a
       className="link-card"
-      href={item.url ? item.url : '#'}
+      href={item.Urlpath ? item.Urlpath : '#'}
       target="_blank"
       rel="noopener noreferrer"
-      id={item.title}
+      id={item.Title}
     >
       <div className="link-card-left">
         <div className="link-card-category" style={{ backgroundColor, color: textColor }} onClick={handleCategoryClick}>
-          {item.category ? item.category : 'UNKNOWN'}
+          {item.Category ? item.Category : 'UNKNOWN'}
         </div>
         <div className="link-card-icon">
           <img
-            src={`https://www.google.com/s2/favicons?sz=64&domain=${item.url ? new URL(item.url).hostname : 'ch3nyang.top'}`}
+            src={`https://www.google.com/s2/favicons?sz=64&domain=${item.Urlpath ? new URL(item.Urlpath).hostname : 'ch3nyang.top'}`}
             alt="favicon"
             className="link-card-icon-img"
           />
@@ -46,27 +39,27 @@ function LinkCard({ item, setSelectedCategory }: LinkCardProps) {
 
       <div className="link-card-right">
         <div className="link-card-title">
-          {item.title}
+          {item.Title}
         </div>
         <div className="link-card-description">
-          {item.description}
+          {item.Descr}
         </div>
-        {item.detail ? (
+        {item.Detail ? (
           <div className="link-card-detail">
-            {item.detail}
+            {item.Detail}
           </div>
         ) : null}
         {item.links ? (
           <div className="link-card-link">
             {item.links && item.links.length > 0 ? item.links.map((link) => (
               <a
-                key={link.url}
-                href={link.url}
+                key={link.Urlpath}
+                href={link.Urlpath}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="link-card-link-item"
               >
-                {link.title}
+                {link.Title}
               </a>
             )) : ''}
           </div>

src/services/dataFetcher.ts

@@ -1,36 +1,34 @@
-export interface ClusterProps {
-  category: string;
-  url: string;
-  title: string;
-  description: string;
-  detail: string;
-  links: { title: string, url: string }[];
-}
-
 export function fetchAndFilterData(
   dataKey: string,
   isRandom: boolean = false,
   selectedCategory: string | null = null,
   searchTerm: string = '',
   setClusters: (value: ClusterProps[]) => void
 ) {
-  fetch('data.json')
-    .then(response => response.json())
-    .then(data => {
-      let clusters = data[dataKey];
-      if (selectedCategory) {
-        clusters = clusters.filter((cluster: ClusterProps) => cluster.category === selectedCategory);
-      }
-      if (searchTerm) {
-        clusters = clusters.filter((cluster: ClusterProps) =>
-          Object.values(cluster).some(value =>
-            value.toString().toLowerCase().includes(searchTerm.toLowerCase())
-          )
-        );
+  const api = "https://api.mind.ch3nyang.top";
+  let url = `${api}/linkcard?collection=${dataKey}`;
+  if (selectedCategory) {
+    url += `&category=${selectedCategory}`;
+  }
+  if (searchTerm) {
+    url += `&search=${searchTerm}`;
+  }
+
+  fetch(url, { method: 'GET' })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
       }
+      return response.json();
+    })
+    .then(data => {
       if (isRandom) {
-        clusters = clusters.sort(() => Math.random() - 0.5);
+        data = data.sort(() => Math.random() - 0.5);
       }
-      setClusters(clusters);
+      setClusters(data);
+    })
+    .catch(e => {
+      console.error(`Fetch failed: ${e.message}`);
+      console.error(`Failed URL: ${url}`);
     });
 }

typings.d.ts

@@ -0,0 +1,9 @@
+interface ClusterProps {
+    Col: string;
+    Category: string;
+    Title: string;
+    Urlpath: string;
+    Descr: string;
+    Detail: string;
+    links: { Title: string, Urlpath: string }[];
+}