Add toot search, fixed twitter search. Think there are some bugs with…

… this…
mrmartineau · Nov 9, 2023 · 377a2c5 · 377a2c5
1 parent 4e2282c
commit 377a2c5
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 14 deletions.
diff --git a/app/(app)/toots/[id]/page.tsx b/app/(app)/toots/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { getToot } from '@/src/utils/fetching/toots';
+import { createServerClient } from '@/src/utils/supabase/server';
+import { cookies } from 'next/headers';
+
+import { TootFeedItem } from '../../../../src/components/TootFeedItem';
+
+export default async function BookmarkPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const cookieStore = cookies();
+  const supabaseClient = createServerClient(cookieStore);
+  const { data } = await getToot({ supabaseClient, id: params.id });
+  // @ts-ignore
+  return <TootFeedItem {...data} />;
+}
diff --git a/app/(app)/tweets/[id]/page.tsx b/app/(app)/tweets/[id]/page.tsx
@@ -0,0 +1,17 @@
+import { getTweet } from '@/src/utils/fetching/tweets';
+import { createServerClient } from '@/src/utils/supabase/server';
+import { cookies } from 'next/headers';
+
+import { TweetFeedItem } from '../../../../src/components/TweetFeedItem';
+
+export default async function BookmarkPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const cookieStore = cookies();
+  const supabaseClient = createServerClient(cookieStore);
+  const { data } = await getTweet({ supabaseClient, id: params.id });
+  // @ts-ignore
+  return <TweetFeedItem {...data} />;
+}
diff --git a/src/components/CmdK/CmdK.tsx b/src/components/CmdK/CmdK.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@/src/components/Button';
 import { useToggle } from '@/src/hooks/useToggle';
-import { Bookmark, Tweet } from '@/src/types/db';
+import { Bookmark, Toot, Tweet } from '@/src/types/db';
 import { DbMetaResponse } from '@/src/utils/fetching/meta';
 import { simpleUrl } from '@/src/utils/simpleUrl';
 import {
@@ -74,6 +74,7 @@ export const CmdK = ({ serverDbMeta }: CmdKProps) => {
   const [open, toggleOpen, setOpen] = useToggle(false);
   const [bookmarkItems, setBookmarkItems] = useState<Bookmark[]>([]);
   const [tweetItems, setTweetItems] = useState<Tweet[]>([]);
+  const [tootItems, setTootItems] = useState<Toot[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const dbMeta = serverDbMeta;
 
@@ -91,8 +92,9 @@ export const CmdK = ({ serverDbMeta }: CmdKProps) => {
     await fetchSearch(value).then((data) => {
       setBookmarkItems((data?.bookmarksSearch?.data as Bookmark[]) ?? []);
       setTweetItems(data?.tweetsSearch?.data ?? []);
+      setTootItems(data?.tootsSearch?.data ?? []);
     });
-  }, 500);
+  }, 1000);
 
   useEffect(() => {
     const down = (event: KeyboardEvent) => {
@@ -337,6 +339,36 @@ export const CmdK = ({ serverDbMeta }: CmdKProps) => {
               </Command.Group>
             ) : null}
 
+            {/* Toots */}
+            {searchTerm.length && tootItems?.length ? (
+              <Command.Group className="cmdk-group" heading="Toots">
+                {tootItems?.map(({ id, text, user_avatar, user_id }) => {
+                  if (!text) {
+                    return null;
+                  }
+
+                  const value = [text].filter(Boolean).join(' ');
+                  return (
+                    <Item key={`toot-${id}`} value={value} to={`/toots/${id}`}>
+                      <div>
+                        <Flex align="center" gap="xs" className="mb-2xs">
+                          {user_avatar ? (
+                            <img
+                              src={user_avatar}
+                              width="20px"
+                              className="rounded-full"
+                            />
+                          ) : null}
+                          <span>{user_id}</span>
+                        </Flex>
+                        {text}
+                      </div>
+                    </Item>
+                  );
+                })}
+              </Command.Group>
+            ) : null}
+
             {/* Tweets */}
             {searchTerm.length && tweetItems?.length ? (
               <Command.Group className="cmdk-group" heading="Tweets">

diff --git a/src/components/CmdK/fetchSearch.ts b/src/components/CmdK/fetchSearch.ts
@@ -13,17 +13,28 @@ export const fetchSearch = async (searchTerm: string) => {
     .match({ status: 'active' })
     .order('created_at', { ascending: false })
     .limit(5);
-
   const tweetsSearch = await supabaseClient
     .from('tweets')
     .select('*', { count: 'exact' })
-    .or(`text.ilike.*${searchTerm}*,user_name.ilike.*${searchTerm}*`)
-    .match({ status: 'active' })
+    .or(
+      `text.ilike.*${searchTerm}*,user_name.ilike.*${searchTerm}*,hashtags.cs.{${searchTerm}}`,
+    )
+    .order('created_at', { ascending: false })
+    .limit(5);
+  console.log(`🚀 ~ fetchSearch ~ tweetsSearch:`, tweetsSearch);
+  const tootsSearch = await supabaseClient
+    .from('toots')
+    .select('*', { count: 'exact' })
+    .or(
+      `text.ilike.*${searchTerm}*,user_name.ilike.*${searchTerm}*,user_id.ilike.*${searchTerm}*,hashtags.cs.{${searchTerm}}`,
+    )
     .order('created_at', { ascending: false })
     .limit(5);
+  console.log(`🚀 ~ fetchSearch ~ tootsSearch:`, tootsSearch);
 
   return {
     bookmarksSearch,
     tweetsSearch,
+    tootsSearch,
   };
 };
diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx
@@ -99,11 +99,9 @@ export const Feed = memo(
                     {groupedItem?.items?.map((item) => {
                       if (isTweet(item)) {
                         return <TweetFeedItem {...item} key={item.id} />;
-                      }
-                      if (isToot(item)) {
+                      } else if (isToot(item)) {
                         return <TootFeedItem {...item} key={item.id} />;
                       }
-
                       return (
                         <BookmarkFeedItem
                           {...item}
@@ -125,8 +123,7 @@ export const Feed = memo(
               realtimeItems.map((item) => {
                 if (isTweet(item)) {
                   return <TweetFeedItem {...item} key={item.id} />;
-                }
-                if (isToot(item)) {
+                } else if   (isToot(item)) {
                   return <TootFeedItem {...item} key={item.id} />;
                 }
                 return (

diff --git a/src/utils/fetching/toots.ts b/src/utils/fetching/toots.ts
@@ -3,7 +3,7 @@ import { type SupabaseClient } from '@supabase/supabase-js';
 
 import { type ApiParameters, apiParameters } from './apiParameters';
 
-interface TootFetchingOptions {
+interface TootsFetchingOptions {
   supabaseClient: SupabaseClient<Database>;
   params: Partial<Pick<ApiParameters, 'limit' | 'offset' | 'order'>>;
   likes: boolean;
@@ -12,7 +12,7 @@ export const getToots = async ({
   supabaseClient,
   params,
   likes,
-}: TootFetchingOptions) => {
+}: TootsFetchingOptions) => {
   const { limit, offset, order } = apiParameters(params);
 
   const supabaseResponse = await supabaseClient
@@ -28,3 +28,17 @@ export const getToots = async ({
 
   return supabaseResponse;
 };
+
+interface TootFetchingOptions {
+  supabaseClient: SupabaseClient<Database>;
+  id: string;
+}
+export const getToot = async ({ supabaseClient, id }: TootFetchingOptions) => {
+  const supabaseResponse = await supabaseClient
+    .from('toots')
+    .select('*')
+    .match({ id })
+    .single();
+
+  return supabaseResponse;
+};
diff --git a/src/utils/fetching/tweets.ts b/src/utils/fetching/tweets.ts
@@ -3,7 +3,7 @@ import { type SupabaseClient } from '@supabase/supabase-js';
 
 import { type ApiParameters, apiParameters } from './apiParameters';
 
-interface TweetFetchingOptions {
+interface TweetsFetchingOptions {
   supabaseClient: SupabaseClient<Database>;
   params: Partial<Pick<ApiParameters, 'limit' | 'offset' | 'order'>>;
   likes: boolean;
@@ -12,7 +12,7 @@ export const getTweets = async ({
   supabaseClient,
   params,
   likes,
-}: TweetFetchingOptions) => {
+}: TweetsFetchingOptions) => {
   const { limit, offset, order } = apiParameters(params);
 
   const supabaseResponse = await supabaseClient
@@ -28,3 +28,20 @@ export const getTweets = async ({
 
   return supabaseResponse;
 };
+
+interface TweetFetchingOptions {
+  supabaseClient: SupabaseClient<Database>;
+  id: string;
+}
+export const getTweet = async ({
+  supabaseClient,
+  id,
+}: TweetFetchingOptions) => {
+  const supabaseResponse = await supabaseClient
+    .from('tweets')
+    .select('*')
+    .match({ id })
+    .single();
+
+  return supabaseResponse;
+};