a tool for shared writing and social publishing

`add a little smoker to the recommend acion to keep it cute

+16 -6
+16 -6
components/RecommendButton.tsx
··· 9 9 unrecommendAction, 10 10 } from "app/lish/[did]/[publication]/[rkey]/Interactions/recommendAction"; 11 11 import { callRPC } from "app/api/rpc/client"; 12 - import { useToaster } from "./Toast"; 12 + import { useSmoker, useToaster } from "./Toast"; 13 13 import { OAuthErrorMessage, isOAuthSessionError } from "./OAuthError"; 14 14 import { ButtonSecondary } from "./Buttons"; 15 15 import { Separator } from "./Layout"; ··· 67 67 boolean | null 68 68 >(null); 69 69 const toaster = useToaster(); 70 + const smoker = useSmoker(); 70 71 71 72 // Use optimistic state if set, otherwise use fetched state 72 73 const displayRecommended = 73 74 optimisticRecommended !== null ? optimisticRecommended : hasRecommended; 74 75 75 - const handleClick = async () => { 76 + const handleClick = async (e: React.MouseEvent) => { 76 77 if (isPending || isLoading) return; 77 78 78 79 const currentlyRecommended = displayRecommended; ··· 80 81 setOptimisticRecommended(!currentlyRecommended); 81 82 setCount((c) => (currentlyRecommended ? c - 1 : c + 1)); 82 83 84 + if (!currentlyRecommended) { 85 + smoker({ 86 + position: { 87 + x: e.clientX, 88 + y: e.clientY - 16, 89 + }, 90 + text: <div className="text-xs">thanks!</div>, 91 + }); 92 + } 93 + 83 94 const result = currentlyRecommended 84 95 ? await unrecommendAction({ document: props.documentUri }) 85 96 : await recommendAction({ document: props.documentUri }); 86 - 87 97 if (!result.success) { 88 98 // Revert optimistic update 89 99 setOptimisticRecommended(null); ··· 94 104 content: isOAuthSessionError(result.error) ? ( 95 105 <OAuthErrorMessage error={result.error} /> 96 106 ) : ( 97 - "Failed to update recommendation" 107 + "oh no! error!" 98 108 ), 99 109 type: "error", 100 110 }); ··· 113 123 onClick={(e) => { 114 124 e.preventDefault(); 115 125 e.stopPropagation(); 116 - handleClick(); 126 + handleClick(e); 117 127 }} 118 128 > 119 129 {displayRecommended ? ( ··· 142 152 onClick={(e) => { 143 153 e.preventDefault(); 144 154 e.stopPropagation(); 145 - handleClick(); 155 + handleClick(e); 146 156 }} 147 157 disabled={isPending || isLoading} 148 158 className={`recommendButton relative flex gap-1 items-center hover:text-accent-contrast ${props.className || ""}`}