Article preview

api/src/types/fragments.js

@@ -22,6 +22,12 @@ export const appBundleFragment = `
     Index_updatedAt: updatedAt
     Index_deletedAt: deletedAt
   }
+  ... on Article {
+    Article_id: id
+    Article_title: title
+    Article_url: url
+    Article_createdAt: createdAt
+  }
   ... on WebPage {
     WebPage_title: title
     WebPage_favicon: favicon

web-app/src/components/site/index-details/ArticleItem/index.tsx

@@ -0,0 +1,116 @@
+import Freizeit from "@/fonts/loader";
+import { shortStr } from "@/utils/helper";
+import Button from "components/base/Button";
+import IconContextMenu from "components/base/Icon/IconContextMenu";
+import Text from "components/base/Text";
+import Col from "components/layout/base/Grid/Col";
+import FlexRow from "components/layout/base/Grid/FlexRow";
+import IndexDetailItemPopup from "components/site/popup/IndexDetailItemPopup";
+import { useRole } from "hooks/useRole";
+import moment from "moment";
+import React from "react";
+import sanitize from "sanitize-html";
+import { ArticleIndexNodeItem, DefaultIndexNodeItem } from "types/entity";
+
+export interface ArticleItemProps {
+  item: ArticleIndexNodeItem;
+  onChange?(val: DefaultIndexNodeItem[]): void;
+  search?: boolean;
+  handleRemove?(): void;
+}
+
+const ArticleItem: React.FC<ArticleItemProps> = ({
+  item,
+  search = false,
+  handleRemove,
+}) => {
+  const { node } = item;
+
+  const { isCreator } = useRole();
+
+  return (
+    <div className="index-detail-list-item-wrapper">
+      <FlexRow className="index-detail-list-item py-3">
+        <Col xs={12}>
+          <FlexRow wrap={false} style={{ height: "24px" }}>
+            <Col className="idxflex-grow-1">
+              <img
+                className="mt-0 mr-3"
+                src={"/images/article.svg"}
+                alt="favicon"
+                width={16}
+                height={16}
+                onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+                  const target = e.target as HTMLImageElement;
+                  target.onerror = null; // Prevents infinite loop in case fallback image also fails
+                  target.src = "/images/article.svg";
+                }}
+                style={{
+                  verticalAlign: "middle",
+                }}
+              />
+              <a href={node.url} target="_blank">
+                <Text
+                  className={Freizeit.className}
+                  style={{
+                    fontSize: "16px",
+                  }}
+                  fontWeight={700}
+                  dangerouslySetInnerHTML={{
+                    __html: sanitize(shortStr(node?.title)),
+                  }}
+                />
+              </a>
+            </Col>
+            {!search && isCreator ? (
+              <Col className="idxflex-shrink-0 index-detail-list-item-buttons ml-3">
+                <FlexRow>
+                  <Col></Col>
+                  <Col>
+                    <IndexDetailItemPopup onDelete={handleRemove}>
+                      <Button size="xs" iconButton theme="clear" borderless>
+                        <IconContextMenu />
+                      </Button>
+                    </IndexDetailItemPopup>
+                  </Col>
+                </FlexRow>
+              </Col>
+            ) : (
+              <Col className="idxflex-shrink-0 index-detail-list-item-buttons ml-3">
+                <FlexRow>
+                  <Col></Col>
+                  <Col>
+                    <IndexDetailItemPopup onDelete={handleRemove} />
+                  </Col>
+                </FlexRow>
+              </Col>
+            )}
+          </FlexRow>
+        </Col>
+        <Col xs={12} className="mt-2">
+          <Text size="sm" theme="gray5">
+            {item.type}
+            {" • "}
+            <a
+              href={node.url}
+              target="_blank"
+              style={{
+                color: "#475569",
+              }}
+            >
+              {node.url}
+            </a>
+            {" • "}
+          </Text>
+
+          <Text size="sm" theme="gray5">
+            {node?.createdAt
+              ? `Published ${moment(new Date(node.createdAt)).fromNow()}`
+              : ""}
+          </Text>
+        </Col>
+      </FlexRow>
+    </div>
+  );
+};
+export default ArticleItem;

web-app/src/components/site/index-details/IndexItemList/index.tsx

@@ -9,6 +9,7 @@ import {
   IndexItem,
   IndexTeamNodeItem,
   IndexWebPageItem,
+  ArticleIndexNodeItem,
 } from "types/entity";
 
 import NoLinks from "../../indexes/NoLinks";
@@ -17,6 +18,7 @@ import TeamItem from "../TeamItem";
 import IndexIndexItem from "../IndexIndexItem";
 import DefaultIndexItem from "../DefaultIndexItem";
 import CastItem from "../CastItem";
+import ArticleItem from "../ArticleItem";
 
 export interface IndexItemListProps {
   search: string;
@@ -31,6 +33,7 @@ const MemoTeamItem = memo(TeamItem);
 const MemoIndexItem = memo(IndexIndexItem);
 const MemoDefaultIndexItem = memo(DefaultIndexItem);
 const MemoCastItem = memo(CastItem);
+const MemoArticleItem = memo(ArticleItem);
 
 const IndexItemList: FC<IndexItemListProps> = ({
   search,
@@ -62,6 +65,16 @@ const IndexItemList: FC<IndexItemListProps> = ({
       );
     }
 
+    if (item.type === "Article") {
+      return (
+        <MemoArticleItem
+          handleRemove={() => removeItem(item)}
+          search={!!search}
+          item={item as ArticleIndexNodeItem}
+        />
+      );
+    }
+
     if (item.type === "Index") {
       return (
         <MemoIndexItem

web-app/src/components/site/modal/EditProfileModal/index.tsx

@@ -61,11 +61,15 @@ const EditProfileModal = ({ ...modalProps }: EditProfileModalProps) => {
         const profileData = {
           name: values.name,
           bio: values.bio,
-          avatar: (avatar || userProfile.avatar).replace(
+          avatar: undefined,
+        };
+
+        if (avatar || userProfile.avatar) {
+          profileData.avatar = (avatar || userProfile.avatar).replace(
             `${appConfig.ipfsProxy}/`,
             "",
-          ),
-        };
+          );
+        }
 
         await dispatch(updateProfile({ profile: profileData, api })).unwrap();
         toast.success("Profile updated successfully");

web-app/src/types/entity.ts

@@ -74,6 +74,12 @@ export type CastIndexNode = {
     username: string;
   };
 };
+export type ArticleIndexNode = {
+  id: string;
+  title: string;
+  url: string;
+  createdAt: string;
+};
 
 export type IndexWebPageItem = {
   id: string;
@@ -105,11 +111,18 @@ export type CastIndexNodeItem = {
   node: CastIndexNode;
 };
 
+export type ArticleIndexNodeItem = {
+  id: string;
+  type: string;
+  node: ArticleIndexNode;
+};
+
 export type IndexItem =
   | IndexWebPageItem
   | IndexTeamNodeItem
   | IndexIndexNodeItem
   | DefaultIndexNodeItem
+  | ArticleIndexNodeItem
   | CastIndexNodeItem;
 
 export type IndexLink = {