a tool for shared writing and social publishing
leaflet.pub
`add a little smoker to the recommend acion to keep it cute
cozylittle.house
+16
-6
components/RecommendButton.tsx
+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 || ""}`}