Merge pull request #16 from khaykingleb/refactoring

Refactoring

Author: khaykingleb

app/components/organisms/Carousel.tsx

@@ -15,7 +15,7 @@ export const Carousel = ({ items }: { items: CarouselItem[] }) => {
         <div className="carousel carousel-vertical h-full w-full">
           {items.map((item, index) => (
             <Link
-              to={`/notion/${item.notionPageId}`}
+              to={`/blog/${item.notionPageId}`}
               id={`item${index}`}
               key={item.id}
               className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"

app/routes/notion.$pageid.tsx app/routes/blog.$pageid.tsx

@@ -1,7 +1,7 @@
 import { defer, LoaderFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { Await, useLoaderData } from "@remix-run/react";
 import { NotionAPI } from "notion-client";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import React, { lazy, Suspense } from "react";
 import { ClientOnly } from "remix-utils/client-only";
 import {
   CodeBlock,
@@ -54,40 +54,33 @@ const Collection = lazy(() =>
   })),
 );
 
-function NotionPage({ recordMap }: { recordMap: ExtendedRecordMap }) {
-  const [isMounted, setIsMounted] = useState(false);
-
-  // Prevent hydration errors
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-  if (!isMounted) {
-    return null;
-  }
-
-  return (
-    <NotionRenderer
-      recordMap={recordMap}
-      fullPage={true}
-      darkMode={false}
-      disableHeader={true}
-      components={{
-        Pdf,
-        Collection,
-        Equation: (props: React.ComponentProps<typeof Equation>) => (
-          <ClientOnly fallback={<div>Loading equation...</div>}>
-            {() => <Equation {...props} />}
-          </ClientOnly>
-        ),
-        Code: (props: React.ComponentProps<typeof Code>) => (
-          <ClientOnly fallback={<div>Loading code...</div>}>
-            {() => <Code {...props} />}
-          </ClientOnly>
-        ),
-      }}
-    />
-  );
-}
+const NotionPage = React.memo(
+  ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
+    return (
+      <NotionRenderer
+        recordMap={recordMap}
+        fullPage={true}
+        darkMode={false}
+        disableHeader={true}
+        components={{
+          Pdf,
+          Collection,
+          Equation: (props: React.ComponentProps<typeof Equation>) => (
+            <ClientOnly fallback={<div>Loading equation...</div>}>
+              {() => <Equation {...props} />}
+            </ClientOnly>
+          ),
+          Code: (props: React.ComponentProps<typeof Code>) => (
+            <ClientOnly fallback={<div>Loading code...</div>}>
+              {() => <Code {...props} />}
+            </ClientOnly>
+          ),
+        }}
+      />
+    );
+  },
+);
+NotionPage.displayName = "NotionPage";
 
 export const loader: LoaderFunction = async ({
   params,