optimizing attestations

src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx

@@ -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 (<></>);
 }

src/Components/Profile/Templates/TabsView.tsx

@@ -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}>
-                  <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}]`}
-                    >
-                      {a.emoji}
-                    </div>
-
-                  </td>
-                  <td>
-                    <div className='tw-mr-2' ><i>{a.text}</i></div>
-
-                  </td>
-                  <td>
-                    <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" />
-                        </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>
-                  </td>
-
-
-                </tr>)}
-              </tbody>
+<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-shadow-xl tw-bg-[${a.color}]`}>
+            {a.emoji}
+          </div>
+        </td>
+        <td>
+          <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"
+                  />
+                </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>
             </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'>

src/Components/Templates/AttestationForm.tsx

@@ -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({
-            text: inputValue,
-            emoji: selectedEmoji,
-            color: selectedColor,
-            shape: selectedShape,
-            to: to
-        }).then(()=> navigate("/"))
+
+        api?.createItem && toast.promise(
+            api.createItem({
+                text: inputValue,
+                emoji: selectedEmoji,
+                color: selectedColor,
+                shape: selectedShape,
+                to: to
+            }),            {
+                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');

src/Components/Templates/EmojiPicker.tsx

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