types.ts

app/types.ts

@@ -0,0 +1,14 @@
+export interface Site {
+    id: string;
+    name: string;
+    description: string;
+    networks: Network[];
+}
+
+export interface Network {
+    id: string;
+    name: string;
+    ipv4Subnet?: string;
+    ipv6Subnet?: string;
+    gateway?: string;
+}

components/cards/Sites.tsx

@@ -1,22 +1,8 @@
 "use client"
 import { useRouter } from "next/navigation";
+import { Site } from "@/app/types";
 
-interface SitesProps {
-    id: string;
-    name: string;
-    description: string;
-    networks: Network[];
-}
-
-interface Network {
-    id: number;
-    name: string;
-    ipv4Subnet?: string;
-    ipv6Subnet?: string;
-    gateway?: string;
-}
-
-export default function Sites({ id, name, description, networks }: SitesProps) {
+export default function Sites({ id, name, description, networks }: Site) {
     const router = useRouter();
     return (
         <div className="card bg-base-200 shadow-xl">

hooks/useNetworks.ts

@@ -1,21 +1,14 @@
 import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
-
-interface AddNetwork {
-    siteId: number;
-    name: string;
-    ipv4Subnet: string;
-    ipv6Subnet: string;
-    gateway: string;
-}
+import { Network } from "@/app/types";
 
 const useNetworks = () => {
    
-    const addNetwork = (network: AddNetwork) => {
+    const addNetwork = (network: Network) => {
         axios.post('/api/sites/networks/add', network);
     };
 
-    const deleteNetwork = (networkId: number) => {
+    const deleteNetwork = (networkId: string) => {
         axios.delete('/api/sites/networks/delete', {
             params: { networkId }
         });

hooks/useSite.ts

@@ -1,24 +1,10 @@
 import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
-
-interface Network {
-    id?: number;
-    name: string;
-    ipv4Subnet?: string;
-    ipv6Subnet?: string;
-    gateway?: string;
-}
-
-interface Site {
-    id: number;
-    name: string;
-    description: string;
-    networks: Network[];
-}
+import { Site } from "@/app/types";
 
 const useSite = () => {
     const [site, setSite] = useState<Site>({
-        id: 0,
+        id: "",
         name: "",
         description: "",
         networks: []