Merge pull request #1156 from thunderstore-io/07-23-Cleanup_component…

…s_remove_use_clients_fix_ValidationBar

Cleanup components, remove "use clients", fix ValidationBar

apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx

@@ -3,7 +3,7 @@ import {
   faDownload,
   faThumbsUp,
 } from "@fortawesome/free-solid-svg-icons";
-import { faSparkles } from "@fortawesome/free-solid-svg-icons";
+import { faHandSparkles } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Dispatch, SetStateAction } from "react";
 
@@ -39,7 +39,7 @@ const selectOptions = [
   {
     value: PackageOrderOptions.Created,
     label: "Newest",
-    leftIcon: <FontAwesomeIcon icon={faSparkles} />,
+    leftIcon: <FontAwesomeIcon icon={faHandSparkles} />,
   },
   {
     value: PackageOrderOptions.Downloaded,

apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx

@@ -1,5 +1,5 @@
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { faXmarkLarge, faSlidersUp } from "@fortawesome/free-solid-svg-icons";
+import { faXmark, faSliders } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   PackageCategory,
@@ -221,9 +221,7 @@ export function PackageSearch(props: Props) {
             onClick={() => setIsFiltersVisible(!isFiltersVisible)}
           >
             <Button.ButtonIcon>
-              <FontAwesomeIcon
-                icon={isFiltersVisible ? faXmarkLarge : faSlidersUp}
-              />
+              <FontAwesomeIcon icon={isFiltersVisible ? faXmark : faSliders} />
             </Button.ButtonIcon>
             <Button.ButtonLabel>
               {isFiltersVisible ? "Close" : "Open"}

apps/cyberstorm-remix/app/p/packageListing.tsx

@@ -24,18 +24,18 @@ import { ApiError } from "@thunderstore/thunderstore-api";
 import { ThunderstoreLogo } from "@thunderstore/cyberstorm/src/svg/svg";
 import {
   faCog,
-  faArrowUpRight,
+  faArrowUpRightFromSquare,
   faUsers,
   faHandHoldingHeart,
   faDownload,
   faThumbsUp,
   // faFlag,
   faBoxes,
   faFileLines,
-  faFilePlus,
+  faFolderPlus,
   faCodeBranch,
   faBook,
-  faCodeSimple,
+  faCode,
 } from "@fortawesome/free-solid-svg-icons";
 import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
 import Meta from "./components/Meta/Meta";
@@ -178,7 +178,7 @@ export default function Community() {
         <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
           <Button.ButtonLabel>{listing.website_url}</Button.ButtonLabel>
           <Button.ButtonIcon>
-            <FontAwesomeIcon icon={faArrowUpRight} />
+            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
           </Button.ButtonIcon>
         </Button.Root>
       </a>
@@ -348,7 +348,7 @@ export default function Community() {
                   )}
                 >
                   <Icon inline wrapperClasses={tabsStyles.icon}>
-                    <FontAwesomeIcon icon={faFilePlus} />
+                    <FontAwesomeIcon icon={faFolderPlus} />
                   </Icon>
                   <span className={tabsStyles.label}>Changelog</span>
                 </CyberstormLink>
@@ -381,7 +381,7 @@ export default function Community() {
                 )}
               >
                 <Icon inline wrapperClasses={tabsStyles.icon}>
-                  <FontAwesomeIcon icon={faCodeSimple} />
+                  <FontAwesomeIcon icon={faCode} />
                 </Icon>
                 <span className={tabsStyles.label}>Source</span>
               </CyberstormLink>

apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMemberList.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { TeamMember } from "@thunderstore/dapper/types";
@@ -8,7 +7,6 @@ import {
   RemoveTeamMemberForm,
   TeamMemberChangeRoleAction,
 } from "@thunderstore/cyberstorm-forms";
-import { useState } from "react";
 import {
   CyberstormLink,
   Dialog,

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountList.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { ServiceAccount } from "@thunderstore/dapper/types";
 import { RemoveServiceAccountForm } from "@thunderstore/cyberstorm-forms";
 import { useState } from "react";

apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./Connections.module.css";
 import { SettingItem } from "@thunderstore/cyberstorm";
 import { CyberstormLink } from "@thunderstore/cyberstorm/src/components/Links/Links";

apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.tsx

@@ -17,7 +17,10 @@ import { useLoaderData } from "@remix-run/react";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Buffer } from "buffer";
-import { toolsManifestValidate } from "@thunderstore/thunderstore-api";
+import {
+  isApiError,
+  toolsManifestValidate,
+} from "@thunderstore/thunderstore-api";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 
 export async function loader() {
@@ -58,9 +61,6 @@ export default function ManifestValidator() {
     args: { teamInput, manifestInput, dapper },
   };
 
-  // REMIX TODO: For some reason the fetch is done twice when
-  // initially adding something to the field
-  // REMIX TODO: Add the delay input here, so that it doesn't try to validate immediately
   useEffect(() => {
     if (teamInput && manifestInput && dapper && manifestInput !== "") {
       setValidationTrigger(true);
@@ -154,30 +154,35 @@ async function ManifestValidationResult(
   message: string;
 }> {
   const { teamInput, manifestInput } = props;
-  const response = await toolsManifestValidate(props.dapper.config, {
-    namespace: teamInput,
-    manifest_data: encode(manifestInput),
-  });
-
-  if (response.status === 200 || response.status === 400) {
+  try {
+    const response = await toolsManifestValidate(props.dapper.config, {
+      namespace: teamInput,
+      manifest_data: encode(manifestInput),
+    });
     const parsedResponse = await response.json();
     if (isHTMLResponse(parsedResponse)) {
-      if (parsedResponse.success) {
-        return { status: "success", message: "All systems go!" };
-      } else if (parsedResponse.non_field_errors) {
-        return {
-          status: "failure",
-          message: parsedResponse.non_field_errors[0],
-        };
-      } else if (
-        parsedResponse.namespace &&
-        parsedResponse.namespace[0] === "Object not found"
-      ) {
-        return {
-          status: "failure",
-          message: "Namespace not found",
-        };
+      return { status: "success", message: "All systems go!" };
+    }
+  } catch (e) {
+    if (isApiError(e)) {
+      if (isHTMLResponse(e.responseJson)) {
+        if (e.responseJson.non_field_errors) {
+          return {
+            status: "failure",
+            message: e.responseJson.non_field_errors[0],
+          };
+        } else if (
+          e.responseJson.namespace &&
+          e.responseJson.namespace[0] === "Object not found"
+        ) {
+          return {
+            status: "failure",
+            message: "Namespace not found",
+          };
+        }
       }
+    } else {
+      throw e;
     }
   }
   return { status: "failure", message: "Server error" };

apps/cyberstorm-remix/app/tools/markdown-preview/markdownPreview.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { useLoaderData } from "@remix-run/react";
 import rootStyles from "../../RootLayout.module.css";
 import styles from "./MarkdownPreview.module.css";
@@ -46,9 +45,6 @@ export default function MarkdownPreview() {
     args: { markdownPreviewInput, setHTML, dapper },
   };
 
-  // REMIX TODO: For some reason the fetch is done three times when
-  // initially adding something to the field and twice when editing
-  // REMIX TODO: Add the delay input here, so that it doesn't try to validate immediately
   useEffect(() => {
     if (markdownPreviewInput && dapper && markdownPreviewInput !== "") {
       setValidationTrigger(true);

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { useFormToaster } from "@thunderstore/cyberstorm-forms";
 import {
   ApiAction,

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { useFormToaster } from "@thunderstore/cyberstorm-forms";
 import {
   ApiAction,

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { useFormToaster } from "@thunderstore/cyberstorm-forms";
 import { Select } from "@thunderstore/cyberstorm";
 import { teamEditMemberFormSchema } from "@thunderstore/ts-api-react-forms";

packages/cyberstorm-forms/src/components/FormMultiSelectSearch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { z, ZodObject } from "zod";
 import { ZodRawShape } from "zod/lib/types";
 import { Path, useController } from "react-hook-form";

packages/cyberstorm-forms/src/components/FormSelectSearch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { z, ZodObject, ZodRawShape } from "zod";
 import { Path, useController } from "react-hook-form";
 import { SelectSearch } from "@thunderstore/cyberstorm";

packages/cyberstorm-forms/src/components/FormSubmitButton.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Button } from "@thunderstore/cyberstorm";
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

packages/cyberstorm-forms/src/components/FormSwitch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { z, ZodObject } from "zod";
 import { ZodRawShape } from "zod/lib/types";
 import { Path, useController } from "react-hook-form";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./AddTeamMemberForm.module.css";
 import { teamAddMember } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./CreateTeamForm.module.css";
 import { createTeam } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./DeleteAccountForm.module.css";
 import { userDelete } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./DisbandTeamForm.module.css";
 import { teamDisbandTeam } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./LeaveTeamForm.module.css";
 import { teamRemoveMember } from "@thunderstore/thunderstore-api";
 import { ApiForm } from "@thunderstore/ts-api-react-forms";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./PackageEditForm.module.css";
 import { packageEditCategories } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./RemoveServiceAccountForm.module.css";
 import { teamServiceAccountRemove } from "@thunderstore/thunderstore-api";
 import { ApiForm } from "@thunderstore/ts-api-react-forms";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./RemoveTeamMemberForm.module.css";
 import { teamRemoveMember } from "@thunderstore/thunderstore-api";
 import { ApiForm } from "@thunderstore/ts-api-react-forms";

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./TeamDetailsEdit.module.css";
 import { teamDetailsEdit } from "@thunderstore/thunderstore-api";
 import {

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

@@ -1,5 +1,3 @@
-"use client";
-
 import styles from "./UserConnectionsForm.module.css";
 import { userLinkedAccountDisconnect } from "@thunderstore/thunderstore-api";
 import {

packages/cyberstorm-forms/src/useFormToaster.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useToast } from "@thunderstore/cyberstorm/src/components/Toast/Provider";
 
 export type UseFormToasterArgs = {

packages/cyberstorm/src/components/Alert/Alert.tsx

@@ -1,4 +1,3 @@
-"use client";
 import React, { ReactNode } from "react";
 import styles from "./Alert.module.css";
 import { Icon } from "../Icon/Icon";

packages/cyberstorm/src/components/CodeInput/CodeInput.tsx

@@ -1,6 +1,5 @@
 "use client";
 import styles from "./CodeInput.module.css";
-import { useState } from "react";
 import { TextAreaInput } from "../TextAreaInput/TextAreaInput";
 import { ValidationBar } from "../ValidationBar/ValidationBar";
 import { classnames } from "../../utils/utils";
@@ -36,24 +35,14 @@ export function CodeInput(props: CodeInputProps) {
   } = props;
 
   if (validator) {
-    const [validationStatus, setValidationStatus] = useState("");
     return (
-      <div
-        className={classnames(
-          styles.inputContainer,
-          validationStatus === "failure" ? styles.inputContainerFailure : null
-        )}
-      >
+      <div className={styles.inputContainer}>
         <TextAreaInput
           placeHolder={placeholder}
           setValue={setValue}
           value={value}
         />
-        <ValidationBar
-          validator={validator}
-          shouldValidate={shouldValidate}
-          setStatus={setValidationStatus}
-        />
+        <ValidationBar validator={validator} shouldValidate={shouldValidate} />
       </div>
     );
   } else {

packages/cyberstorm/src/components/Dialog/Close.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { PropsWithChildren } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 

packages/cyberstorm/src/components/DropDown/DropDown.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { ReactNode, ReactElement } from "react";
 import styles from "./DropDown.module.css";
 

packages/cyberstorm/src/components/Header/HeaderUserNav.tsx

@@ -1,20 +1,16 @@
-"use client";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useDapper } from "@thunderstore/dapper";
-import { usePromise } from "@thunderstore/use-promise";
 
 import * as Button from "../Button/";
 import { UserDropDown } from "./UserDropDown";
+import { CurrentUser } from "@thunderstore/dapper/types";
 
-export const HeaderUserNav = () => {
-  const dapper = useDapper();
-  const user = usePromise(dapper.getCurrentUser, []);
-  const avatar = user.connections.find((c) => c.avatar !== null)?.avatar;
+export const HeaderUserNav = (props: { user: CurrentUser }) => {
+  const avatar = props.user.connections.find((c) => c.avatar !== null)?.avatar;
 
   return (
     <>
-      {user.username ? (
+      {props.user.username ? (
         <li>
           {/* TODO: This is a bit bad, since old upload pages exist on per community basis. Good enough until new upload page is deployed. */}
           {/* When new upload page is deployed change to use PackageUploadLink instead */}
@@ -32,7 +28,7 @@ export const HeaderUserNav = () => {
         </li>
       ) : null}
       <li>
-        <UserDropDown username={user.username} avatar={avatar} />
+        <UserDropDown username={props.user.username} avatar={avatar} />
       </li>
     </>
   );

packages/cyberstorm/src/components/Header/UserDropDown.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { faSignOut, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as RadixDropDown from "@radix-ui/react-dropdown-menu";