From bc8b73451c6a1a760f721cdea6a8597994c3baf6 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 09:25:14 +0200 Subject: [PATCH] first working attestation prototype --- src/Components/Profile/ProfileView.tsx | 23 ++- src/Components/Profile/Templates/TabsView.tsx | 160 +++++++----------- src/Components/Templates/AttestationForm.tsx | 29 ++-- src/Components/Templates/EmojiPicker.tsx | 6 +- 4 files changed, 103 insertions(+), 115 deletions(-) diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index dff33da6..36b369b7 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -2,7 +2,7 @@ import { MapOverlayPage } from '../Templates' import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' import { useLocation, useNavigate } from 'react-router-dom' import { useEffect, useState } from 'react'; -import { Item, Tag } from '../../types'; +import { Item, ItemsApi, Tag } from '../../types'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; @@ -17,7 +17,7 @@ import { SimpleView } from './Templates/SimpleView'; import { handleDelete, linkItem, unlinkItem } from './itemFunctions'; import { useTags } from '../Map/hooks/useTags'; -export function ProfileView({ userType }: { userType: string }) { +export function ProfileView({ userType, attestationApi }: { userType: string , attestationApi?: ItemsApi}) { const [item, setItem] = useState({} as Item) const [updatePermission, setUpdatePermission] = useState(false); @@ -40,6 +40,23 @@ export function ProfileView({ userType }: { userType: string }) { const clusterRef = useClusterRef(); const leafletRefs = useLeafletRefs(); + const [attestations, setAttestations] = useState>([]); + + useEffect(() => { + if (attestationApi) { + attestationApi.getItems() + .then(value => { + console.log(value); + + setAttestations(value); + }) + .catch(error => { + console.error("Error fetching items:", error); + }); + } + }, [attestationApi]) + + useEffect(() => { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); @@ -140,7 +157,7 @@ export function ProfileView({ userType }: { userType: string }) { } {template == "tabs" && - linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> + linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> } diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index 3f939624..cea2ea31 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -6,8 +6,12 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { useAddFilterTag } from '../../Map/hooks/useFilter' import { Item, Tag } from 'utopia-ui/dist/types' import { useNavigate } from 'react-router-dom' +import { useItems } from '../../Map/hooks/useItems' +import { useAssetApi } from '../../AppShell/hooks/useAssets' +import { timeAgo } from '../../../Utils/TimeAgo' +import { useAuth } from '../../Auth' -export const TabsView = ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: { item: Item, offers: Array, needs: Array, relations: Array, updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise , setUrlParams: any}) => { +export const TabsView = ({ attestations, userType, item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: { attestations: Array, userType: string, item: Item, offers: Array, needs: Array, relations: Array, updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise, setUrlParams: any }) => { const addFilterTag = useAddFilterTag(); const [activeTab, setActiveTab] = useState(); @@ -15,12 +19,20 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa const [addItemPopupType, setAddItemPopupType] = useState(""); + const items = useItems(); + const assetsApi = useAssetApi(); + const {user} = useAuth(); + + const getUserProfile = (id: string) => { + return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType) + } + useEffect(() => { - scroll(); + scroll(); }, [addItemPopupType]) - + function scroll() { - tabRef.current?.scrollIntoView(); + tabRef.current?.scrollIntoView(); } const tabRef = useRef(null); @@ -42,57 +54,6 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa setActiveTab(urlTab ? Number(urlTab) : 1); }, [location.search]); - const attestations = [{ - from: "Timo", - avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", - symbol: "🥇", - text: "1. Platz im Bogenschießen", - date: "21.06.2024", -}, -{ - from: "Sebastian", - avatar: "https://api.utopia-lab.org/assets/7510a082-882b-41c3-aa7d-5a19f9502f25?width=80&heigth=80", - symbol: "🌱", - text: "danke fürs Rasen mähen", - date: "29.06.2024", -}, -{ - from: "Yurij", - avatar: "https://api.utopia-lab.org/assets/abe62291-35ad-45de-b978-e5906d8a3eb6?width=80&heigth=80", - symbol: "🏆", - text: "bester Coder ever", - date: "04.07.2024", -}, -{ - from: "Luca", - avatar: "https://api.utopia-lab.org/assets/e285e653-36e8-4211-a69d-00053c1f610e?width=80&heigth=80", - symbol: "🙏", - text: "Vielen Dank für deine Hilfe!!!", - date: "04.07.2024", -}, -{ - from: "Lisa", - avatar: "https://i.pinimg.com/originals/c0/ed/08/c0ed088cd6532d4fd27396aefddac57c.jpg", - symbol: "❤️", - text: "Vielen Dank für deine Hilfe!!!", - date: "04.07.2024", -}, -{ - from: "Timo", - avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", - symbol: "🥈", - text: "2. Platz im Bogenschießen", - date: "21.06.2024", -}, -{ - from: "Anton", - avatar: "https://api.utopia-lab.org/assets/007dc678-6073-4ad1-9b47-f2cfe1dca582?width=80&heigth=80", - symbol: "🌱", - text: "danke fürs Rasen mähen", - date: "29.06.2024" -}, -] - return (
- +
{item.layer?.itemType.questlog && - <> - updateActiveTab(2)} /> + <> + updateActiveTab(2)} /> -
- - - {attestations.map((a, i) => - - - - - - )} - -
-
{a.symbol}
- - 		-
{a.text}
- - 		-
-
-
- Avatar Tailwind CSS Component -
-
-
-
{a.from}
-
{a.date}
- -
-
-
+
+ + + {attestations.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id)).map((a, i) => + + + + + + )} + +
+
+ {a.emoji}
- - } + + 		+
{a.text}
+ + 		+
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{getUserProfile(a.user_created.id)?.name}
+
{timeAgo(a.date_created)}
+ +
+
+
+ +
+ + } {item.layer?.itemType.offers_and_needs && <> diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index 42f4b700..3b080e58 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -3,16 +3,17 @@ import { MapOverlayPage } from './MapOverlayPage' import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' import { EmojiPicker } from './EmojiPicker'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { useRef, useState } from 'react'; import { Item, ItemsApi } from '../../types'; import { useEffect } from 'react'; -export const AttestationForm = ({api}:{api:ItemsApi}) => { +export const AttestationForm = ({api}:{api?:ItemsApi}) => { const items = useItems(); const assetsApi = useAssetApi(); const [users, setUsers] = useState>(); + const navigate = useNavigate(); useEffect(() => { let params = new URLSearchParams(location.search); @@ -35,16 +36,22 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => { }; const sendAttestation = async () => { - api.createItem && api.createItem({ + const to : Array = []; + users?.map(u => to.push({ directus_users_id: u.user_created.id })); + console.log(to); + + api?.createItem && api.createItem({ text: inputValue, - symbol: "🔥", - color: "", - shape: "", - to: users - }) + emoji: selectedEmoji, + color: selectedColor, + shape: selectedShape, + to: to + }).then(()=> navigate("/")) } - + const [selectedEmoji, setSelectedEmoji] = useState('select badge'); + const [selectedShape, setSelectedShape] = useState('circle'); + const [selectedColor, setSelectedColor] = useState('#fff0d6'); return ( @@ -70,7 +77,7 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => {
- +
@@ -82,7 +89,7 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => { className="tw-input tw-min-w-0 tw-w-fit tw-resize-none tw-overflow-hidden tw-text-center " />
-
+
) } \ No newline at end of file diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx index 841a5779..dcffc671 100644 --- a/src/Components/Templates/EmojiPicker.tsx +++ b/src/Components/Templates/EmojiPicker.tsx @@ -1,9 +1,7 @@ import { useState } from 'react'; -export const EmojiPicker = () => { - const [selectedEmoji, setSelectedEmoji] = useState('select badge'); - const [selectedShape, setSelectedShape] = useState('circle'); - const [selectedColor, setSelectedColor] = useState('#fff0d6'); +export const EmojiPicker = ({selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape}) => { + const [isOpen, setIsOpen] = useState(false);