TobiasH/relnet
1
0
Fork 0
mirror of https://github.com/philipredstone/relnet.git synced 2025-06-16 20:51:16 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Dockerfile Normal file
View File

@ -0,0 +1,8 @@
FROM node:18 as builder
WORKDIR /app
COPY package.json /app
RUN yarn

0
README.md Normal file
View File

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

44
package.json Normal file
View File

@ -0,0 +1,44 @@
{
"name": "relnet",
"version": "1.0.0",
"main": "dist/main.js",
"scripts": {
"start": "node dist/server.js",
"dev": "nodemon --exec ts-node src/server.ts",
"build": "tsc"
},
"repository": {
"type": "git",
"url": "git+https://github.com/philipredstone/relnet.git"
},
"author": "Tobias Hopp <tobstr02> & Philip Rothstein <philipredstone>",
"license": "ISC",
"bugs": {
"url": "https://github.com/philipredstone/relnet/issues"
},
"homepage": "https://github.com/philipredstone/relnet#readme",
"description": "Visualize your network among you and your friends",
"dependencies": {
"bcryptjs": "^3.0.2",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
"dotenv": "^16.5.0",
"express": "^5.1.0",
"express-validator": "^7.2.1",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.13.2"
},
"devDependencies": {
"@types/bcryptjs": "^3.0.0",
"@types/cookie-parser": "^1.4.8",
"@types/cors": "^2.8.17",
"@types/dotenv": "^8.2.3",
"@types/express": "^5.0.1",
"@types/jsonwebtoken": "^9.0.9",
"@types/mongoose": "^5.11.97",
"@types/node": "^22.14.1",
"nodemon": "^3.1.9",
"ts-node": "^10.9.2",
"typescript": "^5.8.3"
}
}

42
src/app.ts Normal file
View File

@ -0,0 +1,42 @@
import express, { Application } from 'express';
import cors from 'cors';
import cookieParser from 'cookie-parser';
import dotenv from 'dotenv';
import authRoutes from './routes/auth.routes';
import networkRoutes from './routes/network.routes';
import peopleRoutes from './routes/people.routes';
import relationshipRoutes from './routes/relationship.routes';
import path from "node:path";
dotenv.config();
const app: Application = express();
// Middleware
app.use(express.json());
app.use(cookieParser());
app.use(cors({
origin: process.env.CLIENT_URL || 'http://localhost:3000',
credentials: true
}));
// Routes
app.use('/api/auth', authRoutes);
app.use('/api/networks', networkRoutes);
app.use('/api/networks', peopleRoutes);
app.use('/api/networks', relationshipRoutes);
// Base route
/*app.get('/', (req, res) => {
res.send('Friendship Network API is running');
});*/
app.use(express.static(path.join(__dirname, '../frontend/dist/')));
app.use((req,res,next) => {
res.sendFile(path.join(__dirname, '..', 'frontend/dist/index.html'));
})
export default app;

18
src/config/db.ts Normal file
View File

@ -0,0 +1,18 @@
import mongoose from 'mongoose';
import dotenv from 'dotenv';
dotenv.config();
const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/friendship-network';
const connectDB = async (): Promise<void> => {
try {
await mongoose.connect(MONGODB_URI);
console.log('MongoDB connected successfully');
} catch (error) {
console.error('MongoDB connection error:', error);
process.exit(1);
}
};
export default connectDB;

166
src/controllers/auth.controller.ts Normal file
View File

@ -0,0 +1,166 @@
import { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import User, { IUser } from '../models/user.model';
import { UserRequest } from '../types/express';
import { validationResult } from 'express-validator';
// JWT secret from environment variables
const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key_change_this';
// Token expiration (1 day)
const TOKEN_EXPIRY = '1d';
// Generate JWT token
const generateToken = (user: IUser): string => {
return jwt.sign({ id: user._id }, JWT_SECRET, {
expiresIn: TOKEN_EXPIRY,
});
};
// Set cookie with JWT token
const setTokenCookie = (res: Response, token: string): void => {
// Cookie options
const options = {
expires: new Date(Date.now() + 24 * 60 * 60 * 1000), // 1 day
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
};
res.cookie('token', token, options);
};
// Register a new user
export const register = async (req: Request, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
if(!process.env.ENABLE_REGISTRATION)
{
res.status(403).json({errors: ["Registration is disabled"]});
return;
}
const { email, password, username } = req.body;
// Check if user already exists
let user = await User.findOne({ email });
if (user) {
res.status(400).json({ message: 'User already exists' });
return;
}
// Create new user
user = new User({
email,
password,
username,
});
// Save user to database
await user.save();
// Generate JWT token
const token = generateToken(user);
// Set token cookie
setTokenCookie(res, token);
// Send response
res.status(201).json({
success: true,
user: {
id: user._id,
email: user.email,
username: user.username,
},
});
} catch (error) {
console.error('Registration error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Login user
export const login = async (req: Request, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const { email, password } = req.body;
// Check if user exists
const user = await User.findOne({ email });
if (!user) {
res.status(400).json({ message: 'Invalid credentials' });
return;
}
// Check if password is correct
const isMatch = await user.comparePassword(password);
if (!isMatch) {
res.status(400).json({ message: 'Invalid credentials' });
return;
}
// Generate JWT token
const token = generateToken(user);
// Set token cookie
setTokenCookie(res, token);
// Send response
res.json({
success: true,
user: {
id: user._id,
email: user.email,
username: user.username,
},
});
} catch (error) {
console.error('Login error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Logout user
export const logout = (req: Request, res: Response): void => {
res.cookie('token', 'none', {
expires: new Date(Date.now() + 10 * 1000), // 10 seconds
httpOnly: true,
});
res.json({ success: true, message: 'Logged out successfully' });
};
// Get current user
export const getCurrentUser = async (req: UserRequest, res: Response): Promise<void> => {
try {
const user = req.user;
if (!user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
res.json({
success: true,
user: {
id: user._id,
email: user.email,
username: user.username,
},
});
} catch (error) {
console.error('Get current user error:', error);
res.status(500).json({ message: 'Server error' });
}
};

161
src/controllers/network.controller.ts Normal file
View File

@ -0,0 +1,161 @@
import { Response } from 'express';
import Network from '../models/network.model';
import { UserRequest } from '../types/express';
import { validationResult } from 'express-validator';
// Get all networks for current user
export const getUserNetworks = async (req: UserRequest, res: Response): Promise<void> => {
try {
if (!req.user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const networks = await Network.find({ owner: req.user._id });
res.json({ success: true, data: networks });
} catch (error) {
console.error('Get networks error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Create a new network
export const createNetwork = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
if (!req.user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const { name, description, isPublic } = req.body;
const network = new Network({
name,
description,
owner: req.user._id,
isPublic: isPublic || false,
});
await network.save();
res.status(201).json({ success: true, data: network });
} catch (error) {
console.error('Create network error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Get a specific network
export const getNetwork = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.id;
if (!req.user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const network = await Network.findById(networkId);
if (!network) {
res.status(404).json({ message: 'Network not found' });
return;
}
// Check if user is owner or network is public
if (network.owner.toString() !== req.user._id.toString() && !network.isPublic) {
res.status(403).json({ message: 'You do not have permission to access this network' });
return;
}
res.json({ success: true, data: network });
} catch (error) {
console.error('Get network error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Update a network
export const updateNetwork = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const networkId = req.params.id;
if (!req.user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const network = await Network.findById(networkId);
if (!network) {
res.status(404).json({ message: 'Network not found' });
return;
}
// Check if user is owner
if (network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'You do not have permission to update this network' });
return;
}
const { name, description, isPublic } = req.body;
network.name = name || network.name;
network.description = description !== undefined ? description : network.description;
network.isPublic = isPublic !== undefined ? isPublic : network.isPublic;
await network.save();
res.json({ success: true, data: network });
} catch (error) {
console.error('Update network error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Delete a network
export const deleteNetwork = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.id;
if (!req.user) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const network = await Network.findById(networkId);
if (!network) {
res.status(404).json({ message: 'Network not found' });
return;
}
// Check if user is owner
if (network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'You do not have permission to delete this network' });
return;
}
await network.deleteOne(); // Changed from remove() to deleteOne()
res.json({ success: true, message: 'Network deleted successfully' });
} catch (error) {
console.error('Delete network error:', error);
res.status(500).json({ message: 'Server error' });
}
};

174
src/controllers/people.controller.ts Normal file
View File

@ -0,0 +1,174 @@
import { Response } from 'express';
import Person from '../models/person.model';
import Relationship from '../models/relationship.model';
import { UserRequest } from '../types/express';
import { validationResult } from 'express-validator';
import mongoose from 'mongoose';
// Get all people in a network
export const getPeople = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.networkId;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const people = await Person.find({ network: networkId });
res.json({ success: true, data: people });
} catch (error) {
console.error('Get people error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Add a person to the network
export const addPerson = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const networkId = req.params.networkId;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can add people)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can add people' });
return;
}
const { firstName, lastName, birthday, position } = req.body;
// Check if person already exists in this network
const existingPerson = await Person.findOne({
firstName,
lastName,
network: networkId,
});
if (existingPerson) {
res.status(400).json({ message: 'This person already exists in the network' });
return;
}
const person = new Person({
firstName,
lastName,
birthday: birthday || undefined,
network: networkId,
position: position || { x: 100 + Math.random() * 500, y: 100 + Math.random() * 400 },
});
await person.save();
res.status(201).json({ success: true, data: person });
} catch (error) {
console.error('Add person error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Update a person
export const updatePerson = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const networkId = req.params.networkId;
const personId = req.params.id;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can update people)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can update people' });
return;
}
const person = await Person.findOne({
_id: personId,
network: networkId,
});
if (!person) {
res.status(404).json({ message: 'Person not found' });
return;
}
const { firstName, lastName, birthday, position } = req.body;
// Update person
if (firstName) person.firstName = firstName;
if (lastName) person.lastName = lastName;
if (birthday !== undefined) person.birthday = birthday || undefined;
if (position) person.position = position;
await person.save();
res.json({ success: true, data: person });
} catch (error) {
console.error('Update person error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Remove a person from the network
export const removePerson = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.networkId;
const personId = req.params.id;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can remove people)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can remove people' });
return;
}
const person = await Person.findOne({
_id: personId,
network: networkId,
});
if (!person) {
res.status(404).json({ message: 'Person not found' });
return;
}
// Remove all relationships involving this person
await Relationship.deleteMany({
network: networkId,
$or: [{ source: personId }, { target: personId }],
});
// Remove the person
await person.deleteOne(); // Changed from remove() to deleteOne()
res.json({ success: true, message: 'Person and associated relationships removed successfully' });
} catch (error) {
console.error('Remove person error:', error);
res.status(500).json({ message: 'Server error' });
}
};

180
src/controllers/relationship.controller.ts Normal file
View File

@ -0,0 +1,180 @@
import { Response } from 'express';
import Relationship from '../models/relationship.model';
import Person from '../models/person.model';
import { UserRequest } from '../types/express';
import { validationResult } from 'express-validator';
// Get all relationships in a network
export const getRelationships = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.networkId;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
const relationships = await Relationship.find({ network: networkId });
res.json({ success: true, data: relationships });
} catch (error) {
console.error('Get relationships error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Add a relationship to the network
export const addRelationship = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const networkId = req.params.networkId;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can add relationships)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can add relationships' });
return;
}
const { source, target, type, customType } = req.body;
// Check if source and target exist and belong to the network
const sourcePerson = await Person.findOne({
_id: source,
network: networkId,
});
const targetPerson = await Person.findOne({
_id: target,
network: networkId,
});
if (!sourcePerson || !targetPerson) {
res.status(400).json({ message: 'Source or target person not found in this network' });
return;
}
// Check if relationship already exists
const existingRelationship = await Relationship.findOne({
$or: [
{ source, target, network: networkId },
{ source: target, target: source, network: networkId },
],
});
if (existingRelationship) {
res.status(400).json({ message: 'A relationship already exists between these people' });
return;
}
const relationship = new Relationship({
source,
target,
type,
customType: type === 'custom' ? customType : undefined,
network: networkId,
});
await relationship.save();
res.status(201).json({ success: true, data: relationship });
} catch (error) {
console.error('Add relationship error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Update a relationship
export const updateRelationship = async (req: UserRequest, res: Response): Promise<void> => {
try {
// Validate request
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.status(400).json({ errors: errors.array() });
return;
}
const networkId = req.params.networkId;
const relationshipId = req.params.id;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can update relationships)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can update relationships' });
return;
}
const relationship = await Relationship.findOne({
_id: relationshipId,
network: networkId,
});
if (!relationship) {
res.status(404).json({ message: 'Relationship not found' });
return;
}
const { type, customType } = req.body;
// Update relationship
if (type) relationship.type = type;
if (type === 'custom' && customType) relationship.customType = customType;
await relationship.save();
res.json({ success: true, data: relationship });
} catch (error) {
console.error('Update relationship error:', error);
res.status(500).json({ message: 'Server error' });
}
};
// Remove a relationship
export const removeRelationship = async (req: UserRequest, res: Response): Promise<void> => {
try {
const networkId = req.params.networkId;
const relationshipId = req.params.id;
if (!req.user || !req.network) {
res.status(401).json({ message: 'Not authorized' });
return;
}
// Check if user is the owner (only owners can remove relationships)
if (req.network.owner.toString() !== req.user._id.toString()) {
res.status(403).json({ message: 'Only the network owner can remove relationships' });
return;
}
const relationship = await Relationship.findOne({
_id: relationshipId,
network: networkId,
});
if (!relationship) {
res.status(404).json({ message: 'Relationship not found' });
return;
}
await relationship.deleteOne(); // Changed from remove() to deleteOne()
res.json({ success: true, message: 'Relationship removed successfully' });
} catch (error) {
console.error('Remove relationship error:', error);
res.status(500).json({ message: 'Server error' });
}
};

39
src/middleware/auth.middleware.ts Normal file
View File

@ -0,0 +1,39 @@
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
import User from '../models/user.model';
import { UserRequest } from '../types/express';
// JWT secret from environment variables
const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key_change_this';
export const auth = async (req: UserRequest, res: Response, next: NextFunction): Promise<void> => {
try {
// Get token from cookie or authorization header
const token = req.cookies.token ||
(req.headers.authorization && req.headers.authorization.startsWith('Bearer')
? req.headers.authorization.split(' ')[1]
: null);
if (!token) {
res.status(401).json({ message: 'No token, authorization denied' });
return;
}
// Verify token
const decoded = jwt.verify(token, JWT_SECRET) as { id: string };
// Find user by id
const user = await User.findById(decoded.id).select('-password');
if (!user) {
res.status(401).json({ message: 'User not found' });
return;
}
// Set user in request object
req.user = user;
next();
} catch (error) {
res.status(401).json({ message: 'Token is not valid' });
}
};

33
src/middleware/network-access.middleware.ts Normal file
View File

@ -0,0 +1,33 @@
import { Response, NextFunction } from 'express';
import Network from '../models/network.model';
import { UserRequest } from '../types/express';
export const checkNetworkAccess = async (req: UserRequest, res: Response, next: NextFunction): Promise<void> => {
try {
const networkId = req.params.networkId;
if (!networkId) {
res.status(400).json({ message: 'Network ID is required' });
return;
}
const network = await Network.findById(networkId);
if (!network) {
res.status(404).json({ message: 'Network not found' });
return;
}
// Check if user is the owner or the network is public
if (network.owner.toString() !== req.user?._id.toString() && !network.isPublic) {
res.status(403).json({ message: 'You do not have permission to access this network' });
return;
}
// Add network to the request
req.network = network;
next();
} catch (error) {
res.status(500).json({ message: 'Server error' });
}
};

36
src/models/network.model.ts Normal file
View File

@ -0,0 +1,36 @@
import mongoose, { Document, Schema } from 'mongoose';
export interface INetwork extends Document {
_id: string;
name: string;
description?: string;
owner: mongoose.Types.ObjectId;
isPublic: boolean;
}
const NetworkSchema = new Schema(
{
name: {
type: String,
required: [true, 'Network name is required'],
trim: true,
},
description: {
type: String,
trim: true,
},
owner: {
type: Schema.Types.ObjectId,
ref: 'User',
required: true,
},
isPublic: {
type: Boolean,
default: false,
},
},
{ timestamps: true }
);
export default mongoose.model<INetwork>('Network', NetworkSchema);

52
src/models/person.model.ts Normal file
View File

@ -0,0 +1,52 @@
import mongoose, { Document, Schema } from 'mongoose';
export interface IPerson extends Document {
_id: string;
firstName: string;
lastName: string;
birthday?: Date;
network: mongoose.Types.ObjectId;
position: {
x: number;
y: number;
};
}
const PersonSchema = new Schema(
{
firstName: {
type: String,
required: [true, 'First name is required'],
trim: true,
},
lastName: {
type: String,
required: [true, 'Last name is required'],
trim: true,
},
birthday: {
type: Date,
},
network: {
type: Schema.Types.ObjectId,
ref: 'Network',
required: true,
},
position: {
x: {
type: Number,
default: 0,
},
y: {
type: Number,
default: 0,
},
},
},
{ timestamps: true }
);
// Create compound index to ensure uniqueness within a network
PersonSchema.index({ firstName: 1, lastName: 1, network: 1 }, { unique: true });
export default mongoose.model<IPerson>('Person', PersonSchema);

48
src/models/relationship.model.ts Normal file
View File

@ -0,0 +1,48 @@
import mongoose, { Document, Schema } from 'mongoose';
export interface IRelationship extends Document {
_id: string;
source: mongoose.Types.ObjectId;
target: mongoose.Types.ObjectId;
type: string;
customType?: string;
network: mongoose.Types.ObjectId;
}
const RelationshipSchema = new Schema(
{
source: {
type: Schema.Types.ObjectId,
ref: 'Person',
required: true,
},
target: {
type: Schema.Types.ObjectId,
ref: 'Person',
required: true,
},
type: {
type: String,
required: [true, 'Relationship type is required'],
enum: ['freund', 'partner', 'familie', 'arbeitskolleg', 'custom'],
},
customType: {
type: String,
trim: true,
},
network: {
type: Schema.Types.ObjectId,
ref: 'Network',
required: true,
},
},
{ timestamps: true }
);
// Create compound index to ensure unique relationships in a network
RelationshipSchema.index(
{ source: 1, target: 1, network: 1 },
{ unique: true }
);
export default mongoose.model<IRelationship>('Relationship', RelationshipSchema);

54
src/models/user.model.ts Normal file
View File

@ -0,0 +1,54 @@
import mongoose, { Document, Schema } from 'mongoose';
import bcrypt from 'bcryptjs';
export interface IUser extends Document {
_id: string;
email: string;
password: string;
username: string;
comparePassword(candidatePassword: string): Promise<boolean>;
}
const UserSchema = new Schema(
{
email: {
type: String,
required: [true, 'Email is required'],
unique: true,
trim: true,
lowercase: true,
},
password: {
type: String,
required: [true, 'Password is required'],
minlength: 6,
},
username: {
type: String,
required: [true, 'Username is required'],
trim: true,
},
},
{ timestamps: true }
);
// Hash password before saving
UserSchema.pre('save', async function(next) {
const user = this;
if (!user.isModified('password')) return next();
try {
const salt = await bcrypt.genSalt(10);
user.password = await bcrypt.hash(user.password, salt);
next();
} catch (error: any) {
next(error);
}
});
// Compare password method
UserSchema.methods.comparePassword = async function(candidatePassword: string): Promise<boolean> {
return bcrypt.compare(candidatePassword, this.password);
};
export default mongoose.model<IUser>('User', UserSchema);

43
src/routes/auth.routes.ts Normal file
View File

@ -0,0 +1,43 @@
import express from 'express';
import { check } from 'express-validator';
import * as authController from '../controllers/auth.controller';
import { auth } from '../middleware/auth.middleware';
const router = express.Router();
// @route POST /api/auth/register
// @desc Register a new user
// @access Public
router.post(
'/register',
[
check('email', 'Please include a valid email').isEmail(),
check('password', 'Password must be at least 6 characters').isLength({ min: 6 }),
check('username', 'Username is required').not().isEmpty(),
],
authController.register
);
// @route POST /api/auth/login
// @desc Login user
// @access Public
router.post(
'/login',
[
check('email', 'Please include a valid email').isEmail(),
check('password', 'Password is required').exists(),
],
authController.login
);
// @route POST /api/auth/logout
// @desc Logout user
// @access Private
router.post('/logout', authController.logout);
// @route GET /api/auth/me
// @desc Get current user
// @access Private
router.get('/me', auth, authController.getCurrentUser);
export default router;

48
src/routes/network.routes.ts Normal file
View File

@ -0,0 +1,48 @@
import express from 'express';
import { check } from 'express-validator';
import * as networkController from '../controllers/network.controller';
import { auth } from '../middleware/auth.middleware';
const router = express.Router();
// All routes require authentication
router.use(auth);
// @route GET /api/networks
// @desc Get all networks for current user
// @access Private
router.get('/', networkController.getUserNetworks);
// @route POST /api/networks
// @desc Create a new network
// @access Private
router.post(
'/',
[
check('name', 'Network name is required').not().isEmpty(),
],
networkController.createNetwork
);
// @route GET /api/networks/:id
// @desc Get a specific network
// @access Private
router.get('/:id', networkController.getNetwork);
// @route PUT /api/networks/:id
// @desc Update a network
// @access Private
router.put(
'/:id',
[
check('name', 'Network name is required if provided').optional().not().isEmpty(),
],
networkController.updateNetwork
);
// @route DELETE /api/networks/:id
// @desc Delete a network
// @access Private
router.delete('/:id', networkController.deleteNetwork);
export default router;

48
src/routes/people.routes.ts Normal file
View File

@ -0,0 +1,48 @@
import express from 'express';
import { check } from 'express-validator';
import * as peopleController from '../controllers/people.controller';
import { auth } from '../middleware/auth.middleware';
import { checkNetworkAccess } from '../middleware/network-access.middleware';
const router = express.Router();
// All routes require authentication and network access check
router.use('/:networkId/people', auth, checkNetworkAccess);
// @route GET /api/networks/:networkId/people
// @desc Get all people in a network
// @access Private
router.get('/:networkId/people', peopleController.getPeople);
// @route POST /api/networks/:networkId/people
// @desc Add a person to the network
// @access Private
router.post(
'/:networkId/people',
[
check('firstName', 'First name is required').not().isEmpty(),
check('lastName', 'Last name is required').not().isEmpty(),
check('birthday', 'Birthday must be a valid date if provided').optional().isISO8601().toDate(),
],
peopleController.addPerson
);
// @route PUT /api/networks/:networkId/people/:id
// @desc Update a person
// @access Private
router.put(
'/:networkId/people/:id',
[
check('firstName', 'First name must not be empty if provided').optional().not().isEmpty(),
check('lastName', 'Last name must not be empty if provided').optional().not().isEmpty(),
check('birthday', 'Birthday must be a valid date if provided').optional().isISO8601().toDate(),
],
peopleController.updatePerson
);
// @route DELETE /api/networks/:networkId/people/:id
// @desc Remove a person from the network
// @access Private
router.delete('/:networkId/people/:id', peopleController.removePerson);
export default router;

56
src/routes/relationship.routes.ts Normal file
View File

@ -0,0 +1,56 @@
import express from 'express';
import { check } from 'express-validator';
import * as relationshipController from '../controllers/relationship.controller';
import { auth } from '../middleware/auth.middleware';
import { checkNetworkAccess } from '../middleware/network-access.middleware';
const router = express.Router();
// All routes require authentication and network access check
router.use('/:networkId/relationships', auth, checkNetworkAccess);
// @route GET /api/networks/:networkId/relationships
// @desc Get all relationships in a network
// @access Private
router.get('/:networkId/relationships', relationshipController.getRelationships);
// @route POST /api/networks/:networkId/relationships
// @desc Add a relationship to the network
// @access Private
router.post(
'/:networkId/relationships',
[
check('source', 'Source person ID is required').not().isEmpty().isMongoId(),
check('target', 'Target person ID is required').not().isEmpty().isMongoId(),
check('type', 'Relationship type is required').isIn(['freund', 'partner', 'familie', 'arbeitskolleg', 'custom']),
check('customType', 'Custom type is required when type is custom')
.if(check('type').equals('custom'))
.not()
.isEmpty(),
],
relationshipController.addRelationship
);
// @route PUT /api/networks/:networkId/relationships/:id
// @desc Update a relationship
// @access Private
router.put(
'/:networkId/relationships/:id',
[
check('type', 'Relationship type must be valid if provided')
.optional()
.isIn(['freund', 'partner', 'familie', 'arbeitskolleg', 'custom']),
check('customType', 'Custom type is required when type is custom')
.if(check('type').equals('custom'))
.not()
.isEmpty(),
],
relationshipController.updateRelationship
);
// @route DELETE /api/networks/:networkId/relationships/:id
// @desc Remove a relationship
// @access Private
router.delete('/:networkId/relationships/:id', relationshipController.removeRelationship);
export default router;

15
src/server.ts Normal file
View File

@ -0,0 +1,15 @@
import app from './app';
import connectDB from './config/db';
import dotenv from 'dotenv';
dotenv.config();
const PORT = process.env.PORT || 5000;
// Connect to MongoDB
connectDB();
// Start server
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});

9
src/types/express.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
import { Request } from 'express';
import { IUser } from '../models/user.model';
import { INetwork } from '../models/network.model';
import { Document } from 'mongoose';
export interface UserRequest extends Request {
user?: IUser;
network?: INetwork;
}

15
tsconfig.json Normal file
View File

@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.test.ts"]
}

1158
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff