From c8d9fe5329e7fc149dcaa84a155e920fc9db0b84 Mon Sep 17 00:00:00 2001
From: Oksamies <asko.soisalo@gmail.com>
Date: Tue, 26 Mar 2024 22:07:21 +0200
Subject: [PATCH] Refactor pkg page actions and forms

---
 .../@packageCard/@packageManagement/page.tsx  |  5 +--
 .../[package]/(pkg)/@packageDetail/layout.tsx | 12 +++++--
 .../src/actions/PackageLikeAction.tsx         |  4 +--
 .../src/forms/PackageEditForm.module.css      |  7 +++++
 .../src/forms/PackageEditForm.tsx             | 31 ++++++++++++++++---
 packages/dapper-fake/src/fakers/user.ts       |  1 +
 packages/dapper-ts/src/methods/currentUser.ts |  2 ++
 .../dapper-ts/src/methods/packageListings.ts  |  1 -
 packages/dapper/src/types/package.ts          |  1 -
 packages/dapper/src/types/user.ts             |  1 +
 .../src/fetch/__tests__/currentUser.ts        |  1 +
 .../thunderstore-api/src/fetch/packageLike.ts |  5 +--
 12 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageCard/@packageManagement/page.tsx b/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageCard/@packageManagement/page.tsx
index 03765c9e6..80126aaf9 100644
--- a/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageCard/@packageManagement/page.tsx
+++ b/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"
diff --git a/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageDetail/layout.tsx b/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageDetail/layout.tsx
index 5bfa2e087..34dece930 100644
--- a/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageDetail/layout.tsx
+++ b/apps/cyberstorm-nextjs/app/c/[community]/(package)/@tspackage/p/[namespace]/(packageRoute)/[package]/(pkg)/@packageDetail/layout.tsx
@@ -38,7 +38,9 @@ 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
@@ -46,7 +48,11 @@ export default function PackageDetailsLayout({
   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,
           })}
diff --git a/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx b/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
index 40ebb7f05..826b7bfd9 100644
--- a/packages/cyberstorm-forms/src/actions/PackageLikeAction.tsx
+++ b/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,
diff --git a/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css b/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css
index 99dd89f37..d7daf802b 100644
--- a/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css
+++ b/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;
+}
diff --git a/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx b/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
index bcbc02a53..22b18f40f 100644
--- a/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
+++ b/packages/cyberstorm-forms/src/forms/PackageEditForm.tsx
@@ -26,9 +26,10 @@ 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!",
@@ -36,14 +37,17 @@ export function PackageEditForm(props: {
 
   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>
+  );
+}
diff --git a/packages/dapper-fake/src/fakers/user.ts b/packages/dapper-fake/src/fakers/user.ts
index da5685d0e..1ca2be902 100644
--- a/packages/dapper-fake/src/fakers/user.ts
+++ b/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(() =>
diff --git a/packages/dapper-ts/src/methods/currentUser.ts b/packages/dapper-ts/src/methods/currentUser.ts
index e7dd99804..3881f1997 100644
--- a/packages/dapper-ts/src/methods/currentUser.ts
+++ b/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: [],
     };
diff --git a/packages/dapper-ts/src/methods/packageListings.ts b/packages/dapper-ts/src/methods/packageListings.ts
index 0fb982b05..6addbc9e3 100644
--- a/packages/dapper-ts/src/methods/packageListings.ts
+++ b/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),
diff --git a/packages/dapper/src/types/package.ts b/packages/dapper/src/types/package.ts
index a8213d939..02eb36a91 100644
--- a/packages/dapper/src/types/package.ts
+++ b/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;
diff --git a/packages/dapper/src/types/user.ts b/packages/dapper/src/types/user.ts
index b6664a653..ae8b81cfe 100644
--- a/packages/dapper/src/types/user.ts
+++ b/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;
   };
diff --git a/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts b/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts
index 6276d9235..817d07d7c 100644
--- a/packages/thunderstore-api/src/fetch/__tests__/currentUser.ts
+++ b/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", []);
 });
diff --git a/packages/thunderstore-api/src/fetch/packageLike.ts b/packages/thunderstore-api/src/fetch/packageLike.ts
index a08aec100..76af03526 100644
--- a/packages/thunderstore-api/src/fetch/packageLike.ts
+++ b/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,