chore: move store directory and fix lint errors (#2029)

static/js/store/components/Packages/Packages.tsx → static/js/src/store/components/Packages/Packages.tsx

@@ -20,14 +20,16 @@ import Topics from "../Topics";
 
 import platforms from "../../data/platforms";
 import packageTypes from "../../data/package-types";
+import { Category } from "../../types";
+import { Package, Publisher } from "../../../publisher-admin/types";
 
 function Packages() {
   const ITEMS_PER_PAGE = 12;
 
   const getData = async () => {
     const response = await fetch(`/store.json${search}`);
     const data = await response.json();
-    const packagesWithId = data.packages.map((item: any) => {
+    const packagesWithId = data.packages.map((item: string[]) => {
       return {
         ...item,
         id: crypto.randomUUID(),
@@ -48,6 +50,8 @@ function Packages() {
   const [hideFilters, setHideFilters] = useState(true);
   const currentPage = searchParams.get("page") || "1";
   const { data, status, refetch, isFetching } = useQuery("data", getData);
+  console.log(data);
+  console.log(typeof data);
 
   const topicsQuery = searchParams ? searchParams.get("categories") : null;
 
@@ -110,7 +114,7 @@ function Packages() {
                   selectedCategories={
                     searchParams.get("categories")?.split(",") || []
                   }
-                  setSelectedCategories={(items: any) => {
+                  setSelectedCategories={(items: string[]) => {
                     if (items.length > 0) {
                       searchParams.set("categories", items.join(","));
                     } else {
@@ -182,19 +186,27 @@ function Packages() {
               {!isFetching &&
                 status === "success" &&
                 data.packages.length > 0 &&
-                data.packages.map((packageData: any) => (
-                  <Col
-                    size={3}
-                    style={{ marginBottom: "1.5rem" }}
-                    key={packageData.id}
-                  >
-                    {packageData.package.type === "bundle" ? (
-                      <BundleCard data={packageData} />
-                    ) : (
-                      <CharmCard data={packageData} />
-                    )}
-                  </Col>
-                ))}
+                data.packages.map(
+                  (packageData: {
+                    categories: Category[];
+                    package: Package;
+                    publisher: Publisher;
+                    ratings: { count: string; value: string };
+                    id: string;
+                  }) => (
+                    <Col
+                      size={3}
+                      style={{ marginBottom: "1.5rem" }}
+                      key={packageData.id}
+                    >
+                      {packageData.package.type === "bundle" ? (
+                        <BundleCard data={packageData} />
+                      ) : (
+                        <CharmCard data={packageData} />
+                      )}
+                    </Col>
+                  )
+                )}
 
               {status === "success" && data.packages.length === 0 && (
                 <h1 className="p-heading--2">No packages match this filter</h1>

static/js/store/components/Packages/__tests__/Packages.test.tsx → static/js/src/store/components/Packages/__tests__/Packages.test.tsx

@@ -6,13 +6,17 @@ import Packages from "../Packages";
 import "@testing-library/jest-dom";
 
 jest.mock("@canonical/store-components", () => ({
-  CharmCard: ({ data }: { data: any }) => <div>{data.name}</div>,
-  BundleCard: ({ data }: { data: any }) => <div>{data.name}</div>,
+  CharmCard: ({ data }: { data: { name: string } }) => <div>{data.name}</div>,
+  BundleCard: ({ data }: { data: { name: string } }) => <div>{data.name}</div>,
   Filters: ({
     setSelectedCategories,
     setSelectedPlatform,
     setSelectedPackageType,
-  }: any) => (
+  }: {
+    setSelectedCategories: (categories: string[]) => void;
+    setSelectedPlatform: (platform: string) => void;
+    setSelectedPackageType: (packageType: string) => void;
+  }) => (
     <div>
       <button onClick={() => setSelectedCategories(["category1"])}>
         Set Categories
@@ -63,7 +67,7 @@ describe("Packages component", () => {
   });
 
   test("renders no packages message when there are no results", async () => {
-    (global as any).fetch = jest.fn(() =>
+    (global.fetch as jest.Mock) = jest.fn(() =>
       Promise.resolve({
         json: () =>
           Promise.resolve({

static/js/store/components/Topics/__tests__/Topics.test.tsx → static/js/src/store/components/Topics/__tests__/Topics.test.tsx

@@ -4,7 +4,7 @@ import Topics from "../Topics";
 import { QueryClient, QueryClientProvider } from "react-query";
 import "@testing-library/jest-dom";
 
-(global as any).fetch = jest.fn(() =>
+(global.fetch as jest.Mock) = jest.fn(() =>
   Promise.resolve({
     json: () => Promise.resolve({ topics: [] }),
   })
@@ -64,7 +64,7 @@ describe("Topics Component", () => {
       },
     ];
 
-    (global as any).fetch = jest.fn(() =>
+    (global.fetch as unknown as jest.Mock) = jest.fn(() =>
       Promise.resolve({
         json: () => Promise.resolve({ topics: mockTopics }),
       })
@@ -80,7 +80,7 @@ describe("Topics Component", () => {
   });
 
   test("renders empty state when no topics are available", async () => {
-    (global as any).fetch = jest.fn(() =>
+    (global.fetch as jest.Mock) = jest.fn(() =>
       Promise.resolve({
         json: () => Promise.resolve({ topics: [] }),
       })

webpack.config.entry.js

@@ -15,7 +15,7 @@ module.exports = {
   "navigation-events": "./static/js/src/public/navigation-events.ts",
   "icon-validator": "./static/js/src/public/icon-validator/index.tsx",
   interfaces: "./static/js/src/interfaces/index.tsx",
-  store: "./static/js/store/index.tsx",
+  store: "./static/js/src/store/index.tsx",
   publisher: "./static/js/src/publisher-admin/index.tsx",
   search: "./static/js/src/search/App.tsx",
 };