Add forms, actions and functionality for pkg page

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

@@ -1,60 +1,73 @@
 "use client";
-import { Alert, Button, Tag, TextInput } from "@thunderstore/cyberstorm";
-import styles from "./PackageManagementForm.module.css";
+import { Button } from "@thunderstore/cyberstorm";
 import { useDapper } from "@thunderstore/dapper";
 import { usePromise } from "@thunderstore/use-promise";
-import { faCircleExclamation } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  PackageDeprecateAction,
+  PackageEditForm,
+} from "@thunderstore/cyberstorm-forms";
+import { useState } from "react";
 
 export default function Page({
   params,
 }: {
   params: { community: string; namespace: string; package: string };
 }) {
   const dapper = useDapper();
-  const packageData = usePromise(dapper.getPackageListingDetails, [
+  const packageDataInitial = usePromise(dapper.getPackageListingDetails, [
     params.community,
     params.namespace,
     params.package,
   ]);
+  const communityData = usePromise(dapper.getCommunityFilters, [
+    params.community,
+  ]);
+  const options = communityData.package_categories.map((cat) => {
+    return { label: cat.name, value: cat.slug };
+  });
+
+  const [packageData, setPackageData] = useState(packageDataInitial);
+
+  // TODO: Convert to using usePromise's cache replace, when it can handle manual busts
+  // Or React Query stuff
+  async function useUpdatePackageData() {
+    const dapper = useDapper();
+    const packageDataUpdate = await dapper.getPackageListingDetails(
+      params.community,
+      params.namespace,
+      params.package
+    );
+    setPackageData(packageDataUpdate);
+  }
 
   return (
-    <div className={styles.root}>
-      <div className={styles.section}>
-        <Alert
-          icon={<FontAwesomeIcon icon={faCircleExclamation} />}
-          content={
-            "Changes might take several minutes to show publicly! Info shown below is always up to date."
-          }
-          variant="info"
-        />
-        <div className={styles.title}>Package status</div>
-        <div className={styles.statusTag}>
-          <Tag
-            size="medium"
-            label={packageData.is_deprecated ? "DEPRECATED" : "ACTIVE"}
-            colorScheme={packageData.is_deprecated ? "yellow" : "success"}
-          />
-        </div>
-      </div>
-      <div className={styles.section}>
-        <div className={styles.title}>Edit categories</div>
-        <TextInput />
-      </div>
-      <div className={styles.footer}>
-        {packageData.is_deprecated ? (
-          <Button.Root paddingSize="large" colorScheme="default">
+    <PackageEditForm
+      options={options}
+      community={params.community}
+      namespace={params.namespace}
+      package={params.package}
+      current_categories={packageData.categories}
+      isDeprecated={packageData.is_deprecated}
+      packageDataUpdateTrigger={useUpdatePackageData}
+      deprecationButton={
+        <Button.Root
+          type="button"
+          onClick={PackageDeprecateAction({
+            packageName: params.package,
+            namespace: packageData.namespace,
+            isDeprecated: packageData.is_deprecated,
+            packageDataUpdateTrigger: useUpdatePackageData,
+          })}
+          colorScheme={packageData.is_deprecated ? "warning" : "default"}
+          paddingSize="large"
+        >
+          {packageData.is_deprecated ? (
             <Button.ButtonLabel>Undeprecate</Button.ButtonLabel>
-          </Button.Root>
-        ) : (
-          <Button.Root paddingSize="large" colorScheme="warning">
+          ) : (
             <Button.ButtonLabel>Deprecate</Button.ButtonLabel>
-          </Button.Root>
-        )}
-        <Button.Root paddingSize="large" colorScheme="success">
-          <Button.ButtonLabel>Save changes</Button.ButtonLabel>
+          )}
         </Button.Root>
-      </div>
-    </div>
+      }
+    />
   );
 }

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

@@ -5,14 +5,15 @@ import {
   faDonate,
   faDownload,
   faThumbsUp,
-  faFlag,
+  // faFlag,
   faBoxes,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./PackageDetailsLayout.module.css";
 import { Button, Icon, Tag } from "@thunderstore/cyberstorm";
-import { ReactNode, Suspense } from "react";
+import { ReactNode, Suspense, useState } from "react";
 import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
+import { PackageLikeAction } from "@thunderstore/cyberstorm-forms";
 
 export default function PackageDetailsLayout({
   packageMeta,
@@ -33,6 +34,30 @@ export default function PackageDetailsLayout({
     params.namespace,
     params.package,
   ]);
+  const teamData = usePromise(dapper.getTeamDetails, [params.namespace]);
+  const currentUser = usePromise(dapper.getCurrentUser, []);
+
+  const [isLiked, setIsLiked] = useState(
+    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_cyberstorm.includes(
+        `${packageData.namespace}-${packageData.name}`
+      )
+    ) {
+      setIsLiked(true);
+    } else {
+      setIsLiked(false);
+    }
+  }
 
   const mappedPackageTagList = packageData.categories.map((category) => {
     return (
@@ -51,9 +76,26 @@ export default function PackageDetailsLayout({
         <a href={packageData.download_url} className={styles.download}>
           <DownloadButton />
         </a>
-        <DonateButton onClick={TODO} />
-        <LikeButton onClick={TODO} />
-        <ReportButton onClick={TODO} />
+        {teamData.donation_link ? (
+          <DonateButton donationLink={teamData.donation_link} />
+        ) : null}
+        <Button.Root
+          onClick={PackageLikeAction({
+            isLoggedIn: Boolean(currentUser.username),
+            packageName: params.package,
+            namespace: packageData.namespace,
+            isLiked: isLiked,
+            currentUserUpdateTrigger: useUpdateLikeStatus,
+          })}
+          tooltipText="Like"
+          colorScheme={isLiked ? "likeBlue" : "primary"}
+          paddingSize="mediumSquare"
+        >
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faThumbsUp} />
+          </Button.ButtonIcon>
+        </Button.Root>
+        {/* <ReportButton onClick={TODO} /> */}
       </div>
       <Suspense fallback={<p>TODO: SKELETON packageMeta</p>}>
         {packageMeta}
@@ -82,28 +124,16 @@ export default function PackageDetailsLayout({
   );
 }
 
-const TODO = () => Promise.resolve();
+// const TODO = () => Promise.resolve();
 
-interface Clickable {
-  onClick: () => Promise<void>;
-}
+// interface Clickable {
+//   onClick: () => Promise<void>;
+// }
 
-const LikeButton = (props: Clickable) => (
+const DonateButton = (props: { donationLink: string }) => (
   <Button.Root
-    onClick={props.onClick}
-    tooltipText="Like"
-    colorScheme="primary"
-    paddingSize="mediumSquare"
-  >
-    <Button.ButtonIcon>
-      <FontAwesomeIcon icon={faThumbsUp} />
-    </Button.ButtonIcon>
-  </Button.Root>
-);
-
-const DonateButton = (props: Clickable) => (
-  <Button.Root
-    onClick={props.onClick}
+    plain
+    href={props.donationLink}
     tooltipText="Donate to author"
     colorScheme="primary"
     paddingSize="mediumSquare"
@@ -114,18 +144,19 @@ const DonateButton = (props: Clickable) => (
   </Button.Root>
 );
 
-const ReportButton = (props: Clickable) => (
-  <Button.Root
-    onClick={props.onClick}
-    tooltipText="Report"
-    colorScheme="primary"
-    paddingSize="mediumSquare"
-  >
-    <Button.ButtonIcon>
-      <FontAwesomeIcon icon={faFlag} />
-    </Button.ButtonIcon>
-  </Button.Root>
-);
+// TODO: Enable and finish, when we have endpoint for submitting
+// const ReportButton = (props: Clickable) => (
+//   <Button.Root
+//     onClick={props.onClick}
+//     tooltipText="Report"
+//     colorScheme="primary"
+//     paddingSize="mediumSquare"
+//   >
+//     <Button.ButtonIcon>
+//       <FontAwesomeIcon icon={faFlag} />
+//     </Button.ButtonIcon>
+//   </Button.Root>
+// );
 
 const DownloadButton = () => (
   <Button.Root plain colorScheme="primary" paddingSize="medium">

apps/cyberstorm-nextjs/dapper/client.tsx

@@ -10,6 +10,7 @@ export function ClientDapper(props: React.PropsWithChildren) {
   const config = {
     apiHost: process.env.NEXT_PUBLIC_API_DOMAIN || "https://thunderstore.io",
     sessionId: getCookie("sessionid"),
+    csrfToken: getCookie("csrftoken"),
   };
   const dapperConstructor = () => new DapperTs(config);
 

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { useFormToaster } from "@thunderstore/cyberstorm-forms";
+import {
+  ApiAction,
+  PackageDeprecateActionSchema,
+} from "@thunderstore/ts-api-react-actions";
+import { packageDeprecate } from "@thunderstore/thunderstore-api";
+
+export function PackageDeprecateAction(props: {
+  packageName: string;
+  namespace: string;
+  isDeprecated: boolean;
+  packageDataUpdateTrigger: () => Promise<void>;
+}) {
+  const { onSubmitSuccess, onSubmitError } = useFormToaster({
+    successMessage: `${
+      props.isDeprecated ? "Undeprecated" : "Deprecated"
+    } package ${props.packageName}`,
+  });
+
+  function onActionSuccess() {
+    props.packageDataUpdateTrigger();
+    onSubmitSuccess();
+  }
+
+  function onActionError() {
+    onSubmitError();
+  }
+
+  const onSubmit = ApiAction({
+    schema: PackageDeprecateActionSchema,
+    meta: { packageName: props.packageName, namespace: props.namespace },
+    endpoint: packageDeprecate,
+    onSubmitSuccess: onActionSuccess,
+    onSubmitError: onActionError,
+  });
+
+  return function () {
+    onSubmit({ is_deprecated: !props.isDeprecated });
+  };
+}
+
+PackageDeprecateAction.displayName = "PackageDeprecateAction";

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { useFormToaster } from "@thunderstore/cyberstorm-forms";
+import {
+  ApiAction,
+  packageLikeActionSchema,
+} from "@thunderstore/ts-api-react-actions";
+import { packageLike } from "@thunderstore/thunderstore-api";
+
+export function PackageLikeAction(props: {
+  isLoggedIn: boolean;
+  packageName: string;
+  namespace: string;
+  isLiked: boolean;
+  currentUserUpdateTrigger: () => Promise<void>;
+}) {
+  const { onSubmitSuccess, onSubmitError } = useFormToaster({
+    successMessage: `${props.isLiked ? "Unliked" : "Liked"} package ${
+      props.packageName
+    }`,
+    errorMessage: props.isLoggedIn
+      ? "Unknown error occurred. The error has been logged"
+      : "You must be logged in to like a package!",
+  });
+
+  function onActionSuccess() {
+    props.currentUserUpdateTrigger();
+    onSubmitSuccess();
+  }
+
+  function onActionError() {
+    onSubmitError();
+  }
+
+  const onSubmit = ApiAction({
+    schema: packageLikeActionSchema,
+    meta: { namespace_id: props.namespace, package_name: props.packageName },
+    endpoint: packageLike,
+    onSubmitSuccess: onActionSuccess,
+    onSubmitError: onActionError,
+  });
+
+  return function () {
+    onSubmit({ target_state: props.isLiked ? "unrated" : "rated" });
+  };
+}
+
+PackageLikeAction.displayName = "PackageLikeAction";