No data available yet. Please check back later.

;\n }\n\n return (\n

\n {diffs.map((diff, index) => (\n

\n {new Date(diff.changed_at).toLocaleString()}\n \n {diff.status === \"new\" || diff.status === \"initial\" ? \"➕\" : \"➖\"}\n \n @{diff.username}\n \n {diff.status === \"new\" || diff.status === \"initial\" ? \"started following\" : \"unfollowed\"}\n \n

\n ))}\n

\n );\n}\n\nfunction App({ initialDiffs }: { initialDiffs: DiffEntry[] }) {\n const [diffs, setDiffs] = React.useState(initialDiffs);\n const [error, setError] = React.useState(null);\n\n React.useEffect(() => {\n const fetchDiffs = async () => {\n try {\n const response = await fetch(\"/api/diffs\");\n if (response.ok) {\n const newDiffs = await response.json();\n setDiffs(newDiffs);\n setError(null);\n } else {\n throw new Error(\"Failed to fetch diffs\");\n }\n } catch (err) {\n setError(\"Failed to fetch data. Please try again later.\");\n }\n };\n\n const intervalId = setInterval(fetchDiffs, 60000); // Refresh every minute\n return () => clearInterval(intervalId);\n }, []);\n\n return (\n

Milei Twitter Following Timeline

\n {error ?

{error}

: (\n <>\n \n {diffs.length > 0 && (\n \n )}\n \n )}\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n const initialDiffs = JSON.parse(root.getAttribute(\"data-initial-diffs\") || \"[]\");\n createRoot(root).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function getLatestDiffs(): Promise {\n const KEY = \"mileiTwitterScrapFollowing\";\n const diffBlobKeys = await blob.list(`${KEY}_diffs_`);\n\n if (diffBlobKeys.length === 0) {\n return [];\n }\n\n // Sort keys by timestamp (descending) and get the most recent\n diffBlobKeys.sort((a, b) => b.key.localeCompare(a.key));\n const latestKey = diffBlobKeys[0].key;\n\n const latestDiffs = await blob.getJSON(latestKey);\n return latestDiffs;\n}\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n\n try {\n if (url.pathname === \"/api/diffs\") {\n const latestDiffs = await getLatestDiffs();\n return new Response(JSON.stringify(latestDiffs), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const initialDiffs = await getLatestDiffs();\n return new Response(generateHtml(initialDiffs), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n console.error(\"Error occurred:\", error);\n const errorMessage = \"An error occurred while fetching data. Please try again later.\";\n return new Response(generateHtml([], errorMessage), {\n headers: { \"Content-Type\": \"text/html\" },\n status: 500,\n });\n }\n}\n\nfunction generateHtml(initialDiffs: DiffEntry[], message: string = \"\") {\n return `\n \n \n Milei Twitter Following Timeline\n \n \n \n \n

\n \n \n \n \n `;\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.container {\n background-color: #f9f9f9;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nh1 {\n text-align: center;\n color: #1da1f2;\n}\n\n.timeline {\n margin-top: 20px;\n}\n\n.timeline-entry {\n margin-bottom: 10px;\n padding: 10px;\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.timestamp {\n font-size: 0.8em;\n color: #666;\n}\n\n.status {\n margin: 0 10px;\n}\n\n.status.new, .status.initial {\n color: #17bf63;\n}\n\n.status.removed {\n color: #e0245e;\n}\n\n.username {\n font-weight: bold;\n color: #1da1f2;\n}\n\n.action {\n margin-left: 5px;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n font-size: 0.8em;\n color: #666;\n}\n\nfooter a {\n color: #1da1f2;\n text-decoration: none;\n}\n\nfooter a:hover {\n text-decoration: underline;\n}\n\n.error {\n color: #e0245e;\n text-align: center;\n font-weight: bold;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/nulo/mileiTwitterTimeline/code/main.tsx","extension","actionData","errors"]