(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
fix collect menu not opening
+29
-11
+11
-11
web/src/components/AddToCollectionModal.jsx
+11
-11
web/src/components/AddToCollectionModal.jsx
···
21
21
const [createModalOpen, setCreateModalOpen] = useState(false);
22
22
const [error, setError] = useState(null);
23
23
24
-
useEffect(() => {
25
-
if (isOpen && user) {
26
-
if (!annotationUri) {
27
-
setLoading(false);
28
-
return;
29
-
}
30
-
loadCollections();
31
-
setError(null);
32
-
}
33
-
}, [isOpen, user, annotationUri, loadCollections]);
34
-
35
24
const loadCollections = useCallback(async () => {
36
25
try {
37
26
setLoading(true);
···
50
39
setLoading(false);
51
40
}
52
41
}, [user?.did, annotationUri]);
42
+
43
+
useEffect(() => {
44
+
if (isOpen && user) {
45
+
if (!annotationUri) {
46
+
setLoading(false);
47
+
return;
48
+
}
49
+
loadCollections();
50
+
setError(null);
51
+
}
52
+
}, [isOpen, user, annotationUri, loadCollections]);
53
53
54
54
const handleAdd = async (collectionUri) => {
55
55
if (addedTo.has(collectionUri)) return;
+18
web/src/pages/Bookmarks.jsx
+18
web/src/pages/Bookmarks.jsx
···
10
10
} from "../api/client";
11
11
import { BookmarkIcon } from "../components/Icons";
12
12
import BookmarkCard from "../components/BookmarkCard";
13
+
import AddToCollectionModal from "../components/AddToCollectionModal";
13
14
14
15
export default function Bookmarks() {
15
16
const { user, isAuthenticated, loading } = useAuth();
···
21
22
const [newTitle, setNewTitle] = useState("");
22
23
const [submitting, setSubmitting] = useState(false);
23
24
const [fetchingTitle, setFetchingTitle] = useState(false);
25
+
const [collectionModalState, setCollectionModalState] = useState({
26
+
isOpen: false,
27
+
uri: null,
28
+
});
24
29
25
30
const loadBookmarks = useCallback(async () => {
26
31
if (!user?.did) return;
···
285
290
key={bookmark.id}
286
291
bookmark={bookmark}
287
292
onDelete={handleDelete}
293
+
onAddToCollection={() =>
294
+
setCollectionModalState({
295
+
isOpen: true,
296
+
uri: bookmark.uri || bookmark.id,
297
+
})
298
+
}
288
299
/>
289
300
))}
290
301
</div>
302
+
)}
303
+
{collectionModalState.isOpen && (
304
+
<AddToCollectionModal
305
+
isOpen={collectionModalState.isOpen}
306
+
onClose={() => setCollectionModalState({ isOpen: false, uri: null })}
307
+
annotationUri={collectionModalState.uri}
308
+
/>
291
309
)}
292
310
</div>
293
311
);