CSV Example WIP

example-embedded-app/package.json

@@ -23,8 +23,10 @@
     "context-api": "0.0.2",
     "date-fns": "2.30.0",
     "jsonwebtoken": "^9.0.0",
+    "ka-table": "^11.0.3",
     "next": "12.3.4",
     "nprogress": "0.2.0",
+    "papaparse": "^5.4.1",
     "react": "17.0.2",
     "react-apexcharts": "1.4.0",
     "react-custom-scrollbars-2": "4.5.0",

example-embedded-app/pages/csv-example/CsvDataTable.tsx

@@ -0,0 +1,30 @@
+import { Table } from "ka-table";
+import { DataType, EditingMode, SortingMode } from "ka-table/enums";
+import "ka-table/style.css";
+
+function CsvDataTable({ data, table }) {
+  if (data === null || data.length === 0) {
+    return null;
+  }
+
+  const columns = Object.keys(data[0]).map((key) => ({
+    key,
+    title: key,
+    dataType: DataType.String,
+  }));
+
+  const rows = data.map((row, index) => ({ ...row, id: index }));
+
+  return (
+    <Table
+      columns={columns}
+      data={rows}
+      table={table}
+      editingMode={EditingMode.Cell}
+      rowKeyField={"id"}
+      sortingMode={SortingMode.Single}
+    />
+  );
+}
+
+export default CsvDataTable;

example-embedded-app/pages/csv-example/PrismaticAvatar.tsx

@@ -0,0 +1,39 @@
+import { CableTwoTone } from "@mui/icons-material";
+import { Avatar } from "@mui/material";
+import config from "prismatic/config";
+import React from "react";
+
+function PrismaticAvatar({ avatarUrl, token }) {
+  const [src, setSrc] = React.useState("");
+
+  React.useEffect(() => {
+    let mounted = true;
+    if (avatarUrl) {
+      fetch(`${config.prismaticUrl}${avatarUrl}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      }).then((response) => {
+        response.json().then((data) => {
+          if (mounted) {
+            setSrc(data.url);
+          }
+        });
+      });
+    }
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (!avatarUrl) {
+    return (
+      <Avatar>
+        <CableTwoTone />
+      </Avatar>
+    );
+  }
+
+  return src ? <Avatar variant="rounded" src={src} /> : null;
+}
+
+export default PrismaticAvatar;

example-embedded-app/pages/csv-example/UploadButtons.tsx

@@ -0,0 +1,96 @@
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  LinearProgress,
+  TextField,
+} from "@mui/material";
+import Papa from "papaparse";
+import React, { Dispatch, SetStateAction } from "react";
+
+interface UploadCsvParams {
+  fileName: string;
+  uploadUrl: string;
+  data: unknown[];
+  setUploadState: Dispatch<SetStateAction<UploadState>>;
+}
+
+function uploadCsv({
+  fileName,
+  uploadUrl,
+  data,
+  setUploadState,
+}: UploadCsvParams) {
+  setUploadState("uploading");
+  const csvData = Papa.unparse(data.map(({ id, ...rest }) => rest));
+  const formData = new FormData();
+  formData.append("file", csvData);
+  formData.append("fileName", fileName);
+  fetch(uploadUrl, { method: "post", body: formData })
+    .then(() => {
+      setUploadState("success");
+      setTimeout(() => setUploadState("idle"), 4000);
+    })
+    .catch(() => {
+      setUploadState("failed");
+    });
+}
+
+type UploadState = "idle" | "uploading" | "success" | "failed";
+
+function ProgressIndicator({ state }: { state: UploadState }) {
+  switch (state) {
+    case "idle":
+      return null;
+    case "uploading":
+      return (
+        <Box>
+          <LinearProgress />
+        </Box>
+      );
+    case "success":
+      return <Alert severity="success">Upload successful</Alert>;
+    case "failed":
+      return <Alert severity="error">Upload failed</Alert>;
+  }
+}
+
+function UploadButtons({ data, integrations }) {
+  const [fileName, setFileName] = React.useState("");
+  const [uploadState, setUploadState] = React.useState<UploadState>("idle");
+
+  const integrationsWithUpload = integrations.filter(
+    (integration) => integration.instances.nodes?.[0],
+  );
+
+  return (
+    <Container>
+      <hr />
+      <TextField
+        onChange={({ target }) => {
+          setFileName(target.value);
+        }}
+        label="File Name"
+      />
+      {integrationsWithUpload.map((integration) => (
+        <Button
+          key={integration.name}
+          onClick={() => {
+            uploadCsv({
+              fileName,
+              uploadUrl: integration.instances.nodes[0].webhookUrls["upload"],
+              data,
+              setUploadState,
+            });
+          }}
+        >
+          Upload to {integration.name}
+        </Button>
+      ))}
+      <ProgressIndicator state={uploadState} />
+    </Container>
+  );
+}
+
+export default UploadButtons;

example-embedded-app/pages/csv-example/getIntegrations.ts

@@ -0,0 +1,79 @@
+import prismatic from "@prismatic-io/embedded";
+
+export interface Integration {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+  instances: Instances;
+}
+
+export interface Instances {
+  nodes: InstancesNode[];
+}
+
+export interface InstancesNode {
+  id: string;
+  enabled: boolean;
+  flowConfigs: FlowConfigs;
+  webhookUrls: Record<string, string>;
+}
+
+export interface FlowConfigs {
+  nodes: FlowConfigsNode[];
+}
+
+export interface FlowConfigsNode {
+  flow: Flow;
+  webhookUrl: string;
+}
+
+export interface Flow {
+  name: string;
+}
+
+const query = `query getMarketplaceIntegrations {
+  marketplaceIntegrations(
+    category: "CSV Stores"
+    includeActiveIntegrations: true
+  ) {
+    nodes {
+      id
+      name
+      avatarUrl
+      instances {
+        nodes {
+          id
+          enabled
+          flowConfigs {
+            nodes {
+              flow {
+                name
+              }
+              webhookUrl
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+
+const getIntegrations = (): Promise<Integration[]> => {
+  return prismatic.graphqlRequest({ query }).then((response) => {
+    const integrations = response.data.marketplaceIntegrations.nodes.filter(
+      (i) => i.instances.nodes.length > 0,
+    ) as Integration[];
+    for (const integration of integrations) {
+      const instance = integration.instances.nodes[0];
+      instance.webhookUrls = Object.fromEntries(
+        instance.flowConfigs.nodes.map((flowConfig) => [
+          flowConfig.flow.name,
+          flowConfig.webhookUrl,
+        ]),
+      );
+    }
+    return integrations;
+  });
+};
+
+export default getIntegrations;