\n Oops!\n {message}\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 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\n useEffect(() => {\n async function fetchReleases() {\n try {\n const response = await fetch(\"https://ashryanio-getallreleasesfromdiscogs.web.val.run\");\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const fetchedRecords = await response.json();\n console.log(fetchedRecords);\n if (!Array.isArray(fetchedRecords)) {\n throw new Error(\"Received data is not an array\");\n }\n const shuffledRecords = shuffleArray(fetchedRecords);\n setRecords(shuffledRecords);\n setIsLoading(false);\n } catch (error) {\n console.error(\"Failed to fetch releases:\", error);\n setError(error.message);\n setIsLoading(false);\n }\n }\n fetchReleases();\n }, []);\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((event, info) => {\n const SWIPE_THRESHOLD = 50;\n const SWIPE_VELOCITY = 0.3;\n\n if (Math.abs(info.offset.x) > SWIPE_THRESHOLD && Math.abs(info.velocity.x) > SWIPE_VELOCITY) {\n if (info.offset.x > 0 && backHistory.length > 0) {\n goBack();\n } else if (info.offset.x < 0) {\n getRandomRecord();\n }\n }\n }, [goBack, getRandomRecord, backHistory.length]);\n\n if (error) return ;\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

Ash Randorecs

\n Pulling from {records.length} records\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

{record.basic_information.title}

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

\n\n

Format

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

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

\n\n

Label

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

\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 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 Ash Randorecs\n \n \n \n \n \n \n

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