TobiasH/relnet
1
0
Fork 0
mirror of https://github.com/philipredstone/relnet.git synced 2025-07-08 22:56:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Tobias Hopp
2025-04-15 13:53:32 +02:00
commit 845bfb856e
42 changed files with 6296 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relnet</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

31
frontend/package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"axios": "^1.8.4",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router-dom": "^7.5.0"
},
"devDependencies": {
"@types/axios": "^0.14.4",
"@types/node": "^22.14.1",
"@types/react": "^19.1.2",
"@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react": "^4.4.0",
"ts-node": "^10.9.2",
"typescript": "^5.8.3",
"vite": "^6.2.6",
"webpack": "^5.99.5",
"webpack-cli": "^6.0.1"
}
}

67
frontend/src/App.tsx Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './context/AuthContext';
import { NetworkProvider } from './context/NetworkContext';
import Login from './components/auth/Login';
import Register from './components/auth/Register';
import NetworkList from './components/networks/NetworkList';
import FriendshipNetwork from './components/FriendshipNetwork'; // Your existing component
import Header from './components/layout/Header';
// Protected route component
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { user, loading } = useAuth();
if (loading) {
return <div className="flex justify-center items-center h-screen">Loading...</div>;
}
if (!user) {
return <Navigate to="/login" />;
}
return <>{children}</>;
};
const App: React.FC = () => {
return (
<AuthProvider>
<NetworkProvider>
<Router>
<div className="flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route
path="/networks"
element={
<ProtectedRoute>
<NetworkList />
</ProtectedRoute>
}
/>
<Route
path="/networks/:id"
element={
<ProtectedRoute>
<FriendshipNetwork />
</ProtectedRoute>
}
/>
<Route path="/" element={<Navigate to="/networks" />} />
<Route path="*" element={<Navigate to="/networks" />} />
</Routes>
</main>
</div>
</Router>
</NetworkProvider>
</AuthProvider>
);
};
export default App;

56
frontend/src/api/auth.ts Normal file
View File

@ -0,0 +1,56 @@
import axios from 'axios';
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
// Configure axios
axios.defaults.withCredentials = true;
// Types
export interface RegisterData {
username: string;
email: string;
password: string;
}
export interface LoginData {
email: string;
password: string;
}
export interface User {
id: string;
username: string;
email: string;
}
export interface AuthResponse {
success: boolean;
user: User;
}
// Register user
export const register = async (data: RegisterData): Promise<User> => {
const response = await axios.post<AuthResponse>(`${API_URL}/auth/register`, data);
return response.data.user;
};
// Login user
export const login = async (data: LoginData): Promise<User> => {
const response = await axios.post<AuthResponse>(`${API_URL}/auth/login`, data);
return response.data.user;
};
// Logout user
export const logout = async (): Promise<void> => {
await axios.post(`${API_URL}/auth/logout`);
};
// Get current user
export const getCurrentUser = async (): Promise<User | null> => {
try {
const response = await axios.get<AuthResponse>(`${API_URL}/auth/me`);
return response.data.user;
} catch (error) {
return null;
}
};

55
frontend/src/api/network.ts Normal file
View File

@ -0,0 +1,55 @@
import axios from 'axios';
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
// Types
export interface Network {
_id: string;
name: string;
description?: string;
owner: string;
isPublic: boolean;
createdAt: string;
updatedAt: string;
}
export interface CreateNetworkData {
name: string;
description?: string;
isPublic?: boolean;
}
export interface UpdateNetworkData {
name?: string;
description?: string;
isPublic?: boolean;
}
// Get all networks for current user
export const getUserNetworks = async (): Promise<Network[]> => {
const response = await axios.get<{ success: boolean; data: Network[] }>(`${API_URL}/networks`);
return response.data.data;
};
// Create a new network
export const createNetwork = async (data: CreateNetworkData): Promise<Network> => {
const response = await axios.post<{ success: boolean; data: Network }>(`${API_URL}/networks`, data);
return response.data.data;
};
// Get a specific network
export const getNetwork = async (id: string): Promise<Network> => {
const response = await axios.get<{ success: boolean; data: Network }>(`${API_URL}/networks/${id}`);
return response.data.data;
};
// Update a network
export const updateNetwork = async (id: string, data: UpdateNetworkData): Promise<Network> => {
const response = await axios.put<{ success: boolean; data: Network }>(`${API_URL}/networks/${id}`, data);
return response.data.data;
};
// Delete a network
export const deleteNetwork = async (id: string): Promise<void> => {
await axios.delete(`${API_URL}/networks/${id}`);
};

73
frontend/src/api/people.ts Normal file
View File

@ -0,0 +1,73 @@
import axios from 'axios';
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
// Types
export interface Person {
_id: string;
firstName: string;
lastName: string;
birthday?: string;
network: string;
position: {
x: number;
y: number;
};
createdAt: string;
updatedAt: string;
}
export interface CreatePersonData {
firstName: string;
lastName: string;
birthday?: string;
position?: {
x: number;
y: number;
};
}
export interface UpdatePersonData {
firstName?: string;
lastName?: string;
birthday?: string | null;
position?: {
x: number;
y: number;
};
}
// Get all people in a network
export const getPeople = async (networkId: string): Promise<Person[]> => {
const response = await axios.get<{ success: boolean; data: Person[] }>(
`${API_URL}/networks/${networkId}/people`
);
return response.data.data;
};
// Add a person to the network
export const addPerson = async (networkId: string, data: CreatePersonData): Promise<Person> => {
const response = await axios.post<{ success: boolean; data: Person }>(
`${API_URL}/networks/${networkId}/people`,
data
);
return response.data.data;
};
// Update a person
export const updatePerson = async (
networkId: string,
personId: string,
data: UpdatePersonData
): Promise<Person> => {
const response = await axios.put<{ success: boolean; data: Person }>(
`${API_URL}/networks/${networkId}/people/${personId}`,
data
);
return response.data.data;
};
// Remove a person from the network
export const removePerson = async (networkId: string, personId: string): Promise<void> => {
await axios.delete(`${API_URL}/networks/${networkId}/people/${personId}`);
};

65
frontend/src/api/relationships.ts Normal file
View File

@ -0,0 +1,65 @@
import axios from 'axios';
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
// Types
export interface Relationship {
_id: string;
source: string;
target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
customType?: string;
network: string;
createdAt: string;
updatedAt: string;
}
export interface CreateRelationshipData {
source: string;
target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
customType?: string;
}
export interface UpdateRelationshipData {
type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
customType?: string;
}
// Get all relationships in a network
export const getRelationships = async (networkId: string): Promise<Relationship[]> => {
const response = await axios.get<{ success: boolean; data: Relationship[] }>(
`${API_URL}/networks/${networkId}/relationships`
);
return response.data.data;
};
// Add a relationship to the network
export const addRelationship = async (
networkId: string,
data: CreateRelationshipData
): Promise<Relationship> => {
const response = await axios.post<{ success: boolean; data: Relationship }>(
`${API_URL}/networks/${networkId}/relationships`,
data
);
return response.data.data;
};
// Update a relationship
export const updateRelationship = async (
networkId: string,
relationshipId: string,
data: UpdateRelationshipData
): Promise<Relationship> => {
const response = await axios.put<{ success: boolean; data: Relationship }>(
`${API_URL}/networks/${networkId}/relationships/${relationshipId}`,
data
);
return response.data.data;
};
// Remove a relationship
export const removeRelationship = async (networkId: string, relationshipId: string): Promise<void> => {
await axios.delete(`${API_URL}/networks/${networkId}/relationships/${relationshipId}`);
};

771
frontend/src/components/FriendshipNetwork.tsx Normal file
View File

@ -0,0 +1,771 @@
import React, { useState, useRef, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useFriendshipNetwork } from '../hooks/useFriendshipNetwork';
import { useNetworks } from '../context/NetworkContext';
const FriendshipNetwork: React.FC = () => {
const { id } = useParams<{ id: string }>();
const { networks } = useNetworks();
const navigate = useNavigate();
const {
people,
relationships,
loading,
error,
createPerson,
updatePerson,
deletePerson,
createRelationship,
updateRelationship,
deleteRelationship
} = useFriendshipNetwork(id || null);
// Local state for the UI
const [selectedNode, setSelectedNode] = useState<string | null>(null);
const [popupInfo, setPopupInfo] = useState<any | null>(null);
const [newPerson, setNewPerson] = useState({
firstName: '',
lastName: '',
birthday: ''
});
const [newRelationship, setNewRelationship] = useState({
source: '',
targets: [] as string[],
type: 'freund',
customType: ''
});
const svgRef = useRef<SVGSVGElement>(null);
const nodeRefs = useRef<{ [key: string]: SVGGElement | null }>({});
const [dragging, setDragging] = useState<string | null>(null);
const [dragStartPos, setDragStartPos] = useState({ x: 0, y: 0 });
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
const [showOverrideModal, setShowOverrideModal] = useState(false);
const [overrideRelationship, setOverrideRelationship] = useState<any | null>(null);
// Get current network info
const currentNetwork = networks.find(network => network._id === id);
// Redirect if network not found
useEffect(() => {
if (!loading && !currentNetwork && networks.length > 0) {
navigate('/networks');
}
}, [currentNetwork, networks, loading, navigate]);
// Add a new person to the network
const handleAddPerson = async () => {
if (newPerson.firstName.trim() === '' || newPerson.lastName.trim() === '') {
alert('Please enter both first and last name');
return;
}
try {
await createPerson({
firstName: newPerson.firstName.trim(),
lastName: newPerson.lastName.trim(),
birthday: newPerson.birthday || undefined,
position: {
x: 100 + Math.random() * 400,
y: 100 + Math.random() * 300
}
});
setNewPerson({
firstName: '',
lastName: '',
birthday: ''
});
} catch (error) {
console.error('Error adding person:', error);
alert('Failed to add person.');
}
};
// Add new relationships between source person and multiple target people
const handleAddRelationship = async () => {
const { source, targets, type, customType } = newRelationship;
if (source === '' || targets.length === 0) {
alert('Please select source and at least one target person');
return;
}
const actualType = type === 'custom' ? customType.trim() : type;
if (type === 'custom' && customType.trim() === '') {
alert('Please enter a custom relationship type');
return;
}
// Check if any relationships already exist
const existingRelationships: any[] = [];
targets.forEach(target => {
if (source !== target) {
const existingEdge = relationships.find(edge =>
(edge.source === source && edge.target === target) ||
(edge.source === target && edge.target === source)
);
if (existingEdge) {
existingRelationships.push({
source,
target,
existingType: existingEdge.type,
newType: actualType,
edgeId: existingEdge.id
});
}
}
});
if (existingRelationships.length > 0) {
// Show override modal
setOverrideRelationship({
existingRelationships,
newRelationships: targets.filter(target =>
source !== target && !existingRelationships.some(rel => rel.target === target)
).map(target => ({ source, target, type: actualType }))
});
setShowOverrideModal(true);
return;
}
// Process each target for new relationships
const addPromises = targets.map(target => {
if (source !== target) {
return createRelationship({
source,
target,
type: type as any,
customType: type === 'custom' ? customType : undefined
});
}
return Promise.resolve();
}).filter(Boolean);
if (addPromises.length === 0) {
alert('No valid relationships to add.');
return;
}
try {
await Promise.all(addPromises);
setNewRelationship({ source: '', targets: [], type: 'freund', customType: '' });
} catch (error) {
console.error('Error adding relationships:', error);
alert('Failed to add one or more relationships.');
}
};
// Handle confirming relationship overrides
const handleConfirmOverride = async () => {
if (!overrideRelationship) return;
const { existingRelationships, newRelationships } = overrideRelationship;
try {
// Remove existing relationships that will be overridden
await Promise.all(existingRelationships.map(rel => deleteRelationship(rel.edgeId)));
// Add new overridden relationships
await Promise.all(existingRelationships.map(rel =>
createRelationship({
source: rel.source,
target: rel.target,
type: rel.newType as any,
customType: rel.newType === 'custom' ? rel.customType : undefined
})
));
// Add completely new relationships
await Promise.all(newRelationships.map(rel =>
createRelationship({
source: rel.source,
target: rel.target,
type: rel.type as any,
customType: rel.type === 'custom' ? rel.customType : undefined
})
));
setShowOverrideModal(false);
setOverrideRelationship(null);
setNewRelationship({ source: '', targets: [], type: 'freund', customType: '' });
} catch (error) {
console.error('Error overriding relationships:', error);
alert('Failed to override relationships.');
}
};
// Handle canceling relationship overrides
const handleCancelOverride = async () => {
// If there are new relationships that don't need overrides, add those
if (overrideRelationship && overrideRelationship.newRelationships.length > 0) {
try {
await Promise.all(overrideRelationship.newRelationships.map(rel =>
createRelationship({
source: rel.source,
target: rel.target,
type: rel.type as any,
customType: rel.type === 'custom' ? rel.customType : undefined
})
));
} catch (error) {
console.error('Error adding new relationships:', error);
}
}
setShowOverrideModal(false);
setOverrideRelationship(null);
};
// Handle multiple selections in the targets dropdown
const handleTargetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const selectedOptions = Array.from(e.target.selectedOptions, option => option.value);
setNewRelationship({...newRelationship, targets: selectedOptions});
};
// Handle node drag start
const handleMouseDown = (e: React.MouseEvent, id: string) => {
if (svgRef.current) {
const node = people.find(n => n.id === id);
if (!node) return;
setDragging(id);
setDragStartPos({ ...node.position });
setMousePos({ x: e.clientX, y: e.clientY });
e.stopPropagation();
e.preventDefault();
}
};
// Handle node dragging
const handleMouseMove = (e: React.MouseEvent) => {
if (dragging && svgRef.current) {
const dx = e.clientX - mousePos.x;
const dy = e.clientY - mousePos.y;
const newX = dragStartPos.x + dx;
const newY = dragStartPos.y + dy;
// Update node position in the UI immediately
const updatedPeople = people.map(node =>
node.id === dragging
? {
...node,
position: { x: newX, y: newY }
}
: node
);
// We don't actually update the state here for performance reasons
// Instead, we update the DOM directly
const draggedNode = nodeRefs.current[dragging];
if (draggedNode) {
draggedNode.setAttribute('transform', `translate(${newX}, ${newY})`);
}
}
};
// Handle node drag end
const handleMouseUp = async () => {
if (dragging) {
const node = people.find(n => n.id === dragging);
if (node) {
// Get the final position from the DOM
const draggedNode = nodeRefs.current[dragging];
if (draggedNode) {
const transform = draggedNode.getAttribute('transform');
if (transform) {
const match = transform.match(/translate\(([^,]+),\s*([^)]+)\)/);
if (match) {
const x = parseFloat(match[1]);
const y = parseFloat(match[2]);
// Save the new position to the server
try {
await updatePerson(dragging, { position: { x, y } });
} catch (error) {
console.error('Error updating position:', error);
}
}
}
}
}
setDragging(null);
}
};
// Delete a node and its associated edges
const handleDeleteNode = async (id: string) => {
if (window.confirm('Are you sure you want to delete this person? All their relationships will also be deleted.')) {
try {
await deletePerson(id);
setSelectedNode(null);
setPopupInfo(null);
} catch (error) {
console.error('Error deleting person:', error);
alert('Failed to delete person.');
}
}
};
// Get relationship type label
const getRelationshipLabel = (type: string) => {
switch(type) {
case 'freund': return 'Freund/in';
case 'partner': return 'Partner/in';
case 'familie': return 'Familie/Verwandschaft';
case 'arbeitskolleg': return 'Arbeitskolleg/innen';
default: return type;
}
};
// Remove a relationship between two people
const handleRemoveRelationship = async (edgeId: string) => {
try {
await deleteRelationship(edgeId);
// Update popup info if it's open
if (popupInfo) {
const nodeId = popupInfo.node.id;
const nodeRelationships = relationships
.filter(edge => edge.id !== edgeId)
.filter(edge => edge.source === nodeId || edge.target === nodeId)
.map(edge => {
const otherId = edge.source === nodeId ? edge.target : edge.source;
const other = people.find(n => n.id === otherId);
return {
person: other ? `${other.firstName} ${other.lastName}` : otherId,
type: edge.type,
edgeId: edge.id
};
});
setPopupInfo({
...popupInfo,
relationships: nodeRelationships
});
}
} catch (error) {
console.error('Error removing relationship:', error);
alert('Failed to remove relationship.');
}
};
// Show popup with person details and relationships
const showPersonDetails = (nodeId: string) => {
const node = people.find(n => n.id === nodeId);
if (!node) return;
// Find all relationships
const nodeRelationships = relationships.filter(
edge => edge.source === nodeId || edge.target === nodeId
).map(edge => {
const otherId = edge.source === nodeId ? edge.target : edge.source;
const other = people.find(n => n.id === otherId);
return {
person: other ? `${other.firstName} ${other.lastName}` : otherId,
type: edge.type,
edgeId: edge.id
};
});
setPopupInfo({
node,
relationships: nodeRelationships,
position: { ...node.position }
});
};
// Close popup
const closePopup = () => {
setPopupInfo(null);
};
// Get abbreviated name for display in graph (first name + first letter of last name)
const getDisplayName = (node: any) => {
return `${node.firstName} ${node.lastName.charAt(0)}.`;
};
// Close popup when clicking outside
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (popupInfo &&
!(e.target as Element).closest('.popup') &&
!dragging) {
closePopup();
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [popupInfo, dragging]);
if (loading) {
return <div className="flex justify-center p-8">Loading network data...</div>;
}
if (error) {
return <div className="bg-red-100 border border-red-400 text-red-700 p-4 m-4 rounded">{error}</div>;
}
return (
<div className="flex h-screen bg-gray-100">
{/* Sidebar menu */}
<div className="w-64 bg-white p-4 border-r border-gray-200 overflow-y-auto">
<h2 className="text-xl font-bold mb-4">
{currentNetwork?.name || 'Friend Network'}
</h2>
{/* Add Person Form */}
<div className="mb-6">
<h3 className="text-lg font-semibold mb-2">Add Person</h3>
<div className="mb-2">
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
placeholder="First Name"
value={newPerson.firstName}
onChange={e => setNewPerson({...newPerson, firstName: e.target.value})}
/>
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
placeholder="Last Name"
value={newPerson.lastName}
onChange={e => setNewPerson({...newPerson, lastName: e.target.value})}
/>
<input
type="date"
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
placeholder="Birthday (Optional)"
value={newPerson.birthday}
onChange={e => setNewPerson({...newPerson, birthday: e.target.value})}
/>
<button
className="w-full bg-blue-500 text-white px-3 py-2 rounded"
onClick={handleAddPerson}
>
Add Person
</button>
</div>
</div>
{/* Add Relationship Form */}
<div className="mb-6">
<h3 className="text-lg font-semibold mb-2">Add Relationship</h3>
<div className="mb-2">
<select
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
value={newRelationship.source}
onChange={e => setNewRelationship({...newRelationship, source: e.target.value})}
>
<option value="">Select first person</option>
{people.map(node => (
<option key={`source-${node.id}`} value={node.id}>
{node.firstName} {node.lastName}
</option>
))}
</select>
<select
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
multiple
size={Math.min(people.length, 5)}
value={newRelationship.targets}
onChange={handleTargetChange}
>
{people.map(node => (
<option key={`target-${node.id}`} value={node.id}>
{node.firstName} {node.lastName}
</option>
))}
</select>
<p className="text-xs text-gray-500 mb-2">Hold Ctrl/Cmd to select multiple people</p>
<select
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
value={newRelationship.type}
onChange={e => setNewRelationship({...newRelationship, type: e.target.value})}
>
<option value="freund">Freund/in</option>
<option value="partner">Partner/in</option>
<option value="familie">Familie/Verwandschaft</option>
<option value="arbeitskolleg">Arbeitskolleg/innen</option>
<option value="custom">Custom...</option>
</select>
{newRelationship.type === 'custom' && (
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded mb-2"
placeholder="Enter custom relationship type"
value={newRelationship.customType}
onChange={e => setNewRelationship({...newRelationship, customType: e.target.value})}
/>
)}
<button
className="w-full bg-green-500 text-white px-3 py-2 rounded"
onClick={handleAddRelationship}
>
Add Relationship
</button>
</div>
</div>
{/* People List */}
<div>
<h3 className="text-lg font-semibold mb-2">People ({people.length})</h3>
<ul className="divide-y divide-gray-200">
{people.map(node => (
<li key={node.id} className="py-2 flex justify-between items-center">
<span>{node.firstName} {node.lastName}</span>
<button
className="text-red-500 hover:text-red-700"
onClick={() => handleDeleteNode(node.id)}
>
Delete
</button>
</li>
))}
</ul>
</div>
{/* Relationships List */}
<div className="mt-6">
<h3 className="text-lg font-semibold mb-2">All Relationships ({relationships.length})</h3>
{relationships.length === 0 ? (
<p className="text-sm text-gray-500">No relationships yet</p>
) : (
<ul className="divide-y divide-gray-200 max-h-40 overflow-y-auto text-sm">
{relationships.map(edge => {
const source = people.find(n => n.id === edge.source);
const target = people.find(n => n.id === edge.target);
if (!source || !target) return null;
return (
<li key={edge.id} className="py-2">
<div className="flex justify-between items-center">
<span>
{source.firstName} {source.lastName.charAt(0)}. ↔ {target.firstName} {target.lastName.charAt(0)}.
</span>
<div className="flex items-center">
<span className="text-xs text-gray-600 mr-2">{getRelationshipLabel(edge.type)}</span>
<button
className="text-red-500 hover:text-red-700"
onClick={() => handleRemoveRelationship(edge.id)}
>
✕
</button>
</div>
</div>
</li>
);
})}
</ul>
)}
</div>
</div>
{/* Visualization Area */}
<div className="flex-1 p-4 relative">
<svg
ref={svgRef}
className="w-full h-full bg-white border border-gray-200 rounded"
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp}
>
{/* Edges (Relationships) */}
{relationships.map(edge => {
const source = people.find(n => n.id === edge.source);
const target = people.find(n => n.id === edge.target);
if (!source || !target) return null;
// Determine the line color based on relationship type
let strokeColor = '#9CA3AF'; // Default gray
if (edge.type === 'freund') strokeColor = '#3B82F6'; // Blue
if (edge.type === 'partner') strokeColor = '#EC4899'; // Pink
if (edge.type === 'familie') strokeColor = '#10B981'; // Green
if (edge.type === 'arbeitskolleg') strokeColor = '#F59E0B'; // Yellow
return (
<g key={edge.id}>
<line
x1={source.position.x}
y1={source.position.y}
x2={target.position.x}
y2={target.position.y}
stroke={strokeColor}
strokeWidth="2"
/>
<text
x={(source.position.x + target.position.x) / 2}
y={(source.position.y + target.position.y) / 2 - 10}
textAnchor="middle"
fill={strokeColor}
fontSize="12"
className="select-none"
>
{getRelationshipLabel(edge.type)}
</text>
</g>
);
})}
{/* Nodes (People) */}
{people.map(node => (
<g
key={node.id}
transform={`translate(${node.position.x}, ${node.position.y})`}
onMouseDown={e => handleMouseDown(e, node.id)}
ref={el => { nodeRefs.current[node.id] = el; }}
className="cursor-grab"
>
<circle
r="30"
fill={selectedNode === node.id ? '#93C5FD' : '#DBEAFE'}
stroke="#3B82F6"
strokeWidth="2"
onClick={() => showPersonDetails(node.id)}
/>
<text
textAnchor="middle"
dy=".3em"
fontSize="12"
fontWeight="bold"
className="select-none"
>
{getDisplayName(node)}
</text>
</g>
))}
</svg>
{/* Person Details Popup */}
{popupInfo && (
<div
className="popup absolute bg-white border border-gray-300 rounded shadow-lg p-4 z-10 w-64"
style={{
left: popupInfo.position.x > (svgRef.current?.clientWidth || 0) / 2
? popupInfo.position.x - 260 : popupInfo.position.x + 40,
top: popupInfo.position.y > (svgRef.current?.clientHeight || 0) / 2
? popupInfo.position.y - 200 : popupInfo.position.y,
}}
>
<div className="flex justify-between items-center mb-2">
<h3 className="text-lg font-bold">Person Details</h3>
<button
className="text-gray-500 hover:text-gray-700"
onClick={closePopup}
>
✕
</button>
</div>
<div className="mb-4">
<p className="font-semibold">Name: {popupInfo.node.firstName} {popupInfo.node.lastName}</p>
{popupInfo.node.birthday && (
<p className="text-sm text-gray-600">Birthday: {new Date(popupInfo.node.birthday).toLocaleDateString()}</p>
)}
</div>
<div>
<h4 className="font-semibold mb-2">Relationships:</h4>
{popupInfo.relationships.length === 0 ? (
<p className="text-sm text-gray-500">No relationships yet</p>
) : (
<ul className="text-sm">
{popupInfo.relationships.map((rel: any, index: number) => (
<li key={index} className="mb-2 pb-1 border-b border-gray-100">
<div className="flex justify-between mb-1">
<span>{rel.person}</span>
<span className="text-gray-600">{getRelationshipLabel(rel.type)}</span>
</div>
<div className="flex justify-end">
<button
className="text-xs text-red-500 hover:text-red-700"
onClick={() => handleRemoveRelationship(rel.edgeId)}
>
Remove Relationship
</button>
</div>
</li>
))}
</ul>
)}
</div>
</div>
)}
{/* Override Confirmation Modal */}
{showOverrideModal && overrideRelationship && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-20">
<div className="bg-white rounded-lg p-6 max-w-md w-full">
<h3 className="text-xl font-bold mb-4">Existing Relationship(s)</h3>
<p className="mb-4">
{overrideRelationship.existingRelationships.length === 1
? "There is already a relationship between these people:"
: "There are already relationships between these people:"}
</p>
<ul className="mb-4 text-sm border rounded divide-y">
{overrideRelationship.existingRelationships.map((rel: any, index: number) => {
const source = people.find(n => n.id === rel.source);
const target = people.find(n => n.id === rel.target);
if (!source || !target) return null;
return (
<li key={index} className="p-2">
<div className="flex justify-between items-center">
<span>
{source.firstName} {source.lastName} ↔ {target.firstName} {target.lastName}
</span>
</div>
<div className="flex justify-between text-xs mt-1">
<span className="text-gray-600">
Current: {getRelationshipLabel(rel.existingType)}
</span>
<span className="text-blue-600">
New: {getRelationshipLabel(rel.newType)}
</span>
</div>
</li>
);
})}
</ul>
<p className="mb-4">Do you want to override the existing relationship(s)?</p>
<div className="flex justify-end space-x-2">
<button
className="px-4 py-2 border border-gray-300 rounded"
onClick={handleCancelOverride}
>
Cancel
</button>
<button
className="px-4 py-2 bg-blue-500 text-white rounded"
onClick={handleConfirmOverride}
>
Override
</button>
</div>
</div>
</div>
)}
{/* Instructions */}
<div className="absolute bottom-4 left-4 right-4 bg-white border border-gray-200 rounded p-2 text-sm">
<p><strong>Tip:</strong> Drag people to arrange them. Click on a person to view their details and relationships.</p>
</div>
</div>
</div>
);
};
export default FriendshipNetwork;

89
frontend/src/components/auth/Login.tsx Normal file
View File

@ -0,0 +1,89 @@
import React, { useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import { useNavigate } from 'react-router-dom';
const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
setLoading(true);
try {
await login({ email, password });
navigate('/networks');
} catch (err: any) {
setError(err.response?.data?.message || 'Login failed. Please check your credentials.');
} finally {
setLoading(false);
}
};
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
<h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{error}
</div>
)}
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-6">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
Password
</label>
<input
id="password"
type="password"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<div className="flex items-center justify-between">
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
disabled={loading}
>
{loading ? 'Logging in...' : 'Login'}
</button>
<a
href="/register"
className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
>
Register
</a>
</div>
</form>
</div>
</div>
);
};
export default Login;

131
frontend/src/components/auth/Register.tsx Normal file
View File

@ -0,0 +1,131 @@
import React, { useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import { useNavigate } from 'react-router-dom';
const Register: React.FC = () => {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const { register } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
// Basic validation
if (password !== confirmPassword) {
setError('Passwords do not match');
return;
}
if (password.length < 6) {
setError('Password must be at least 6 characters');
return;
}
setLoading(true);
try {
await register({ username, email, password });
navigate('/networks');
} catch (err: any) {
setError(err.response?.data?.message || 'Registration failed. Please try again.');
} finally {
setLoading(false);
}
};
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
<h2 className="text-2xl font-bold mb-6 text-center">Register</h2>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{error}
</div>
)}
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
Username
</label>
<input
id="username"
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
Password
</label>
<input
id="password"
type="password"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<div className="mb-6">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="confirmPassword">
Confirm Password
</label>
<input
id="confirmPassword"
type="password"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</div>
<div className="flex items-center justify-between">
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
disabled={loading}
>
{loading ? 'Registering...' : 'Register'}
</button>
<a
href="/login"
className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
>
Login
</a>
</div>
</form>
</div>
</div>
);
};
export default Register;

58
frontend/src/components/layout/Header.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import {Link, useNavigate} from 'react-router-dom';
import {useAuth} from '../../context/AuthContext';
const Header: React.FC = () => {
const {user, logout} = useAuth();
const navigate = useNavigate();
const handleLogout = async () => {
try {
await logout();
navigate('/login');
} catch (error) {
console.error('Logout failed:', error);
}
};
return (
<header className="bg-blue-600 text-white shadow-md">
<div className="container mx-auto py-4 px-6 flex justify-between items-center">
<Link to="/" className="text-xl font-bold">
Friendship Network
</Link>
<nav>
{user ? (
<div className="flex items-center space-x-4">
<span>Hello, {user.username}</span>
<Link to="/networks" className="hover:underline">
My Networks
</Link>
<button
onClick={handleLogout}
className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
>
Logout
</button>
</div>
) : (
<div className="space-x-4">
<Link to="/login" className="hover:underline">
Login
</Link>
<Link
to="/register"
className="bg-white text-blue-600 hover:bg-gray-100 font-bold py-1 px-3 rounded"
>
Register
</Link>
</div>
)}
</nav>
</div>
</header>
);
};
export default Header;

195
frontend/src/components/networks/NetworkList.tsx Normal file
View File

@ -0,0 +1,195 @@
import React, { useState } from 'react';
import { useNetworks } from '../../context/NetworkContext';
import { useNavigate } from 'react-router-dom';
const NetworkList: React.FC = () => {
const { networks, loading, error, createNetwork, deleteNetwork } = useNetworks();
const [showCreateForm, setShowCreateForm] = useState(false);
const [newNetworkName, setNewNetworkName] = useState('');
const [newNetworkDescription, setNewNetworkDescription] = useState('');
const [isPublic, setIsPublic] = useState(false);
const [formError, setFormError] = useState<string | null>(null);
const [createLoading, setCreateLoading] = useState(false);
const navigate = useNavigate();
const handleCreateNetwork = async (e: React.FormEvent) => {
e.preventDefault();
setFormError(null);
if (!newNetworkName.trim()) {
setFormError('Network name is required');
return;
}
setCreateLoading(true);
try {
const network = await createNetwork({
name: newNetworkName.trim(),
description: newNetworkDescription.trim() || undefined,
isPublic
});
// Reset form
setNewNetworkName('');
setNewNetworkDescription('');
setIsPublic(false);
setShowCreateForm(false);
// Navigate to the new network
navigate(`/networks/${network._id}`);
} catch (err: any) {
setFormError(err.response?.data?.message || 'Failed to create network');
} finally {
setCreateLoading(false);
}
};
const handleDeleteNetwork = async (id: string) => {
if (window.confirm('Are you sure you want to delete this network? This action cannot be undone.')) {
try {
await deleteNetwork(id);
} catch (err: any) {
alert(err.response?.data?.message || 'Failed to delete network');
}
}
};
if (loading) {
return <div className="flex justify-center p-8">Loading networks...</div>;
}
return (
<div className="container mx-auto p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold">My Networks</h1>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setShowCreateForm(!showCreateForm)}
>
{showCreateForm ? 'Cancel' : 'Create New Network'}
</button>
</div>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{error}
</div>
)}
{/* Create Network Form */}
{showCreateForm && (
<div className="bg-gray-100 p-4 rounded-lg mb-6">
<h2 className="text-xl font-semibold mb-4">Create New Network</h2>
{formError && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{formError}
</div>
)}
<form onSubmit={handleCreateNetwork}>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
Network Name *
</label>
<input
id="name"
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={newNetworkName}
onChange={(e) => setNewNetworkName(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="description">
Description (Optional)
</label>
<textarea
id="description"
className="w-full px-3 py-2 border border-gray-300 rounded"
value={newNetworkDescription}
onChange={(e) => setNewNetworkDescription(e.target.value)}
rows={3}
/>
</div>
<div className="mb-4">
<label className="flex items-center">
<input
type="checkbox"
className="mr-2"
checked={isPublic}
onChange={(e) => setIsPublic(e.target.checked)}
/>
<span className="text-gray-700 text-sm font-bold">Make this network public</span>
</label>
</div>
<button
type="submit"
className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
disabled={createLoading}
>
{createLoading ? 'Creating...' : 'Create Network'}
</button>
</form>
</div>
)}
{/* Networks List */}
{networks.length === 0 ? (
<div className="bg-white p-8 rounded-lg text-center">
<p className="text-gray-600 mb-4">You don't have any networks yet.</p>
{!showCreateForm && (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setShowCreateForm(true)}
>
Create Your First Network
</button>
)}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{networks.map((network) => (
<div key={network._id} className="bg-white rounded-lg shadow-md overflow-hidden">
<div className="p-4">
<h2 className="text-xl font-bold mb-2">{network.name}</h2>
{network.description && (
<p className="text-gray-600 mb-4">{network.description}</p>
)}
<div className="flex items-center mb-4">
<span className={`px-2 py-1 rounded-full text-xs ${network.isPublic ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
{network.isPublic ? 'Public' : 'Private'}
</span>
<span className="text-xs text-gray-500 ml-2">
Created: {new Date(network.createdAt).toLocaleDateString()}
</span>
</div>
<div className="flex space-x-2">
<button
className="flex-1 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
onClick={() => navigate(`/networks/${network._id}`)}
>
View
</button>
<button
className="flex-1 bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded"
onClick={() => handleDeleteNetwork(network._id)}
>
Delete
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
};
export default NetworkList;

70
frontend/src/context/AuthContext.tsx Normal file
View File

@ -0,0 +1,70 @@
import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
import { User, getCurrentUser, login as apiLogin, register as apiRegister, logout as apiLogout, LoginData, RegisterData } from '../api/auth';
interface AuthContextProps {
user: User | null;
loading: boolean;
login: (data: LoginData) => Promise<void>;
register: (data: RegisterData) => Promise<void>;
logout: () => Promise<void>;
}
const AuthContext = createContext<AuthContextProps>({} as AuthContextProps);
export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadUser = async () => {
try {
const currentUser = await getCurrentUser();
setUser(currentUser);
} catch (error) {
console.error('Error loading user:', error);
} finally {
setLoading(false);
}
};
loadUser();
}, []);
const login = async (data: LoginData) => {
try {
const loggedInUser = await apiLogin(data);
setUser(loggedInUser);
} catch (error) {
console.error('Login error:', error);
throw error;
}
};
const register = async (data: RegisterData) => {
try {
const newUser = await apiRegister(data);
setUser(newUser);
} catch (error) {
console.error('Registration error:', error);
throw error;
}
};
const logout = async () => {
try {
await apiLogout();
setUser(null);
} catch (error) {
console.error('Logout error:', error);
throw error;
}
};
return (
<AuthContext.Provider value={{ user, loading, login, register, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);

110
frontend/src/context/NetworkContext.tsx Normal file
View File

@ -0,0 +1,110 @@
import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
import {
Network,
getUserNetworks,
createNetwork as apiCreateNetwork,
updateNetwork as apiUpdateNetwork,
deleteNetwork as apiDeleteNetwork,
CreateNetworkData,
UpdateNetworkData
} from '../api/network';
import { useAuth } from './AuthContext';
interface NetworkContextProps {
networks: Network[];
loading: boolean;
error: string | null;
createNetwork: (data: CreateNetworkData) => Promise<Network>;
updateNetwork: (id: string, data: UpdateNetworkData) => Promise<Network>;
deleteNetwork: (id: string) => Promise<void>;
refreshNetworks: () => Promise<void>;
}
const NetworkContext = createContext<NetworkContextProps>({} as NetworkContextProps);
export const NetworkProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [networks, setNetworks] = useState<Network[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { user } = useAuth();
const loadNetworks = async () => {
if (!user) {
setNetworks([]);
setLoading(false);
return;
}
try {
setLoading(true);
setError(null);
const fetchedNetworks = await getUserNetworks();
setNetworks(fetchedNetworks);
} catch (err: any) {
setError(err.message || 'Failed to load networks');
console.error('Error loading networks:', err);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadNetworks();
}, [user]);
const createNetwork = async (data: CreateNetworkData): Promise<Network> => {
try {
const newNetwork = await apiCreateNetwork(data);
setNetworks([...networks, newNetwork]);
return newNetwork;
} catch (err: any) {
setError(err.message || 'Failed to create network');
throw err;
}
};
const updateNetwork = async (id: string, data: UpdateNetworkData): Promise<Network> => {
try {
const updatedNetwork = await apiUpdateNetwork(id, data);
setNetworks(networks.map(network =>
network._id === id ? updatedNetwork : network
));
return updatedNetwork;
} catch (err: any) {
setError(err.message || 'Failed to update network');
throw err;
}
};
const deleteNetwork = async (id: string): Promise<void> => {
try {
await apiDeleteNetwork(id);
setNetworks(networks.filter(network => network._id !== id));
} catch (err: any) {
setError(err.message || 'Failed to delete network');
throw err;
}
};
const refreshNetworks = async (): Promise<void> => {
await loadNetworks();
};
return (
<NetworkContext.Provider
value={{
networks,
loading,
error,
createNetwork,
updateNetwork,
deleteNetwork,
refreshNetworks
}}
>
{children}
</NetworkContext.Provider>
);
};
export const useNetworks = () => useContext(NetworkContext);

210
frontend/src/hooks/useFriendshipNetwork.ts Normal file
View File

@ -0,0 +1,210 @@
import { useState, useEffect, useCallback } from 'react';
import { Person, getPeople, addPerson, updatePerson, removePerson } from '../api/people';
import { Relationship, getRelationships, addRelationship, updateRelationship, removeRelationship } from '../api/relationships';
interface PersonNode extends Person {
// Additional properties needed for the visualization
id: string; // Alias for _id to work with the visualization
}
interface RelationshipEdge extends Relationship {
// Additional properties needed for the visualization
id: string; // Alias for _id to work with the visualization
}
// Custom hook to manage friendship network data
export const useFriendshipNetwork = (networkId: string | null) => {
const [people, setPeople] = useState<PersonNode[]>([]);
const [relationships, setRelationships] = useState<RelationshipEdge[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Load network data
const loadNetworkData = useCallback(async () => {
if (!networkId) {
setPeople([]);
setRelationships([]);
setLoading(false);
return;
}
try {
setLoading(true);
setError(null);
// Fetch people and relationships in parallel
const [peopleData, relationshipsData] = await Promise.all([
getPeople(networkId),
getRelationships(networkId)
]);
// Transform to add the id property needed by the visualization
const peopleNodes: PersonNode[] = peopleData.map(person => ({
...person,
id: person._id
}));
const relationshipEdges: RelationshipEdge[] = relationshipsData.map(rel => ({
...rel,
id: rel._id
}));
setPeople(peopleNodes);
setRelationships(relationshipEdges);
} catch (err: any) {
setError(err.message || 'Failed to load network data');
console.error('Error loading network data:', err);
} finally {
setLoading(false);
}
}, [networkId]);
useEffect(() => {
loadNetworkData();
}, [loadNetworkData]);
// Add a new person
const createPerson = async (personData: {
firstName: string;
lastName: string;
birthday?: string;
position?: { x: number; y: number }
}): Promise<PersonNode> => {
if (!networkId) throw new Error('No network selected');
try {
const newPerson = await addPerson(networkId, personData);
const newPersonNode: PersonNode = { ...newPerson, id: newPerson._id };
setPeople([...people, newPersonNode]);
return newPersonNode;
} catch (err: any) {
setError(err.message || 'Failed to create person');
throw err;
}
};
// Update a person
const updatePersonData = async (
personId: string,
personData: {
firstName?: string;
lastName?: string;
birthday?: string | null;
position?: { x: number; y: number }
}
): Promise<PersonNode> => {
if (!networkId) throw new Error('No network selected');
try {
const updatedPerson = await updatePerson(networkId, personId, personData);
const updatedPersonNode: PersonNode = { ...updatedPerson, id: updatedPerson._id };
setPeople(people.map(person =>
person._id === personId ? updatedPersonNode : person
));
return updatedPersonNode;
} catch (err: any) {
setError(err.message || 'Failed to update person');
throw err;
}
};
// Remove a person
const deletePerson = async (personId: string): Promise<void> => {
if (!networkId) throw new Error('No network selected');
try {
await removePerson(networkId, personId);
// Remove the person
setPeople(people.filter(person => person._id !== personId));
// Remove all relationships involving this person
setRelationships(relationships.filter(
rel => rel.source !== personId && rel.target !== personId
));
} catch (err: any) {
setError(err.message || 'Failed to delete person');
throw err;
}
};
// Create a relationship
const createRelationship = async (relationshipData: {
source: string;
target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
customType?: string;
}): Promise<RelationshipEdge> => {
if (!networkId) throw new Error('No network selected');
try {
const newRelationship = await addRelationship(networkId, relationshipData);
const newRelationshipEdge: RelationshipEdge = { ...newRelationship, id: newRelationship._id };
setRelationships([...relationships, newRelationshipEdge]);
return newRelationshipEdge;
} catch (err: any) {
setError(err.message || 'Failed to create relationship');
throw err;
}
};
// Update a relationship
const updateRelationshipData = async (
relationshipId: string,
relationshipData: {
type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
customType?: string;
}
): Promise<RelationshipEdge> => {
if (!networkId) throw new Error('No network selected');
try {
const updatedRelationship = await updateRelationship(networkId, relationshipId, relationshipData);
const updatedRelationshipEdge: RelationshipEdge = { ...updatedRelationship, id: updatedRelationship._id };
setRelationships(relationships.map(rel =>
rel._id === relationshipId ? updatedRelationshipEdge : rel
));
return updatedRelationshipEdge;
} catch (err: any) {
setError(err.message || 'Failed to update relationship');
throw err;
}
};
// Remove a relationship
const deleteRelationship = async (relationshipId: string): Promise<void> => {
if (!networkId) throw new Error('No network selected');
try {
await removeRelationship(networkId, relationshipId);
setRelationships(relationships.filter(rel => rel._id !== relationshipId));
} catch (err: any) {
setError(err.message || 'Failed to delete relationship');
throw err;
}
};
// Refresh the network data
const refreshNetwork = async (): Promise<void> => {
await loadNetworkData();
};
return {
people,
relationships,
loading,
error,
createPerson,
updatePerson: updatePersonData,
deletePerson,
createRelationship,
updateRelationship: updateRelationshipData,
deleteRelationship,
refreshNetwork
};
};

17
frontend/src/main.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// Create root and render the App component into the HTML element with ID 'root'
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} else {
console.error('Root element not found');
}

113
frontend/tsconfig.json Normal file
View File

@ -0,0 +1,113 @@
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "preserve", /* Specify what JSX code is generated. */
// "libReplacement": true, /* Enable lib replacement. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
"rootDir": "./src", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "noUncheckedSideEffectImports": true, /* Check side effect imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
"noEmitOnError": false, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
// "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": false, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}

9
frontend/vite.config.js Normal file
View File

@ -0,0 +1,9 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
},
});

1716
frontend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff