feat: add devtoViews tooltip

theodorusclarence · Dec 25, 2021 · 26c721b · 26c721b
1 parent ae46104
commit 26c721b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 6 deletions.
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -1,21 +1,22 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { Tooltip as TippyTooltip } from 'react-tippy';
+import { Tooltip as TippyTooltip, TooltipProps } from 'react-tippy';
 
 type TooltipTextProps = {
   content?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
   spanClassName?: string;
   withUnderline?: boolean;
-};
+} & TooltipProps;
 
 export default function Tooltip({
   content,
   children,
   className,
   spanClassName,
   withUnderline = false,
+  ...rest
 }: TooltipTextProps) {
   return (
     <TippyTooltip
@@ -32,6 +33,7 @@ export default function Tooltip({
           {content}
         </div>
       }
+      {...rest}
     >
       {withUnderline ? (
         <span

diff --git a/src/hooks/useContentMeta.tsx b/src/hooks/useContentMeta.tsx
@@ -24,6 +24,7 @@ export default function useContentMeta(
         contentLikes: _preloadMeta.likes,
         contentViews: _preloadMeta.views,
         likesByUser: _preloadMeta.likesByUser,
+        devtoViews: _preloadMeta.devtoViews,
       }
     : undefined;
   //#endregion  //*======== Get content cache ===========
@@ -60,6 +61,7 @@ export default function useContentMeta(
         contentViews: data.contentViews,
         contentLikes: data.contentLikes + 1,
         likesByUser: data.likesByUser + 1,
+        devtoViews: data.devtoViews,
       },
       false
     );
@@ -76,6 +78,7 @@ export default function useContentMeta(
     isError,
     views: data?.contentViews,
     contentLikes: data?.contentLikes ?? 0,
+    devtoViews: data?.devtoViews,
     likesByUser: data?.likesByUser ?? 0,
     addLike,
   };

diff --git a/src/pages/api/content/[slug].ts b/src/pages/api/content/[slug].ts
@@ -37,6 +37,7 @@ export default async function IndividualContent(
           return res.status(200).json({
             contentViews: data?.views + found?.views ?? 0,
             contentLikes: data?.likes ?? 0,
+            devtoViews: found?.views ?? null,
             likesByUser: data?.likesByUser?.[sessionId] ?? 0,
           });
         }

diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -26,6 +26,7 @@ import CloudinaryImg from '@/components/images/CloudinaryImg';
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
 import Seo from '@/components/Seo';
+import Tooltip from '@/components/Tooltip';
 
 import { BlogFrontmatter, BlogType } from '@/types/frontmatters';
 
@@ -119,10 +120,29 @@ export default function SingleBlogPage({
                   <HiOutlineClock className='inline-block text-base' />
                   <Accent>{frontmatter.readingTime.text}</Accent>
                 </div>
-                <div className='flex gap-1 items-center'>
-                  <HiOutlineEye className='inline-block text-base' />
-                  <Accent>{meta?.views ?? '–––'} views</Accent>
-                </div>
+                {meta?.devtoViews ? (
+                  <Tooltip
+                    content={
+                      <>
+                        {meta.devtoViews} views on{' '}
+                        <CustomLink href='https://dev.to/theodorusclarence'>
+                          dev.to
+                        </CustomLink>
+                      </>
+                    }
+                    position='bottom'
+                  >
+                    <div className='flex gap-1 items-center'>
+                      <HiOutlineEye className='inline-block text-base' />
+                      <Accent>{meta?.views ?? '–––'} views</Accent>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className='flex gap-1 items-center'>
+                    <HiOutlineEye className='inline-block text-base' />
+                    <Accent>{meta?.views ?? '–––'} views</Accent>
+                  </div>
+                )}
               </div>
               {!frontmatter?.englishOnly && (
                 <CustomLink

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -114,6 +114,10 @@
   background-color: transparent !important;
 }
 
+.tippy-tooltip {
+  padding: 0 0.8rem;
+}
+
 /* YT Lite */
 .yt-lite::before {
   content: none !important;

diff --git a/src/types/fauna.ts b/src/types/fauna.ts
@@ -8,6 +8,7 @@ export interface FaunaContentMeta {
 export interface ContentMeta {
   slug: string;
   views: number;
+  devtoViews?: number | null;
   likes: number;
   likesByUserRaw: Record<string, number>;
   likesByUser: number;
@@ -17,6 +18,7 @@ export interface SingleContentMeta {
   contentViews: number;
   contentLikes: number;
   likesByUser: number;
+  devtoViews?: number | null;
 }
 
 //#region  //*=========== Fauna Response ===========