Entity file upload (#791)

* chore: restore flatten attributes, PR 465 * feat: display image and file field types in detail view * feat: display image and file field types in detail view * feat: file type fields allow ipfs file upload
near · Apr 29, 2024 · c8ac37a · c8ac37a
1 parent 75035fd
commit c8ac37a
Show file tree

Hide file tree

Showing 6 changed files with 315 additions and 111 deletions.
diff --git a/src/Entities/QueryApi/Ipfs.jsx b/src/Entities/QueryApi/Ipfs.jsx
@@ -0,0 +1,15 @@
+const ipfsUpload = (f) =>
+  asyncFetch("https://ipfs.near.social/add", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+    },
+    body: f,
+  }).then((res) => res.body.cid);
+
+const ipfsUrl = (cid) => {
+  const c = typeof cid === "object" ? cid.cid : cid;
+  return `https://ipfs.near.social/ipfs/${c}`;
+};
+
+return { ipfsUpload, ipfsUrl };
diff --git a/src/Entities/Template/EntityCreate.jsx b/src/Entities/Template/EntityCreate.jsx
@@ -31,7 +31,19 @@ const inputsValidator = (formValues) =>
     return !required || typeof formValues[key] === "string";
   });
 
-const actionType = data ? (data.accountId === context.accountId ? "Edit" : "Fork") : "Create";
+const flattenAttributes = (data) => {
+  if (!data.attributes) {
+    return data;
+  }
+  const flattened = { ...data };
+  Object.keys(data.attributes).forEach((key) => {
+    flattened[key] = data.attributes[key];
+  });
+  delete flattened.attributes;
+  return flattened;
+};
+const flattenedData = data ? flattenAttributes(data) : data;
+const actionType = data ? (flattenedData.accountId === context.accountId ? "Edit" : "Fork") : "Create";
 
 const initialValues = (schema, data) => {
   const initial = data ?? {};
@@ -62,7 +74,7 @@ return (
       submitLabel: data ? "Save" : "Launch",
       onCancel: onCancel,
       cancelLabel: cancelLabel,
-      externalState: initialValues(schema, data),
+      externalState: initialValues(schema, flattenedData),
       namespace,
       entityType,
     }}

diff --git a/src/Entities/Template/EntityDetails.jsx b/src/Entities/Template/EntityDetails.jsx
@@ -112,7 +112,6 @@ const Properties = styled.div`
 `;
 const Text = styled.p`
   margin: 0;
-  font-size: 14px;
   line-height: 20px;
   color: ${(p) => (p.bold ? "#11181C" : "#687076")};
   font-weight: ${(p) => (p.bold ? "600" : "400")};
@@ -132,14 +131,50 @@ const entityProperties = (obj) => {
   const attributes = obj.attributes;
   return (
     <Properties>
-      {Object.keys(attributes).map((k) => (
-        <>
-          <Text bold key={k}>
-            {capitalize(k)}:
-          </Text>
-          <PropValue>{attributes[k]}</PropValue>
-        </>
-      ))}
+      {attributes &&
+        Object.keys(attributes).map((key) => {
+          const schemaField = schema[key];
+          const value = attributes[key];
+          switch (schemaField.type) {
+            case "image":
+              return (
+                <>
+                  <Text bold key={key}>
+                    {capitalize(key)}:
+                  </Text>
+                  <PropValue>
+                    <img className="logo" src={imageUrl} alt={key} />
+                  </PropValue>
+                </>
+              );
+            case "file":
+              return (
+                <>
+                  <Text bold key={key}>
+                    {capitalize(key)}:
+                  </Text>
+                  <PropValue>
+                    {value && (
+                      <>
+                        <p>{value?.name}</p>
+                        <p>{value.type}</p>
+                        <p>{value.size} bytes</p>
+                      </>
+                    )}
+                  </PropValue>
+                </>
+              );
+            default:
+              return (
+                <>
+                  <Text bold key={key}>
+                    {capitalize(key)}:
+                  </Text>
+                  <PropValue>{value}</PropValue>
+                </>
+              );
+          }
+        })}
     </Properties>
   );
 };