{tweet.name} (@{tweet.username})

\n \n {formattedDate}\n \n

{tweet.text}

\n {mediaContent.map((media, index) => (\n media.type === \"photo\"\n ? (\n

\n $\"Tweet$ \n

\n )\n : media.type === \"video\"\n ? (\n

\n )\n : null\n ))}\n

\n ❤️ {tweet.likes}\n 🔁 {tweet.retweets}\n 💬 {tweet.replies}\n

\n );\n}\n\nfunction App() {\n const [tweets, setTweets] = useState([]);\n const [filteredTweets, setFilteredTweets] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [listHeight, setListHeight] = useState(600);\n const [selectedDump, setSelectedDump] = useState(DUMPS[0]);\n const [totalProcessed, setTotalProcessed] = useState(0);\n const [scrollOffset, setScrollOffset] = useState(0);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const listRef = useRef(null);\n const sizeMap = useRef({});\n\n useEffect(() => {\n loadTweets();\n const updateListHeight = () => {\n const windowHeight = window.innerHeight;\n const headerHeight = document.querySelector(\"header\").offsetHeight;\n const footerHeight = document.querySelector(\"footer\").offsetHeight;\n const newListHeight = windowHeight - headerHeight - footerHeight - 40; // 40px for padding\n setListHeight(newListHeight);\n };\n\n updateListHeight();\n window.addEventListener(\"resize\", updateListHeight);\n return () => window.removeEventListener(\"resize\", updateListHeight);\n }, [selectedDump]);\n\n useEffect(() => {\n const filtered = tweets.filter(tweet =>\n tweet.text.toLowerCase().includes(searchQuery.toLowerCase())\n || tweet.name.toLowerCase().includes(searchQuery.toLowerCase())\n || tweet.username.toLowerCase().includes(searchQuery.toLowerCase())\n );\n setFilteredTweets(filtered);\n sizeMap.current = {};\n setScrollOffset(0);\n if (listRef.current) {\n listRef.current.resetAfterIndex(0);\n }\n }, [searchQuery, tweets]);\n\n async function loadTweets() {\n if (isLoading) return;\n setIsLoading(true);\n setError(null);\n try {\n const { tweets: newTweets, totalProcessed: newTotalProcessed } = await fetchTweets(selectedDump.file);\n setTweets(newTweets);\n setFilteredTweets(newTweets);\n setTotalProcessed(newTotalProcessed);\n } catch (err) {\n setError(err.message);\n } finally {\n setIsLoading(false);\n }\n }\n\n const getItemSize = useCallback((index) => {\n return sizeMap.current[index] || 100;\n }, []);\n\n const setSize = useCallback((index, size) => {\n sizeMap.current[index] = size;\n listRef.current?.resetAfterIndex(index);\n }, []);\n\n const Row = useCallback(({ index, style }) => {\n const tweet = filteredTweets[index];\n const rowRef = useRef(null);\n\n const handleMediaLoad = useCallback(() => {\n if (rowRef.current) {\n setSize(index, rowRef.current.clientHeight);\n }\n }, [index]);\n\n useEffect(() => {\n if (rowRef.current) {\n setSize(index, rowRef.current.clientHeight);\n }\n }, [tweet, index]);\n\n return tweet\n ? (\n

\n \n

\n )\n : null;\n }, [filteredTweets, setSize]);\n\n const handleDumpChange = (e) => {\n const newDump = DUMPS.find(dump => dump.file === e.target.value);\n setSelectedDump(newDump);\n setTweets([]);\n setFilteredTweets([]);\n setTotalProcessed(0);\n sizeMap.current = {};\n setScrollOffset(0);\n setSearchQuery(\"\");\n };\n\n const handleScroll = ({ scrollOffset }) => {\n setScrollOffset(scrollOffset);\n };\n\n const handleDownload = () => {\n const uncompressedFileName = selectedDump.file.replace(\".gz\", \"\");\n const downloadLink = document.createElement(\"a\");\n downloadLink.href = BASE_URL + selectedDump.file;\n downloadLink.download = uncompressedFileName;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n };\n\n const handleSearchChange = (e) => {\n setSearchQuery(e.target.value);\n };\n\n return (\n

Tweets Archive Viewer

\n \n \n

\n \n

\n Showing {filteredTweets.length} of {totalProcessed} processed tweets\n

\n {error ?

{error}

: (\n \n {Row}\n \n )}\n {isLoading &&

Cargando tweets...

}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Tweets Archive Viewer\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\nheader {\n margin-bottom: 20px;\n}\n\nh1 {\n text-align: center;\n color: #1da1f2;\n}\n\n.controls {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 10px;\n gap: 10px;\n}\n\n.stats {\n text-align: center;\n font-size: 0.9em;\n color: #657786;\n margin-bottom: 10px;\n}\n\nselect {\n padding: 8px;\n font-size: 16px;\n width: 100%;\n max-width: 300px;\n}\n\n.download-button {\n padding: 2px 8px;\n font-size: 16px;\n background-color: #1da1f2;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.download-button:hover {\n background-color: #1991db;\n}\n\n.search-container {\n display: flex;\n justify-content: center;\n margin-bottom: 10px;\n}\n\n.search-input {\n width: 100%;\n max-width: 400px;\n padding: 8px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n.tweet-container {\n overflow: hidden;\n position: relative;\n}\n\n.virtual-list {\n height: 100%;\n width: 100%;\n}\n\n.tweet {\n background-color: white;\n border-radius: 10px;\n padding: 15px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow: hidden;\n}\n\n.tweet-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n}\n\n.tweet h3 {\n margin-top: 0;\n margin-bottom: 5px;\n color: #14171a;\n}\n\n.tweet-date {\n font-size: 0.9em;\n color: #657786;\n text-decoration: none;\n}\n\n.tweet-date:hover {\n text-decoration: underline;\n}\n\n.tweet p {\n color: #2b2b2b;\n margin-top: 10px;\n}\n\n.tweet-stats {\n display: flex;\n gap: 15px;\n color: #657786;\n margin-top: 10px;\n}\n\n.tweet-media {\n margin-top: 10px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.image-container {\n width: 100%;\n height: 300px;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: 10px;\n}\n\n.tweet-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.video-container {\n width: 100%;\n height: 300px;\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.tweet-video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.loading {\n text-align: center;\n padding: 20px;\n font-style: italic;\n color: #657786;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(240, 240, 240, 0.8);\n}\n\n.error {\n color: #e0245e;\n text-align: center;\n padding: 20px;\n font-weight: bold;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n}\n\nfooter a {\n color: #1da1f2;\n text-decoration: none;\n}\n\nfooter a:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/nulo/tweetArchiveViewer/code/main.tsx","extension","actionData","errors"]