\n);\n\nasync function loader({ bearerToken }: { bearerToken: string }) {\n const data = await (await fetch(\"/api/projects-loader\", {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n })).json();\n return data;\n}\n\n// Component for the create project modal\nconst CreateProjectModal = ({\n isOpen,\n onClose,\n bearerToken,\n onProjectCreated,\n}: {\n isOpen: boolean;\n onClose: () => void;\n bearerToken: string;\n onProjectCreated: () => void;\n}) => {\n const [projectName, setProjectName] = useState(\"\");\n const [privacy, setPrivacy] = useState<\"public\" | \"unlisted\" | \"private\">(\"public\");\n const [isCreating, setIsCreating] = useState(false);\n const [error, setError] = useState(\"\");\n\n if (!isOpen) return null;\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!projectName.trim()) {\n setError(\"Project name is required\");\n return;\n }\n\n setIsCreating(true);\n setError(\"\");\n\n try {\n const response = await fetch(\"/api/create-project\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n body: JSON.stringify({\n name: projectName,\n privacy: privacy,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to create project\");\n }\n\n onProjectCreated();\n onClose();\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsCreating(false);\n }\n };\n\n return (\n

Create New Project

\n \n ✕\n \n

\n\n

\n \n Project Name\n \n setProjectName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200\"\n placeholder=\"Enter project name\"\n disabled={isCreating}\n />\n

\n\n

\n \n Privacy\n \n

\n setPrivacy(\"public\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Public (Visible to everyone)\n \n

\n\n

\n setPrivacy(\"unlisted\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Unlisted (Accessible with link, not listed publicly)\n \n

\n\n

\n setPrivacy(\"private\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Private (Only visible to you)\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Cancel\n \n \n {isCreating\n ? (\n

\n Creating...\n

\n )\n : (\n \"Create Project\"\n )}\n \n

\n );\n};\n\nexport function Projects({ bearerToken, setProject }: { bearerToken: string; setProject: any }) {\n const [loaderData, setLoaderData] = useState();\n const [isLoading, setIsLoading] = useState(true);\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const loadProjects = () => {\n setIsLoading(true);\n loader({ bearerToken })\n .then(setLoaderData)\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n loadProjects();\n }, []);\n\n return (\n

\n {isLoading\n ? (\n
\n Loading projects\n
\n
\n )\n : loaderData?.profile?.username\n ? (\n
\n \n @{loaderData?.profile?.username}\n \n Projects\n
\n )\n : (\n \"Your Projects\"\n )}\n

\n setIsModalOpen(true)}\n className=\"px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200 flex items-center justify-center sm:justify-start\"\n >\n \n Create Project\n \n

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

\n {loaderData?.projects?.map((p: any) => (\n setProject({ ...p, username: loaderData?.profile?.username })}\n >\n

{p.name}

\n {p.privacy === \"public\" && (\n \n \n Public\n \n )}\n {p.privacy === \"private\" && (\n \n \n Private\n \n )}\n {p.privacy === \"unlisted\" && (\n \n \n Unlisted\n \n )}\n

\n ))}\n

\n )}\n\n setIsModalOpen(false)}\n bearerToken={bearerToken}\n onProjectCreated={loadProjects}\n />\n \n );\n}","deleted","label",[174,175,156],"frontend","components","permalink","https://www.val.town/x/loading/OpenTownie/code/frontend/components/Projects.tsx","extension","actionData","errors"]

Create New Project

\n {isLoading\n ? (\n \n Loading projects\n \n \n )\n : loaderData?.profile?.username\n ? (\n \n \n @{loaderData?.profile?.username}\n \n Projects\n \n )\n : (\n \"Your Projects\"\n )}\n

\n {isLoading\n ? (\n
\n Loading projects\n
\n
\n )\n : loaderData?.profile?.username\n ? (\n
\n \n @{loaderData?.profile?.username}\n \n Projects\n
\n )\n : (\n \"Your Projects\"\n )}\n