chore: Restructure store to match standardised architecture (#4646)

* chore: Remove old store JS * chore: Restructure store to match standardised architecture
canonical · May 23, 2024 · 808f26c · 808f26c
1 parent c0b0e97
commit 808f26c
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 112 deletions.
diff --git a/static/js/public/store-categories.js b/static/js/public/store-categories.js
diff --git a/static/js/public/store.js b/static/js/public/store.js
diff --git a/static/js/store/components/App/App.tsx b/static/js/store/components/App/App.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 
-import Packages from "../Packages";
+import Packages from "../../pages/Packages";
 
 function App() {
   const queryClient = new QueryClient({

diff --git a/...js/store/components/Packages/Packages.tsx → static/js/store/pages/Packages/Packages.tsx b/...js/store/components/Packages/Packages.tsx → static/js/store/pages/Packages/Packages.tsx
@@ -10,24 +10,16 @@ import {
 } from "@canonical/react-components";
 import { DefaultCard, LoadingCard, Filters } from "@canonical/store-components";
 
-import Banner from "../Banner";
+import Banner from "../../components/Banner";
 
-import type { Package, Category } from "../../types/shared";
+import { getArchitectures, getCategoryOrder } from "../../utils";
+
+import type { Package, Category } from "../../types";
 
 function Packages() {
   const ITEMS_PER_PAGE = 15;
   const SHOW_MORE_COUNT = 10;
-  const CATEGORY_ORDER = [
-    "development",
-    "games",
-    "social",
-    "productivity",
-    "utilities",
-    "music-and-audio",
-    "art-and-design",
-    "photo-and-video",
-    "server-and-cloud",
-  ];
+  const CATEGORY_ORDER = getCategoryOrder();
 
   const getData = async () => {
     let queryString = search;
@@ -207,36 +199,7 @@ function Packages() {
                       searchParams.delete("page");
                       setSearchParams(searchParams);
                     }}
-                    architectures={[
-                      {
-                        name: "",
-                        display_name: "All",
-                      },
-                      {
-                        name: "amd64",
-                        display_name: "AMD64",
-                      },
-                      {
-                        name: "arm64",
-                        display_name: "ARM64",
-                      },
-                      {
-                        name: "armhf",
-                        display_name: "ARMHF",
-                      },
-                      {
-                        name: "i386",
-                        display_name: "I386",
-                      },
-                      {
-                        name: "ppc64el",
-                        display_name: "PPC64EL",
-                      },
-                      {
-                        name: "s390x",
-                        display_name: "S390X",
-                      },
-                    ]}
+                    architectures={getArchitectures()}
                     selectedArchitecture={
                       searchParams.get("architecture") || ""
                     }

diff --git a/...ents/Packages/__tests__/Packages.test.tsx → ...ages/Packages/__tests__/Packages.test.tsx b/...ents/Packages/__tests__/Packages.test.tsx → ...ages/Packages/__tests__/Packages.test.tsx
diff --git a/static/js/store/components/Packages/index.ts → static/js/store/pages/Packages/index.ts b/static/js/store/components/Packages/index.ts → static/js/store/pages/Packages/index.ts
diff --git a/static/js/store/types/components/Category.d.ts b/static/js/store/types/components/Category.d.ts
@@ -0,0 +1,6 @@
+type Category = {
+  display_name: string;
+  name: string;
+};
+
+export default Category;
diff --git a/static/js/store/types/shared.ts → ...ic/js/store/types/components/Package.d.ts b/static/js/store/types/shared.ts → ...ic/js/store/types/components/Package.d.ts
@@ -1,4 +1,6 @@
-export type Package = {
+import type { Category } from "./Category";
+
+type Package = {
   id?: string;
   package: {
     description: string;
@@ -24,7 +26,4 @@ export type Package = {
   };
 };
 
-export type Category = {
-  display_name: string;
-  name: string;
-};
+export default Package;
diff --git a/static/js/store/types/index.d.ts b/static/js/store/types/index.d.ts
@@ -0,0 +1,4 @@
+import Category from "./components/Category";
+import Package from "./components/Package";
+
+export { Category, Package };
diff --git a/static/js/store/utils/getArchitectures.ts b/static/js/store/utils/getArchitectures.ts
@@ -0,0 +1,34 @@
+function getArchitectures() {
+  return [
+    {
+      name: "",
+      display_name: "All",
+    },
+    {
+      name: "amd64",
+      display_name: "AMD64",
+    },
+    {
+      name: "arm64",
+      display_name: "ARM64",
+    },
+    {
+      name: "armhf",
+      display_name: "ARMHF",
+    },
+    {
+      name: "i386",
+      display_name: "I386",
+    },
+    {
+      name: "ppc64el",
+      display_name: "PPC64EL",
+    },
+    {
+      name: "s390x",
+      display_name: "S390X",
+    },
+  ];
+}
+
+export default getArchitectures;
diff --git a/static/js/store/utils/getCategoryOrder.ts b/static/js/store/utils/getCategoryOrder.ts
@@ -0,0 +1,15 @@
+function getCategoryOrder() {
+  return [
+    "development",
+    "games",
+    "social",
+    "productivity",
+    "utilities",
+    "music-and-audio",
+    "art-and-design",
+    "photo-and-video",
+    "server-and-cloud",
+  ];
+}
+
+export default getCategoryOrder;
diff --git a/static/js/store/utils/index.ts b/static/js/store/utils/index.ts
@@ -0,0 +1,4 @@
+import getArchitectures from "./getArchitectures";
+import getCategoryOrder from "./getCategoryOrder";
+
+export { getArchitectures, getCategoryOrder };
diff --git a/templates/store/store.html b/templates/store/store.html
@@ -25,5 +25,5 @@
 
 {% block content %}
 <main id="root"></main>
-<script src="{{ versioned_static('js/dist/beta-store.js') }}" defer></script>
+<script src="{{ versioned_static('js/dist/store.js') }}" defer></script>
 {% endblock %}
diff --git a/webpack.config.entry.js b/webpack.config.entry.js
@@ -12,7 +12,6 @@ module.exports = {
   publisher: "./static/js/publisher/publisher.js",
   homepage: "./static/js/public/homepage.js",
   blog: "./static/js/public/blog.js",
-  store: "./static/js/public/store.js",
   "store-details": "./static/js/public/store-details.js",
   fsf: "./static/js/public/fsf.js",
   search: "./static/js/public/search.js",
@@ -23,5 +22,5 @@ module.exports = {
   "publisher-settings": "./static/js/publisher/settings/index.tsx",
   "publisher-collaboration": "./static/js/publisher/collaboration/index.tsx",
   "about-listing": "./static/js/public/about/listing.ts",
-  "beta-store": "./static/js/store/index.tsx",
+  store: "./static/js/store/index.tsx",
 };
diff --git a/webpack.config.rules.js b/webpack.config.rules.js
@@ -5,7 +5,8 @@ module.exports = [
     // except some that use ES6 modules and need to be transpiled:
     // such as swiper http://idangero.us/swiper/get-started/
     // and also react-dnd related
-    exclude: /node_modules\/(?!(dom7|ssr-window|swiper|dnd-core|react-dnd|react-dnd-html5-backend)\/).*/,
+    exclude:
+      /node_modules\/(?!(dom7|ssr-window|swiper|dnd-core|react-dnd|react-dnd-html5-backend)\/).*/,
     use: {
       loader: "babel-loader",
     },
@@ -55,10 +56,6 @@ module.exports = [
     test: require.resolve(__dirname + "/static/js/public/blog.js"),
     use: ["expose-loader?exposes=snapcraft.public.blog", "babel-loader"],
   },
-  {
-    test: require.resolve(__dirname + "/static/js/public/store.js"),
-    use: ["expose-loader?exposes=snapcraft.public.store", "babel-loader"],
-  },
   {
     test: require.resolve(__dirname + "/static/js/public/store-details.js"),
     use: [