Merge pull request #142 from ecency/bugfix/140-bug-gif-pickersearch-i…

…n-editors-crashes

Fixed GIF picker

src/api/misc.ts

@@ -1,10 +1,6 @@
 import defaults from "@/defaults.json";
-import { InfiniteData, QueryKey, useInfiniteQuery } from "@tanstack/react-query";
-import { QueryIdentifiers } from "@/core/react-query";
 import { appAxios } from "@/api/axios";
 
-export const getEmojiData = () => fetch("/emoji.json").then((response) => response.json());
-
 export const uploadImage = async (
   file: File,
   token: string
@@ -47,25 +43,3 @@ export const getCurrencyRate = (cur: string): Promise<number> => {
     .then((r) => r.data)
     .then((r) => r.hive_dollar[cur]);
 };
-
-export const GIPHY_API_KEY = "DQ7mV4VsZ749GcCBZEunztICJ5nA4Vef";
-export const GIPHY_API = `https://api.giphy.com/v1/gifs/trending?api_key=${GIPHY_API_KEY}&limit=10&offset=0`;
-export const GIPHY_SEARCH_API = `https://api.giphy.com/v1/gifs/search?api_key=${GIPHY_API_KEY}&limit=40&offset=0&q=`;
-
-export function useFetchGifQuery(query: string, limit: number) {
-  return useInfiniteQuery<any[], Error, InfiniteData<any[]>, QueryKey, number>({
-    queryKey: [QueryIdentifiers.GIFS, query],
-    queryFn: ({ pageParam }) => {
-      const params = new URLSearchParams();
-      params.set("q", query);
-      params.set("api_key", GIPHY_API_KEY);
-      params.set("limit", limit.toString());
-      params.set("offset", pageParam.toString());
-
-      return appAxios(`https://api.giphy.com/v1/gifs/search?${params.toString()}`);
-    },
-    initialPageParam: 0,
-    initialData: { pages: [], pageParams: [] },
-    getNextPageParam: (_, __, lastPageParam) => (lastPageParam ?? 0) + 50
-  });
-}

src/api/queries/get-gifs-query.ts

@@ -0,0 +1,32 @@
+import { EcencyQueriesManager, QueryIdentifiers } from "@/core/react-query";
+import { appAxios } from "@/api/axios";
+import { GiphyResponse } from "@/entities";
+
+export const GIPHY_API_KEY = "DQ7mV4VsZ749GcCBZEunztICJ5nA4Vef";
+
+export const getGifsQuery = (query: string, limit = 20) =>
+  EcencyQueriesManager.generateClientServerInfiniteQuery({
+    queryKey: [QueryIdentifiers.GIFS, query],
+    queryFn: async ({ pageParam }) => {
+      const params = new URLSearchParams();
+      params.set("api_key", GIPHY_API_KEY);
+      params.set("limit", limit.toString());
+      params.set("offset", pageParam.toString());
+
+      if (query !== "") params.set("q", query);
+
+      const response = await appAxios<GiphyResponse>(
+        `https://api.giphy.com/v1/gifs/${query === "" ? "trending" : "search"}?${params.toString()}`
+      );
+      return response.data.data;
+    },
+    initialPageParam: 0,
+    initialData: { pages: [], pageParams: [] },
+    getNextPageParam: (lastPage, __, lastPageParam) => {
+      if (lastPage?.length === 0) {
+        return undefined;
+      }
+
+      return (lastPageParam ?? 0) + 50;
+    }
+  });

src/api/queries/index.ts

@@ -65,4 +65,5 @@ export * from "./get-search-by-username-query";
 export * from "./get-rc-operators-stats-query";
 export * from "./get-announcements-query";
 export * from "./get-chain-properties-query";
+export * from "./get-gifs-query";
 export * from "./spk";

src/app/client-providers.tsx

@@ -12,6 +12,7 @@ import { Announcements } from "@/features/announcement";
 import { EcencyConfigManager } from "@/config";
 import { PushNotificationsProvider } from "@/features/push-notifications";
 import { EcencyCenter } from "@/features/ecency-center";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export function ClientProviders(props: PropsWithChildren) {
   return (
@@ -36,7 +37,7 @@ export function ClientProviders(props: PropsWithChildren) {
         </PushNotificationsProvider>
         <Announcements />
       </UIManager>
-      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
 }

src/entities/giphy/index.ts

@@ -0,0 +1,300 @@
+export interface GiphyResponse {
+  data: GiphyItem[];
+  meta: Meta;
+  pagination: Pagination;
+}
+
+interface GiphyItem {
+  type: string;
+  id: string;
+  url: string;
+  slug: string;
+  bitly_gif_url: string;
+  bitly_url: string;
+  embed_url: string;
+  username: string;
+  source: string;
+  title: string;
+  rating: string;
+  content_url: string;
+  source_tld: string;
+  source_post_url: string;
+  is_sticker: number;
+  import_datetime: string;
+  trending_datetime: string;
+  images: Images;
+  user?: User;
+  analytics_response_payload: string;
+  analytics: Analytics;
+  alt_text: string;
+}
+
+interface Images {
+  original: Original;
+  downsized: Downsized;
+  downsized_large: DownsizedLarge;
+  downsized_medium: DownsizedMedium;
+  downsized_small: DownsizedSmall;
+  downsized_still: DownsizedStill;
+  fixed_height: FixedHeight;
+  fixed_height_downsampled: FixedHeightDownsampled;
+  fixed_height_small: FixedHeightSmall;
+  fixed_height_small_still: FixedHeightSmallStill;
+  fixed_height_still: FixedHeightStill;
+  fixed_width: FixedWidth;
+  fixed_width_downsampled: FixedWidthDownsampled;
+  fixed_width_small: FixedWidthSmall;
+  fixed_width_small_still: FixedWidthSmallStill;
+  fixed_width_still: FixedWidthStill;
+  looping: Looping;
+  original_still: OriginalStill;
+  original_mp4: OriginalMp4;
+  preview: Preview;
+  preview_gif: PreviewGif;
+  preview_webp: PreviewWebp;
+  hd?: Hd;
+  "480w_still": N480wStill;
+  "4k"?: N4k;
+}
+
+interface Original {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  mp4_size: string;
+  mp4: string;
+  webp_size: string;
+  webp: string;
+  frames: string;
+  hash: string;
+}
+
+interface Downsized {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface DownsizedLarge {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface DownsizedMedium {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface DownsizedSmall {
+  height: string;
+  width: string;
+  mp4_size: string;
+  mp4: string;
+}
+
+interface DownsizedStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface FixedHeight {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  mp4_size: string;
+  mp4: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedHeightDownsampled {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedHeightSmall {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  mp4_size: string;
+  mp4: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedHeightSmallStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface FixedHeightStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface FixedWidth {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  mp4_size: string;
+  mp4: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedWidthDownsampled {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedWidthSmall {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+  mp4_size: string;
+  mp4: string;
+  webp_size: string;
+  webp: string;
+}
+
+interface FixedWidthSmallStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface FixedWidthStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface Looping {
+  mp4_size: string;
+  mp4: string;
+}
+
+interface OriginalStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface OriginalMp4 {
+  height: string;
+  width: string;
+  mp4_size: string;
+  mp4: string;
+}
+
+interface Preview {
+  height: string;
+  width: string;
+  mp4_size: string;
+  mp4: string;
+}
+
+interface PreviewGif {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface PreviewWebp {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface Hd {
+  height: string;
+  width: string;
+  mp4_size: string;
+  mp4: string;
+}
+
+interface N480wStill {
+  height: string;
+  width: string;
+  size: string;
+  url: string;
+}
+
+interface N4k {
+  height: string;
+  width: string;
+  mp4_size: string;
+  mp4: string;
+}
+
+interface User {
+  avatar_url: string;
+  banner_image: string;
+  banner_url: string;
+  profile_url: string;
+  username: string;
+  display_name: string;
+  description: string;
+  instagram_url: string;
+  website_url: string;
+  is_verified: boolean;
+}
+
+interface Analytics {
+  onload: Onload;
+  onclick: Onclick;
+  onsent: Onsent;
+}
+
+interface Onload {
+  url: string;
+}
+
+interface Onclick {
+  url: string;
+}
+
+interface Onsent {
+  url: string;
+}
+
+interface Meta {
+  status: number;
+  msg: string;
+  response_id: string;
+}
+
+interface Pagination {
+  total_count: number;
+  count: number;
+  offset: number;
+}