Refactor pkg page actions and forms

apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageCard/@packageManagement/page.tsx

@@ -28,7 +28,7 @@ export default function Page({
 
   const [packageData, setPackageData] = useState(packageDataInitial);
 
-  // TODO: Convert to using usePromise's cache when it can handle manual busts
+  // TODO: Convert to using usePromise's cache replace, when it can handle manual busts
   // Or React Query stuff
   async function useUpdatePackageData() {
     const dapper = useDapper();
@@ -46,8 +46,9 @@ export default function Page({
       community={params.community}
       namespace={params.namespace}
       package={params.package}
-      current_categories={packageData.categories.map((cat) => cat.slug)}
+      current_categories={packageData.categories}
       isDeprecated={packageData.is_deprecated}
+      packageDataUpdateTrigger={useUpdatePackageData}
       deprecationButton={
         <Button.Root
           type="button"

apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageDetail/layout.tsx

@@ -38,15 +38,21 @@ export default function PackageDetailsLayout({
   const currentUser = usePromise(dapper.getCurrentUser, []);
 
   const [isLiked, setIsLiked] = useState(
-    currentUser.rated_packages.includes(packageData.uuid4)
+    currentUser.rated_packages_cyberstorm.includes(
+      `${packageData.namespace}-${packageData.name}`
+    )
   );
 
   // TODO: Convert to using usePromise's cache when it can handle manual busts
   // Or React Query stuff
   async function useUpdateLikeStatus() {
     const dapper = useDapper();
     const currentUser = await dapper.getCurrentUser();
-    if (currentUser.rated_packages.includes(packageData.uuid4)) {
+    if (
+      currentUser.rated_packages_cyberstorm.includes(
+        `${packageData.namespace}-${packageData.name}`
+      )
+    ) {
       setIsLiked(true);
     } else {
       setIsLiked(false);
@@ -77,7 +83,7 @@ export default function PackageDetailsLayout({
           onClick={PackageLikeAction({
             isLoggedIn: Boolean(currentUser.username),
             packageName: params.package,
-            uuid4: packageData.uuid4,
+            namespace: packageData.namespace,
             isLiked: isLiked,
             currentUserUpdateTrigger: useUpdateLikeStatus,
           })}

packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx

@@ -10,7 +10,7 @@ import { packageLike } from "@thunderstore/thunderstore-api";
 export function PackageLikeAction(props: {
   isLoggedIn: boolean;
   packageName: string;
-  uuid4: string;
+  namespace: string;
   isLiked: boolean;
   currentUserUpdateTrigger: () => Promise<void>;
 }) {
@@ -34,7 +34,7 @@ export function PackageLikeAction(props: {
 
   const onSubmit = ApiAction({
     schema: packageLikeActionSchema,
-    meta: { uuid4: props.uuid4 },
+    meta: { namespace_id: props.namespace, package_name: props.packageName },
     endpoint: packageLike,
     onSubmitSuccess: onActionSuccess,
     onSubmitError: onActionError,

packages/cyberstorm-forms/src/forms/PackageEditForm.module.css

@@ -39,3 +39,10 @@
   padding: var(--space--16) var(--space--24);
   border-top: var(--border-width--px) solid var(--color-surface--5);
 }
+
+.currentCategories {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.5rem;
+  row-gap: 0.5rem;
+}

packages/cyberstorm-forms/src/forms/PackageEditForm.tsx

@@ -26,24 +26,28 @@ export function PackageEditForm(props: {
   community: string;
   namespace: string;
   package: string;
-  current_categories: string[];
+  current_categories: { slug: string; name: string }[];
   isDeprecated: boolean;
   deprecationButton: ReactNode;
+  packageDataUpdateTrigger: () => Promise<void>;
 }) {
   const { onSubmitSuccess, onSubmitError } = useFormToaster({
     successMessage: "Changes saved!",
   });
 
   return (
     <ApiForm
-      onSubmitSuccess={onSubmitSuccess}
+      onSubmitSuccess={() => {
+        props.packageDataUpdateTrigger();
+        onSubmitSuccess();
+      }}
       onSubmitError={onSubmitError}
       schema={packageEditFormSchema}
       meta={{
         community: props.community,
         namespace: props.namespace,
         package: props.package,
-        current_categories: props.current_categories,
+        current_categories: props.current_categories.map((cat) => cat.slug),
       }}
       endpoint={packageEditCategories}
       formProps={{ className: styles.root }}
@@ -74,7 +78,7 @@ export function PackageEditForm(props: {
           <div className={styles.categoriesSelect}>
             <div className={styles.title}>Edit categories</div>
             <div className={styles.title}>Current categories</div>
-            {props.current_categories}
+            {renderCurrentCategories(props.current_categories)}
             <div className={styles.title}>New categories</div>
             <FormMultiSelectSearch
               schema={packageEditFormSchema}
@@ -97,3 +101,22 @@ export function PackageEditForm(props: {
 }
 
 PackageEditForm.displayName = "PackageEditForm";
+
+function renderCurrentCategories(
+  categories: { name: string; slug: string }[]
+): ReactNode {
+  return (
+    <div className={styles.currentCategories}>
+      {categories.map((cat) => {
+        return (
+          <Tag
+            colorScheme="borderless_no_hover"
+            size="mediumPlus"
+            key={cat.slug}
+            label={cat.name.toUpperCase()}
+          />
+        );
+      })}
+    </div>
+  );
+}

packages/dapper-fake/src/fakers/user.ts

@@ -14,6 +14,7 @@ export const getFakeCurrentUser = async () => {
       getFakeOAuthConnection("Overwolf"),
     ],
     rated_packages: [],
+    rated_packages_cyberstorm: [],
     subscription: {
       expires:
         faker.helpers.maybe(() =>

packages/dapper-ts/src/methods/currentUser.ts

@@ -21,6 +21,7 @@ const schema = z.object({
   capabilities: z.string().array(),
   connections: oAuthConnectionSchema.array(),
   rated_packages: z.string().array(),
+  rated_packages_cyberstorm: z.string().array(),
   subscription: z.object({
     expires: z.string().datetime().nullable(),
   }),
@@ -34,6 +35,7 @@ export async function getCurrentUser(this: DapperTsInterface) {
       capabilities: [],
       connections: [],
       rated_packages: [],
+      rated_packages_cyberstorm: [],
       subscription: { expires: null },
       teams: [],
     };

packages/dapper-ts/src/methods/packageListings.ts

@@ -106,7 +106,6 @@ const dependencyShema = z.object({
 });
 
 const packageListingDetailSchema = packageListingSchema.extend({
-  uuid4: z.string().nonempty(),
   community_name: z.string().nonempty(),
   datetime_created: z.string().datetime(),
   dependant_count: z.number().int().gte(0),

packages/dapper/src/types/package.ts

@@ -20,7 +20,6 @@ export interface PackageListing {
 export type PackageListings = PaginatedList<PackageListing>;
 
 export interface PackageListingDetails extends PackageListing {
-  uuid4: string;
   community_name: string;
   datetime_created: string;
   dependant_count: number;

packages/dapper/src/types/user.ts

@@ -5,6 +5,7 @@ export interface CurrentUser {
   capabilities: string[];
   connections: OAuthConnection[];
   rated_packages: string[];
+  rated_packages_cyberstorm: string[];
   subscription: {
     expires: string | null;
   };

packages/thunderstore-api/src/fetch/__tests__/currentUser.ts

@@ -8,6 +8,7 @@ it("receives emptyish object when querying without session id", async () => {
   expect(response).toHaveProperty("capabilities", []);
   expect(response).toHaveProperty("connections", []);
   expect(response).toHaveProperty("rated_packages", []);
+  expect(response).toHaveProperty("rated_packages_cyberstorm", []);
   expect(response).toHaveProperty("subscription", { expires: null });
   expect(response).toHaveProperty("teams", []);
 });

packages/thunderstore-api/src/fetch/packageLike.ts

@@ -2,7 +2,8 @@ import { RequestConfig } from "../index";
 import { apiFetch2 } from "../apiFetch";
 
 export type packageLikeMetaArgs = {
-  uuid4: string;
+  namespace_id: string;
+  package_name: string;
 };
 
 export type packageLikeApiArgs = {
@@ -14,7 +15,7 @@ export function packageLike(
   data: packageLikeApiArgs,
   meta: packageLikeMetaArgs
 ) {
-  const path = `/api/v1/package/${meta.uuid4}/rate/`;
+  const path = `/api/cyberstorm/package/${meta.namespace_id}/${meta.package_name}/rate/`;
 
   return apiFetch2({
     config,