Rename donations components and logic to recent coffees

- rename 'donations' to 'recent coffees'
- rename 'lastest coffees' to 'recent coffees'

Author: robertpiosik

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -21,9 +21,9 @@ import { LayoutContext } from './contexts/LayoutContext'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { Layout } from './components/Layout/Layout'
 import { ResponsePreviewFooter as UiResponsePreviewFooter } from '@ui/components/editor/panel/ResponsePreviewFooter'
-import { Donations as UiDonations } from '@ui/components/editor/panel/Donations/Donations'
-import { use_latest_donations } from './hooks/latest-donations'
-import { DonationsFooter } from './components/donations/DonationsFooter'
+import { RecentCoffees as UiRecentCoffees } from '@ui/components/editor/panel/RecentCoffees/RecentCoffees'
+import { use_recent_coffees } from './hooks/recent-coffees'
+import { RecentCoffeesFooter } from './components/recent-coffees/RecentCoffeesFooter'
 import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
 import { use_modal_manager } from './hooks/use-modal-manager'
 import { use_response_history } from './hooks/panel/use-response-history'
@@ -152,8 +152,8 @@ export const Panel = () => {
     address: string
   }>()
 
-  const { viewing_donations, set_viewing_donations, ...donations_state } =
-    use_latest_donations()
+  const { viewing_coffees, set_viewing_coffees, ...coffees_state } =
+    use_recent_coffees()
 
   if (
     ask_about_context_instructions === undefined ||
@@ -500,7 +500,7 @@ export const Panel = () => {
                 }}
                 on_task_forward={handle_task_forward}
                 is_setup_complete={is_setup_complete}
-                on_donate_click={() => set_viewing_donations(true)}
+                on_donate_click={() => set_viewing_coffees(true)}
               />
             </div>
           </Layout>
@@ -593,23 +593,23 @@ export const Panel = () => {
           </div>
         )}
 
-        {viewing_donations && (
+        {viewing_coffees && (
           <div className={styles.slot}>
             <UiPage
-              title="Donations"
-              on_back_click={() => set_viewing_donations(false)}
+              title="Recent Coffees"
+              on_back_click={() => set_viewing_coffees(false)}
               footer_slot={
-                <DonationsFooter
-                  on_close={() => set_viewing_donations(false)}
+                <RecentCoffeesFooter
+                  on_close={() => set_viewing_coffees(false)}
                 />
               }
             >
-              <UiDonations
-                donations={donations_state.donations}
-                is_fetching={donations_state.is_fetching}
-                is_revalidating={donations_state.is_revalidating}
-                on_fetch_next_page={donations_state.on_fetch_next_page}
-                has_more={donations_state.has_more}
+              <UiRecentCoffees
+                coffees={coffees_state.coffees}
+                is_fetching={coffees_state.is_fetching}
+                is_revalidating={coffees_state.is_revalidating}
+                on_fetch_next_page={coffees_state.on_fetch_next_page}
+                has_more={coffees_state.has_more}
                 on_show_qr_code={set_active_qr_wallet}
               />
             </UiPage>

apps/editor/src/views/panel/frontend/components/donations/DonationsFooter/index.ts

@@ -2,13 +2,13 @@ import { useRef, useLayoutEffect } from 'react'
 import cn from 'classnames'
 import { use_compacting } from '@shared/hooks'
 import { Button as UiButton } from '@ui/components/editor/common/Button'
-import styles from './DonationsFooter.module.scss'
+import styles from './RecentCoffeesFooter.module.scss'
 
 type Props = {
   on_close: () => void
 }
 
-export const DonationsFooter: React.FC<Props> = (props) => {
+export const RecentCoffeesFooter: React.FC<Props> = (props) => {
   const { container_ref, compact_step, report_width } = use_compacting(2)
   const close_ref = useRef<HTMLSpanElement>(null)
   const coffee_ref = useRef<HTMLSpanElement>(null)

…ationsFooter/DonationsFooter.module.scss …esFooter/RecentCoffeesFooter.module.scssapps/editor/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.module.scss renamed to apps/editor/src/views/panel/frontend/components/recent-coffees/RecentCoffeesFooter/RecentCoffeesFooter.module.scss apps/editor/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.module.scss renamed to apps/editor/src/views/panel/frontend/components/recent-coffees/RecentCoffeesFooter/RecentCoffeesFooter.module.scss

@@ -0,0 +1 @@
+export * from './RecentCoffeesFooter'

…ions/DonationsFooter/DonationsFooter.tsx …entCoffeesFooter/RecentCoffeesFooter.tsxapps/editor/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.tsx renamed to apps/editor/src/views/panel/frontend/components/recent-coffees/RecentCoffeesFooter/RecentCoffeesFooter.tsx apps/editor/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.tsx renamed to apps/editor/src/views/panel/frontend/components/recent-coffees/RecentCoffeesFooter/RecentCoffeesFooter.tsx

@@ -1,23 +1,23 @@
 import { useCallback, useEffect, useState, useRef } from 'react'
 import axios from 'axios'
 
-type Donation = {
+type Coffee = {
   support_message: string
   support_note: string
 }
 
-export const use_latest_donations = () => {
-  const [viewing_donations, set_viewing_donations] = useState(false)
-  const [donations, set_donations] = useState<Donation[]>([])
+export const use_recent_coffees = () => {
+  const [viewing_coffees, set_viewing_coffees] = useState(false)
+  const [coffees, set_coffees] = useState<Coffee[]>([])
   const [is_fetching, set_is_fetching] = useState(false)
   const [is_revalidating, set_is_revalidating] = useState(false)
   const [fetched_once, set_fetched_once] = useState(false)
   const [page, set_page] = useState(1)
   const [is_fetching_next, set_is_fetching_next] = useState(false)
   const [has_more, set_has_more] = useState(true)
-  const cached_donations = useRef<Donation[]>([])
+  const cached_coffees = useRef<Coffee[]>([])
 
-  const fetch_donations = useCallback(async (is_revalidation = false) => {
+  const fetch_coffees = useCallback(async (is_revalidation = false) => {
     try {
       if (is_revalidation) {
         set_is_revalidating(true)
@@ -30,23 +30,23 @@ export const use_latest_donations = () => {
       )
 
       if (response.data?.data) {
-        const new_donations = response.data.data.map((raw: any) => ({
+        const new_coffees = response.data.data.map((raw: any) => ({
           support_message: raw.support_message,
           support_note: raw.support_note ?? ''
         }))
 
-        set_donations(new_donations)
-        cached_donations.current = new_donations
+        set_coffees(new_coffees)
+        cached_coffees.current = new_coffees
         set_page(2)
 
-        if (new_donations.length < 10) {
+        if (new_coffees.length < 10) {
           set_has_more(false)
         } else {
           set_has_more(true)
         }
       }
     } catch (error) {
-      console.error('Failed to fetch donations', error)
+      console.error('Failed to fetch coffees', error)
     } finally {
       if (is_revalidation) {
         set_is_revalidating(false)
@@ -58,23 +58,23 @@ export const use_latest_donations = () => {
   }, [])
 
   useEffect(() => {
-    if (!viewing_donations) {
+    if (!viewing_coffees) {
       set_page(1)
       set_has_more(true)
       return
     }
 
     // Stale-while-revalidate strategy
-    if (fetched_once && cached_donations.current.length > 0) {
+    if (fetched_once && cached_coffees.current.length > 0) {
       // Show stale data immediately
-      set_donations(cached_donations.current)
+      set_coffees(cached_coffees.current)
       // Then revalidate in background
-      fetch_donations(true)
+      fetch_coffees(true)
     } else {
       // First time fetch
-      fetch_donations(false)
+      fetch_coffees(false)
     }
-  }, [viewing_donations, fetch_donations])
+  }, [viewing_coffees, fetch_coffees])
 
   const on_fetch_next_page = useCallback(async () => {
     if (
@@ -92,26 +92,26 @@ export const use_latest_donations = () => {
         `https://app.buymeacoffee.com/api/creators/slug/robertpiosik/coffees?web=1&page=${page}&per_page=10`
       )
       if (response.data?.data) {
-        const new_donations = response.data.data.map((raw: any) => ({
+        const new_coffees = response.data.data.map((raw: any) => ({
           support_message: raw.support_message,
           support_note: raw.support_note ?? ''
         }))
-        if (new_donations.length > 0) {
-          set_donations((prev) => {
-            const updated = [...prev, ...new_donations]
-            cached_donations.current = updated
+        if (new_coffees.length > 0) {
+          set_coffees((prev) => {
+            const updated = [...prev, ...new_coffees]
+            cached_coffees.current = updated
             return updated
           })
           set_page((prev) => prev + 1)
         }
-        if (new_donations.length < 10) {
+        if (new_coffees.length < 10) {
           set_has_more(false)
         }
       } else {
         set_has_more(false)
       }
     } catch (error) {
-      console.error('Failed to fetch donations', error)
+      console.error('Failed to fetch coffees', error)
       set_has_more(false)
     } finally {
       set_is_fetching_next(false)
@@ -126,12 +126,12 @@ export const use_latest_donations = () => {
   ])
 
   return {
-    viewing_donations,
-    set_viewing_donations,
-    donations,
+    viewing_coffees,
+    set_viewing_coffees,
+    coffees,
     is_fetching,
     is_revalidating,
-    donations_fetched_once: fetched_once,
+    coffees_fetched_once: fetched_once,
     on_fetch_next_page,
     has_more
   }

apps/editor/src/views/panel/frontend/components/recent-coffees/RecentCoffeesFooter/index.ts

@@ -84,11 +84,11 @@
   }
 }
 
-.donations {
+.coffees {
   padding: 4px 12px 12px 12px;
 }
 
-.donations__inner {
+.coffees__inner {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -97,7 +97,7 @@
     opacity: var(--dimmed-opacity);
   }
 
-  &__donation {
+  &__coffee {
     display: flex;
     flex-direction: column;
     gap: 4px;

…panel/frontend/hooks/latest-donations.ts …s/panel/frontend/hooks/recent-coffees.tsapps/editor/src/views/panel/frontend/hooks/latest-donations.ts renamed to apps/editor/src/views/panel/frontend/hooks/recent-coffees.ts apps/editor/src/views/panel/frontend/hooks/latest-donations.ts renamed to apps/editor/src/views/panel/frontend/hooks/recent-coffees.ts

@@ -1,10 +1,10 @@
-import { Donations, DonationsProps } from './Donations'
+import { RecentCoffees, RecentCoffeesProps } from './RecentCoffees'
 
 export default {
-  component: Donations
+  component: RecentCoffees
 }
 
-const sample_donations: DonationsProps['donations'] = [
+const sample_coffees: RecentCoffeesProps['coffees'] = [
   {
     support_message:
       '<span class="suppUsername"><a href="https://github.com/johndoe">JohnDoe</a></span> bought 2 coffees.',
@@ -22,8 +22,8 @@ const sample_donations: DonationsProps['donations'] = [
 
 export const Default = () => {
   return (
-    <Donations
-      donations={sample_donations}
+    <RecentCoffees
+      coffees={sample_coffees}
       is_fetching={false}
       on_show_qr_code={(wallet) => console.log('Show QR code', wallet)}
       is_revalidating={false}
@@ -35,7 +35,7 @@ export const Default = () => {
 
 export const Loading = () => {
   return (
-    <Donations
+    <RecentCoffees
       is_fetching={true}
       on_show_qr_code={(wallet) => console.log('Show QR code', wallet)}
       is_revalidating={false}
@@ -47,8 +47,8 @@ export const Loading = () => {
 
 export const Revalidating = () => {
   return (
-    <Donations
-      donations={sample_donations}
+    <RecentCoffees
+      coffees={sample_coffees}
       on_show_qr_code={(wallet) => console.log('Show QR code', wallet)}
       is_fetching={false}
       is_revalidating={true}