Add distant links

eslint.config.js

@@ -1,18 +1,19 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
+import { SemicolonPreference } from "typescript";
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs["recommended-latest"],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
@@ -20,4 +21,4 @@ export default tseslint.config([
       globals: globals.browser,
     },
   },
-])
+]);

package.json

@@ -2,6 +2,11 @@
   "name": "dashboardjs",
   "private": true,
   "version": "0.0.0",
+  "proxy": [
+    "http://gpao.lan",
+    "http://raspitipi.local:3002",
+    "http://192.168.3.42:3002"
+  ],
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import { CastesLinks } from "./CastesLinks";
+import { LocalLinks } from "./LocalLinks";
 
 function App() {
   const links = [
@@ -12,18 +13,33 @@ function App() {
   ];
 
   const proLinks = [
+    {
+      name: "ComCastes",
+      link: "http://comcastes.loc",
+      icon: "http://comcastes.loc/favicon.ico",
+    },
     {
       name: "GPAO",
       link: "http://gpao.loc",
       icon: "http://gpao.loc/favicon.ico",
     },
-    { name: "Mycastes", link: "http://mycastes.loc" },
+    {
+      name: "API Castes",
+      link: "http://apicastes.loc",
+      icon: "http://apicastes.loc/favicon.ico",
+    },
+    {
+      name: "Mycastes",
+      link: "http://mycastes.loc",
+      icon: "http://mycastes.loc/favicon.ico",
+    },
   ];
 
   return (
     <main className="dark:bg-slate-950 dark:text-slate-50 h-screen flex flex-col gap-10">
       <h1 className="text-center text-5xl font-semibold">Frame Work</h1>
       <LinkGroup title="Perso" links={links} />
+      <LocalLinks />
       <LinkGroup title="Pro Dev" links={proLinks} />
       <CastesLinks />
     </main>
@@ -43,7 +59,7 @@ export const LinkGroup: FC<LinkGroupProps> = ({ title, links }) => {
       <h2 className="text-3xl font-semibold text-center mb-5">{title}</h2>
       <ul className="flex flex-wrap gap-2 text-3xl flex-1 items-center justify-center">
         {links.map((link) => (
-          <Link link={link} />
+          <Link key={link.name} link={link} />
         ))}
       </ul>
     </div>
@@ -70,7 +86,7 @@ const Link: FC<LinkProps> = ({ link }) => {
       >
         {link.icon ? (
           <div className="flex items-center">
-            <img src={link.icon} alt={link.name} className="max-h-10" />
+            <img src={link.icon} alt="" className="max-h-10" />
             <div className="flex-1">{link.name}</div>
           </div>
         ) : (

src/CastesLinks.tsx

@@ -3,7 +3,13 @@ import { LinkGroup } from "./App";
 
 export const CastesLinks = () => {
   const [loading, setLoading] = useState(true);
-  const links = [{ name: "GPAO", link: "http://gpao.lan" }];
+  const [error, setError] = useState("");
+  const [links, setLinks] = useState([]);
+  const castesLinks = [
+    { name: "GPAO", link: "http://gpao.lan" },
+    { name: "Penpot", link: "https://penpot.castes-industrie.fr" },
+    { name: "Schema", link: "http://schemas.castes-industrie.fr/" },
+  ];
 
   useEffect(() => {
     testConnection();
@@ -11,9 +17,30 @@ export const CastesLinks = () => {
 
   const testConnection = async () => {
     try {
-      const res = await fetch("http://gpao.lan");
+      const res = await fetch("http://gpao.lan", { method: "HEAD" });
+      console.log(res);
+      if (res.ok) {
+        setLinks(castesLinks);
+      }
       console.log("link", res);
-    } catch (error) {}
+    } catch (error: Error | NetworkError | unknown) {
+      console.log(error);
+      setError(error.response?.data.message || error.message);
+    } finally {
+      setLoading(false);
+    }
   };
-  return <LinkGroup title="Castes" links={links} />;
+  return loading ? (
+    <div>Chargement...</div>
+  ) : (
+    <>
+      <div>Casty</div>
+      {error && (
+        <div className="text-white px-2 text-center py-1 mx-5 bg-red-500 rounded">
+          {error}
+        </div>
+      )}
+      <LinkGroup title="Castes" links={links} />
+    </>
+  );
 };

src/LocalLinks.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { LinkGroup } from "./App";
+
+export const LocalLinks = () => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [links, setLinks] = useState([]);
+
+  useEffect(() => {
+    testConnection();
+  }, []);
+
+  const testConnection = async () => {
+    try {
+      const res = await fetch(
+        "http://192.168.3.42:3002/api/get_links2091652955602628755",
+        //"http://raspitipi.local:3002/api/get_links2091652955602628755",
+      );
+      const data = await res.json();
+      console.log(data, res);
+      setLinks(data);
+      console.log("link", res);
+    } catch (_: unknown) {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return loading ? (
+    <div>Chargement...</div>
+  ) : (
+    <>
+      <LinkGroup title="Liens locaux" links={links} />
+      {error ? (
+        <div className="text-center text-red-600 -mt-5">
+          Liens non accessibles
+        </div>
+      ) : null}
+    </>
+  );
+};