refactor: redo embeds

mary-ext · Feb 27, 2024 · d7a2d5e · d7a2d5e
1 parent cf51e3b
commit d7a2d5e
Showing 1 changed file with 53 additions and 49 deletions.
diff --git a/app/com/components/embeds/Embed.tsx b/app/com/components/embeds/Embed.tsx
@@ -1,4 +1,4 @@
-import { type Accessor, createMemo } from 'solid-js';
+import { type Accessor } from 'solid-js';
 
 import type { AppBskyEmbedExternal, AppBskyEmbedImages, AppBskyEmbedRecord } from '~/api/atp-schema';
 import { getCollectionId } from '~/api/utils/misc';
@@ -34,49 +34,48 @@ const Embed = (props: EmbedProps) => {
 	const post = props.post;
 	const decision = props.decision;
 
-	const embeds = createMemo(() => {
-		const embed = post.embed.value;
-
-		let images: EmbeddedImage[] | undefined;
-		let link: EmbeddedLink | undefined;
-		let record: EmbeddedRecord | undefined;
-
-		if (embed) {
-			const type = embed.$type;
-
-			if (type === 'app.bsky.embed.external#view') {
-				link = embed.external;
-			} else if (type === 'app.bsky.embed.images#view') {
-				images = embed.images;
-			} else if (type === 'app.bsky.embed.record#view') {
-				record = embed.record;
-			} else if (type === 'app.bsky.embed.recordWithMedia#view') {
-				const rec = embed.record.record;
-
-				const media = embed.media;
-				const mediatype = media.$type;
-
-				record = rec;
-
-				if (mediatype === 'app.bsky.embed.external#view') {
-					link = media.external;
-				} else if (mediatype === 'app.bsky.embed.images#view') {
-					images = media.images;
-				}
-			}
-		}
-
-		if (images && images.length === 0) {
-			images = undefined;
-		}
-
-		return { images, link, record };
-	});
-
 	return (
-		<div class="mt-3 flex flex-col gap-3">
+		<div class="mt-3 flex flex-col gap-3 empty:hidden">
 			{(() => {
-				const { images, link, record } = embeds();
+				const embed = post.embed.value;
+
+				let images: EmbeddedImage[] | undefined;
+				let link: EmbeddedLink | undefined;
+				let record: EmbeddedRecord | undefined;
+				let unsupported = false;
+
+				if (embed) {
+					const type = embed.$type;
+
+					if (type === 'app.bsky.embed.external#view') {
+						link = embed.external;
+					} else if (type === 'app.bsky.embed.images#view') {
+						images = embed.images;
+					} else if (type === 'app.bsky.embed.record#view') {
+						record = embed.record;
+					} else if (type === 'app.bsky.embed.recordWithMedia#view') {
+						const rec = embed.record.record;
+
+						const media = embed.media;
+						const mediatype = media.$type;
+
+						record = rec;
+
+						if (mediatype === 'app.bsky.embed.external#view') {
+							link = media.external;
+						} else if (mediatype === 'app.bsky.embed.images#view') {
+							images = media.images;
+						} else {
+							unsupported = true;
+						}
+					} else {
+						unsupported = true;
+					}
+				}
+
+				if (images && images.length === 0) {
+					images = undefined;
+				}
 
 				return [
 					(link || images) && (
@@ -92,6 +91,7 @@ const Embed = (props: EmbedProps) => {
 						/>
 					),
 					record && renderRecord(record, () => props.large),
+					unsupported && renderUnsupported(`Unsupported embed`),
 				];
 			})()}
 		</div>
@@ -100,6 +100,14 @@ const Embed = (props: EmbedProps) => {
 
 export default Embed;
 
+const renderUnsupported = (msg: string) => {
+	return (
+		<div class="rounded-md border border-divider p-3">
+			<p class="text-sm text-muted-fg">{msg}</p>
+		</div>
+	);
+};
+
 const renderRecord = (record: AppBskyEmbedRecord.View['record'], large: Accessor<boolean | undefined>) => {
 	const type = record.$type;
 
@@ -115,15 +123,11 @@ const renderRecord = (record: AppBskyEmbedRecord.View['record'], large: Accessor
 		if (type === 'app.bsky.embed.record#viewRecord') {
 			return <EmbedQuote record={record} large={large()} />;
 		}
-	}
-
-	if (type === 'app.bsky.feed.defs#generatorView') {
+	} else if (type === 'app.bsky.feed.defs#generatorView') {
 		return <EmbedFeed feed={record} />;
-	}
-
-	if (type === 'app.bsky.graph.defs#listView') {
+	} else if (type === 'app.bsky.graph.defs#listView') {
 		return <EmbedList list={record} />;
 	}
 
-	return null;
+	return renderUnsupported(`Unsupported record`);
 };