Update Docker builds

components/blog/queries/articles.ts

@@ -1,4 +1,4 @@
-import { type QueryClient, useQuery } from 'react-query';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
 import { type APIResponseType, type Article } from 'utils/types';
 import { APIPaths, getApiURL } from 'utils/urls';
 
@@ -17,10 +17,10 @@ export const ARTICLES_PREFETCH_KEY = 'articles';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchArticles(queryClient: QueryClient) {
-    return await queryClient.prefetchQuery(
-        ARTICLES_PREFETCH_KEY,
-        fetchArticles,
-    );
+    return await queryClient.prefetchQuery({
+        queryKey: [ARTICLES_PREFETCH_KEY],
+        queryFn: fetchArticles,
+    });
 }
 
 /**
@@ -29,7 +29,10 @@ export async function prefetchArticles(queryClient: QueryClient) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useArticlesQuery() {
-    return useQuery(ARTICLES_PREFETCH_KEY, fetchArticles);
+    return useQuery({
+        queryKey: [ARTICLES_PREFETCH_KEY],
+        queryFn: fetchArticles,
+    });
 }
 
 /**
@@ -38,7 +41,9 @@ export function useArticlesQuery() {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useArticleQueryCount() {
-    return useQuery(ARTICLES_PREFETCH_KEY, fetchArticles, {
+    return useQuery({
+        queryKey: [ARTICLES_PREFETCH_KEY],
+        queryFn: fetchArticles,
         select: ({ data }) => data.length,
     });
 }

components/homepage/queries/mostViewed.ts

@@ -1,4 +1,4 @@
-import { QueryClient, useQuery } from 'react-query';
+import { QueryClient, useQuery } from '@tanstack/react-query';
 import { APIPaths, getApiURL } from 'utils/urls';
 import { type Tool } from '@components/tools';
 import { type APIResponseType } from 'utils/types';
@@ -18,10 +18,10 @@ export const MOST_VIEWED_PREFETCH_KEY = 'mostViewed';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchMostViewed(queryClient: QueryClient) {
-    return await queryClient.prefetchQuery(
-        MOST_VIEWED_PREFETCH_KEY,
-        fetchMostViewed,
-    );
+    return await queryClient.prefetchQuery({
+        queryKey: [MOST_VIEWED_PREFETCH_KEY],
+        queryFn: fetchMostViewed,
+    });
 }
 
 /**
@@ -30,7 +30,10 @@ export async function prefetchMostViewed(queryClient: QueryClient) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useMostViewedQuery() {
-    return useQuery(MOST_VIEWED_PREFETCH_KEY, fetchMostViewed);
+    return useQuery({
+        queryKey: [MOST_VIEWED_PREFETCH_KEY],
+        queryFn: fetchMostViewed,
+    });
 }
 
 /**
@@ -39,7 +42,9 @@ export function useMostViewedQuery() {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useMostViewedQueryCount() {
-    return useQuery(MOST_VIEWED_PREFETCH_KEY, fetchMostViewed, {
+    return useQuery({
+        queryKey: [MOST_VIEWED_PREFETCH_KEY],
+        queryFn: fetchMostViewed,
         select: ({ data }) => data.length,
     });
 }

components/homepage/queries/popularLanguages.ts

@@ -1,4 +1,4 @@
-import { type QueryClient, useQuery } from 'react-query';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
 import { APIPaths, getApiURL } from 'utils/urls';
 import { type ToolsByLanguage } from '@components/tools';
 import { type APIResponseType } from 'utils/types';
@@ -18,10 +18,10 @@ export const POPULAR_LANGUAGES_PREFETCH_KEY = 'popularLanguages';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchPopularLanguages(queryClient: QueryClient) {
-    return await queryClient.prefetchQuery(
-        POPULAR_LANGUAGES_PREFETCH_KEY,
-        fetchPopularLanguages,
-    );
+    return await queryClient.prefetchQuery({
+        queryKey: [POPULAR_LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchPopularLanguages,
+    });
 }
 
 /**
@@ -30,7 +30,10 @@ export async function prefetchPopularLanguages(queryClient: QueryClient) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function usePopularLanguagesQuery() {
-    return useQuery(POPULAR_LANGUAGES_PREFETCH_KEY, fetchPopularLanguages);
+    return useQuery({
+        queryKey: [POPULAR_LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchPopularLanguages,
+    });
 }
 
 /**
@@ -39,7 +42,9 @@ export function usePopularLanguagesQuery() {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function usePopularLanguagesQueryCount() {
-    return useQuery(POPULAR_LANGUAGES_PREFETCH_KEY, fetchPopularLanguages, {
+    return useQuery({
+        queryKey: [POPULAR_LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchPopularLanguages,
         select: ({ data }) => Object.keys(data).length,
     });
 }

components/tools/listPage/ListPageComponent/ListPageComponent.tsx

@@ -9,7 +9,7 @@ import { MobileFilters, Tool, ToolCard, ToolsSidebar } from '@components/tools';
 import { useSearchState } from 'context/SearchProvider';
 import { useRouterPush } from 'hooks';
 import { FC, useCallback, useEffect, useRef } from 'react';
-import { useInfiniteQuery } from 'react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { objectToQueryString } from 'utils/query';
 import { type ArticlePreview } from 'utils/types';
 import { FilterOption } from '../ToolsSidebar/FilterCard/FilterCard';
@@ -55,6 +55,7 @@ const ListComponent: FC<ListComponentProps> = ({
     } = useInfiniteQuery({
         queryKey: ['paginated-tools'],
         queryFn: fetchTools,
+        initialPageParam: 0,
         getNextPageParam: (lastPage) => lastPage.nextCursor,
     });
 

components/tools/listPage/MobileFilters/MobileFilter/MobileFilter.tsx

@@ -1,18 +1,24 @@
 import { FC } from 'react';
 import styles from './MobileFilter.module.css';
-import 'react-select-search/style.css';
-import SelectSearch, {
-    SelectedOptionValue,
-    SelectSearchOption,
-} from 'react-select-search';
+import Select, { MultiValue } from 'react-select';
 import { Button, PanelHeader } from '@components/elements';
 import classNames from 'classnames';
 import { SearchState, SearchFilter } from 'context/SearchProvider';
 
+interface Option {
+    value: string;
+    label: string;
+}
+
+interface InputOption {
+    value: string;
+    name: string;
+}
+
 export interface MobileFilterProps {
     id: string;
     label: string;
-    options: SelectSearchOption[];
+    options: InputOption[];
     placeholder: string;
     state: SearchState;
     setState: (state: SearchState) => void;
@@ -28,9 +34,13 @@ const MobileFilter: FC<MobileFilterProps> = ({
     setState,
     topList,
 }) => {
-    const onChange = (value: SelectedOptionValue | SelectedOptionValue[]) => {
-        const newValue = Array.isArray(value) ? value : [value];
-        setState({ ...state, [id as SearchFilter]: newValue });
+    const selectOptions: Option[] = options.map((opt) => ({
+        value: opt.value,
+        label: opt.name,
+    }));
+    const onChange = (selectedOptions: MultiValue<Option>) => {
+        const values = selectedOptions.map((option) => option.value);
+        setState({ ...state, [id as SearchFilter]: values });
     };
 
     const clear = () => {
@@ -47,13 +57,43 @@ const MobileFilter: FC<MobileFilterProps> = ({
                     Clear
                 </Button>
             </PanelHeader>
-            <SelectSearch
-                options={options}
-                value={state[id as SearchFilter] || ''}
-                id={id}
-                search={true}
+            <Select
+                options={selectOptions}
+                value={selectOptions.filter((option) =>
+                    (state[id as SearchFilter] || []).includes(option.value),
+                )}
+                isMulti
+                isSearchable
                 onChange={onChange}
                 placeholder={placeholder}
+                styles={{
+                    control: (base) => ({
+                        ...base,
+                        backgroundColor: '#0a1a29',
+                        borderColor: '#486a8b',
+                        color: '#ffffff',
+                        fontSize: '16px',
+                    }),
+                    menu: (base) => ({
+                        ...base,
+                        backgroundColor: '#0a1a29',
+                    }),
+                    option: (base, state) => ({
+                        ...base,
+                        backgroundColor: state.isFocused
+                            ? '#486a8b'
+                            : '#0a1a29',
+                        color: '#ffffff',
+                    }),
+                    multiValue: (base) => ({
+                        ...base,
+                        backgroundColor: '#486a8b',
+                    }),
+                    multiValueLabel: (base) => ({
+                        ...base,
+                        color: '#ffffff',
+                    }),
+                }}
             />
         </div>
     );

components/tools/listPage/MobileFilters/MobileFilters.tsx

@@ -2,7 +2,6 @@ import { FC, useState } from 'react';
 import classNames from 'classnames';
 import { Button, PanelHeader } from '@components/elements';
 import styles from './MobileFilters.module.css';
-import 'react-select-search/style.css';
 import { useLanguagesQuery } from '@components/tools/queries';
 import { useSearchState } from 'context/SearchProvider';
 import MobileFilter from './MobileFilter/MobileFilter';

components/tools/queries/languages.ts

@@ -1,4 +1,4 @@
-import { type QueryClient, useQuery } from 'react-query';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
 import { type APIResponseType, type ApiTag } from 'utils/types';
 import { APIPaths, getApiURL } from 'utils/urls';
 
@@ -17,10 +17,10 @@ export const LANGUAGES_PREFETCH_KEY = 'languages';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchLanguages(queryClient: QueryClient) {
-    return await queryClient.prefetchQuery(
-        LANGUAGES_PREFETCH_KEY,
-        fetchLanguages,
-    );
+    return await queryClient.prefetchQuery({
+        queryKey: [LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchLanguages,
+    });
 }
 
 /**
@@ -29,7 +29,10 @@ export async function prefetchLanguages(queryClient: QueryClient) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useLanguagesQuery() {
-    return useQuery(LANGUAGES_PREFETCH_KEY, fetchLanguages);
+    return useQuery({
+        queryKey: [LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchLanguages,
+    });
 }
 
 /**
@@ -38,7 +41,9 @@ export function useLanguagesQuery() {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useLanguageQueryCount() {
-    return useQuery(LANGUAGES_PREFETCH_KEY, fetchLanguages, {
+    return useQuery({
+        queryKey: [LANGUAGES_PREFETCH_KEY],
+        queryFn: fetchLanguages,
         select: ({ data }) => data.length,
     });
 }

components/tools/queries/others.ts

@@ -1,4 +1,4 @@
-import { type QueryClient, useQuery } from 'react-query';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
 import { type APIResponseType, type ApiTag } from 'utils/types';
 import { APIPaths, getApiURL } from 'utils/urls';
 
@@ -17,7 +17,10 @@ export const OTHERS_PREFETCH_KEY = 'others';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchOthers(queryClient: QueryClient) {
-    return await queryClient.prefetchQuery(OTHERS_PREFETCH_KEY, fetchOthers);
+    return await queryClient.prefetchQuery({
+        queryKey: [OTHERS_PREFETCH_KEY],
+        queryFn: fetchOthers,
+    });
 }
 
 /**
@@ -26,7 +29,10 @@ export async function prefetchOthers(queryClient: QueryClient) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useOthersQuery() {
-    return useQuery(OTHERS_PREFETCH_KEY, fetchOthers);
+    return useQuery({
+        queryKey: [OTHERS_PREFETCH_KEY],
+        queryFn: fetchOthers,
+    });
 }
 
 /**
@@ -35,7 +41,9 @@ export function useOthersQuery() {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useOtherQueryCount() {
-    return useQuery(OTHERS_PREFETCH_KEY, fetchOthers, {
+    return useQuery({
+        queryKey: [OTHERS_PREFETCH_KEY],
+        queryFn: fetchOthers,
         select: ({ data }) => data.length,
     });
 }

components/tools/queries/tool.ts

@@ -1,4 +1,4 @@
-import { QueryClient, useQuery } from 'react-query';
+import { QueryClient, useQuery } from '@tanstack/react-query';
 import { APIPaths, getApiURL } from 'utils/urls';
 import { Tool } from '../types';
 import { type APIResponseType } from 'utils/types';
@@ -12,9 +12,10 @@ import { type APIResponseType } from 'utils/types';
  * @see https://react-query.tanstack.com/guides/prefetching#_top
  */
 export async function prefetchTool(queryClient: QueryClient, slug: string) {
-    return await queryClient.prefetchQuery(`tool-${slug}`, () =>
-        fetchToolData(slug),
-    );
+    return await queryClient.prefetchQuery({
+        queryKey: [`tool-${slug}`],
+        queryFn: () => fetchToolData(slug),
+    });
 }
 
 /**
@@ -23,7 +24,10 @@ export async function prefetchTool(queryClient: QueryClient, slug: string) {
  * @see https://react-query.tanstack.com/guides/queries
  */
 export function useToolQuery(slug: string) {
-    return useQuery(`tool-${slug}`, () => fetchToolData(slug));
+    return useQuery({
+        queryKey: [`tool-${slug}`],
+        queryFn: () => fetchToolData(slug),
+    });
 }
 
 /**