\n \n Oops!\n {message}\n\n

\n {retry && (\n \n Try Again\n \n )}\n\n {useFallback && (\n \n Use Sample Data\n \n )}\n

\n \n );\n}\n\nfunction Loader() {\n return (\n

\n {/* Outer container for spin */}\n

\n {/* Main record container */}\n

\n {/* Outer ring groove */}\n

\n\n {/* Inner grooves */}\n

\n\n {/* Light arcs to show rotation */}\n

\n\n {/* Center label */}\n

\n {/* Center hole */}\n

\n {/* Subtle label detail */}\n

\n\n {/* Loading text with subtle pulse animation */}\n

\n Loading Ash's record collection...\n

\n );\n}\n\nfunction shuffleArray(array) {\n const shuffledArray = [...array];\n for (let i = shuffledArray.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];\n }\n return shuffledArray;\n}\n\nfunction MusicButtons({ albumTitle, artistName }) {\n const links = [\n {\n name: \"Apple Music\",\n url: `https://music.apple.com/search?term=${encodeURIComponent(\n `${artistName} ${albumTitle}`\n )}`,\n classes: \"bg-gray-900 dark:bg-black\",\n },\n {\n name: \"Spotify\",\n url: `https://open.spotify.com/search/${encodeURIComponent(\n `${albumTitle} ${artistName}`\n )}`,\n classes: \"bg-green-500\",\n },\n ];\n\n return (\n

\n {links.map((link) => (\n \n {link.name}\n \n ))}\n

\n );\n}\n\nfunction RecordCard() {\n const [records, setRecords] = useState([]);\n const [currentRecordIndex, setCurrentRecordIndex] = useState(0);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n const [backHistory, setBackHistory] = useState([]);\n const [forwardHistory, setForwardHistory] = useState([]);\n const [moveDirection, setMoveDirection] = useState(null);\n const [hasInteracted, setHasInteracted] = useState(false);\n const [useFallbackData, setUseFallbackData] = useState(false);\n const fetchedRecords = useRef(new Set());\n\n const loadFallbackData = useCallback(() => {\n // Sample fallback data in case the API is down\n const fallbackRecords = [\n {\n basic_information: {\n title: \"Kind of Blue\",\n year: 1959,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-miles-davis-kind-of-blue\",\n artists: [{ name: \"Miles Davis\" }],\n formats: [\n {\n name: \"Vinyl\",\n text: \"LP, Album\",\n descriptions: [\"Mono\", \"Reissue\"],\n },\n ],\n labels: [{ name: \"Columbia\", catno: \"CL 1355\" }],\n genres: [\"Jazz\"],\n styles: [\"Modal\", \"Cool Jazz\"],\n },\n },\n {\n basic_information: {\n title: \"Abbey Road\",\n year: 1969,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-the-beatles-abbey-road\",\n artists: [{ name: \"The Beatles\" }],\n formats: [\n {\n name: \"Vinyl\",\n text: \"LP, Album\",\n descriptions: [\"Stereo\", \"Reissue\"],\n },\n ],\n labels: [{ name: \"Apple Records\", catno: \"PCS 7088\" }],\n genres: [\"Rock\"],\n styles: [\"Pop Rock\", \"Classic Rock\"],\n },\n },\n {\n basic_information: {\n title: \"Thriller\",\n year: 1982,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-michael-jackson-thriller\",\n artists: [{ name: \"Michael Jackson\" }],\n formats: [\n { name: \"Vinyl\", text: \"LP, Album\", descriptions: [\"Stereo\"] },\n ],\n labels: [{ name: \"Epic\", catno: \"EPC 85930\" }],\n genres: [\"Pop\", \"Funk / Soul\"],\n styles: [\"Disco\", \"Pop Rock\"],\n },\n },\n ];\n\n setRecords(fallbackRecords);\n setIsLoading(false);\n setUseFallbackData(true);\n setError(null);\n }, []);\n\n const fetchReleases = useCallback(async () => {\n setIsLoading(true);\n setError(null);\n try {\n const response = await fetch(\n \"https://ashryanio-getallreleasesfromdiscogs.web.val.run\"\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const fetchedRecords = await response.json();\n if (!Array.isArray(fetchedRecords)) {\n throw new Error(\"Received data is not an array\");\n }\n\n const shuffledRecords = shuffleArray(fetchedRecords);\n setRecords(shuffledRecords);\n setIsLoading(false);\n setUseFallbackData(false);\n } catch (error) {\n console.error(\"Failed to fetch releases:\", error);\n setError(\n `Failed to load records: ${error.message}. The API endpoint might be down.`\n );\n setIsLoading(false);\n }\n }, []);\n\n useEffect(() => {\n fetchReleases();\n }, [fetchReleases]);\n\n // Fetch release year for the current record\n useEffect(() => {\n async function fetchReleaseYear() {\n if (records.length === 0) return;\n\n const currentRecord = records[currentRecordIndex];\n if (\n !currentRecord ||\n fetchedRecords.current.has(currentRecord.basic_information.master_id)\n ) {\n return; // Skip if already fetched\n }\n\n try {\n console.log(\"Fetching release year for:\", currentRecord);\n const response = await fetch(\n `https://ashryanio-getallreleasesfromdiscogs.web.val.run/masters?id=${currentRecord.basic_information.master_id}`\n );\n if (!response.ok) {\n throw new Error(`Failed to fetch release year: ${response.status}`);\n }\n const data = await response.json();\n console.log(\"Fetched data:\", data);\n\n // Mark as fetched\n fetchedRecords.current.add(currentRecord.basic_information.master_id);\n\n // Update the record\n setRecords((prevRecords) =>\n prevRecords.map((record, index) =>\n index === currentRecordIndex\n ? { ...record, releaseYear: data.originalReleaseYear } // Use the correct key\n : record\n )\n );\n } catch (error) {\n console.error(\"Error fetching release year:\", error);\n }\n }\n\n fetchReleaseYear();\n }, [currentRecordIndex, records.length]);\n\n const getRandomRecord = useCallback(() => {\n if (!hasInteracted) setHasInteracted(true);\n setMoveDirection(\"right\");\n\n if (forwardHistory.length > 0) {\n const nextIndex = forwardHistory[forwardHistory.length - 1];\n setCurrentRecordIndex(nextIndex);\n setForwardHistory((prev) => prev.slice(0, -1));\n setBackHistory((prev) => [...prev, currentRecordIndex]);\n } else {\n const randomIndex = Math.floor(Math.random() * records.length);\n setBackHistory((prev) => [...prev, currentRecordIndex]);\n setForwardHistory([]);\n setCurrentRecordIndex(randomIndex);\n }\n }, [records, currentRecordIndex, forwardHistory, hasInteracted]);\n\n const goBack = useCallback(() => {\n if (!hasInteracted) setHasInteracted(true);\n setMoveDirection(\"left\");\n\n if (backHistory.length > 0) {\n const lastIndex = backHistory[backHistory.length - 1];\n setForwardHistory((prev) => [...prev, currentRecordIndex]);\n setCurrentRecordIndex(lastIndex);\n setBackHistory((prev) => prev.slice(0, -1));\n }\n }, [backHistory, currentRecordIndex, hasInteracted]);\n\n useEffect(() => {\n function handleKeydown(event) {\n if (\n event.target.tagName.toLowerCase() !== \"input\" &&\n event.target.tagName.toLowerCase() !== \"textarea\"\n ) {\n switch (event.key) {\n case \"ArrowLeft\":\n if (backHistory.length > 0) {\n goBack();\n }\n break;\n case \"ArrowRight\":\n getRandomRecord();\n break;\n }\n }\n }\n\n window.addEventListener(\"keydown\", handleKeydown);\n return () => window.removeEventListener(\"keydown\", handleKeydown);\n }, [goBack, getRandomRecord]);\n\n const handleDragEnd = useCallback(\n (event, info) => {\n const SWIPE_THRESHOLD = 50;\n const SWIPE_VELOCITY = 0.3;\n\n if (\n Math.abs(info.offset.x) > SWIPE_THRESHOLD &&\n Math.abs(info.velocity.x) > SWIPE_VELOCITY\n ) {\n if (info.offset.x > 0 && backHistory.length > 0) {\n goBack();\n } else if (info.offset.x < 0) {\n getRandomRecord();\n }\n }\n },\n [goBack, getRandomRecord, backHistory.length]\n );\n\n if (error)\n return (\n \n );\n if (isLoading) return ;\n if (records.length === 0) {\n return (\n

No records found.

\n );\n }\n\n const record = records[currentRecordIndex];\n\n const variants = {\n enter: (direction) => ({\n x: direction === \"left\" ? -200 : 200,\n opacity: 0,\n }),\n center: {\n x: 0,\n opacity: 1,\n },\n exit: (direction) => ({\n x: direction === \"left\" ? 200 : -200,\n opacity: 0,\n }),\n };\n\n const navigationVariants = {\n visible: { opacity: 1 },\n hidden: { opacity: 0 },\n };\n\n return (\n

\n Collxn Prototype: Ash's Random Vinyl Picker\n

\n Welcome to the rough sketch of what will become{\" \"}\n \n Collxn\n \n \n :{\" \"}\n \n
a new way to{\" \"}\n \n rediscover, navigate, and flex\n {\" \"}\n your{\" \"}\n \n vinyl record collection\n \n .\n

\n \n Get Collxn before it's a cult classic\n \n

\n This prototype is proudly built and hosted on{\" \"}\n \n Val Town\n \n .\n

\n {useFallbackData\n ? \"Using sample data (API unavailable)\"\n : `Pulling from ${records.length} records in Ash's collection`}\n

\n\n

\n {/* Navigation buttons outside AnimatePresence */}\n {backHistory.length > 0 && (\n \n \n \n \n \n )}\n\n \n \n \n \n \n\n \n \n

\n \n

\n\n artist.name)\n .join(\", \")}\n />\n\n

\n {record.basic_information.title}\n

\n {record.basic_information.artists\n .map((a) => a.name)\n .join(\", \")}{\" \"}\n • {record.releaseYear || record.basic_information.year}\n

\n\n

\n Format\n

\n {record.basic_information.formats[0]?.name} -{\" \"}\n {record.basic_information.formats[0]?.text}\n

\n {record.basic_information.formats[0]?.descriptions?.join(\n \" • \"\n )}\n

\n\n

\n Label\n

\n {record.basic_information.labels[0]?.name} •{\" \"}\n {record.basic_information.labels[0]?.catno}\n

\n\n

\n {record.basic_information.genres?.map((genre) => (\n \n {genre}\n \n ))}\n {record.basic_information.styles?.map((style) => (\n \n {style}\n \n ))}\n

\n \n \n

\n );\n}\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.error(\"ErrorBoundary caught an error:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n return ;\n }\n\n return this.props.children;\n }\n}\n\nfunction App() {\n // Always use dark mode\n useEffect(() => {\n document.documentElement.classList.add(\"dark\");\n }, []);\n\n return (\n

\n \n

\n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (!rootElement) {\n console.error(\"Root element not found\");\n return;\n }\n const root = createRoot(rootElement);\n root.render(\n \n \n \n );\n}\n\n// Ensure client() runs after the DOM is fully loaded\nif (typeof document !== \"undefined\") {\n document.addEventListener(\"DOMContentLoaded\", client);\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/favicon.svg\") {\n return new Response(\n ``\n );\n }\n\n return new Response(\n `\n \n \n Collxn Prototype: Ash's Random Vinyl Picker\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n }\n );\n}\n","deleted","label",[98],"permalink","https://www.val.town/x/gwoods22/randoDisc/code/main.tsx","extension","actionData","errors"]