Refactor to interfaces and type classes

Took 5 minutes

frontend/src/api/relationships.ts

@@ -1,4 +1,6 @@
 import axios from 'axios';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+import { Relationship } from '../interfaces/IRelationship';
 
 const protocol = window.location.protocol;
 const hostname = window.location.hostname;
@@ -6,24 +8,6 @@ const port = window.location.port;
 
 const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
 
-export type RELATIONSHIP_TYPES = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
-
-export const RELATIONSHIP_LABELS = {
-  freund: 'Friend', partner: 'Partner', familie: 'Family', arbeitskolleg: 'Colleague', custom: 'Custom',
-};
-
-// Types
-export interface Relationship {
-  _id: string;
-  source: string;
-  target: string;
-  type: RELATIONSHIP_TYPES;
-  customType?: string;
-  network: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
 export interface CreateRelationshipData {
   source: string;
   target: string;

frontend/src/components/FriendshipNetwork.tsx

@@ -32,37 +32,23 @@ import {
 
 // Import custom UI components
 import {
-  Button, Card, CardBody, ConfirmDialog, EmptyState, FormField, Modal, NetworkStats, Toast, ToastItem, Tooltip,
+  Button,
+  Card,
+  CardBody,
+  ConfirmDialog,
+  EmptyState,
+  FormField,
+  Modal,
+  NetworkStats,
+  Toast,
+  ToastItem,
+  Tooltip,
 } from './FriendshipNetworkComponents';
 
 // Import visible canvas graph component
 import CanvasGraph from './CanvasGraph';
-import { RELATIONSHIP_LABELS, RELATIONSHIP_TYPES } from '../api/relationships';
-
-interface PersonNode {
-  _id: string;
-  firstName: string;
-  lastName: string;
-  birthday?: Date | string | null;
-  notes?: string;
-  position?: {
-    x: number; y: number;
-  };
-}
-// Type for form errors
-interface FormErrors {
-  [key: string]: string;
-}
-
-// Graph appearance constants
-const RELATIONSHIP_COLORS = {
-  freund: '#60A5FA', // Light blue
-  partner: '#F472B6', // Pink
-  familie: '#34D399', // Green
-  arbeitskolleg: '#FBBF24', // Yellow
-  custom: '#9CA3AF', // Gray
-};
-
+import { RELATIONSHIP_COLORS, RELATIONSHIP_LABELS, RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+import { FormErrors, PersonNode } from '../interfaces/IPersonNode';
 
 
 // Main FriendshipNetwork component

frontend/src/hooks/useFriendshipNetwork.ts

@@ -3,10 +3,11 @@ import { addPerson, getPeople, Person, removePerson, updatePerson } from '../api
 import {
   addRelationship,
   getRelationships,
-  Relationship, RELATIONSHIP_TYPES,
   removeRelationship,
   updateRelationship,
 } from '../api/relationships';
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+import { Relationship } from '../interfaces/IRelationship';
 
 interface PersonNode extends Person {
   // Additional properties needed for the visualization

frontend/src/interfaces/IPersonNode.tsx

@@ -0,0 +1,15 @@
+export interface PersonNode {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  birthday?: Date | string | null;
+  notes?: string;
+  position?: {
+    x: number; y: number;
+  };
+}
+
+// Type for form errors
+export interface FormErrors {
+  [key: string]: string;
+}

frontend/src/interfaces/IRelationship.ts

@@ -0,0 +1,13 @@
+// Types
+import { RELATIONSHIP_TYPES } from '../types/RelationShipTypes';
+
+export interface Relationship {
+  _id: string;
+  source: string;
+  target: string;
+  type: RELATIONSHIP_TYPES;
+  customType?: string;
+  network: string;
+  createdAt: string;
+  updatedAt: string;
+}

frontend/src/types/RelationShipTypes.ts

@@ -0,0 +1,11 @@
+export type RELATIONSHIP_TYPES = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
+export const RELATIONSHIP_LABELS = {
+  freund: 'Friend', partner: 'Partner', familie: 'Family', arbeitskolleg: 'Colleague', custom: 'Custom',
+}; // Graph appearance constants
+export const RELATIONSHIP_COLORS = {
+  freund: '#60A5FA', // Light blue
+  partner: '#F472B6', // Pink
+  familie: '#34D399', // Green
+  arbeitskolleg: '#FBBF24', // Yellow
+  custom: '#9CA3AF', // Gray
+};