@thunderstore/cyberstorm: code cleanup

Shouldn't affect functionality

Refs TS-1860

packages/cyberstorm/src/components/Layout/CommunityProfileLayout/CommunityProfileLayout.tsx

@@ -15,14 +15,14 @@ import { MetaItem } from "../../MetaItem/MetaItem";
 import { PackageSearch } from "../../PackageSearch/PackageSearch";
 import { formatInteger } from "../../../utils/utils";
 
-interface PackageListLayoutProps {
+interface Props {
   communityId: string;
 }
 
 /**
  * View for showing Community's package listing.
  */
-export function CommunityProfileLayout(props: PackageListLayoutProps) {
+export function CommunityProfileLayout(props: Props) {
   const { communityId } = props;
 
   const dapper = useDapper();

packages/cyberstorm/src/components/PackageList/PackageList.module.css

@@ -1,56 +1,6 @@
-.listTopNavigation {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap--24);
-  align-items: center;
-  justify-content: space-between;
-  margin: var(--space--16) 0;
-}
-
-.listTopNavigationChild {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap--16);
-  align-items: center;
-}
-
-.placeholder {
-  background-color: fuchsia;
-}
-
-.showing {
-  color: var(--color-text--secondary);
-}
-
-.contentWrapper {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap--16);
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: var(--gap--16);
-}
-
-.filterItemList {
-  display: flex;
-  flex-basis: 20%;
-  flex-direction: column;
-}
-
-.packageCardList {
+.root {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   gap: 1.5rem;
   margin-bottom: var(--space--24);
 }
-
-.selectedTags {
-  display: flex;
-  flex-direction: row;
-  gap: var(--space--8);
-  height: var(--space--24);
-}

packages/cyberstorm/src/components/PackageList/PackageList.tsx

@@ -1,62 +1,36 @@
 "use client";
 import { useDapper } from "@thunderstore/dapper";
-import { PackagePreview } from "@thunderstore/dapper/types";
+import { usePromise } from "@thunderstore/use-promise";
 import { isEqual } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 
 import styles from "./PackageList.module.css";
-import {
-  FiltersContext,
-  CategoriesProps,
-} from "../PackageSearch/PackageSearch";
+import { FiltersContext } from "../PackageSearch/PackageSearch";
 import { PackageCard } from "../PackageCard/PackageCard";
 
-export interface PackageListingsProps {
+interface Props {
   communityId?: string;
   userId?: string;
   namespaceId?: string;
   teamId?: string;
 }
 
-export interface fetchFromDapperProps extends PackageListingsProps {
-  keywords?: string[];
-  availableCategories?: CategoriesProps;
-}
-
-export default function PackageList(props: PackageListingsProps) {
+export function PackageList(props: Props) {
   const { communityId, userId, namespaceId, teamId } = props;
   const filters = useContext(FiltersContext);
   const dapper = useDapper();
-  const [datas, setDatas] = useState<PackagePreview[]>();
-
-  useEffect(() => {
-    // React advises to declare the async function directly inside useEffect
-    async function getDatas() {
-      const datasCall = await dapper.getPackageListings(
-        communityId,
-        userId,
-        undefined,
-        teamId,
-        filters?.keywords,
-        filters?.availableCategories
-      );
-      setDatas(datasCall);
-    }
 
-    getDatas();
-  }, [
+  const packages = usePromise(dapper.getPackageListings, [
     communityId,
-    dapper.getPackageListings,
-    filters?.availableCategories,
-    filters?.keywords,
+    userId,
     namespaceId,
-    setDatas,
     teamId,
-    userId,
+    filters?.keywords,
+    filters?.availableCategories,
   ]);
 
   useEffect(() => {
-    if (filters === null || typeof datas === "undefined") {
+    if (filters === null) {
       return;
     }
 
@@ -68,7 +42,7 @@ export default function PackageList(props: PackageListingsProps) {
     // packages (true/false) or off (undefined).
     const updatedAvailableCategories = { ...filters.availableCategories };
 
-    datas.forEach((package_) => {
+    packages.forEach((package_) => {
       package_.categories.forEach((category) => {
         updatedAvailableCategories[category.slug] = {
           label: category.name,
@@ -81,15 +55,15 @@ export default function PackageList(props: PackageListingsProps) {
       filters.setAvailableCategories(updatedAvailableCategories);
     }
   }, [
-    datas,
     filters?.availableCategories,
     filters?.keywords,
     filters?.setAvailableCategories,
+    packages,
   ]);
 
   return (
-    <div className={styles.packageCardList}>
-      {datas?.map((packageData) => (
+    <div className={styles.root}>
+      {packages.map((packageData) => (
         <PackageCard key={packageData.name} packageData={packageData} />
       ))}
     </div>

packages/cyberstorm/src/components/PackageSearch/PackageSearch.module.css

@@ -1,67 +1,60 @@
-.listTopNavigation {
+.root,
+.content {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
-  margin-bottom: var(--space--16);
+  flex-grow: 1;
+  gap: var(--gap--32);
 }
 
-.displayAndSort {
+.contentWrapper {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  gap: var(--gap--24);
 }
 
-.displayButtons {
+.filterItemList {
   display: flex;
-  gap: var(--gap--8);
+  flex-basis: 20%;
+  flex-direction: column;
 }
 
-.sort {
+.listTopNavigation {
   display: flex;
+  flex-direction: column;
   gap: var(--gap--16);
-}
-
-.sortLabel {
-  align-self: center;
-  color: var(--color-text--tertiary);
-  font-weight: 700;
-  font-size: var(--font-size--m);
+  margin-bottom: var(--space--16);
 }
 
 .showing {
   color: var(--color-text--tertiary);
   font-size: var(--font-size--m);
 }
 
-.contentWrapper {
+.selectedTags {
   display: flex;
-  flex-direction: row;
-  gap: var(--gap--24);
+  flex-flow: row wrap;
+  gap: var(--space--8);
+  padding: var(--space--8);
 }
 
-.content {
+.displayAndSort {
   display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: var(--gap--32);
+  justify-content: space-between;
 }
 
-.filterItemList {
+.displayButtons {
   display: flex;
-  flex-basis: 20%;
-  flex-direction: column;
+  gap: var(--gap--8);
 }
 
-.packageCardList {
-  display: grid;
-  flex-flow: row wrap;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-  gap: 1.5rem;
-  margin-bottom: var(--space--24);
+.sort {
+  display: flex;
+  gap: var(--gap--16);
 }
 
-.selectedTags {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--space--8);
-  padding: var(--space--8);
+.sortLabel {
+  align-self: center;
+  color: var(--color-text--tertiary);
+  font-weight: 700;
+  font-size: var(--font-size--m);
 }

packages/cyberstorm/src/components/PackageSearch/PackageSearch.tsx

@@ -7,40 +7,25 @@ import {
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Suspense, lazy, useState, createContext } from "react";
+import { Suspense, useState, createContext } from "react";
 
 import styles from "./PackageSearch.module.css";
 import * as Button from "../Button/";
 import { FilterItemList } from "../FilterItemList/FilterItemList";
 import { Icon } from "../Icon/Icon";
 import { Pagination } from "../Pagination/Pagination";
+import { PackageList } from "../PackageList/PackageList";
 import { Select } from "../Select/Select";
 import { Tag } from "../Tag/Tag";
 import { TextInput } from "../TextInput/TextInput";
 
-const PackageList = lazy(() => import("../PackageList/PackageList"));
-
-export interface CategoriesProps {
+interface CategoriesProps {
   [key: string]: {
     label: string;
     value: boolean | undefined;
   };
 }
 
-export interface PackageSearchLayoutProps {
-  communityId?: string;
-  userId?: string;
-  teamId?: string;
-}
-
-export interface PackageListingsProps {
-  communityId: string;
-  userId: string;
-  teamId: string;
-  keywords: { key: string; negate: boolean }[];
-  categories: CategoriesProps[];
-}
-
 // TODO: OVERKILL???
 export class Filters {
   keywords: string[];
@@ -125,10 +110,16 @@ function CurrentFilters(props: TagListProps) {
   );
 }
 
+interface Props {
+  communityId?: string;
+  userId?: string;
+  teamId?: string;
+}
+
 /**
- * Cyberstorm PackageSearch Layout
+ * Component for filtering and rendering a PackageList
  */
-export function PackageSearch(props: PackageSearchLayoutProps) {
+export function PackageSearch(props: Props) {
   const { communityId, userId, teamId } = props;
 
   const filters = new Filters();
@@ -150,7 +141,7 @@ export function PackageSearch(props: PackageSearchLayoutProps) {
   };
 
   return (
-    <div className={styles.content}>
+    <div className={styles.root}>
       <TextInput
         placeHolder="Filter Mods..."
         leftIcon={

packages/cyberstorm/src/components/SearchFilter/SearchFilter.tsx

@@ -42,4 +42,4 @@ export function SearchFilter(props: SearchFilterProps) {
   );
 }
 
-SearchFilter.displayName = "PackageListLayout";
+SearchFilter.displayName = "SearchFilter";