From 870b4b2b7e792ebeded99e8a24ef29e68df93d72 Mon Sep 17 00:00:00 2001
From: cswimr <seaswimmerthefsh@gmail.com>
Date: Mon, 23 Dec 2024 14:38:42 -0500
Subject: [PATCH] working on grid emojipicker

---
 gauntlet.toml              |  10 ++--
 src/emojipicker-grid.tsx   |  68 ---------------------
 src/emojipicker-legacy.tsx |  56 ++++++++++++++++++
 src/emojipicker.tsx        | 117 ++++++++++++++++++++++++-------------
 4 files changed, 136 insertions(+), 115 deletions(-)
 delete mode 100644 src/emojipicker-grid.tsx
 create mode 100644 src/emojipicker-legacy.tsx

diff --git a/gauntlet.toml b/gauntlet.toml
index 1f143dc..70b3d3d 100644
--- a/gauntlet.toml
+++ b/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'
-name = 'Emoji Picker (Grid)'
-path = 'src/emojipicker-grid.tsx'
+id = 'emojipicker'
+name = 'Emoji Picker'
+path = 'src/emojipicker.tsx'
 type = 'view'
 description = """
 Copy emojis to your clipboard from Gauntlet!
diff --git a/src/emojipicker-grid.tsx b/src/emojipicker-grid.tsx
deleted file mode 100644
index 6e8ac68..0000000
--- a/src/emojipicker-grid.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/emojipicker-legacy.tsx b/src/emojipicker-legacy.tsx
new file mode 100644
index 0000000..2b34597
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/emojipicker.tsx b/src/emojipicker.tsx
index 2b34597..864e76e 100644
--- a/src/emojipicker.tsx
+++ b/src/emojipicker.tsx
@@ -1,56 +1,89 @@
-import {
-  Action,
-  ActionPanel,
-  Content,
-  Icons,
-  Inline,
-} from "@project-gauntlet/api/components";
-import React, { ReactNode } from "react";
+import { Grid } from "@project-gauntlet/api/components";
+import React, { ReactNode, useState } 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: {
-  text: string;
-}): ReactNode | undefined {
-  const text = props.text.trim();
+export default function EmojiPicker(): ReactNode | undefined {
+  const [searchText, setSearchText] = useState<string | undefined>("");
 
-  if (text.length < 3) {
-    return 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;
   }
 
-  const emoji = UnicodeEmoji.getEmojis().find((emoji) =>
-    emoji.keywords.includes(text),
-  );
-  if (!emoji) {
-    return undefined;
+  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
-      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>
+    <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.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.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>
   );
 }