simplify SSR fetches, optimize popular page, improve search filters

components/CheckBox.tsx

@@ -1,15 +1,17 @@
+import { type ComponentType } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import tw from '~/util/tailwind';
 
-import { Check } from './Icons';
+import { Check, type IconProps } from './Icons';
 
 type Props = {
   style?: StyleProp<ViewStyle>;
   value?: boolean;
+  Icon?: ComponentType<IconProps>;
 };
 
-export default function CheckBox({ style, value }: Props) {
+export default function CheckBox({ style, value, Icon = Check }: Props) {
   return (
     <View
       style={[
@@ -20,7 +22,7 @@ export default function CheckBox({ style, value }: Props) {
         { transition: 'border-color .33s, background-color .33s' },
         style,
       ]}>
-      {value ? <Check width={14} height={10} style={tw`text-white dark:text-black`} /> : null}
+      {value ? <Icon width={14} height={10} style={tw`text-white dark:text-black`} /> : null}
     </View>
   );
 }

components/Explore/ExploreSection.tsx

@@ -6,6 +6,8 @@ import { A, H3, P } from '~/common/styleguide';
 import { type IconProps } from '~/components/Icons';
 import LoadingContent from '~/components/Library/LoadingContent';
 import { type LibraryType, type Query } from '~/types';
+import { POPULAR_QUERY_BASE } from '~/util/Constants';
+import { TimeRange } from '~/util/datetime';
 import tw from '~/util/tailwind';
 import urlWithQuery from '~/util/urlWithQuery';
 
@@ -16,27 +18,12 @@ const LibraryWithLoading = dynamic(() => import('~/components/Library'), {
 type Props = {
   data: LibraryType[];
   title: string;
-  filter: (library: LibraryType) => boolean;
   icon?: FunctionComponent<IconProps>;
-  count?: number;
   queryParams?: Query;
 };
 
-const UPDATED_IN = 1000 * 60 * 60 * 24 * 90; // 90 days
-const DEFAULT_PARAMS: Query = {
-  wasRecentlyUpdated: 'true',
-  isMaintained: 'true',
-  order: 'popularity',
-};
-
-export default function ExploreSection({
-  data,
-  title,
-  filter,
-  icon,
-  count = 4,
-  queryParams = { [title.toLowerCase()]: true },
-}: Props) {
+const UPDATED_IN = 1000 * TimeRange.MONTH * 3;
+export default function ExploreSection({ data, title, icon, queryParams }: Props) {
   const hashLink = title.replace(/\s/g, '').toLowerCase();
 
   return (
@@ -51,12 +38,16 @@ export default function ExploreSection({
           {title}
         </A>
       </H3>
-      <View style={tw`flex-1 flex-row flex-wrap pt-3`}>
-        {renderLibs(data.filter(filter), count)}
-      </View>
+      <View style={tw`flex-1 flex-row flex-wrap pt-3`}>{renderLibs(data)}</View>
       <P style={tw`px-6 pb-6 pt-2 text-sm font-light text-secondary`}>
         Want to see more? Check out other{' '}
-        <A href={urlWithQuery('/packages', { ...queryParams, ...DEFAULT_PARAMS })} target="_self">
+        <A
+          href={urlWithQuery('/packages', {
+            [title.toLowerCase()]: true,
+            ...queryParams,
+            ...POPULAR_QUERY_BASE,
+          })}
+          target="_self">
           {title} libraries
         </A>{' '}
         in the directory!
@@ -65,11 +56,10 @@ export default function ExploreSection({
   );
 }
 
-function renderLibs(list: LibraryType[], count = 4) {
+function renderLibs(list: LibraryType[]) {
   const now = Date.now();
   return list
     .filter(({ github }) => now - new Date(github.stats.updatedAt).getTime() < UPDATED_IN)
-    .splice(0, count)
     .map((item: LibraryType, index: number) => (
       <LibraryWithLoading
         key={`explore-item-${index}-${item.github.name}`}

components/Filters/ToggleLink.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 
 import { P } from '~/common/styleguide';
 import CheckBox from '~/components/CheckBox';
+import { XIcon } from '~/components/Icons';
 import { type FilterParamsType, type Query } from '~/types';
 import tw from '~/util/tailwind';
 import urlWithQuery from '~/util/urlWithQuery';
@@ -12,11 +13,13 @@ type Props = {
   query: Query;
   filterParam: FilterParamsType;
   basePath?: string;
+  allowFalse?: boolean;
 };
 
-export function ToggleLink({ query, filterParam, basePath = '/packages' }: Props) {
+export function ToggleLink({ query, filterParam, basePath = '/packages', allowFalse }: Props) {
   const [isHovered, setHovered] = useState<boolean>(false);
   const isSelected = !!query[filterParam.param];
+  const isFalsy = allowFalse && query[filterParam.param] === 'false';
 
   return (
     <Link
@@ -30,7 +33,15 @@ export function ToggleLink({ query, filterParam, basePath = '/packages' }: Props
         style={tw`cursor-pointer flex-row items-center`}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}>
-        <CheckBox value={isSelected} style={isHovered && tw`border-primary-dark`} />
+        <CheckBox
+          value={isSelected}
+          style={[
+            isFalsy && tw`border-error bg-error`,
+            isHovered && tw`border-primary-dark`,
+            isHovered && isFalsy && tw`border-error`,
+          ]}
+          Icon={isFalsy ? XIcon : undefined}
+        />
         <P style={[tw`text-sm font-light leading-[18px]`, isHovered && tw`text-hover`]}>
           {filterParam.title}
         </P>

components/Filters/index.tsx

@@ -37,6 +37,7 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
               query={pageQuery}
               filterParam={platform}
               basePath={basePath}
+              allowFalse
             />
           ))}
         </FiltersSection>
@@ -79,6 +80,7 @@ export function Filters({ query, style, basePath = '/packages' }: FiltersProps)
               query={pageQuery}
               filterParam={compatibility}
               basePath={basePath}
+              allowFalse
             />
           ))}
         </FiltersSection>

components/Pagination.tsx

@@ -14,14 +14,15 @@ type Props = {
   query: Query;
   total?: number | null;
   style?: ViewStyle;
+  noTags?: boolean;
   basePath?: string;
 };
 
 type ArrowButtonProps = {
   disabled?: boolean;
 };
 
-export default function Pagination({ query, total, style, basePath = '/packages' }: Props) {
+export default function Pagination({ query, total, style, noTags, basePath = '/packages' }: Props) {
   const currentOffset = query.offset ? Number.parseInt(query.offset, 10) : 0;
   const currentPage = Math.floor(currentOffset / NUM_PER_PAGE) + 1;
 
@@ -37,7 +38,16 @@ export default function Pagination({ query, total, style, basePath = '/packages'
 
   return (
     <View style={tw`flex-row justify-between`}>
-      {query.owner ? <SearchTag title="Owner" value={query.owner} /> : <View />}
+      {!noTags ? (
+        <View>
+          {query.owner && <SearchTag title="Owner" value={query.owner} />}
+          {query.minPopularity && (
+            <SearchTag title="Minimal popularity" value={query.minPopularity} />
+          )}
+        </View>
+      ) : (
+        <View />
+      )}
       <View style={[tw`flex-row items-center justify-end`, style]}>
         {backDisabled ? (
           <BackArrow disabled />

components/SearchTag.tsx

@@ -14,7 +14,7 @@ type Props = {
 export default function SearchTag({ title, value }: Props) {
   return (
     <View
-      style={tw`flex-row items-center rounded border border-default bg-palette-gray1 pr-1.5 text-[12px] no-underline dark:bg-dark`}>
+      style={tw`h-full flex-row items-center rounded border border-default bg-palette-gray1 pr-1.5 text-[12px] no-underline dark:bg-dark`}>
       <View
         style={tw`h-full select-none justify-center border-r border-default bg-palette-gray2 pl-2.5 pr-2 text-secondary dark:bg-powder`}>
         <span>{title}</span>

pages/404.tsx

@@ -1,8 +1,8 @@
-import * as Sentry from '@sentry/react';
+import { captureMessage } from '@sentry/react';
 
 import ErrorScene from '~/scenes/ErrorScene';
 
 export default function NotFound() {
-  Sentry.captureMessage('404');
+  captureMessage('404');
   return <ErrorScene statusCode={404} />;
 }

pages/index.tsx

@@ -3,8 +3,7 @@ import { type NextPageContext } from 'next';
 
 import HomeScene from '~/scenes/HomeScene';
 import { type HomePageProps } from '~/types/pages';
-import { NEXT_1H_CACHE_HEADER } from '~/util/Constants';
-import getApiUrl from '~/util/getApiUrl';
+import { ssrFetch } from '~/util/SSRFetch';
 import urlWithQuery from '~/util/urlWithQuery';
 
 function Index(props: HomePageProps) {
@@ -22,44 +21,39 @@ Index.getInitialProps = async (ctx: NextPageContext) => {
     return;
   }
 
-  const mostDownloadedResponse = await fetch(
-    getApiUrl(
-      urlWithQuery('/libraries', {
-        order: 'downloads',
-        limit: LIMIT.toString(),
-        isMaintained: 'true',
-        hasNativeCode: 'true',
-      }),
-      ctx
-    ),
-    NEXT_1H_CACHE_HEADER
+  const mostDownloadedResponse = await ssrFetch(
+    '/libraries',
+    {
+      order: 'downloads',
+      limit: LIMIT.toString(),
+      isMaintained: 'true',
+      hasNativeCode: 'true',
+    },
+    ctx
   );
-  const recentlyAddedResponse = await fetch(
-    getApiUrl(urlWithQuery('/libraries', { order: 'added', limit: LIMIT.toString() }), ctx),
-    NEXT_1H_CACHE_HEADER
+  const recentlyAddedResponse = await ssrFetch(
+    '/libraries',
+    { order: 'added', limit: LIMIT.toString() },
+    ctx
   );
-  const recentlyUpdatedResponse = await fetch(
-    getApiUrl(urlWithQuery('/libraries', { order: 'updated', limit: LIMIT.toString() }), ctx),
-    NEXT_1H_CACHE_HEADER
+  const recentlyUpdatedResponse = await ssrFetch(
+    '/libraries',
+    { order: 'updated', limit: LIMIT.toString() },
+    ctx
   );
-  const popularResponse = await fetch(
-    getApiUrl(
-      urlWithQuery('/libraries', {
-        order: 'popularity',
-        limit: LIMIT.toString(),
-        isMaintained: 'true',
-        isPopular: 'true',
-        wasRecentlyUpdated: 'true',
-      }),
-      ctx
-    ),
-    NEXT_1H_CACHE_HEADER
+  const popularResponse = await ssrFetch(
+    '/libraries',
+    {
+      order: 'popularity',
+      limit: LIMIT.toString(),
+      isMaintained: 'true',
+      isPopular: 'true',
+      wasRecentlyUpdated: 'true',
+    },
+    ctx
   );
 
-  const statisticResponse = await fetch(
-    getApiUrl(urlWithQuery('/libraries/statistic'), ctx),
-    NEXT_1H_CACHE_HEADER
-  );
+  const statisticResponse = await ssrFetch('/libraries/statistic', {}, ctx);
 
   return {
     mostDownloaded: await mostDownloadedResponse.json(),

pages/package/[name]/[scopedName]/index.tsx

@@ -3,11 +3,10 @@ import { type NextPageContext } from 'next';
 import ErrorScene from '~/scenes/ErrorScene';
 import PackageOverviewScene from '~/scenes/PackageOverviewScene';
 import { type PackageOverviewPageProps } from '~/types/pages';
-import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
-import getApiUrl from '~/util/getApiUrl';
+import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER } from '~/util/Constants';
 import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
 import { parseQueryParams } from '~/util/parseQueryParams';
-import urlWithQuery from '~/util/urlWithQuery';
+import { ssrFetch } from '~/util/SSRFetch';
 
 export default function ScopedOverviewPage({
   apiData,
@@ -34,24 +33,19 @@ export async function getServerSideProps(ctx: NextPageContext) {
 
   try {
     const [apiResponse, npmResponse] = await Promise.all([
-      fetch(
-        getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
-        NEXT_1H_CACHE_HEADER
-      ),
+      ssrFetch(`/libraries`, { search: packageName }, ctx),
       fetch(`https://registry.npmjs.org/${packageName}/latest`, NEXT_10M_CACHE_HEADER),
     ]);
 
     if (apiResponse.status !== 200 || (npmResponse.status !== 200 && npmResponse.status !== 404)) {
       return getPackagePageErrorProps(packageName, apiResponse.status, npmResponse.status);
     }
 
-    const [apiData, registryData] = await Promise.all([apiResponse.json(), npmResponse.json()]);
-
     return {
       props: {
         packageName,
-        apiData,
-        registryData,
+        apiData: await apiResponse.json(),
+        registryData: await npmResponse.json(),
       },
     };
   } catch {

pages/package/[name]/[scopedName]/score.tsx

@@ -3,11 +3,10 @@ import { type NextPageContext } from 'next';
 import ErrorScene from '~/scenes/ErrorScene';
 import PackageScoreScene from '~/scenes/PackageScoreScene';
 import { type PackageScorePageProps } from '~/types/pages';
-import { EMPTY_PACKAGE_DATA, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
-import getApiUrl from '~/util/getApiUrl';
+import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
 import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
 import { parseQueryParams } from '~/util/parseQueryParams';
-import urlWithQuery from '~/util/urlWithQuery';
+import { ssrFetch } from '~/util/SSRFetch';
 
 export default function ScorePage({ apiData, packageName, errorMessage }: PackageScorePageProps) {
   if (!packageName || !apiData) {
@@ -26,21 +25,16 @@ export async function getServerSideProps(ctx: NextPageContext) {
   }
 
   try {
-    const apiResponse = await fetch(
-      getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
-      NEXT_1H_CACHE_HEADER
-    );
+    const apiResponse = await ssrFetch(`/libraries`, { search: packageName }, ctx);
 
     if (apiResponse.status !== 200) {
       return getPackagePageErrorProps(packageName, apiResponse.status);
     }
 
-    const apiData = await apiResponse.json();
-
     return {
       props: {
         packageName,
-        apiData,
+        apiData: await apiResponse.json(),
       },
     };
   } catch {