\n \n \n Link Shortener\n \n \n

\n \n

\n \n \n

\n );\n}\n\n// Home page component\nfunction HomePage() {\n const [links, setLinks] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n const fetchLinks = async () => {\n try {\n setIsLoading(true);\n const response = await fetch(\"/api/links\");\n \n if (!response.ok) {\n throw new Error(\"Failed to fetch links\");\n }\n \n const data = await response.json();\n setLinks(data.links || []);\n } catch (err) {\n setError(\"Failed to load links. Please try again later.\");\n console.error(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n fetchLinks();\n }, []);\n\n const handleLinkCreated = (newLink: Link) => {\n setLinks([newLink, ...links]);\n };\n\n return (\n

\n \n \n {isLoading ? (\n

Loading links...

\n ) : error ? (\n

\n {error}\n

\n ) : (\n \n )}\n

\n );\n}\n\n// Redirect component\nfunction RedirectPage() {\n const { shortId } = useParams<{ shortId: string }>();\n const navigate = useNavigate();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n const checkLink = async () => {\n try {\n if (!shortId) {\n navigate(\"/not-found\");\n return;\n }\n\n const response = await fetch(`/api/links/${shortId}`);\n \n if (!response.ok) {\n navigate(\"/not-found\");\n return;\n }\n \n // If we get here, the backend should have already redirected us\n // This is just a fallback\n setError(\"Redirect failed. Please try again.\");\n } catch (err) {\n setError(\"Something went wrong. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n checkLink();\n }, [shortId, navigate]);\n\n if (isLoading) {\n return (\n

Redirecting...

\n );\n }\n\n if (error) {\n return (\n

\n {error}\n

\n \n Go to Homepage\n \n

\n );\n }\n\n return null;\n}\n\n// Create the router\nconst router = createBrowserRouter(\n createRoutesFromElements(\n }>\n } />\n } />\n } />\n } />\n \n )\n);\n\n// Main App component\nexport function App() {\n return ;\n}","deleted","label",[168,169,151],"frontend","components","permalink","https://www.val.town/x/loading/wondrousCyanRodent/code/frontend/components/App.tsx","extension","actionData","errors"]