[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68d4befc94a48191b1eb1cd6811fb527","versionInt","title","Paper Submission Web App - Single File React Component","type","code/react","content","import React, { useState, useRef } from \"react\";\n\n// PaperSubmissionApp.jsx\n// Single-file React component (default export) using Tailwind CSS for styling.\n// - Registration & Login (local state mock)\n// - Abstract & Cover Letter inputs\n// - Manuscript file upload (single file)\n// - Figures upload (multiple files) with image previews\n// - Basic client-side validation and friendly UI\n// Notes:\n// - This component is front-end only. Replace the `handleSubmit*` functions\n// with real API calls (e.g. fetch/axios) to integrate with your backend.\n// - Tailwind should be available in the host project.\n// - shadcn/ui components can be swapped in for improved visuals.\n\nexport default function PaperSubmissionApp() {\n const [view, setView] = useState(\"home\"); // home | register | login | submit\n\n // --- Auth state (mock) ---\n const [user, setUser] = useState(null);\n const [registerData, setRegisterData] = useState({ name: \"\", email: \"\", password: \"\", confirm: \"\" });\n const [loginData, setLoginData] = useState({ email: \"\", password: \"\" });\n const [authErrors, setAuthErrors] = useState(\"\");\n\n // --- Submission state ---\n const [title, setTitle] = useState(\"\");\n const [abstract, setAbstract] = useState(\"\");\n const [coverLetter, setCoverLetter] = useState(\"\");\n const [manuscriptFile, setManuscriptFile] = useState(null);\n const [figureFiles, setFigureFiles] = useState([]);\n const [figPreviews, setFigPreviews] = useState([]);\n const [submitMessage, setSubmitMessage] = useState(\"\");\n\n const fileInputRef = useRef(null);\n const figInputRef = useRef(null);\n\n // --- Helpers ---\n function validateRegister() {\n const { name, email, password, confirm } = registerData;\n if (!name || !email || !password) return \"All fields are required.\";\n if (password.length < 6) return \"Password must be at least 6 characters.\";\n if (password !== confirm) return \"Passwords do not match.\";\n return \"\";\n }\n\n function handleRegister(e) {\n e.preventDefault();\n const err = validateRegister();\n if (err) return setAuthErrors(err);\n // Mock register -> set user locally\n setUser({ name: registerData.name, email: registerData.email });\n setAuthErrors(\"\");\n setView(\"submit\");\n }\n\n function handleLogin(e) {\n e.preventDefault();\n // Mock login: accept any non-empty email/password\n if (!loginData.email || !loginData.password) return setAuthErrors(\"Provide email and password.\");\n setUser({ name: loginData.email.split(\"@\")[0], email: loginData.email });\n setAuthErrors(\"\");\n setView(\"submit\");\n }\n\n function handleLogout() {\n setUser(null);\n setView(\"home\");\n }\n\n // Manuscript upload (single file)\n function handleManuscriptChange(e) {\n const f = e.target.files && e.target.files[0];\n setManuscriptFile(f || null);\n }\n\n // Figures: multiple + previews\n function handleFiguresChange(e) {\n const files = Array.from(e.target.files || []);\n setFigureFiles(files);\n\n // build previews for images (non-images will be shown with generic icon)\n const previews = files.map((f) => {\n const isImg = f.type.startsWith(\"image/\");\n if (!isImg) return { name: f.name, url: null, size: f.size };\n return { name: f.name, url: URL.createObjectURL(f), size: f.size };\n });\n // revoke previous previews to avoid memory leak\n figPreviews.forEach((p) => p.url && URL.revokeObjectURL(p.url));\n setFigPreviews(previews);\n }\n\n function removeFigure(index) {\n const files = [...figureFiles];\n files.splice(index, 1);\n setFigureFiles(files);\n const previews = [...figPreviews];\n const removed = previews.splice(index, 1)[0];\n if (removed && removed.url) URL.revokeObjectURL(removed.url);\n setFigPreviews(previews);\n\n // also reset the file input so user can re-add\n if (figInputRef.current) figInputRef.current.value = \"\";\n }\n\n // Basic client-side submission (pack into FormData and print to console)\n async function handleSubmitManuscript(e) {\n e.preventDefault();\n if (!user) return setSubmitMessage(\"You must be logged in to submit.\");\n if (!title.trim()) return setSubmitMessage(\"Please provide a manuscript title.\");\n if (!abstract.trim()) return setSubmitMessage(\"Please provide an abstract.\");\n if (!manuscriptFile) return setSubmitMessage(\"Please upload the manuscript file (PDF, DOCX, etc.).\");\n\n setSubmitMessage(\"Preparing submission...\");\n\n // Build FormData -- replace with API endpoint\n const fd = new FormData();\n fd.append(\"title\", title);\n fd.append(\"abstract\", abstract);\n fd.append(\"coverLetter\", coverLetter);\n fd.append(\"manuscript\", manuscriptFile);\n figureFiles.forEach((f, i) => fd.append(`figure_${i + 1}`, f));\n fd.append(\"submittedBy\", user.email);\n\n // Demo: create a JSON-friendly summary and log it\n const summary = {\n title,\n abstract: abstract.slice(0, 300) + (abstract.length > 300 ? \"...\" : \"\"),\n coverLetter: coverLetter.slice(0, 300) + (coverLetter.length > 300 ? \"...\" : \"\"),\n manuscriptFile: manuscriptFile ? { name: manuscriptFile.name, size: manuscriptFile.size } : null,\n figures: figureFiles.map((f) => ({ name: f.name, size: f.size })),\n submittedBy: user.email,\n submittedAt: new Date().toISOString(),\n };\n\n // Simulate upload delay\n await new Promise((res) => setTimeout(res, 800));\n console.log(\"FormData (simulated):\", summary);\n\n setSubmitMessage(\"Submission prepared (see console). Replace handleSubmitManuscript with a real API call to POST FormData.\");\n }\n\n // --- UI pieces ---\n const Nav = () => (\n

PaperPortal

Submit and manage your manuscript

\n \n

\n );\n\n function Home() {\n return (\n

Welcome to PaperPortal

A minimal submission front-end: register/login, write an abstract & cover letter, upload manuscript and figures.

\n\n

\n setView(\"register\")} />\n setView(\"login\")} />\n setView(user ? \"submit\" : \"login\")} />\n

\n );\n }\n\n function Card({ title, body, action }) {\n return (\n

{title}

{body}

\n \n

\n );\n }\n\n function RegisterView() {\n return (\n

Register

\n {authErrors &&

{authErrors}

}\n \n

\n );\n }\n\n function LoginView() {\n return (\n

Login

\n {authErrors &&

{authErrors}

}\n \n

\n );\n }\n\n function SubmitView() {\n return (\n

New Submission

\n Manuscript Title\n setTitle(e.target.value)} className=\"input\" placeholder=\"Short, descriptive title\" />\n

\n\n

\n Abstract\n

setAbstract(e.target.value)} className=\"textarea h-32\" placeholder=\"Paste the paper abstract here.\" />\n            <div className=\"text-xs text-slate-500 mt-1\">{abstract.length} characters</div>\n          </div>\n\n          <div>\n            <label className=\"block text-sm mb-1\">Cover letter (optional)</label>\n            <textarea value={coverLetter} onChange={(e) => setCoverLetter(e.target.value)} className=\"textarea h-28\" placeholder=\"Optional: a short cover letter to the editor\" />\n          </div>\n\n          <div>\n            <label className=\"block text-sm mb-1\">Manuscript file</label>\n            <input ref={fileInputRef} type=\"file\" accept=\".pdf,.doc,.docx,.tex\" onChange={handleManuscriptChange} />\n            {manuscriptFile && <div className=\"mt-2 text-sm\">Selected: <strong>{manuscriptFile.name}</strong> ({Math.round(manuscriptFile.size/1024)} KB)</div>}\n          </div>\n\n          <div>\n            <label className=\"block text-sm mb-1\">Figures (multiple)</label>\n            <input ref={figInputRef} type=\"file\" accept=\"image/*,application/pdf\" onChange={handleFiguresChange} multiple />\n            <div className=\"mt-2 grid grid-cols-2 md:grid-cols-4 gap-3\">\n              {figPreviews.length === 0 && <div className=\"text-sm text-slate-500\">No figures added</div>}\n              {figPreviews.map((p, i) => (\n                <div key={i} className=\"border rounded p-2 flex flex-col items-center text-center\">\n                  {p.url ? (\n                    <img src={p.url} className=\"w-full h-28 object-contain mb-2\" alt={p.name} />\n                  ) : (\n                    <div className=\"w-full h-28 flex items-center justify-center text-xs text-slate-600 border rounded mb-2\">{p.name}</div>\n                  )}\n                  <div className=\"text-xs\">{p.name}</div>\n                  <div className=\"flex gap-2 mt-2\">\n                    <button type=\"button\" onClick={() => removeFigure(i)} className=\"text-xs btn-ghost\">Remove</button>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <div className=\"flex items-center gap-3\">\n            <button type=\"submit\" className=\"btn\">Submit manuscript</button>\n            <button type=\"button\" className=\"btn-ghost\" onClick={() => { setTitle(\"\"); setAbstract(\"\"); setCoverLetter(\"\"); setManuscriptFile(null); setFigureFiles([]); setFigPreviews([]); if (fileInputRef.current) fileInputRef.current.value = \"\"; if (figInputRef.current) figInputRef.current.value = \"\"; }}>Reset</button>\n            <div className=\"text-sm text-slate-600\">{submitMessage}</div>\n          </div>\n        </form>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-screen bg-slate-50 text-slate-900\">\n      <Nav />\n      <main className=\"py-8\">\n        {view === \"home\" && <Home />}\n        {view === \"register\" && <RegisterView />}\n        {view === \"login\" && <LoginView />}\n        {view === \"submit\" && <SubmitView />}\n      </main>\n\n      <footer className=\"border-t mt-12 bg-white\">\n        <div className=\"max-w-4xl mx-auto px-4 py-6 text-sm text-slate-600\">Built with ♥ — replace demo submit handler with your API endpoint to accept real submissions.</div>\n      </footer>\n\n      {/* Tiny utility styles (could be moved to global stylesheet) */}\n      <style>{`\n        .input { width: 100%; padding: 0.6rem; border: 1px solid #E6E7EB; border-radius: 0.5rem; }\n        .textarea { width: 100%; padding: 0.6rem; border: 1px solid #E6E7EB; border-radius: 0.5rem; }\n        .btn { padding: 0.5rem 0.9rem; background: #0f172a; color: white; border-radius: 0.5rem; }\n        .btn-ghost { padding: 0.45rem 0.8rem; background: transparent; border-radius: 0.5rem; border: 1px solid transparent; }\n        .btn-outline { padding: 0.45rem 0.8rem; background: white; border-radius: 0.5rem; border: 1px solid #CBD5E1; }\n        .btn-ghost:hover, .btn:hover { opacity: 0.95; }\n      `}</style>\n    </div>\n  );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","7421592760913836885","traceTime",1776422155655]
</article></body></html>