component reorganization

components/notes/HitCounter.tsx

@@ -0,0 +1,30 @@
+import useSWR from "swr";
+import Loading from "../loading/Loading";
+import { fetcher } from "../../lib/fetcher";
+
+const HitCounter = ({ slug }) => {
+  // start fetching repos from API immediately
+  const { data, error } = useSWR(`/api/hits/?slug=${encodeURIComponent(slug)}`, fetcher, {
+    // avoid double (or more) counting views
+    revalidateOnFocus: false,
+  });
+
+  // show spinning loading indicator if data isn't fetched yet
+  if (!data) {
+    return <Loading boxes={3} width={20} />;
+  }
+
+  // fail secretly
+  if (error) {
+    return;
+  }
+
+  // we have data!
+  return (
+    <span title={`${data.hits.toLocaleString("en-US")} ${data.hits === 1 ? "view" : "views"}`}>
+      {data.hits.toLocaleString("en-US")}
+    </span>
+  );
+};
+
+export default HitCounter;

components/notes/Meta.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { format } from "date-fns";
-import Hits from "../hits/Hits";
+import HitCounter from "./HitCounter";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
 import * as config from "../../lib/config";
 import type { NoteMetaType } from "../../types";
@@ -20,6 +20,7 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           </Link>
         </span>
       </div>
+
       {tags.length > 0 && (
         <div className={styles.tags}>
           <span>
@@ -32,6 +33,7 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           ))}
         </div>
       )}
+
       <div>
         <span>
           <EditIcon className={`icon ${styles.icon}`} />
@@ -47,11 +49,12 @@ const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
           </a>
         </span>
       </div>
+
       <div>
         <span>
           <ViewsIcon className={`icon ${styles.icon}`} />
         </span>
-        <Hits slug={`notes/${slug}`} />
+        <HitCounter slug={`notes/${slug}`} />
       </div>
     </div>