perf: only send necessary data to client (#85)

* fix(components/tweet): remove `setActiveTweet` prop

* wip: only send necessary data to client

* fix: use native `bigint` on server

* fix: address typescript build errors

* deps: replace `json-bigint` with `json-bigint-patch`

Temporary fix until sidorares/json-bigint#77 is merged.

* refactor(app/json): remove unused remix wrappers

* fix(types): make `liked` and `retweeted` booleans

* wip(utils.server): use `json-bigint-patch` for now

Replace `json-bigint` until sidorares/json-bigint#77 is merged.

* wip(sync/$tweet): invalidate cached user res

Author: nicholaschiang

.yarn/cache/@types-json-bigint-npm-1.0.1-1fbfe75fdf-b39e55a811.zip

@@ -3,8 +3,8 @@ import { resolve } from 'path';
 
 import type { LoaderFunction } from 'remix';
 import { bundleMDX } from 'mdx-bundler';
+import { json } from 'remix';
 
-import { json } from '~/json';
 import { log } from '~/utils.server';
 
 type Meta = { date: string; author: string };

.yarn/cache/bignumber.js-npm-9.0.2-583f690302-8637b71d0a.zip

@@ -4,11 +4,11 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'remix';
 import { dequal } from 'dequal/lite';
 
-import type { Article } from '~/types';
+import type { ArticleJS } from '~/types';
 import { TimeAgo } from '~/components/timeago';
 import { substr } from '~/utils';
 
-export function ArticleContent({ article }: { article: Article }) {
+export function ArticleContent({ article }: { article: ArticleJS }) {
   const earliestTweet = useMemo(
     () =>
       Array.from(article.tweets).sort(
@@ -61,9 +61,8 @@ export function ArticleContent({ article }: { article: Article }) {
         <span className='flex flex-row-reverse justify-end -ml-[2px] mr-0.5'>
           {Array.from(article.tweets)
             .sort((a, b) =>
-              b.score && a.score
-                ? Number(b.score.attention_score) -
-                  Number(a.score.attention_score)
+              b.attention_score && a.attention_score
+                ? b.attention_score - a.attention_score
                 : 0
             )
             .slice(0, 10)
@@ -103,7 +102,7 @@ export function ArticleContent({ article }: { article: Article }) {
 }
 
 export type ArticleItemProps = {
-  article: Article;
+  article: ArticleJS;
   setHover: Dispatch<SetStateAction<{ y: number; height: number } | undefined>>;
 };
 function ArticleItem({ article, setHover }: ArticleItemProps) {

.yarn/cache/json-bigint-npm-1.0.0-8e35bcb143-c67bb93ccb.zip

@@ -4,6 +4,7 @@ import {
   NavLink,
   useFetcher,
   useLocation,
+  useMatches,
   useResolvedPath,
   useTransition,
 } from 'remix';
@@ -19,7 +20,6 @@ import OpenInNewIcon from '~/icons/open-in-new';
 import Switcher from '~/components/switcher';
 import Sync from '~/components/sync';
 import ThemeSwitcher from '~/components/theme-switcher';
-import { useMatches } from '~/json';
 
 function PageSwitcher() {
   const { pathname } = useLocation();

.yarn/cache/json-bigint-patch-npm-0.0.8-78e4d493a8-593de25b2b.zip

@@ -1,18 +1,17 @@
 import OpenInNewIcon from '~/icons/open-in-new';
+import type { UserJS } from '~/types';
 import VerifiedIcon from '~/icons/verified';
-import type { UserFull } from '~/types';
 import { num } from '~/utils';
 
 export default function Profile({
   name,
   username,
   verified,
-  description,
   html,
   following_count,
   followers_count,
   profile_image_url,
-}: UserFull) {
+}: UserJS) {
   return (
     <article className='peer-hover:opacity-100 peer-hover:visible hover:opacity-100 hover:visible peer-active:opacity-100 peer-active:visible active:opacity-100 active:visible shadow-xl invisible opacity-0 transition-[opacity,visibility] absolute top-7 left-2 z-10 hover:delay-500 peer-hover:delay-500 active:delay-500 peer-active:delay-500 duration-300 ease-in-out w-72 p-3 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 rounded-lg'>
       <div className='absolute -top-2.5 left-0 right-0 h-2.5 transparent' />
@@ -83,12 +82,7 @@ export default function Profile({
           </a>
         </div>
       </header>
-      <p
-        className='my-3'
-        dangerouslySetInnerHTML={{
-          __html: html ?? description ?? '',
-        }}
-      />
+      <p className='my-3' dangerouslySetInnerHTML={{ __html: html ?? '' }} />
       <p>
         <a
           className='hover:underline mr-3'

.yarn/install-state.gz

@@ -1,13 +1,12 @@
 import { useContext, useEffect, useState } from 'react';
-import { useFetcher, useLocation } from 'remix';
+import { useFetcher, useLocation, useMatches } from 'remix';
 
 import BoltIcon from '~/icons/bolt';
 import { ErrorContext } from '~/error';
 import ErrorIcon from '~/icons/error';
 import type { LoaderData } from '~/root';
 import SyncIcon from '~/icons/sync';
 import { TimeAgo } from '~/components/timeago';
-import { useMatches } from '~/json';
 
 export default function Sync() {
   const user = (useMatches()[0].data as LoaderData | undefined)?.user;