feat/refactor: reddit embeds, use dynamic instead of conditional rend…

…er (#103)

* feat/refactor: reddit embeds, use dynamic instead of conditional render

* chore: format reddit jsx

components/Navbar.tsx

@@ -2,12 +2,14 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
 import Link from 'next/link';
+import dynamic from 'next/dynamic';
 import { Bars3Icon } from '@heroicons/react/24/solid';
-
-import ColorModeToggle from './ColorModeToggle';
-import ConditionallyRender from './ConditionallyRender';
 import NavLinks from './NavLinks';
 
+const ColorModeToggle = dynamic(() => import('./ColorModeToggle'), {
+  ssr: false,
+});
+
 export default function NavBar() {
   return (
     <div className="navbar mx-auto w-full max-w-[65ch] px-0 transition-colors dark:text-white sm:bg-transparent sm:dark:bg-transparent">
@@ -28,16 +30,12 @@ export default function NavBar() {
         <ul className="flex items-center space-x-4">
           <NavLinks />
           <li>
-            <ConditionallyRender client>
-              <ColorModeToggle />
-            </ConditionallyRender>
+            <ColorModeToggle />
           </li>
         </ul>
       </div>
       <div className="block flex-none sm:hidden">
-        <ConditionallyRender client>
-          <ColorModeToggle />
-        </ConditionallyRender>
+        <ColorModeToggle />
       </div>
     </div>
   );

components/RedditPost.tsx

@@ -0,0 +1,35 @@
+import useDarkMode from '../hooks/useDarkMode';
+import useScript from '../hooks/useScript';
+
+interface RedditEmbedProps {
+  url: string;
+  title: string;
+  author: string;
+  subreddit: string;
+}
+
+export default function RedditPost({
+  url,
+  title,
+  author,
+  subreddit,
+}: RedditEmbedProps) {
+  const { isDark } = useDarkMode();
+  useScript('https://embed.reddit.com/widgets.js');
+
+  return (
+    <blockquote
+      className="reddit-embed-bq"
+      style={{ height: '316px' }}
+      data-embed-height="316"
+      data-embed-theme={isDark ? 'dark' : 'light'}
+    >
+      <a href={url}>{title}</a>
+      <br />
+      by
+      <a href={`https://www.reddit.com/user/${author}/`}>u/{author}</a>
+      in
+      <a href={`https://www.reddit.com/r/${subreddit}/`}>{subreddit}</a>
+    </blockquote>
+  );
+}

hooks/useScript.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+// https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx
+const useScript = (url: string) => {
+  useEffect(() => {
+    const script = document.createElement('script');
+
+    script.src = url;
+    script.async = true;
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [url]);
+};
+
+export default useScript;

pages/_app.tsx

@@ -2,10 +2,14 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { MDXProvider } from '@mdx-js/react';
+import dynamic from 'next/dynamic';
 
 import Tweet from '../components/Tweet';
 
-const components = { Tweet };
+const RedditPost = dynamic(() => import('../components/RedditPost'), {
+  ssr: false,
+});
+const components = { Tweet, RedditPost };
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (