From 0333d37aaee5fbd42a3147a3833b651e2cd03258 Mon Sep 17 00:00:00 2001
From: Tobias Hopp <tobi@gaminggeneration.de>
Date: Wed, 16 Apr 2025 13:59:15 +0200
Subject: [PATCH] Refactor to interfaces and type classes

Took 5 minutes
---
 frontend/src/api/relationships.ts             | 20 +---------
 frontend/src/components/FriendshipNetwork.tsx | 40 ++++++-------------
 frontend/src/hooks/useFriendshipNetwork.ts    |  3 +-
 frontend/src/interfaces/IPersonNode.tsx       | 15 +++++++
 frontend/src/interfaces/IRelationship.ts      | 13 ++++++
 frontend/src/types/RelationShipTypes.ts       | 11 +++++
 6 files changed, 56 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/interfaces/IPersonNode.tsx
 create mode 100644 frontend/src/interfaces/IRelationship.ts
 create mode 100644 frontend/src/types/RelationShipTypes.ts

diff --git a/frontend/src/api/relationships.ts b/frontend/src/api/relationships.ts
index 34ac673..6ec142a 100644
--- a/frontend/src/api/relationships.ts
+++ b/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;
diff --git a/frontend/src/components/FriendshipNetwork.tsx b/frontend/src/components/FriendshipNetwork.tsx
index e67b05f..5bce85c 100644
--- a/frontend/src/components/FriendshipNetwork.tsx
+++ b/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
diff --git a/frontend/src/hooks/useFriendshipNetwork.ts b/frontend/src/hooks/useFriendshipNetwork.ts
index 843bf26..e022ebf 100644
--- a/frontend/src/hooks/useFriendshipNetwork.ts
+++ b/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
diff --git a/frontend/src/interfaces/IPersonNode.tsx b/frontend/src/interfaces/IPersonNode.tsx
new file mode 100644
index 0000000..9b0b330
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/interfaces/IRelationship.ts b/frontend/src/interfaces/IRelationship.ts
new file mode 100644
index 0000000..e78918c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/types/RelationShipTypes.ts b/frontend/src/types/RelationShipTypes.ts
new file mode 100644
index 0000000..5f087e2
--- /dev/null
+++ b/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
+};
\ No newline at end of file