diff --git a/dashboard/package.json b/dashboard/package.json index 50a9ef8..956e378 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -18,6 +18,10 @@ "@mdx-js/mdx": "^3.1.0", "@mdx-js/react": "^3.1.0", "@mdx-js/rollup": "^3.1.0", + "@milkdown/crepe": "^7.5.9", + "@milkdown/kit": "^7.5.9", + "@milkdown/react": "^7.5.9", + "@milkdown/theme-nord": "^7.5.9", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.4", "@radix-ui/react-avatar": "^1.0.3", diff --git a/dashboard/src/components/common/Checkbox/Check.tsx b/dashboard/src/components/common/Checkbox/Check.tsx index 9385f1d..8a023e9 100644 --- a/dashboard/src/components/common/Checkbox/Check.tsx +++ b/dashboard/src/components/common/Checkbox/Check.tsx @@ -23,7 +23,7 @@ export const Check = ({ name, label, controllerProps, alignWithLabel = false, ru name={name} rules={rules} render={({ field: { name, onChange, ref, value } }) => ( - + )} {...controllerProps} /> diff --git a/dashboard/src/components/common/Forms/FormControl/FormElement.tsx b/dashboard/src/components/common/Forms/FormControl/FormElement.tsx index fdf44d5..4780cc4 100644 --- a/dashboard/src/components/common/Forms/FormControl/FormElement.tsx +++ b/dashboard/src/components/common/Forms/FormControl/FormElement.tsx @@ -62,3 +62,7 @@ export const FormElement = ({ name, label, children, tooltip, ...props }: FormEl ) }; + +export const FormHelperText = ({ children }: { children: React.ReactNode }) => { + return
{children}
+} \ No newline at end of file diff --git a/dashboard/src/components/common/MarkdownEditor/MarkdownEditor.tsx b/dashboard/src/components/common/MarkdownEditor/MarkdownEditor.tsx new file mode 100644 index 0000000..7a22fee --- /dev/null +++ b/dashboard/src/components/common/MarkdownEditor/MarkdownEditor.tsx @@ -0,0 +1,37 @@ +import { Crepe } from '@milkdown/crepe'; +import '@milkdown/crepe/theme/common/style.css' +import '@milkdown/crepe/theme/frame.css'; +import { useEffect } from 'react'; +import { Editor } from '@milkdown/kit/core'; +import './markdown.css' + +export interface MarkdownEditorProps { + value: string; + setCrepeInstance: React.Dispatch | null>> +} + +const MarkdownEditor = ({ value, setCrepeInstance }: MarkdownEditorProps) => { + + useEffect(() => { + const crepe = new Crepe({ + root: '#editor', + defaultValue: value, + }).create() + setCrepeInstance(crepe); + + return () => { + crepe.then((editor) => { + editor.destroy(); + }); + }; + }, []); + + return ( +
+ {/* The editor will be initialized here */} +
+ + ); +}; + +export default MarkdownEditor \ No newline at end of file diff --git a/dashboard/src/components/common/MarkdownEditor/markdown.css b/dashboard/src/components/common/MarkdownEditor/markdown.css new file mode 100644 index 0000000..7bbf3ba --- /dev/null +++ b/dashboard/src/components/common/MarkdownEditor/markdown.css @@ -0,0 +1,7 @@ +.milkdown .ProseMirror { + padding:0 !important; +} +.milkdown .ProseMirror h1, .milkdown .ProseMirror h2, .milkdown .ProseMirror h3, .milkdown .ProseMirror h4, .milkdown .ProseMirror h5, .milkdown .ProseMirror h6 { + font-family: inherit; + font-weight: 600; +} \ No newline at end of file diff --git a/dashboard/src/components/features/APIClient/APIClientContent.tsx b/dashboard/src/components/features/APIClient/APIClientContent.tsx index 8472e78..eea2be4 100644 --- a/dashboard/src/components/features/APIClient/APIClientContent.tsx +++ b/dashboard/src/components/features/APIClient/APIClientContent.tsx @@ -137,10 +137,7 @@ const APIClientContent = ({ endpoint, open, parameters }: APIClientContentProps) return obj } else { - return Object.keys(data)?.filter((key) => !(key.includes('key') || key.includes('value'))).reduce((acc, key) => { - acc[key] = data[key] - return acc - }, {} as Record) + return data } } diff --git a/dashboard/src/components/features/documentation/DocsPage/DocsPageForm.tsx b/dashboard/src/components/features/documentation/DocsPage/DocsPageForm.tsx new file mode 100644 index 0000000..802243a --- /dev/null +++ b/dashboard/src/components/features/documentation/DocsPage/DocsPageForm.tsx @@ -0,0 +1,90 @@ +import { Check } from "@/components/common/Checkbox/Check"; +import { FormElement, FormHelperText } from "@/components/common/Forms/FormControl/FormElement"; +import { Input } from "@/components/ui/input"; +import { CommitDocsPage } from "@/types/commit/CommitDocsPage"; +import { ChevronDown, ChevronRight } from "lucide-react"; +import { useState } from "react"; +import { useFormContext } from "react-hook-form"; + +export const DocsPageForm = () => { + const { register } = useFormContext(); + const [isExpanded, setIsExpanded] = useState(false); + + return ( +
+ {/* Title Field */} +
+ + + + +
+ + {/* Hidden Fields */} + {isExpanded && ( +
+
+ + + + Badge is a short text that appears on the left side of the title in the sidebar. + + + + + + Add Tailwind colors like red, green, blue, yellow, etc. + + + + + + Icon is the Lucide icon that appears on the left side of the title in the sidebar. + + +
+
+ + + + + + + + + +
+
+ )} +
+ ); +}; diff --git a/dashboard/src/pages/features/docs/EditorComponent.tsx b/dashboard/src/pages/features/docs/EditorComponent.tsx new file mode 100644 index 0000000..1234299 --- /dev/null +++ b/dashboard/src/pages/features/docs/EditorComponent.tsx @@ -0,0 +1,84 @@ +import { ErrorBanner } from '@/components/common/ErrorBanner/ErrorBanner'; +import { FullPageLoader } from '@/components/common/FullPageLoader/FullPageLoader'; +import { DocsPageForm } from '@/components/features/documentation/DocsPage/DocsPageForm'; +import { Button } from '@/components/ui/button'; +import { useToast } from '@/components/ui/use-toast'; +import { CommitDocsPage } from '@/types/commit/CommitDocsPage'; +import { removeFrappeFields } from '@/utils/removeFrappeFields'; +import { Editor } from '@milkdown/kit/core'; +import { FrappeDoc, useFrappeUpdateDoc } from 'frappe-react-sdk'; +import { lazy, useState, Suspense } from 'react'; +import { useForm, FormProvider } from 'react-hook-form'; +import { getMarkdown } from '@milkdown/utils'; + +const MarkdownEditor = lazy(() => import('@/components/common/MarkdownEditor/MarkdownEditor')); + + +export const EditorComponent = ({ data, setEdit, mutate }: { data: CommitDocsPage, setEdit: React.Dispatch>, mutate: VoidFunction }) => { + const [crepeInstance, setCrepeInstance] = useState | null>(null); + + const methods = useForm({ + defaultValues: { + ...removeFrappeFields(data as FrappeDoc) + } + }) + const { updateDoc, error, loading } = useFrappeUpdateDoc() + + const handleGetMarkdown = async () => { + if (crepeInstance) { + const markdownContent = await crepeInstance.then((editor) => { + return editor.action(getMarkdown()); + }) + return markdownContent; + } + return '' + }; + + const { toast } = useToast(); + + const onSubmit = async (data: CommitDocsPage) => { + const markdownContent = await handleGetMarkdown(); + updateDoc("Commit Docs Page", data.name, { + ...data, + content: markdownContent, + }).then(() => { + mutate() + toast({ + description: "Page Updated Successfully", + duration: 1500 + }) + }).then(() => { + setEdit(false) + }) + } + return ( + +
+
+
+ + +
+
+ {error && } + {loading && } + +
+ }> + + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/dashboard/src/pages/features/docs/Footer.tsx b/dashboard/src/pages/features/docs/Footer.tsx index 628ecc2..32a015d 100644 --- a/dashboard/src/pages/features/docs/Footer.tsx +++ b/dashboard/src/pages/features/docs/Footer.tsx @@ -1,68 +1,78 @@ -import { CommitDocs } from "@/types/commit/CommitDocs"; -import { DocsFooterItem } from "./docs"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Bird, Github, Linkedin, Send, Slack, Twitter, Youtube } from "lucide-react"; +import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; -export const Footer = ({ commit_docs, footer_items }: { commit_docs: Omit, footer_items: Record }) => { +export const Footer = ({ ID }: { ID: string }) => { - const social_links = { - 'raven': commit_docs.raven, - 'twitter': commit_docs.twitter_url, - 'linkedin': commit_docs.linkedin, - 'slack': commit_docs.slack, - 'github': commit_docs.github, - 'youtube': commit_docs.youtube, - 'telegram': commit_docs.telegram, - } - return ( -
-
-
-
-
- {commit_docs.light_mode_logo && ( - Logo - )} - {commit_docs.header && ( -

{commit_docs.header}

- )} -
+ const { data, isLoading } = useGetCommitDocsDetails(ID); -
- {Object.keys(footer_items).map((section) => ( -
-
{section}
- -
- ))} -
+ if (data) { + const commit_docs = data.commit_docs; + const footer_items = data.footer_items + + const social_links = { + 'raven': commit_docs.raven, + 'twitter': commit_docs.twitter_url, + 'linkedin': commit_docs.linkedin, + 'slack': commit_docs.slack, + 'github': commit_docs.github, + 'youtube': commit_docs.youtube, + 'telegram': commit_docs.telegram, + } + return ( +
+
+
+
+
+ {commit_docs.light_mode_logo && ( + Logo + )} + {commit_docs.header && ( +

{commit_docs.header}

+ )} +
+ +
+ {Object.keys(footer_items).map((section) => ( +
+
{section}
+ +
+ ))} +
-
- {Object.entries(social_links).map(([field, url]) => - url ? : null - )} +
+ {Object.entries(social_links).map(([field, url]) => + url ? : null + )} +
+
+ Copyright © {new Date().getFullYear()} {commit_docs.company_name}, Build with commit. +
-
- Copyright © {new Date().getFullYear()} {commit_docs.company_name}, Build with commit. -
-
-
- ) +
+ ) + } + if (isLoading) { + return ; + } + return null } @@ -101,4 +111,41 @@ const SocialMediaIcon: React.FC = ({ field, url }) => { ); +}; + +const FooterSkeleton = () => { + return ( +
+
+
+ {/* Links Section Skeleton */} +
+
+
    +
  • +
  • +
  • +
+
+
+
+
    +
  • +
  • +
  • +
+
+ {/* Social Media Icons Skeleton */} +
+
+
+
+
+
+
+
+
+
+
+ ); }; \ No newline at end of file diff --git a/dashboard/src/pages/features/docs/Navbar.tsx b/dashboard/src/pages/features/docs/Navbar.tsx index ce88d29..b980cd0 100644 --- a/dashboard/src/pages/features/docs/Navbar.tsx +++ b/dashboard/src/pages/features/docs/Navbar.tsx @@ -4,50 +4,60 @@ import { Input } from "@/components/ui/input"; import { DocsNavbarItem } from "./docs"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { ChevronDown, Search } from "lucide-react"; +import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; -export const Navbar = ({ navbar_items }: { navbar_items: Record }) => { - return ( -
-
-
+export const Navbar = ({ ID }: { ID: string }) => { + const { data, isLoading } = useGetCommitDocsDetails(ID); + if (data) { + const navbar_items = data.navbar_items; + return ( +
-
-
- {/* Left side: Search bar */} -
- - -
- {/* Right side: Navbar items */} -
- {Object.keys(navbar_items).reverse().map((key) => ( -
- {navbar_items[key]?.type === 'Button' ? ( - - ) : ( - - )} -
- ))} +
+
+
+
+ {/* Left side: Search bar */} +
+ + +
+ {/* Right side: Navbar items */} +
+ {Object.keys(navbar_items).reverse().map((key) => ( +
+ {navbar_items[key]?.type === 'Button' ? ( + + ) : ( + + )} +
+ ))} +
-
- ); + ); + } + if (isLoading) { + return ; + } + return null }; + const MenuButton = ({ item }: { item: DocsNavbarItem }) => { return ( @@ -71,4 +81,31 @@ const MenuButton = ({ item }: { item: DocsNavbarItem }) => { ); -}; \ No newline at end of file +}; + +const NavbarSkeleton = () => { + return ( +
+
+
+
+
+
+ {/* Left side: Search bar skeleton */} +
+
+
+
+ {/* Right side: Navbar items skeleton */} +
+
+
+
+
+
+
+
+
+
+ ); +}; diff --git a/dashboard/src/pages/features/docs/PageContent.tsx b/dashboard/src/pages/features/docs/PageContent.tsx index 071165a..caaaa30 100644 --- a/dashboard/src/pages/features/docs/PageContent.tsx +++ b/dashboard/src/pages/features/docs/PageContent.tsx @@ -1,11 +1,13 @@ import { ErrorBanner } from "@/components/common/ErrorBanner/ErrorBanner"; import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader"; -import { OnThisPage } from "@/components/features/documentation/OnThisPage"; import { CommitDocsPage } from "@/types/commit/CommitDocsPage"; import { useFrappeGetCall } from "frappe-react-sdk"; -import { lazy, Suspense } from "react"; +import { useState } from "react"; +import { Renderer } from "./Renderer"; +import { EditorComponent } from "./EditorComponent"; +import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; +import { useParams } from "react-router-dom"; -const MDXRenderer = lazy(() => import('@/components/common/MarkdownRenderer/MDX')); export interface PageData { doc: CommitDocsPage toc_obj: TocObj @@ -24,14 +26,34 @@ export interface TocObj { [key: string]: TocItem; }; -export const PageContent = ({ selectedEndpoint, route_map }: { selectedEndpoint: string, route_map: Record }) => { +export const PageContent = ({ ID }: { ID: string }) => { + const { data } = useGetCommitDocsDetails(ID); + + const { pageID } = useParams(); + + if (data && pageID) { + return ( + + ) + } + return null; +} + +const PageContentFetch = ({ selectedEndpoint, route_map }: { selectedEndpoint: string, route_map: Record }) => { const selectedEndpointRoute = route_map[selectedEndpoint]; - const { data, error, isLoading } = useFrappeGetCall<{ message: PageData; }>("commit.commit.doctype.commit_docs_page.commit_docs_page.get_commit_docs_page", { + const { data, error, isLoading, mutate } = useFrappeGetCall<{ message: PageData; }>("commit.commit.doctype.commit_docs_page.commit_docs_page.get_commit_docs_page", { name: selectedEndpointRoute + }, undefined, { + revalidateOnFocus: false, + revalidateIfStale: false, + revalidateOnReconnect: false, + keepPreviousData: true }); + const [edit, setEdit] = useState(false); + if (isLoading) { return ; } @@ -44,18 +66,9 @@ export const PageContent = ({ selectedEndpoint, route_map }: { selectedEndpoint: if (data && data?.message) { return ( -
-
-
{data?.message?.doc?.title}
- }> - - -
-
- -
-
+ <> + {edit ? : } + ) } - } \ No newline at end of file diff --git a/dashboard/src/pages/features/docs/Renderer.tsx b/dashboard/src/pages/features/docs/Renderer.tsx new file mode 100644 index 0000000..405d162 --- /dev/null +++ b/dashboard/src/pages/features/docs/Renderer.tsx @@ -0,0 +1,137 @@ +import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader"; +import { OnThisPage } from "@/components/features/documentation/OnThisPage"; +import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; +import { Button } from "@/components/ui/button"; +import { isSystemManager } from "@/utils/roles"; +import { ThumbsUp, ThumbsDown, ChevronLeft, ChevronRight } from "lucide-react"; +import { lazy, Suspense } from "react"; +import { useParams } from "react-router-dom"; +import { DocsSidebarItem } from "./docs"; +import { PageData } from "./PageContent"; +const MDXRenderer = lazy(() => import('@/components/common/MarkdownRenderer/MDX')); + + +export const Renderer = ({ data, setEdit }: { data: PageData, setEdit: React.Dispatch> }) => { + + const editAvailable = isSystemManager() + + const { ID } = useParams(); + + const { data: docsDetail, } = useGetCommitDocsDetails(ID ?? ''); + + const { next, prev } = findNextPrev(docsDetail.sidebar_items, data.doc.route); + + return ( +
+
+
{data?.doc?.title}
+ }> + + +
+
+ {/* Feedback Section */} +
+ + Was this page helpful? + +
+ + +
+
+ + {/* Edit Button */} + {editAvailable && ( + + )} +
+ {/* Navigation Section */} +
+ {prev && ( + + + {prev.title} + + )} + {next && ( + + + {next.title} + + + + )} +
+
+
+
+ +
+
+ ) +} + +type NestedDocs = Record; + +/** + * Flattens a nested array of DocItems into a single array. + * @param docs - The nested docs object. + * @returns A flat array of all doc items. + */ +const flattenDocs = (docs: NestedDocs): DocsSidebarItem[] => { + const flatArray: DocsSidebarItem[] = []; + + const traverse = (items: DocsSidebarItem[]) => { + for (const item of items) { + if (item.group_items) { + traverse(item.group_items); // Only traverse the children + } else { + flatArray.push(item); // Add only child items + } + } + }; + + for (const key in docs) { + traverse(docs[key]); + } + + return flatArray; +}; + +/** + * Finds the next and previous items for a given route. + * @param docs - The nested docs object. + * @param route - The route to find next and previous for. + * @returns An object with next and previous items or null if not applicable. + */ +const findNextPrev = (docs: NestedDocs, route: string) => { + const flatDocs = flattenDocs(docs); + const index = flatDocs.findIndex((item) => item.route === route); + + if (index === -1) { + return { next: null, prev: null }; // Route not found + } + + const next = flatDocs[index + 1] || null; + const prev = flatDocs[index - 1] || null; + + return { next, prev }; +}; \ No newline at end of file diff --git a/dashboard/src/pages/features/docs/Sidebar.tsx b/dashboard/src/pages/features/docs/Sidebar.tsx index 00d19fb..51f661a 100644 --- a/dashboard/src/pages/features/docs/Sidebar.tsx +++ b/dashboard/src/pages/features/docs/Sidebar.tsx @@ -6,44 +6,45 @@ import { useState } from "react"; import classNames from "classnames"; import { cn } from "@/lib/utils"; import { ChevronDown, ChevronRight } from "lucide-react"; +import { useParams } from "react-router-dom"; +import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; -export const Sidebar = ({ - commit_docs, - sidebar_items, - selectedEndpoint, - setSelectedEndpoint, -}: { - commit_docs: Omit; - sidebar_items: Record; - selectedEndpoint: string; - setSelectedEndpoint: (selectedEndpoint: string) => void; -}) => { - return ( -
-
- {/* Header */} -
- {commit_docs.light_mode_logo && ( - logo - )} - {commit_docs.header &&
{commit_docs.header}
} +export const Sidebar = ({ ID }: { ID: string }) => { + + const { data, isLoading } = useGetCommitDocsDetails(ID); + + if (data) { + const commit_docs: CommitDocs = data.commit_docs; + const sidebar_items = data.sidebar_items; + return ( +
+
+ {/* Header */} +
+ {commit_docs.light_mode_logo && ( + logo + )} + {commit_docs.header &&
{commit_docs.header}
} +
+ {/* Sidebar Items */} + {Object.keys(sidebar_items).map((key) => ( + + ))}
- {/* Sidebar Items */} - {Object.keys(sidebar_items).map((key) => ( - - ))}
-
- ); + ); + } + if (isLoading) { + return ; + } }; -const SidebarGroup = ({ groupName, items, selectedEndpoint, setSelectedEndpoint }: { groupName: string, items: DocsSidebarItem[], selectedEndpoint: string, setSelectedEndpoint: (selectedEndpoint: string) => void }) => { +const SidebarGroup = ({ groupName, items }: { groupName: string, items: DocsSidebarItem[] }) => { const [isExpanded, setIsExpanded] = useState(true); return ( @@ -55,7 +56,7 @@ const SidebarGroup = ({ groupName, items, selectedEndpoint, setSelectedEndpoint {isExpanded && items.length > 0 && (
    {items.map((item) => ( - + ))}
)} @@ -63,17 +64,17 @@ const SidebarGroup = ({ groupName, items, selectedEndpoint, setSelectedEndpoint ) } -const SidebarItem = ({ item, selectedEndpoint, setSelectedEndpoint, className, level = 1 }: { item: DocsSidebarItem, selectedEndpoint: string, setSelectedEndpoint: (selectedEndpoint: string) => void, className?: string, level?: number }) => { +const SidebarItem = ({ item, className, level = 1 }: { item: DocsSidebarItem, className?: string, level?: number }) => { if (item.is_group_page && item.group_items?.length) { const [isExpanded, setIsExpanded] = useState(false); return (
  • - + {isExpanded && item.group_items.length &&
      {item.group_items.map((groupItem) => ( - + ))}
    } @@ -83,14 +84,15 @@ const SidebarItem = ({ item, selectedEndpoint, setSelectedEndpoint, className, l return (
  • - +
    • ) } -const SidebarTitle = ({ item, selectedEndpoint, setSelectedEndpoint, className, isExpanded, setIsExpanded }: { item: DocsSidebarItem, selectedEndpoint: string, setSelectedEndpoint: (selectedEndpoint: string) => void, className?: string, isExpanded?: boolean, setIsExpanded?: (isExpanded: boolean) => void }) => { +const SidebarTitle = ({ item, className, isExpanded, setIsExpanded }: { item: DocsSidebarItem, className?: string, isExpanded?: boolean, setIsExpanded?: (isExpanded: boolean) => void }) => { - const isSelected = item.route === selectedEndpoint; + const { pageID, ID } = useParams(); + const isSelected = item.route === pageID; const badgeClass = classNames({ 'text-[10px] px-1 py-0': true, @@ -119,19 +121,52 @@ const SidebarTitle = ({ item, selectedEndpoint, setSelectedEndpoint, className, isSelected ? 'border-blue-600 dark:border-primary-light text-blue-600 dark:text-primary-light' : '', className )} - onClick={item.is_group_page ? () => setIsExpanded && setIsExpanded(!isExpanded) : () => setSelectedEndpoint(item.route)} + onClick={item.is_group_page ? () => setIsExpanded && setIsExpanded(!isExpanded) : () => { }} >
    -
    + {item.is_group_page ?
    {item.icon && } {item.badge && {item.badge}}
    {item.title}
    -
    +
    : + {item.icon && } + {item.badge && {item.badge}} +
    + {item.title} +
    +     } {item.is_group_page && item.group_items?.length ? {isExpanded ? : } : null}
    ) } + +const SidebarSkeleton = () => { + return ( +
    + {/* Header Skeleton */} +
    +
    +
    +
    + {/* Sidebar Groups Skeleton */} + {[...Array(5)].map((_, groupIndex) => ( +
    +
    +
    + +
    +
      + {[...Array(3 + Math.floor(Math.random() * 2))].map((_, itemIndex) => ( +
    • + ))} +
    +
    + ))} +
    + ); +}; \ No newline at end of file diff --git a/dashboard/src/pages/features/docs/ViewDocs.tsx b/dashboard/src/pages/features/docs/ViewDocs.tsx index 741ff47..0e8a4f6 100644 --- a/dashboard/src/pages/features/docs/ViewDocs.tsx +++ b/dashboard/src/pages/features/docs/ViewDocs.tsx @@ -1,6 +1,5 @@ import { ErrorBanner } from "@/components/common/ErrorBanner/ErrorBanner"; -import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader"; -import { useNavigate, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; import { Sidebar } from "./Sidebar"; import { Navbar } from "./Navbar"; import { Footer } from "./Footer"; @@ -8,60 +7,43 @@ import { PageContent } from "./PageContent"; import { useGetCommitDocsDetails } from "@/components/features/meta_apps/useGetCommitDocsDetails"; const ViewDocs = () => { - const { ID, pageID } = useParams(); + const { ID } = useParams(); - if (ID && pageID) { - return ; + if (ID) { + return ; } return null; }; -const ViewDocsDetails = ({ ID, pageID }: { ID: string, pageID: string }) => { - const navigate = useNavigate(); +const ViewDocsDetails = ({ ID }: { ID: string }) => { - const { data, error, isLoading } = useGetCommitDocsDetails(ID); - - const onPageChange = (pageID: string) => { - navigate(`/docs/${ID}/${pageID}`); - } - - if (isLoading) { - return ; - } - if (error) { - return ; - } - - if (data) { - return ( -
    -
    - -
    -
    - {/* Sidebar */} - - - {/* Main Content */} -
    -
    - -
    -
    -
    - -