TobiasH/relnet
1
0
Fork 0
mirror of https://github.com/philipredstone/relnet.git synced 2025-06-17 05:01:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor friendship types to one type

Browse Source 
Took 10 minutes
This commit is contained in:
Tobias Hopp 2025-04-16 13:49:58 +02:00
parent 00e7294f41
commit 3da29516ec
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/api/relationships.ts
View File

@ -6,12 +6,18 @@ const port = window.location.port;
const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api'; const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
export type RELATIONSHIP_TYPES = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
export const RELATIONSHIP_LABELS = {
freund: 'Friend', partner: 'Partner', familie: 'Family', arbeitskolleg: 'Colleague', custom: 'Custom',
};
// Types // Types
export interface Relationship { export interface Relationship {
_id: string; _id: string;
source: string; source: string;
target: string; target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom'; type: RELATIONSHIP_TYPES;
customType?: string; customType?: string;
network: string; network: string;
createdAt: string; createdAt: string;
@ -21,12 +27,12 @@ export interface Relationship {
export interface CreateRelationshipData { export interface CreateRelationshipData {
source: string; source: string;
target: string; target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom'; type: RELATIONSHIP_TYPES;
customType?: string; customType?: string;
} }
export interface UpdateRelationshipData { export interface UpdateRelationshipData {
type?: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom'; type?: RELATIONSHIP_TYPES;
customType?: string; customType?: string;
} }

18
frontend/src/components/FriendshipNetwork.tsx
View File

@ -37,9 +37,7 @@ import {
// Import visible canvas graph component // Import visible canvas graph component
import CanvasGraph from './CanvasGraph'; import CanvasGraph from './CanvasGraph';
import { RELATIONSHIP_LABELS, RELATIONSHIP_TYPES } from '../api/relationships';
// Define types
type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
interface PersonNode { interface PersonNode {
_id: string; _id: string;
@ -65,9 +63,7 @@ const RELATIONSHIP_COLORS = {
custom: '#9CA3AF', // Gray custom: '#9CA3AF', // Gray
}; };
const RELATIONSHIP_LABELS = {
freund: 'Friend', partner: 'Partner', familie: 'Family', arbeitskolleg: 'Colleague', custom: 'Custom',
};
// Main FriendshipNetwork component // Main FriendshipNetwork component
const FriendshipNetwork: React.FC = () => { const FriendshipNetwork: React.FC = () => {
@ -130,7 +126,7 @@ const FriendshipNetwork: React.FC = () => {
const [editPerson, setEditPerson] = useState<PersonNode | null>(null); const [editPerson, setEditPerson] = useState<PersonNode | null>(null);
const [newRelationship, setNewRelationship] = useState({ const [newRelationship, setNewRelationship] = useState({
source: '', target: '', type: 'freund' as RelationshipType, customType: '', notes: '', bidirectional: true, source: '', target: '', type: 'freund' as RELATIONSHIP_TYPES, customType: '', notes: '', bidirectional: true,
}); });
// Filter states // Filter states
@ -776,7 +772,7 @@ const FriendshipNetwork: React.FC = () => {
style={{ backgroundColor: color }} style={{ backgroundColor: color }}
></div> ></div>
<span className="capitalize"> <span className="capitalize">
{RELATIONSHIP_LABELS[type as RelationshipType]} {RELATIONSHIP_LABELS[type as RELATIONSHIP_TYPES]}
</span> </span>
</div>))} </div>))}
</div> </div>
@ -913,14 +909,14 @@ const FriendshipNetwork: React.FC = () => {
{Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (<button {Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (<button
key={type} key={type}
className={`px-3 py-1 text-xs rounded-full whitespace-nowrap flex items-center ${relationshipTypeFilter === type ? 'bg-indigo-600 text-white' : 'bg-slate-700 text-slate-300 hover:bg-slate-600'}`} className={`px-3 py-1 text-xs rounded-full whitespace-nowrap flex items-center ${relationshipTypeFilter === type ? 'bg-indigo-600 text-white' : 'bg-slate-700 text-slate-300 hover:bg-slate-600'}`}
onClick={() => setRelationshipTypeFilter(type as RelationshipType)} onClick={() => setRelationshipTypeFilter(type as RELATIONSHIP_TYPES)}
> >
<span <span
className="w-2 h-2 rounded-full mr-1" className="w-2 h-2 rounded-full mr-1"
style={{ backgroundColor: color }} style={{ backgroundColor: color }}
></span> ></span>
<span className="capitalize"> <span className="capitalize">
{RELATIONSHIP_LABELS[type as RelationshipType]} {RELATIONSHIP_LABELS[type as RELATIONSHIP_TYPES]}
</span> </span>
</button>))} </button>))}
</div> </div>
@ -1268,7 +1264,7 @@ const FriendshipNetwork: React.FC = () => {
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
value={newRelationship.type} value={newRelationship.type}
onChange={e => setNewRelationship({ onChange={e => setNewRelationship({
...newRelationship, type: e.target.value as RelationshipType, ...newRelationship, type: e.target.value as RELATIONSHIP_TYPES,
})} })}
> >
{Object.entries(RELATIONSHIP_LABELS).map(([value, label]) => (<option key={value} value={value}> {Object.entries(RELATIONSHIP_LABELS).map(([value, label]) => (<option key={value} value={value}>

4
frontend/src/hooks/useFriendshipNetwork.ts
View File

@ -3,7 +3,7 @@ import { addPerson, getPeople, Person, removePerson, updatePerson } from '../api
import { import {
addRelationship, addRelationship,
getRelationships, getRelationships,
Relationship, Relationship, RELATIONSHIP_TYPES,
removeRelationship, removeRelationship,
updateRelationship, updateRelationship,
} from '../api/relationships'; } from '../api/relationships';
@ -314,7 +314,7 @@ export const useFriendshipNetwork = (
const createRelationship = async (relationshipData: { const createRelationship = async (relationshipData: {
source: string; source: string;
target: string; target: string;
type: 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom'; type: RELATIONSHIP_TYPES;
customType?: string; customType?: string;
}): Promise<RelationshipEdge> => { }): Promise<RelationshipEdge> => {
if (!networkId) throw new Error('No network selected'); if (!networkId) throw new Error('No network selected');