Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

23 heart button interactivity #30

Merged
merged 14 commits into from
Dec 23, 2023
Merged

23 heart button interactivity #30

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
99363c5
Updated table with buttons
Dec 18, 2023
421334d
Merge branch 'main' into 23-heart-button-interactivity
Dec 18, 2023
2547107
wip
Dec 19, 2023
7202c1c
Merge branch 'main' into 23-heart-button-interactivity
Dec 19, 2023
908fb8e
pushing for xue
Dec 19, 2023
76e8526
Updated to static instead of realtime
Dec 19, 2023
eb5a680
Merge branch 'main' into 23-heart-button-interactivity
Dec 19, 2023
ec845f5
updated width
Dec 19, 2023
d5b7868
messed up my branch
Dec 19, 2023
8ccd9ba
Merge branch '23-heart-button-interactivity' of https://github.com/8f…
Dec 19, 2023
5d1a8e4
I think it's working now
Dec 19, 2023
20117ed
ran linting
Dec 19, 2023
8665fa1
Merge branch 'main' into 23-heart-button-interactivity
Dec 20, 2023
ec936b8
merged with main
Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 42 additions & 5 deletions src/components/Resources/ResourceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Resource {
id: number
Expand Down Expand Up @@ -36,6 +37,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 ">
Expand Down Expand Up @@ -68,9 +80,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}
Expand All @@ -79,8 +95,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>
Expand Down
Loading