Merge pull request #884 from thunderstore-io/dapper-filter-ids

@thunderstore/dapper: use unique ids in category and section objects

apps/cyberstorm-storybook/stories/components/PackageCard.stories.tsx

@@ -51,8 +51,8 @@ ReferencePackageCard.args = {
     isNsfw: false,
     isDeprecated: false,
     categories: [
-      { name: "Misc", slug: "misc" },
-      { name: "Mods", slug: "mods" },
+      { id: 1, name: "Misc", slug: "misc" },
+      { id: 2, name: "Mods", slug: "mods" },
     ],
   },
 };

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

@@ -24,9 +24,9 @@ export const CategoryTagCloud = (props: Props) => {
     return null;
   }
 
-  const clearCategory = (slug: string) =>
+  const clearCategory = (id: number) =>
     setCategories(
-      categories.map((c) => (c.slug === slug ? { ...c, selection: OFF } : c))
+      categories.map((c) => (c.id === id ? { ...c, selection: OFF } : c))
     );
 
   const clearAll = () =>
@@ -37,7 +37,7 @@ export const CategoryTagCloud = (props: Props) => {
       {visible.map((c) => (
         <Button.Root
           key={c.slug}
-          onClick={() => clearCategory(c.slug)}
+          onClick={() => clearCategory(c.id)}
           colorScheme={c.selection === "exclude" ? "danger" : "default"}
           paddingSize="small"
           style={{ gap: "0.5rem" }}

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

@@ -21,8 +21,7 @@ interface Props {
 export const CategoryMenu = (props: Props) => {
   const { categories, setCategories } = props;
 
-  const toggleCategory = (slug: string) =>
-    setCategories(toggle(categories, slug));
+  const toggleCategory = (id: number) => setCategories(toggle(categories, id));
 
   return (
     <div className={styles.root}>
@@ -35,7 +34,7 @@ export const CategoryMenu = (props: Props) => {
               <label className={classnames(styles.label, styles[c.selection])}>
                 <Checkbox.Root
                   checked={c.selection !== "off"}
-                  onCheckedChange={() => toggleCategory(c.slug)}
+                  onCheckedChange={() => toggleCategory(c.id)}
                   className={styles.checkbox}
                 >
                   <Checkbox.Indicator>
@@ -66,9 +65,9 @@ CategoryMenu.displayName = "CategoryMenu";
  *
  * Toggling "off" -> "include" -> "exclude" -> "off"
  */
-const toggle = (categories: CategorySelection[], targetSlug: string) =>
+const toggle = (categories: CategorySelection[], targetId: number) =>
   categories.map((c) => {
-    if (c.slug === targetSlug) {
+    if (c.id === targetId) {
       const nextIndex = (STATES.indexOf(c.selection) + 1) % STATES.length;
       return { ...c, selection: STATES[nextIndex] };
     }

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

@@ -31,14 +31,14 @@ export const SectionMenu = (props: Props) => {
             key={s.slug}
             className={classnames(
               styles.label,
-              s.slug === selected ? styles.include : null
+              s.uuid === selected ? styles.include : null
             )}
           >
             <RadioGroup.Item
-              value={s.slug}
+              value={s.uuid}
               className={classnames(
                 styles.radio,
-                s.slug === selected ? styles.radioSelected : null
+                s.uuid === selected ? styles.radioSelected : null
               )}
             >
               <RadioGroup.Indicator className={styles.radioIndicator} />

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

@@ -43,7 +43,7 @@ export function PackageSearch(props: Props) {
       .sort((a, b) => a.slug.localeCompare(b.slug))
       .map((c) => ({ ...c, selection: "off" }))
   );
-  const [section, setSection] = useState(allSections[0]?.slug ?? "");
+  const [section, setSection] = useState(allSections[0]?.uuid ?? "");
   const [deprecated, setDeprecated] = useState(false);
   const [nsfw, setNsfw] = useState(false);
 

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

@@ -10,17 +10,17 @@ export const getFakeLink = () => ({
 
 export const getFakePackageCategories = (returnAmount?: number) => {
   const categories = [
-    { name: "Mods", slug: "mods" },
-    { name: "Tools", slug: "tools" },
-    { name: "Libraries", slug: "libraries" },
-    { name: "Modpacks", slug: "modpacks" },
-    { name: "Skins", slug: "skins" },
-    { name: "Maps", slug: "maps" },
-    { name: "Tweaks", slug: "tweaks" },
-    { name: "Items", slug: "items" },
-    { name: "Language", slug: "language" },
-    { name: "Audio", slug: "audio" },
-    { name: "Enemies", slug: "enemies" },
+    { id: 1, name: "Mods", slug: "mods" },
+    { id: 2, name: "Tools", slug: "tools" },
+    { id: 3, name: "Libraries", slug: "libraries" },
+    { id: 4, name: "Modpacks", slug: "modpacks" },
+    { id: 5, name: "Skins", slug: "skins" },
+    { id: 6, name: "Maps", slug: "maps" },
+    { id: 7, name: "Tweaks", slug: "tweaks" },
+    { id: 8, name: "Items", slug: "items" },
+    { id: 9, name: "Language", slug: "language" },
+    { id: 10, name: "Audio", slug: "audio" },
+    { id: 11, name: "Enemies", slug: "enemies" },
   ];
 
   return faker.helpers.arrayElements(categories, {
@@ -31,12 +31,27 @@ export const getFakePackageCategories = (returnAmount?: number) => {
 
 export const getFakeSections = (returnAmount?: number) => {
   const categories = [
-    { name: "Mods", slug: "mods", priority: 0 },
-    { name: "Modpacks", slug: "modpacks", priority: 1 },
-    { name: "Maps", slug: "maps", priority: 2 },
-    { name: "Custom cards", slug: "cards", priority: 3 },
-    { name: "Latest update", slug: "update", priority: 4 },
-    { name: "Paid DLC", slug: "dlc", priority: 5 },
+    { uuid: faker.string.uuid(), name: "Mods", slug: "mods", priority: 0 },
+    {
+      uuid: faker.string.uuid(),
+      name: "Modpacks",
+      slug: "modpacks",
+      priority: 1,
+    },
+    { uuid: faker.string.uuid(), name: "Maps", slug: "maps", priority: 2 },
+    {
+      uuid: faker.string.uuid(),
+      name: "Custom cards",
+      slug: "cards",
+      priority: 3,
+    },
+    {
+      uuid: faker.string.uuid(),
+      name: "Latest update",
+      slug: "update",
+      priority: 4,
+    },
+    { uuid: faker.string.uuid(), name: "Paid DLC", slug: "dlc", priority: 5 },
   ];
 
   return faker.helpers.arrayElements(categories, {

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

@@ -4,11 +4,13 @@ import { fetchCommunityFilters } from "@thunderstore/thunderstore-api";
 import { DapperTsInterface } from "../index";
 
 const PackageCategory = z.object({
+  id: z.number().nonnegative(),
   name: z.string().nonempty(),
   slug: z.string().nonempty(),
 });
 
 const Section = z.object({
+  uuid: z.string().uuid(),
   name: z.string().nonempty(),
   slug: z.string().nonempty(),
   priority: z.number().int(),

packages/dapper/src/types/community.ts

@@ -15,6 +15,7 @@ export interface Community {
 export type Communities = PaginatedList<Community>;
 
 export interface Section {
+  uuid: string;
   name: string;
   slug: string;
   priority: number;

packages/dapper/src/types/package.ts

@@ -1,3 +1,4 @@
+import { PackageCategory } from "./shared";
 import { TeamMember } from "./team";
 
 export interface PackagePreview {
@@ -14,10 +15,7 @@ export interface PackagePreview {
   isPinned?: boolean;
   isNsfw?: boolean;
   isDeprecated?: boolean;
-  categories: {
-    name: string;
-    slug: string;
-  }[];
+  categories: PackageCategory[];
 }
 
 export interface Package extends PackagePreview {

packages/dapper/src/types/shared.ts

@@ -4,6 +4,7 @@ export type DynamicLink = {
 };
 
 export interface PackageCategory {
+  id: number;
   name: string;
   slug: string;
 }