antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimizing attestations

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-31 14:33:40 +02:00
parent 729a01c922
commit f4b22f9361
4 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
View File

@ -1,8 +1,11 @@
import { useNavigate } from "react-router-dom"
import { useAuth } from "../../../Auth";
export const GratitudeControl = () => {
const navigate = useNavigate();
return (
const {isAuthenticated} = useAuth();
if(isAuthenticated) return (
<div className="tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit">
{
@ -22,4 +25,5 @@ export const GratitudeControl = () => {
</div>
)
else return (<></>);
}

36
src/Components/Profile/Templates/TabsView.tsx
View File

@ -5,7 +5,7 @@ import { ActionButton } from '../Subcomponents/ActionsButton'
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 { Link, useNavigate } from 'react-router-dom'
import { useItems } from '../../Map/hooks/useItems'
import { useAssetApi } from '../../AppShell/hooks/useAssets'
import { timeAgo } from '../../../Utils/TimeAgo'
@ -21,7 +21,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
const items = useItems();
const assetsApi = useAssetApi();
const {user} = useAuth();
const { user } = useAuth();
const getUserProfile = (id: string) => {
return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType)
@ -79,41 +79,41 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
<div role="tabpanel"
className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden">
<table className="sm:tw-table-sm md:tw-table-md">
<tbody>
{attestations.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id)).map((a, i) => <tr key={i}>
<tbody>
{attestations
.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id))
.sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime())
.map((a, i) => (
<tr key={i}>
<td>
<div
className={`tw-cursor-pointer tw-text-3xl tw-mask tw-mask-${a.shape} tw-p-3 tw-mr-2 tw-bg-[${a.color}]`}
>
<div className={`tw-cursor-pointer tw-text-3xl tw-mask tw-mask-${a.shape} tw-p-3 tw-mr-2 tw-shadow-xl tw-bg-[${a.color}]`}>
{a.emoji}
</div>
</td>
<td>
<div className='tw-mr-2' ><i>{a.text}</i></div>
<div className='tw-mr-2'><i>{a.text}</i></div>
</td>
<td>
<Link to={"/item/" + getUserProfile(a.user_created.id)?.id}>
<div className="flex items-center gap-3">
<div className="tw-avatar">
<div className="tw-mask tw-rounded-full h-8 w-8 tw-mr-2">
<img
src={assetsApi.url + getUserProfile(a.user_created.id)?.image}
alt="Avatar Tailwind CSS Component" />
alt="Avatar Tailwind CSS Component"
/>
</div>
</div>
<div>
<div className="font-bold">{getUserProfile(a.user_created.id)?.name}</div>
<div className="tw-text-xs opacity-50 tw-text-zinc-500">{timeAgo(a.date_created)}</div>
</div>
</div>
</Link>
</td>
</tr>)}
</tbody>
</tr>
))}
</tbody>
</table>
</div>
@ -123,7 +123,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
<>
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="🧩" checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="♻️" checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1" >
<div className='tw-h-full'>
<div className='tw-grid tw-grid-cols-1'>

19
src/Components/Templates/AttestationForm.tsx
View File

@ -7,6 +7,7 @@ import { Link, useNavigate } from 'react-router-dom';
import { useRef, useState } from 'react';
import { Item, ItemsApi } from '../../types';
import { useEffect } from 'react';
import { toast } from 'react-toastify';
export const AttestationForm = ({api}:{api?:ItemsApi<any>}) => {
@ -38,15 +39,27 @@ export const AttestationForm = ({api}:{api?:ItemsApi<any>}) => {
const sendAttestation = async () => {
const to : Array<any> = [];
users?.map(u => to.push({ directus_users_id: u.user_created.id }));
console.log(to);
api?.createItem && api.createItem({
api?.createItem && toast.promise(
api.createItem({
text: inputValue,
emoji: selectedEmoji,
color: selectedColor,
shape: selectedShape,
to: to
}).then(()=> navigate("/"))
}), {
pending: 'creating attestation ...',
success: 'Attestation created',
error: {
render({ data }) {
return `${data}`
},
},
})
.then( () => navigate("/item/" + items.find(i => i.user_created.id===to[0].directus_users_id && i.layer?.itemType.name==="player")?.id+"?tab=2")
)
}
const [selectedEmoji, setSelectedEmoji] = useState('select badge');

2
src/Components/Templates/EmojiPicker.tsx
View File

@ -12,7 +12,7 @@ export const EmojiPicker = ({selectedEmoji, selectedColor, selectedShape, setSel
'📝', '✉️', '🧩','💡', '🎓', '💬',
'🛠', '💻', '🕹', '🖨', '🚐', '🛒',
'⚽️', '🧵', '👀', '🌱',
'🏕', '💪', '🎁', '🎉',
'🏕', '💪', '🎁', '🏹',
'🥕', '🥇', '🥈', '🥉'];
const shapes = ["squircle", "circle", "hexagon-2"];