Wiki fixes (#1668)

VilppeRiskidev · web-flow · commit 2cbec7e33eeb · 2025-12-19T13:06:10.000+02:00
* Add authentication to wiki page create/edit requests

- Add useSession: true to postPackageWikiPageCreate and postPackageWikiPageEdit
- Without session the server returns 403

* Fix wiki page navigation and rendering

- Use page ID instead of slug in WikiPage loader
- Add key prop to the component to re-render on navigation
- Fix previous/next page navigation logic
- Add missing return statement in WikiFirstPage component
- Add empty pages array check in WikiFirstPage

* Fix disabled button styling for wiki navigation

- Add disabled prop to disabled navigation buttons in WikiContent
- Add CSS support for aria-disabled attribute in Button.css

* Improve error handling and fix the timestamps on the wiki page

* Remove unnecessary promise wrapping

* Enable the WikiPage's Edit button by hooking up the permissions
diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiContent.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiContent.tsx
@@ -1,7 +1,12 @@
 import "./Wiki.css";
 
 import { type PackageWikiPageResponseData } from "@thunderstore/thunderstore-api";
-import { Heading, NewButton, NewIcon } from "@thunderstore/cyberstorm";
+import {
+  Heading,
+  NewButton,
+  NewIcon,
+  RelativeTime,
+} from "@thunderstore/cyberstorm";
 import {
   faArrowLeftLong,
   faArrowRightLong,
@@ -42,10 +47,19 @@ export const WikiContent = memo(function WikiContent({
               <NewIcon csMode="inline" noWrapper>
                 <FontAwesomeIcon icon={faCalendarDay} />
               </NewIcon>
-              {page.datetime_created}
+              <RelativeTime
+                time={page.datetime_created}
+                suppressHydrationWarning
+              />
             </span>
             <span>
-              <i>Updated {page.datetime_updated} ago</i>
+              <i>
+                Updated{" "}
+                <RelativeTime
+                  time={page.datetime_updated}
+                  suppressHydrationWarning
+                />
+              </i>
             </span>
           </div>
         </div>
@@ -101,7 +115,11 @@ export const WikiContent = memo(function WikiContent({
             Previous Page
           </NewButton>
         ) : (
-          <NewButton csModifiers={["ghost", "disabled"]} csVariant="secondary">
+          <NewButton
+            csModifiers={["ghost", "disabled"]}
+            csVariant="secondary"
+            disabled={true}
+          >
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faArrowLeftLong} />
             </NewIcon>
@@ -125,7 +143,11 @@ export const WikiContent = memo(function WikiContent({
             </NewIcon>
           </NewButton>
         ) : (
-          <NewButton csModifiers={["ghost", "disabled"]} csVariant="secondary">
+          <NewButton
+            csModifiers={["ghost", "disabled"]}
+            csVariant="secondary"
+            disabled={true}
+          >
             Next Page
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faArrowRightLong} />
diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiFirstPage.tsx
@@ -49,15 +49,26 @@ export async function loader({ params }: LoaderFunctionArgs) {
         params.namespaceId,
         params.packageId
       );
-      const firstPage = dapper.getPackageWikiPage(wiki.pages[0].id);
-      result = {
-        wiki: wiki,
-        firstPage: firstPage,
-        communityId: params.communityId,
-        namespaceId: params.namespaceId,
-        packageId: params.packageId,
-        permissions: undefined,
-      };
+      if (wiki.pages && wiki.pages.length > 0) {
+        const firstPage = dapper.getPackageWikiPage(wiki.pages[0].id);
+        result = {
+          wiki: wiki,
+          firstPage: firstPage,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: undefined,
+        };
+      } else {
+        result = {
+          wiki: wiki,
+          firstPage: undefined,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: undefined,
+        };
+      }
     } catch (error) {
       if (isApiError(error)) {
         // There is no wiki or the User does not have permission to view the wiki, return empty wiki and undefined firstPage
@@ -113,15 +124,26 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
         params.namespaceId,
         params.packageId
       );
-      const firstPage = dapper.getPackageWikiPage(wiki.pages[0].id);
-      result = {
-        wiki: wiki,
-        firstPage: firstPage,
-        communityId: params.communityId,
-        namespaceId: params.namespaceId,
-        packageId: params.packageId,
-        permissions: permissions,
-      };
+      if (wiki.pages && wiki.pages.length > 0) {
+        const firstPage = dapper.getPackageWikiPage(wiki.pages[0].id);
+        result = {
+          wiki: wiki,
+          firstPage: firstPage,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: permissions,
+        };
+      } else {
+        result = {
+          wiki: wiki,
+          firstPage: undefined,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: permissions,
+        };
+      }
     } catch (error) {
       if (isApiError(error)) {
         // There is no wiki or the User does not have permission to view the wiki, return empty wiki and undefined firstPage
@@ -152,33 +174,37 @@ export default function WikiFirstPage() {
     useLoaderData<typeof loader | typeof clientLoader>();
 
   const wikiAndFirstPageMemo = useMemo(
-    () => Promise.all([wiki, firstPage]),
+    () => Promise.all([Promise.resolve(wiki), firstPage]),
     [wiki, firstPage]
   );
 
-  <Suspense fallback={<SkeletonBox className="package-wiki__skeleton" />}>
-    <Await resolve={wikiAndFirstPageMemo}>
-      {(resolvedValue) => {
-        const [wiki, firstPage] = resolvedValue;
-        if (wiki && firstPage) {
-          return (
-            <WikiContent
-              page={firstPage}
-              communityId={communityId}
-              namespaceId={namespaceId}
-              packageId={packageId}
-              previousPage={undefined}
-              nextPage={wiki.pages.length > 1 ? wiki.pages[1].slug : undefined}
-              canManage={permissions?.then((perms) =>
-                typeof perms === "undefined"
-                  ? false
-                  : perms.permissions.can_manage
-              )}
-            />
-          );
-        }
-        return <>There are no wiki pages available.</>;
-      }}
-    </Await>
-  </Suspense>;
+  return (
+    <Suspense fallback={<SkeletonBox className="package-wiki__skeleton" />}>
+      <Await resolve={wikiAndFirstPageMemo}>
+        {(resolvedValue) => {
+          const [wiki, firstPage] = resolvedValue;
+          if (wiki && firstPage) {
+            return (
+              <WikiContent
+                page={firstPage}
+                communityId={communityId}
+                namespaceId={namespaceId}
+                packageId={packageId}
+                previousPage={undefined}
+                nextPage={
+                  wiki.pages.length > 1 ? wiki.pages[1].slug : undefined
+                }
+                canManage={permissions?.then((perms) =>
+                  typeof perms === "undefined"
+                    ? false
+                    : perms.permissions.can_manage
+                )}
+              />
+            );
+          }
+          return <>There are no wiki pages available.</>;
+        }}
+      </Await>
+    </Suspense>
+  );
 }
diff --git a/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx b/apps/cyberstorm-remix/app/p/tabs/Wiki/WikiPage.tsx
@@ -1,6 +1,6 @@
 import "./Wiki.css";
 
-import { Await, type LoaderFunctionArgs } from "react-router";
+import { Await, type LoaderFunctionArgs, useParams } from "react-router";
 import { useLoaderData } from "react-router";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import {
@@ -14,11 +14,11 @@ import {
   getPackagePermissions,
 } from "@thunderstore/dapper-ts/src/methods/package";
 import { isApiError } from "../../../../../../packages/thunderstore-api/src";
-import { Suspense, useMemo } from "react";
+import { Suspense } from "react";
 import { SkeletonBox } from "@thunderstore/cyberstorm";
 
 type ResultType = {
-  wiki: ReturnType<typeof getPackageWiki> | undefined;
+  wiki: Awaited<ReturnType<typeof getPackageWiki>> | undefined;
   page: ReturnType<typeof getPackageWikiPage> | undefined;
   communityId: string;
   namespaceId: string;
@@ -51,8 +51,23 @@ export async function loader({ params }: LoaderFunctionArgs) {
     };
 
     try {
-      const wiki = dapper.getPackageWiki(params.namespaceId, params.packageId);
-      const page = dapper.getPackageWikiPage(params.slug);
+      const wiki = await dapper.getPackageWiki(
+        params.namespaceId,
+        params.packageId
+      );
+      const pageId = wiki.pages?.find((p) => p.slug === params.slug)?.id;
+      if (!pageId) {
+        result = {
+          wiki,
+          page: undefined,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: result.permissions,
+        };
+        return result;
+      }
+      const page = dapper.getPackageWikiPage(pageId);
       result = {
         wiki: wiki,
         page: page,
@@ -117,8 +132,23 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
     };
 
     try {
-      const wiki = dapper.getPackageWiki(params.namespaceId, params.packageId);
-      const page = dapper.getPackageWikiPage(params.slug);
+      const wiki = await dapper.getPackageWiki(
+        params.namespaceId,
+        params.packageId
+      );
+      const pageId = wiki.pages?.find((p) => p.slug === params.slug)?.id;
+      if (!pageId) {
+        result = {
+          wiki,
+          page: undefined,
+          communityId: params.communityId,
+          namespaceId: params.namespaceId,
+          packageId: params.packageId,
+          permissions: result.permissions,
+        };
+        return result;
+      }
+      const page = dapper.getPackageWikiPage(pageId);
       result = {
         wiki: wiki,
         page: page,
@@ -153,55 +183,60 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 }
 
 export default function WikiPage() {
-  const { wiki, page, communityId, namespaceId, packageId } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
-
-  const wikiAndPageMemo = useMemo(
-    () => Promise.all([wiki, page]),
-    [wiki, page]
-  );
-
-  <Suspense fallback={<SkeletonBox className="package-wiki__skeleton" />}>
-    <Await
-      resolve={wikiAndPageMemo}
-      errorElement={<div>Error occurred while loading wiki page</div>}
-    >
-      {(resolvedValue) => {
-        const [wiki, page] = resolvedValue;
-        if (wiki && page) {
-          const currentPageIndex = wiki.pages.findIndex(
-            (p) => p.id === page.id
-          );
-
-          let previousPage = undefined;
-          let nextPage = undefined;
-
-          if (currentPageIndex === 0) {
-            previousPage = undefined;
-          } else {
-            previousPage = wiki.pages[currentPageIndex - 1]?.slug;
+  const { wiki, page, communityId, namespaceId, packageId, permissions } =
+    useLoaderData<typeof loader | typeof clientLoader>();
+  const params = useParams();
+
+  const wikiAndPagePromise = Promise.all([wiki, page]);
+
+  const notFoundElement = <div>Wiki page not found.</div>;
+
+  return (
+    <Suspense fallback={<SkeletonBox className="package-wiki__skeleton" />}>
+      <Await
+        key={params.slug}
+        resolve={wikiAndPagePromise}
+        errorElement={<div>Error occurred while loading wiki page</div>}
+      >
+        {(resolvedValue) => {
+          const [wiki, page] = resolvedValue;
+          if (wiki && page) {
+            const currentPageIndex = wiki.pages.findIndex(
+              (p) => p.id === page.id
+            );
+
+            if (currentPageIndex < 0) {
+              return notFoundElement;
+            }
+
+            const previousPage =
+              currentPageIndex > 0
+                ? wiki.pages[currentPageIndex - 1]?.slug
+                : undefined;
+            const nextPage =
+              currentPageIndex < wiki.pages.length - 1
+                ? wiki.pages[currentPageIndex + 1]?.slug
+                : undefined;
+
+            return (
+              <WikiContent
+                page={page}
+                communityId={communityId}
+                namespaceId={namespaceId}
+                packageId={packageId}
+                previousPage={previousPage}
+                nextPage={nextPage}
+                canManage={permissions?.then((perms) =>
+                  typeof perms === "undefined"
+                    ? false
+                    : perms.permissions.can_manage
+                )}
+              />
+            );
           }
-
-          if (currentPageIndex === wiki.pages.length) {
-            nextPage = undefined;
-          } else {
-            nextPage = wiki.pages[currentPageIndex + 1]?.slug;
-          }
-
-          return (
-            <WikiContent
-              page={page}
-              communityId={communityId}
-              namespaceId={namespaceId}
-              packageId={packageId}
-              previousPage={previousPage}
-              nextPage={nextPage}
-            />
-          );
-        }
-        return <>Wiki Page Not Found</>;
-      }}
-    </Await>
-  </Suspense>;
+          return notFoundElement;
+        }}
+      </Await>
+    </Suspense>
+  );
 }
diff --git a/packages/cyberstorm-theme/src/components/Button/Button.css b/packages/cyberstorm-theme/src/components/Button/Button.css
@@ -224,7 +224,8 @@
     background: transparent;
   }
 
-  .button[disabled] {
+  .button[disabled],
+  .button[aria-disabled="true"] {
     opacity: 0.5;
     pointer-events: none;
   }
diff --git a/packages/thunderstore-api/src/post/packageWiki.ts b/packages/thunderstore-api/src/post/packageWiki.ts

Original file line number	Diff line number	Diff line change
`@@ -224,7 +224,8 @@`
`224`	`224`	`background: transparent;`
`225`	`225`	`}`
`226`	`226`
`227`		`- .button[disabled] {`
	`227`	`+ .button[disabled],`
	`228`	`+ .button[aria-disabled="true"] {`
`228`	`229`	`opacity: 0.5;`
`229`	`230`	`pointer-events: none;`
`230`	`231`	`}`