From 5dba5e0ca97e967333c3941f6255f494c4dd6c66 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Fri, 27 Jun 2025 15:28:56 +0200
Subject: [PATCH] Add basic relations view

---
 .../Profile/Subcomponents/RelationsView.tsx   | 37 +++++++++++++++++++
 .../Components/Profile/Templates/FlexView.tsx |  2 +
 2 files changed, 39 insertions(+)
 create mode 100644 lib/src/Components/Profile/Subcomponents/RelationsView.tsx

diff --git a/lib/src/Components/Profile/Subcomponents/RelationsView.tsx b/lib/src/Components/Profile/Subcomponents/RelationsView.tsx
new file mode 100644
index 00000000..7602ca9f
--- /dev/null
+++ b/lib/src/Components/Profile/Subcomponents/RelationsView.tsx
@@ -0,0 +1,37 @@
+import { useItems } from '#components/Map/hooks/useItems'
+
+import type { Item } from '#types/Item'
+
+interface Props {
+  item: Item
+  relation: string
+}
+
+export const RelationsView = ({ item, relation }: Props) => {
+  const items = useItems()
+
+  if (!item.relations) throw new Error('Item does not have relations defined.')
+
+  const relationsOfRightType = item.relations.filter((r) => r.type === relation)
+
+  const relatedItems = items.filter((i) => relationsOfRightType.some((r) => r.id === i.id))
+
+  const hasRelatedItems = relatedItems.length > 0
+
+  return (
+    <div>
+      <h2>{relation}</h2>
+      {hasRelatedItems ? (
+        <ul>
+          {relatedItems.map((relatedItem) => (
+            <li key={relatedItem.id}>
+              <a href={`/item/${relatedItem.id}`}>{relatedItem.name}</a>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No related items found.</p>
+      )}
+    </div>
+  )
+}
diff --git a/lib/src/Components/Profile/Templates/FlexView.tsx b/lib/src/Components/Profile/Templates/FlexView.tsx
index 4a32f53f..e3024c45 100644
--- a/lib/src/Components/Profile/Templates/FlexView.tsx
+++ b/lib/src/Components/Profile/Templates/FlexView.tsx
@@ -7,6 +7,7 @@ import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHe
 import { InviteLinkView } from '#components/Profile/Subcomponents/InviteLinkView'
 import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
 import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
+import { RelationsView } from '#components/Profile/Subcomponents/RelationsView'
 
 import type { Item } from '#types/Item'
 import type { Key } from 'react'
@@ -19,6 +20,7 @@ const componentMap = {
   gallery: GalleryView,
   crowdfundings: CrowdfundingView,
   inviteLinks: InviteLinkView,
+  relations: RelationsView,
   // weitere Komponenten hier
 }