Merge pull request #1356 from thunderstore-io/02-24-add_and_enable_dependants_and_team_pages

Oksamies · web-flow · commit 099c6a75df37 · 2025-02-25T01:04:47.000+02:00
Add and enable dependants and team pages
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx
@@ -21,13 +21,10 @@ export default function TeamMembers(props: {
           Team
         </Heading>
         <NewLink
-          // TODO: Remove when team page is available
-          primitiveType="link"
-          href={`${props.domain}/c/${props.listing.community_identifier}/p/${props.listing.namespace}/`}
-          // primitiveType="cyberstormLink"
-          // linkId="Team"
-          // community={props.listing.community_identifier}
-          // team={props.listing.team.name}
+          primitiveType="cyberstormLink"
+          linkId="Team"
+          community={props.listing.community_identifier}
+          team={props.listing.team.name}
           csVariant="cyber"
           rootClasses="team-members__link"
         >
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.css b/apps/cyberstorm-remix/app/p/dependants/Dependants.css
@@ -1,18 +1,20 @@
-.dependants {
-  display: flex;
-  flex-direction: column;
+@layer nimbus-layout {
+  .dependants {
+    display: flex;
+    flex-direction: column;
 
-  .dependants__header {
-    padding: var(--space-40) 0;
-    color: var(--color-text--default);
-    font-weight: var(--font-weight-bold);
-    font-size: 1.75rem;
-    line-height: var(--line-height-xs);
+    .dependants__header {
+      padding: var(--space-40) 0;
+      color: var(--color-text--default);
+      font-weight: var(--font-weight-bold);
+      font-size: 1.75rem;
+      line-height: var(--line-height-xs);
+    }
   }
-}
 
-@media (width <= 48rem) {
-  .dependants {
-    gap: var(--space-16);
+  @media (width <= 48rem) {
+    .dependants {
+      gap: var(--space-16);
+    }
   }
 }
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useOutletContext } from "@remix-run/react";
 import {
   CyberstormLink,
   NewBreadCrumbs,
@@ -9,6 +9,8 @@ import "./Dependants.css";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
 import { ApiError } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
+import { PackageOrderOptions } from "../../commonComponents/PackageSearch/components/PackageOrder";
+import { OutletContextShape } from "../../root";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -27,17 +29,23 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
         };
       });
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
+      const community = await dapper.getCommunity(params.communityId);
+      const filters = await dapper.getCommunityFilters(params.communityId);
+      const sortedSections = filters.sections.sort(
+        (a, b) => b.priority - a.priority
+      );
       return {
-        community: await dapper.getCommunity(params.communityId),
-        filters: await dapper.getCommunityFilters(params.communityId),
+        community: community,
+        filters: filters,
         listing: await dapper.getPackageListingDetails(
           params.communityId,
           params.namespaceId,
@@ -50,21 +58,27 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             namespaceId: params.namespaceId,
             packageName: params.packageId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
-          section ?? "",
+          section
+            ? section === "all"
+              ? ""
+              : section
+            : sortedSections && sortedSections[0]
+              ? sortedSections[0].uuid
+              : "",
           nsfw === "true" ? true : false,
           deprecated === "true" ? true : false
         ),
+        sortedSections: sortedSections,
       };
     } catch (error) {
       if (error instanceof ApiError) {
         throw new Response("Package not found", { status: 404 });
       } else {
-        // REMIX TODO: Add sentry
         throw error;
       }
     }
@@ -77,17 +91,23 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = window.Dapper;
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
+      const community = await dapper.getCommunity(params.communityId);
+      const filters = await dapper.getCommunityFilters(params.communityId);
+      const sortedSections = filters.sections.sort(
+        (a, b) => b.priority - a.priority
+      );
       return {
-        community: await dapper.getCommunity(params.communityId),
-        filters: await dapper.getCommunityFilters(params.communityId),
+        community: community,
+        filters: filters,
         listing: await dapper.getPackageListingDetails(
           params.communityId,
           params.namespaceId,
@@ -100,32 +120,39 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
             namespaceId: params.namespaceId,
             packageName: params.packageId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
-          section ?? "",
+          section
+            ? section === "all"
+              ? ""
+              : section
+            : sortedSections && sortedSections[0]
+              ? sortedSections[0].uuid
+              : "",
           nsfw === "true" ? true : false,
           deprecated === "true" ? true : false
         ),
+        sortedSections: sortedSections,
       };
     } catch (error) {
       if (error instanceof ApiError) {
-        throw new Response("Community not found", { status: 404 });
+        throw new Response("Package not found", { status: 404 });
       } else {
-        // REMIX TODO: Add sentry
         throw error;
       }
     }
   }
-  throw new Response("Community not found", { status: 404 });
+  throw new Response("Package not found", { status: 404 });
 }
 
 export default function Dependants() {
-  const { community, filters, listing, listings } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { community, filters, listing, listings, sortedSections } =
+    useLoaderData<typeof loader | typeof clientLoader>();
+
+  const outletContext = useOutletContext() as OutletContextShape;
 
   return (
     <div className="container container--y container--full layout__content">
@@ -178,7 +205,9 @@ export default function Dependants() {
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}
-          sections={filters.sections}
+          sections={sortedSections}
+          config={outletContext.requestConfig}
+          currentUser={outletContext.currentUser}
         />
       </section>
     </div>
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -315,13 +315,10 @@ export default function PackageListing() {
             meta={
               <>
                 <NewLink
-                  // TODO: Remove when team page is available
-                  primitiveType="link"
-                  href={`${domain}/c/${listing.community_identifier}/p/${listing.namespace}/`}
-                  // primitiveType="cyberstormLink"
-                  // linkId="Team"
-                  // community={listing.community_identifier}
-                  // team={listing.namespace}
+                  primitiveType="cyberstormLink"
+                  linkId="Team"
+                  community={listing.community_identifier}
+                  team={listing.namespace}
                   csVariant="cyber"
                   rootClasses="page-header__meta-item"
                 >
diff --git a/apps/cyberstorm-remix/app/p/team/Team.css b/apps/cyberstorm-remix/app/p/team/Team.css
@@ -0,0 +1,20 @@
+@layer nimbus-layout {
+  .team {
+    display: flex;
+    flex-direction: column;
+
+    .team__header {
+      padding: var(--space-40) 0;
+      color: var(--color-text--default);
+      font-weight: var(--font-weight-bold);
+      font-size: 1.75rem;
+      line-height: var(--line-height-xs);
+    }
+  }
+
+  @media (width <= 48rem) {
+    .team {
+      gap: var(--space-16);
+    }
+  }
+}
diff --git a/apps/cyberstorm-remix/app/p/team/Team.tsx b/apps/cyberstorm-remix/app/p/team/Team.tsx
diff --git a/apps/cyberstorm-remix/vite.config.ts b/apps/cyberstorm-remix/vite.config.ts
