Wd 10748 featured snap update UI

static/js/admin/components/FindSnap.tsx

@@ -0,0 +1,116 @@
+import { useState, useRef } from "react";
+import { useQuery } from "react-query";
+
+import { Button } from "@canonical/react-components";
+
+import type { SnapData } from "../types/SnapData";
+
+type FindSnapProps = {
+  addSnap: (snap: any) => void;
+};
+
+const searchSnap = async (queryString: string): Promise<SnapData[]> => {
+  const response = await fetch(`/beta/store.json?q=${queryString}`);
+  const responseJson = await response.json();
+  return responseJson.packages;
+};
+
+const FindSnap = ({ addSnap }: FindSnapProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [focused, setFocused] = useState(false);
+  const { data, isLoading } = useQuery(
+    ["searchSnap", searchQuery],
+    () => searchSnap(searchQuery),
+    { enabled: searchQuery.length > 2 },
+  );
+
+  const handleSearch = (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    setSearchQuery(e.currentTarget.value);
+  };
+
+  const handleClick = (snap: any) => {
+    setSearchQuery("");
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    setFocused(false);
+    addSnap(snap);
+  };
+
+  const handleFocus = () => setFocused(true);
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          position: "relative",
+          zIndex: 10,
+        }}
+      >
+        <input
+          className="p-form-validation__input"
+          type="text"
+          name="snap"
+          onChange={handleSearch}
+          onFocus={handleFocus}
+          ref={inputRef}
+          placeholder="Search for a snap"
+        />
+        {data && focused && (
+          <div
+            style={{
+              position: "absolute",
+              top: "100%",
+              right: 0,
+              width: "500px",
+              backgroundColor: "#fff",
+              border: "1.5px solid #d9d9d9",
+              height: "50vh",
+              overflow: "auto",
+            }}
+          >
+            {data.map((snap: any) => (
+              <div
+                key={snap.package.name}
+                onClick={() => {
+                  handleClick(snap);
+                }}
+                style={{
+                  cursor: "pointer",
+                  borderBottom: "1.5px solid #d9d9d9",
+                  padding: "1rem",
+                }}
+              >
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                  <div>
+                    <img
+                      src={snap.package.icon_url}
+                      alt={snap.package.name}
+                      width="32"
+                      style={{ marginRight: "0.5rem" }}
+                    />
+                  </div>
+                  <div>
+                    <h3 className="p-heading--5 u-no-margin u-no-padding">
+                      {snap.package.display_name}
+                    </h3>
+                    <p className="u-no-margin u-text--muted">
+                      <em>{snap.publisher.display_name}</em>
+                    </p>
+                    <p className="u-no-margin">{snap.package.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default FindSnap;

static/js/admin/components/SortableCard.tsx

@@ -0,0 +1,78 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import { Col, Icon } from "@canonical/react-components";
+
+import { DefaultCard } from "@canonical/store-components";
+
+import type { SnapData } from "../types/SnapData";
+
+type SortableCardProps = {
+  snap: SnapData;
+  handleRemove: (id: string) => void;
+};
+
+const SortableCard = ({ snap, handleRemove }: SortableCardProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: snap.package_name });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <Col size={3} style={{ marginBottom: "1.5rem", position: "relative" }}>
+      <div style={{ ...style }} ref={setNodeRef}>
+        <Icon
+          style={{
+            position: "absolute",
+            top: ".5rem",
+            right: ".5rem",
+            cursor: "pointer",
+          }}
+          name="delete"
+          onClick={() => handleRemove(snap.package_name)}
+        />
+        <Icon
+          style={{
+            position: "absolute",
+            top: ".5rem",
+            left: ".5rem",
+          }}
+          name="drag"
+          {...listeners}
+          {...attributes}
+        />
+        <DefaultCard
+          data={{
+            categories: snap.sections,
+            package: {
+              description: snap.summary,
+              display_name: snap.title,
+              icon_url: snap.icon_url,
+              name: snap.package_name,
+            },
+            publisher: {
+              display_name: snap.developer_name,
+              name: snap.origin,
+              validation:
+                snap.developer_validation === "starred"
+                  ? "star"
+                  : snap.developer_validation,
+            },
+          }}
+        />
+      </div>
+    </Col>
+  );
+};
+
+export default SortableCard;

static/js/admin/components/index.ts

@@ -0,0 +1,4 @@
+import { default as SortableCard } from "./SortableCard";
+import { default as FindSnap } from "./FindSnap";
+
+export { SortableCard, FindSnap };

static/js/admin/index.tsx

@@ -0,0 +1,31 @@
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+import { FeaturedSnaps } from "./pages/index";
+
+const container = document.getElementById("root");
+const root = createRoot(container as HTMLElement);
+
+function App() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  });
+
+  return (
+    <Router>
+      <QueryClientProvider client={queryClient}>
+        <Routes>
+          <Route path="/admin-dashboard" element={<FeaturedSnaps />} />
+        </Routes>
+      </QueryClientProvider>
+    </Router>
+  );
+}
+
+root.render(<App />);