|
1 | | -import "./index.css"; |
| 1 | +import styles from "./index.module.css"; |
| 2 | + |
| 3 | +import { useState, useCallback, useRef } from "react"; |
| 4 | +import { useLoaderData } from "react-router-dom"; |
| 5 | + |
| 6 | +import ChatboxHeader from "@/components/ChatboxHeader"; |
| 7 | +import { useSnackbar } from "@/contexts/snackbar/hook"; |
| 8 | +import { useInfiniteScroll } from "@/hooks/useInfiniteScroll"; |
| 9 | + |
| 10 | +// Local components |
| 11 | +import ShareCard from "./components/ShareCard"; |
| 12 | +import EmptyState from "./components/EmptyState"; |
| 13 | + |
| 14 | +// API helper function |
| 15 | +const fetchShares = async (size = null, cursor = null) => { |
| 16 | + const apiUrl = new URL("/api/shares", window.location.origin); |
| 17 | + if (cursor) { |
| 18 | + apiUrl.searchParams.set("cursor", cursor); |
| 19 | + } |
| 20 | + if (size) { |
| 21 | + apiUrl.searchParams.set("size", size.toString()); |
| 22 | + } |
| 23 | + |
| 24 | + const response = await fetch(apiUrl.toString()); |
| 25 | + if (!response.ok) { |
| 26 | + throw new Error(`Failed to fetch shares: ${response.statusText}`); |
| 27 | + } |
| 28 | + return response.json(); |
| 29 | +}; |
| 30 | + |
| 31 | +async function loader() { |
| 32 | + try { |
| 33 | + const data = await fetchShares(); |
| 34 | + return { |
| 35 | + shares: data.items || [], |
| 36 | + nextCursor: data.next_page || null, |
| 37 | + }; |
| 38 | + } catch (error) { |
| 39 | + throw new Error(`Failed to load shares: ${error.message}`); |
| 40 | + } |
| 41 | +} |
2 | 42 |
|
3 | 43 | const Sharing = () => { |
| 44 | + const loaderData = useLoaderData(); |
| 45 | + const { shares: initialShares, nextCursor: initialCursor } = loaderData; |
| 46 | + |
| 47 | + // State |
| 48 | + const [shares, setShares] = useState(initialShares); |
| 49 | + const [nextCursor, setNextCursor] = useState(initialCursor); |
| 50 | + const [isLoading, setIsLoading] = useState(false); |
| 51 | + const loadMoreRef = useRef(); |
| 52 | + |
| 53 | + // Hooks |
| 54 | + const { setSnackbar } = useSnackbar(); |
| 55 | + |
| 56 | + // Memoized values |
| 57 | + const hasShares = shares.length > 0; |
| 58 | + const hasMore = !!nextCursor; |
| 59 | + |
| 60 | + // Fetch more shares for infinite scrolling |
| 61 | + const fetchMoreShares = useCallback(async () => { |
| 62 | + if (isLoading || !hasMore) { |
| 63 | + return; |
| 64 | + } |
| 65 | + |
| 66 | + setIsLoading(true); |
| 67 | + try { |
| 68 | + const data = await fetchShares(20, nextCursor); |
| 69 | + setShares(current => [...current, ...(data.items || [])]); |
| 70 | + setNextCursor(data.next_page || null); |
| 71 | + } catch (err) { |
| 72 | + setSnackbar({ |
| 73 | + open: true, |
| 74 | + message: `Error loading more shares: ${err.message}`, |
| 75 | + severity: "error", |
| 76 | + }); |
| 77 | + } finally { |
| 78 | + setIsLoading(false); |
| 79 | + } |
| 80 | + }, [nextCursor, isLoading, hasMore, setSnackbar]); |
| 81 | + |
| 82 | + // Set up infinite scroll |
| 83 | + useInfiniteScroll({ |
| 84 | + targetRef: loadMoreRef, |
| 85 | + onLoadMore: fetchMoreShares, |
| 86 | + isLoading, |
| 87 | + hasMore, |
| 88 | + }); |
| 89 | + |
| 90 | + // Share actions |
| 91 | + const deleteShare = useCallback(async (shareId) => { |
| 92 | + try { |
| 93 | + const response = await fetch(`/api/shares/${shareId}`, { |
| 94 | + method: "DELETE", |
| 95 | + }); |
| 96 | + |
| 97 | + if (response.ok) { |
| 98 | + setShares(current => current.filter(share => share.id !== shareId)); |
| 99 | + setSnackbar({ |
| 100 | + open: true, |
| 101 | + message: "Share deleted successfully", |
| 102 | + severity: "success", |
| 103 | + }); |
| 104 | + } else { |
| 105 | + throw new Error(`Failed to delete share: ${response.statusText}`); |
| 106 | + } |
| 107 | + } catch (err) { |
| 108 | + setSnackbar({ |
| 109 | + open: true, |
| 110 | + message: `Error deleting share: ${err.message}`, |
| 111 | + severity: "error", |
| 112 | + }); |
| 113 | + } |
| 114 | + }, [setSnackbar]); |
| 115 | + |
| 116 | + const copyToClipboard = useCallback(async (url) => { |
| 117 | + try { |
| 118 | + await navigator.clipboard.writeText(url); |
| 119 | + setSnackbar({ |
| 120 | + open: true, |
| 121 | + message: "Share URL copied to clipboard", |
| 122 | + severity: "success", |
| 123 | + }); |
| 124 | + } catch { |
| 125 | + setSnackbar({ |
| 126 | + open: true, |
| 127 | + message: "Failed to copy URL", |
| 128 | + severity: "error", |
| 129 | + }); |
| 130 | + } |
| 131 | + }, [setSnackbar]); |
| 132 | + |
4 | 133 | return ( |
5 | | - <> |
6 | | - <h1>Sharing</h1> |
7 | | - </> |
| 134 | + <div className={`${styles.sharingContainer} scroll-box`}> |
| 135 | + <ChatboxHeader /> |
| 136 | + <div className={styles.sharingContent}> |
| 137 | + <h1 className={styles.sharingTitle}>My Shares</h1> |
| 138 | + <p className={styles.sharingInfo}> |
| 139 | + Your shared links will remain publicly accessible as long as the related conversation |
| 140 | + is still saved in your chat history. If any part of the conversation is deleted, |
| 141 | + its public link will also be removed. When you delete a link, the corresponding |
| 142 | + conversation in your chat history is not deleted, nor is any content you may have |
| 143 | + posted on other websites. |
| 144 | + </p> |
| 145 | + |
| 146 | + {!hasShares ? ( |
| 147 | + <EmptyState /> |
| 148 | + ) : ( |
| 149 | + <div className={styles.sharesList}> |
| 150 | + {shares.map((share) => ( |
| 151 | + <ShareCard |
| 152 | + key={share.id} |
| 153 | + share={share} |
| 154 | + onCopy={copyToClipboard} |
| 155 | + onDelete={deleteShare} |
| 156 | + /> |
| 157 | + ))} |
| 158 | + |
| 159 | + {/* Infinite scroll anchor */} |
| 160 | + <div ref={loadMoreRef} className={styles.loadMoreAnchor}> |
| 161 | + {isLoading ? ( |
| 162 | + <div className={styles.spinner} /> |
| 163 | + ) : ( |
| 164 | + <div style={{ width: 24, height: 24, visibility: "hidden" }} /> |
| 165 | + )} |
| 166 | + </div> |
| 167 | + </div> |
| 168 | + )} |
| 169 | + </div> |
| 170 | + </div> |
8 | 171 | ); |
9 | 172 | }; |
10 | 173 |
|
11 | 174 | export default Sharing; |
| 175 | +Sharing.loader = loader; |
0 commit comments