23 heart button interactivity (#30)

* Updated table with buttons * wip * pushing for xue * Updated to static instead of realtime * updated width * messed up my branch * I think it's working now * ran linting --------- Co-authored-by: Abi <[email protected]> Co-authored-by: root <root@MSI>
help-is-here · Dec 23, 2023 · c9f9b79 · c9f9b79
1 parent b6fdab7
commit c9f9b79
Showing 1 changed file with 42 additions and 5 deletions.
diff --git a/src/components/Resources/ResourceTable.tsx b/src/components/Resources/ResourceTable.tsx
@@ -2,8 +2,9 @@ import TagSection from '@/components/TagSection.tsx'
 import client from '@/database/client'
 import { Tooltip } from 'flowbite-react'
 import { useEffect, useState } from 'react'
-import { FaHeart } from 'react-icons/fa'
+import { FaHeart, FaSun } from 'react-icons/fa'
 import { useLoaderData } from 'react-router-dom'
+import SessionWrapper from '../Auth/SessionWrapper'
 
 export interface IResource {
     id: number
@@ -38,6 +39,17 @@ export default function ResourceTable() {
         }
     }, [tableData.length, data.length])
 
+    const favorite = async (row: Resource) => {
+        const new_helped = row.num_helped + 1
+        const idx = data.map((o) => o.id).indexOf(row.id)
+        const temp = [...data]
+        temp[idx].num_helped = new_helped
+        setTableData([...temp])
+        await client
+            .from('resources')
+            .update({ num_helped: new_helped })
+            .eq('id', row.id)
+    }
     return (
         <table className="w-full rounded-lg bg-white">
             <thead className="border-0 border-b-8 border-solid border-orange-50 ">
@@ -70,9 +82,13 @@ export default function ResourceTable() {
                                 <td className="flex w-48 flex-wrap gap-1 p-4">
                                     <TagSection resourceId={d.id} />
                                 </td>
-                                <td className="p-4 text-xs">
+                                <td className="w-32 p-4 text-xs">
                                     <Tooltip
-                                        content={`This resource has helped ${d.num_helped} people`}
+                                        content={
+                                            d.num_helped
+                                                ? `This resource has helped ${d.num_helped} people`
+                                                : `New resource`
+                                        }
                                         animation="duration-1000"
                                         className="bg-gray-900 text-white dark:bg-gray-700"
                                         arrow={false}
@@ -81,8 +97,29 @@ export default function ResourceTable() {
                                             data-tooltip-target="tooltip-default"
                                             className="flex justify-end text-right text-xs font-bold"
                                         >
-                                            {d.num_helped}
-                                            <FaHeart className="ml-1 text-orange-500 " />
+                                            {' '}
+                                            <span>
+                                                {d.num_helped ? (
+                                                    `Helped ${d.num_helped}`
+                                                ) : (
+                                                    <div className="flex items-center">
+                                                        <FaSun className="ml-1 text-orange-500" />{' '}
+                                                        New!
+                                                    </div>
+                                                )}
+                                            </span>
+                                            <SessionWrapper
+                                                ifSession={
+                                                    <button
+                                                        onClick={async () =>
+                                                            await favorite(d)
+                                                        }
+                                                    >
+                                                        <FaHeart className="ml-1 text-orange-500 " />
+                                                    </button>
+                                                }
+                                                notSession={<></>}
+                                            />
                                         </span>
                                     </Tooltip>
                                 </td>