working on grid emojipicker

gauntlet.toml

@@ -7,18 +7,18 @@ Repository: https://www.coastalcommits.com/cswimr/gauntlet-emojipicker
 """
 
 [[entrypoint]]
-id = 'emojipicker'
+id = 'emojipicker-legacy'
 name = 'Emoji Picker'
-path = 'src/emojipicker.tsx'
+path = 'src/emojipicker-legacy.tsx'
 type = 'inline-view'
 description = """
 Copy emojis to your clipboard from Gauntlet!
 """
 
 [[entrypoint]]
-id = 'emojipicker-grid'
+id = 'emojipicker'
-name = 'Emoji Picker (Grid)'
+name = 'Emoji Picker'
-path = 'src/emojipicker-grid.tsx'
+path = 'src/emojipicker.tsx'
 type = 'view'
 description = """
 Copy emojis to your clipboard from Gauntlet!

src/emojipicker-grid.tsx

@@ -1,68 +0,0 @@
-import { Grid } from "@project-gauntlet/api/components";
-import React, { ReactNode, useState } from "react";
-import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
-import {
-  GroupedBy,
-  BaseEmoji,
-  getEmojis,
-  getEmojisGroupedBy,
-} from "unicode-emoji";
-
-// @ts-expect-error gauntlet uses deno and not node
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const denoCore: DenoCore = Deno[Deno.internal].core;
-
-export default function EmojiPicker(): ReactNode | undefined {
-  const [searchText, setSearchText] = useState<string | undefined>("");
-
-  let emojiList: BaseEmoji[] | Record<GroupedBy, BaseEmoji[]>;
-  let isCategory = null;
-  if (searchText) {
-    emojiList = getEmojis().filter((emoji) =>
-      emoji.keywords.some((keyword) => keyword.includes(searchText)),
-    );
-    isCategory = false;
-  } else {
-    emojiList = getEmojisGroupedBy("category");
-    isCategory = true;
-  }
-
-  return (
-    <Grid>
-      <Grid.SearchBar
-        placeholder={"Search for an emoji"}
-        value={searchText}
-        onChange={setSearchText}
-      />
-      {isCategory
-        ? Object.entries(emojiList).map(([category, emojis]) => (
-            <Grid.Section key={category} title={category}>
-              {emojis.map((emoji: BaseEmoji) => (
-                <Grid.Item
-                  key={emoji.emoji}
-                  title={emoji.emoji}
-                  subtitle={emoji.keywords.join(", ")}
-                  onClick={async () => {
-                    console.log(emoji);
-                    await Clipboard.writeText(emoji.emoji);
-                    showHud(`${emoji.emoji} copied to clipboard`);
-                  }}
-                />
-              ))}
-            </Grid.Section>
-          ))
-        : (emojiList as BaseEmoji[]).map((emoji: BaseEmoji) => (
-            <Grid.Item
-              key={emoji.emoji}
-              title={emoji.emoji}
-              subtitle={emoji.keywords.join(", ")}
-              onClick={async () => {
-                console.log(emoji);
-                await Clipboard.writeText(emoji.emoji);
-                showHud(`${emoji.emoji} copied to clipboard`);
-              }}
-            />
-          ))}
-    </Grid>
-  );
-}

src/emojipicker-legacy.tsx

@@ -0,0 +1,56 @@
+import {
+  Action,
+  ActionPanel,
+  Content,
+  Icons,
+  Inline,
+} from "@project-gauntlet/api/components";
+import React, { ReactNode } from "react";
+import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
+import * as UnicodeEmoji from "unicode-emoji";
+
+// @ts-expect-error gauntlet uses deno and not node
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const denoCore: DenoCore = Deno[Deno.internal].core;
+
+export default function EmojiPicker(props: {
+  text: string;
+}): ReactNode | undefined {
+  const text = props.text.trim();
+
+  if (text.length < 3) {
+    return undefined;
+  }
+
+  const emoji = UnicodeEmoji.getEmojis().find((emoji) =>
+    emoji.keywords.includes(text),
+  );
+  if (!emoji) {
+    return undefined;
+  }
+
+  return (
+    <Inline
+      actions={
+        <ActionPanel>
+          <Action
+            label={`Copy ${emoji.emoji} to clipboard`}
+            onAction={async () => {
+              console.log(emoji);
+              await Clipboard.writeText(emoji.emoji);
+              showHud(`${emoji.emoji} copied to clipboard`);
+            }}
+          />
+        </ActionPanel>
+      }
+    >
+      <Inline.Left>
+        <Content.H3>{text}</Content.H3>
+      </Inline.Left>
+      <Inline.Separator icon={Icons.ArrowRight} />
+      <Inline.Right>
+        <Content.Paragraph>{emoji.emoji}</Content.Paragraph>
+      </Inline.Right>
+    </Inline>
+  );
+}

src/emojipicker.tsx

@@ -1,56 +1,89 @@
-import {
+import { Grid } from "@project-gauntlet/api/components";
-  Action,
+import React, { ReactNode, useState } from "react";
-  ActionPanel,
-  Content,
-  Icons,
-  Inline,
-} from "@project-gauntlet/api/components";
-import React, { ReactNode } from "react";
 import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
-import * as UnicodeEmoji from "unicode-emoji";
+import {
+  GroupedBy,
+  BaseEmoji,
+  getEmojis,
+  getEmojisGroupedBy,
+} from "unicode-emoji";
 
 // @ts-expect-error gauntlet uses deno and not node
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const denoCore: DenoCore = Deno[Deno.internal].core;
 
-export default function EmojiPicker(props: {
+export default function EmojiPicker(): ReactNode | undefined {
-  text: string;
+  const [searchText, setSearchText] = useState<string | undefined>("");
-}): ReactNode | undefined {
-  const text = props.text.trim();
 
-  if (text.length < 3) {
+  let emojiList: BaseEmoji[] | Record<GroupedBy, BaseEmoji[]>;
-    return undefined;
+  let isCategory = null;
-  }
+  if (searchText) {
-
+    emojiList = getEmojis().filter((emoji) =>
-  const emoji = UnicodeEmoji.getEmojis().find((emoji) =>
+      emoji.keywords.some((keyword) => keyword.includes(searchText)),
-    emoji.keywords.includes(text),
     );
-  if (!emoji) {
+    isCategory = false;
-    return undefined;
+  } else {
+    emojiList = getEmojisGroupedBy("category");
+    isCategory = true;
   }
 
+  let emojiListLength = 0;
+  if (isCategory) {
+    const typedList = emojiList as Record<GroupedBy, BaseEmoji[]>;
+    for (const category in typedList) {
+      emojiListLength += typedList[category as GroupedBy].length;
+    }
+  } else {
+    emojiListLength = (emojiList as BaseEmoji[]).length;
+  }
+  console.log(emojiListLength);
+
   return (
-    <Inline
+    <Grid>
-      actions={
+      <Grid.SearchBar
-        <ActionPanel>
+        placeholder={"Search for an emoji"}
-          <Action
+        value={searchText}
-            label={`Copy ${emoji.emoji} to clipboard`}
+        onChange={setSearchText}
-            onAction={async () => {
+      />
+      {isCategory
+        ? Object.entries(emojiList).map(([category, emojis]) => (
+            <Grid.Section key={category} title={category}>
+              {emojis.map((emoji: BaseEmoji) => (
+                <Grid.Item
+                  key={emoji.emoji}
+                  title={emoji.description}
+                  onClick={async () => {
                     console.log(emoji);
                     await Clipboard.writeText(emoji.emoji);
                     showHud(`${emoji.emoji} copied to clipboard`);
                   }}
-          />
-        </ActionPanel>
-      }
                 >
-      <Inline.Left>
+                  <Grid.Item.Content>
-        <Content.H3>{text}</Content.H3>
+                    <Grid.Item.Content.Paragraph>
-      </Inline.Left>
+                      {emoji.emoji}
-      <Inline.Separator icon={Icons.ArrowRight} />
+                    </Grid.Item.Content.Paragraph>
-      <Inline.Right>
+                  </Grid.Item.Content>
-        <Content.Paragraph>{emoji.emoji}</Content.Paragraph>
+                </Grid.Item>
-      </Inline.Right>
+              ))}
-    </Inline>
+            </Grid.Section>
+          ))
+        : (emojiList as BaseEmoji[]).map((emoji: BaseEmoji) => (
+            <Grid.Item
+              key={emoji.emoji}
+              title={emoji.description}
+              onClick={async () => {
+                console.log(emoji);
+                await Clipboard.writeText(emoji.emoji);
+                showHud(`${emoji.emoji} copied to clipboard`);
+              }}
+            >
+              <Grid.Item.Content>
+                <Grid.Item.Content.Paragraph>
+                  {emoji.emoji}
+                </Grid.Item.Content.Paragraph>
+              </Grid.Item.Content>
+            </Grid.Item>
+          ))}
+    </Grid>
   );
 }