thick gale
code of 'app/routes/documentation.tsx' :
export const loader = async ({ request }: LoaderFunctionArgs) => {
const markdownPath = findMarkdownPath(DOCS_MENU.menu, 'general-information');
// Works correctly!
const markdownContent = await readPost(markdownPath);
return json({ title, description, markdownContent });
};
export default function Documentation() {
const fetcher = useFetcher();
const [selectedMenuItem, setSelectedMenuItem] = useState<MenuDocItemType | null>(null);
const { markdownContent } = useLoaderData<typeof loader>();
const handleMenuItemClick = async (SelectedMenuItem: MenuDocItemType) => {
setSelectedMenuItem(SelectedMenuItem);
const markdownPath = findMarkdownPath(DOCS_MENU.menu, SelectedMenuItem.id);
try {
const formData = new FormData();
formData.append('markdownPath', markdownPath || '');
// Try to send request! But 404 :(
fetcher.submit(formData, { method: 'post', action: '/api/get-markdown' });
} catch (error) {
console.error('Error reading markdown file:', error);
}
};
return (
<div className="md:container mx-auto p-4">
<div className="my-10">
<MenuDoc onMenuItemClick={handleMenuItemClick} />
{selectedMenuItem && (
<div className="text-xl font-bold">Selected Menu Item: {selectedMenuItem.name}</div>
)}
</div>
<ReactMarkdown>{markdownContent}</ReactMarkdown>
</div>
);
}