Removed use of legacy widgets (#527)

* removed legacy widgets * fix error * remove more code
NEAR-DevHub · Nov 29, 2023 · 910eaac · 910eaac
1 parent e2dc0f3
commit 910eaac
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 159 deletions.
diff --git a/common.jsx b/common.jsx
diff --git a/src/devhub/components/layout/LikeButton/Faces.jsx b/src/devhub/components/layout/LikeButton/Faces.jsx
@@ -0,0 +1,122 @@
+const accountId = context.accountId;
+const likesByUsers = props.likesByUsers || {};
+const limit = props.limit ?? 3;
+
+let likes = Object.keys(likesByUsers).reverse();
+
+const graphLikes = [];
+const nonGraph = [];
+
+const graph =
+  (accountId &&
+    Social.keys(`${accountId}/graph/follow/*`, "final")[accountId].graph
+      .follow) ||
+  {};
+
+likes.forEach((accountId) => {
+  if (accountId in graph) {
+    graphLikes.push(accountId);
+  } else {
+    nonGraph.push(accountId);
+  }
+});
+
+let faces = [...graphLikes, ...nonGraph];
+
+if (faces.length < limit + 3) {
+  limit = faces.length;
+}
+
+const renderFaces = faces.splice(0, limit);
+
+const Faces = styled.span`
+  .face {
+    display: inline-block;
+    position: relative;
+    margin: -0.1em;
+    height: 1.5em;
+    width: 1.5em;
+    min-width: 1.5em;
+    vertical-align: top;
+    img {
+      object-fit: cover;
+      border-radius: 50%;
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;
+
+const Others = styled.span`
+  &:hover {
+    color: white !important;
+  }
+`;
+
+const numLikes = likes.length - limit;
+
+return (
+  <>
+    <Faces className="ms-1">
+      {renderFaces.map((accountId, i) => (
+        <a
+          key={i}
+          href={`#/mob.near/widget/ProfilePage?accountId=${accountId}`}
+          className="text-decoration-none d-inline-block"
+        >
+          <Widget
+            src="mob.near/widget/Profile.OverlayTrigger"
+            props={{
+              accountId,
+              children: (
+                <Widget
+                  src="mob.near/widget/ProfileImage"
+                  props={{
+                    metadata,
+                    accountId,
+                    widgetName,
+                    style: { zIndex: 10 - i },
+                    className: "face",
+                    tooltip: false,
+                    imageStyle: {},
+                    imageClassName: "",
+                  }}
+                />
+              ),
+            }}
+          />
+        </a>
+      ))}
+    </Faces>
+    {numLikes > 0 ? (
+      <OverlayTrigger
+        placement="auto"
+        overlay={
+          <Tooltip>
+            <div
+              className="text-truncate text-start"
+              style={{ maxWidth: "16em" }}
+            >
+              {faces.slice(0, 10).map((accountId, i) => (
+                <Fragment key={i}>
+                  <Widget
+                    src="mob.near/widget/ProfileLine"
+                    props={{ accountId, link: false }}
+                  />
+                  <br />
+                </Fragment>
+              ))}
+              {faces.length > 10 ? "..." : ""}
+            </div>
+          </Tooltip>
+        }
+      >
+        <span className="ms-1">
+          and {numLikes} other{numLikes === 1 ? "" : "s"}
+        </span>
+      </OverlayTrigger>
+    ) : (
+      ""
+    )}
+  </>
+);
diff --git a/src/devhub/components/molecule/Switch.jsx b/src/devhub/components/molecule/Switch.jsx
@@ -0,0 +1,39 @@
+const { className, currentValue, isHidden, key, onChange, options, title } =
+  props;
+
+return (
+  <div
+    className={[
+      "btn-group shadow",
+      className ?? "",
+      isHidden ?? false ? "d-none" : "",
+    ].join(" ")}
+    role="group"
+    aria-label={title}
+    key={`${key}-${value}`}
+    {...{ title }}
+  >
+    {options.map(({ label, value }) => (
+      <>
+        <input
+          checked={currentValue === value}
+          className="btn-check"
+          id={`${key}-${value}`}
+          name={`${key}-${value}`}
+          type="radio"
+          {...{ onChange, value }}
+        />
+
+        <label
+          className={[
+            "btn btn-sm",
+            currentValue === value ? "btn-dark" : "btn-light",
+          ].join(" ")}
+          for={`${key}-${value}`}
+        >
+          {label}
+        </label>
+      </>
+    ))}
+  </div>
+);
diff --git a/src/devhub/components/organism/Configurator.jsx b/src/devhub/components/organism/Configurator.jsx
@@ -116,16 +116,16 @@ const ValueView = styled.div`
 
 const fieldParamsByType = {
   array: {
-    name: "components.molecule.text-input",
+    name: "components.molecule.Input",
     inputProps: { type: "text" },
   },
 
   boolean: {
-    name: "components.atom.toggle",
+    name: "components.atom.Toggle",
   },
 
   string: {
-    name: "components.molecule.text-input",
+    name: "components.molecule.Input",
     inputProps: { type: "text" },
   },
 };
@@ -175,7 +175,6 @@ const defaultFieldsRender = ({ schema, form, isEditable }) => (
                   </span>
                 ) : (fieldValue?.length ?? 0) > 0 ? (
                   <Widget
-                    // TODO: LEGACY.
                     src={
                       "${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownViewer"
                     }
@@ -189,11 +188,9 @@ const defaultFieldsRender = ({ schema, form, isEditable }) => (
               </ValueView>
             </div>
             <Widget
-              // TODO: LEGACY.
-              src={`${REPL_DEVHUB_LEGACY}/widget/gigs-board.${fieldParamsByType[fieldType].name}`}
+              src={`${REPL_DEVHUB}/widget/devhub.${fieldParamsByType[fieldType].name}`}
               props={{
                 ...fieldProps,
-
                 className: [
                   "w-100",
                   fieldProps.className ?? "",

diff --git a/src/devhub/entity/addon/blog/editor/content.jsx b/src/devhub/entity/addon/blog/editor/content.jsx
@@ -240,8 +240,7 @@ return (
       >
         <div style={{ position: "absolute", top: 10, right: 0 }}>
           <Widget
-            // LEGACY
-            src="${REPL_DEVHUB_LEGACY}/widget/gigs-board.components.molecule.button-switch"
+            src="${REPL_DEVHUB}/widget/devhub.components.molecule.Switch"
             props={{
               currentValue: previewMode,
               key: "previewMode",