From 7ca8efb2111f3b3a7eb0c681990d9cab09ef7a94 Mon Sep 17 00:00:00 2001 From: akshatnema Date: Sat, 28 Sep 2024 12:55:10 +0530 Subject: [PATCH 1/4] Removed hydration errors --- components/AlgoliaSearch.tsx | 9 +++++- components/Avatar.tsx | 8 +---- components/newsroom/FeaturedBlogPost.tsx | 13 ++------ utils/getStatic.ts | 40 ++++++++++-------------- 4 files changed, 28 insertions(+), 42 deletions(-) diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx index 43b3cc7ce6b..d2c9b17b1f8 100644 --- a/components/AlgoliaSearch.tsx +++ b/components/AlgoliaSearch.tsx @@ -283,6 +283,7 @@ export default function AlgoliaSearch({ children }: { children: React.ReactNode */ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISearchButtonProps) { const { onOpen, onInput } = useContext(SearchContext); + const [Children, setChildren] = useState(''); const searchButtonRef = useRef(null); const actionKey = getActionKey(); @@ -308,6 +309,12 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe }; }, [onInput, searchButtonRef]); + useEffect(() => { + if (typeof children === 'function') { + setChildren(children({ actionKey })); + } + }, []); + return ( ); } diff --git a/components/Avatar.tsx b/components/Avatar.tsx index b8bb1e55715..9e78890bc9d 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -31,11 +31,5 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) { /> ); - return link ? ( - - {avatar} - - ) : ( - {avatar} - ); + return link ? {avatar} : {avatar}; } diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx index 515d0d0a2f6..2c366f3f297 100644 --- a/components/newsroom/FeaturedBlogPost.tsx +++ b/components/newsroom/FeaturedBlogPost.tsx @@ -87,18 +87,9 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP {post.authors .map((author, index) => author.link ? ( - { - e.stopPropagation(); - }} - target='_blank' - rel='noreferrer' - > + {author.name} - + ) : ( author.name ) diff --git a/utils/getStatic.ts b/utils/getStatic.ts index 9b76ba9d4e5..56af2cf6b1c 100644 --- a/utils/getStatic.ts +++ b/utils/getStatic.ts @@ -2,26 +2,24 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import i18nextConfig from '../next-i18next.config'; -console.log(i18nextConfig.i18n.locales); - /** * Retrieves the internationalization paths for the supported locales. * @returns An array of paths for each supported locale. */ export const getI18nPaths = () => - i18nextConfig.i18n.locales.map((lng) => ({ - params: { - lang: lng - } - })); + i18nextConfig.i18n.locales.map((lng) => ({ + params: { + lang: lng + } + })); /** * Retrieves the static paths for Next.js. * @returns An object containing the fallback value and an array of paths. */ export const getStaticPaths = () => ({ - fallback: false, - paths: getI18nPaths() + fallback: false, + paths: getI18nPaths() }); /** @@ -30,15 +28,13 @@ export const getStaticPaths = () => ({ * @param ns - An array of namespaces to be loaded. * @returns An object containing the internationalization props. */ -export async function getI18nProps(ctx:any, ns = ['common']) { - const locale = ctx?.params?.lang; - - console.log(locale, 'here'); - const props = { - ...(await serverSideTranslations(locale, ns)) - }; +export async function getI18nProps(ctx: any, ns = ['common']) { + const locale = ctx?.params?.lang; + const props = { + ...(await serverSideTranslations(locale, ns)) + }; - return props; + return props; } /** @@ -47,11 +43,9 @@ export async function getI18nProps(ctx:any, ns = ['common']) { * @returns A function that retrieves the static props. */ export function makeStaticProps(ns = {}) { - return async function getStaticProps(ctx:any) { - console.log(ctx, 'ctx'); - - return { - props: await getI18nProps(ctx, ns as any) - }; + return async function getStaticProps(ctx: any) { + return { + props: await getI18nProps(ctx, ns as any) }; + }; } From 6b306190ac5d61ff5536618cd0bae2446dee8f24 Mon Sep 17 00:00:00 2001 From: akshatnema Date: Fri, 11 Oct 2024 13:02:04 +0530 Subject: [PATCH 2/4] Fixed blog, dashboard and newsroom pages --- components/AlgoliaSearch.tsx | 2 +- components/Loader.tsx | 4 +- components/dashboard/table/Row.tsx | 73 ++++++++++++++------------ components/navigation/BlogPostItem.tsx | 39 +++++--------- components/tools/ToolsCard.tsx | 6 +-- pages/blog/index.tsx | 22 ++++++-- pages/index.tsx | 2 + 7 files changed, 80 insertions(+), 68 deletions(-) diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx index d2c9b17b1f8..a7d3604fafb 100644 --- a/components/AlgoliaSearch.tsx +++ b/components/AlgoliaSearch.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; +import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; export const INDEX_NAME = 'asyncapi'; diff --git a/components/Loader.tsx b/components/Loader.tsx index 94fd2941765..b0be9da3475 100644 --- a/components/Loader.tsx +++ b/components/Loader.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { twMerge } from 'tailwind-merge'; +import AsyncAPIColorIcon from './icons/AsyncAPIColorIcon'; + interface LoaderProps { // eslint-disable-next-line prettier/prettier @@ -25,7 +27,7 @@ interface LoaderProps { */ export default function Loader({ loaderText = '', - loaderIcon = null, + loaderIcon = , className = '', dark = false, pulsating = false diff --git a/components/dashboard/table/Row.tsx b/components/dashboard/table/Row.tsx index 03cd73300e3..c8abe8514d2 100644 --- a/components/dashboard/table/Row.tsx +++ b/components/dashboard/table/Row.tsx @@ -14,47 +14,52 @@ export default function Row({ item }: RowProps) { return (
  • - -
    -
    - - +
    + - arrow icon + + {item.labels && item?.labels?.length > 0 && ( +
    + {item.labels.map((label) => ( + + {label.name} + + ))} +
    + )}
    - + + arrow icon + +
    • ); diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx index 09559f00523..be42f800c6a 100644 --- a/components/navigation/BlogPostItem.tsx +++ b/components/navigation/BlogPostItem.tsx @@ -1,7 +1,7 @@ import moment from 'moment'; import Link from 'next/link'; import type { Ref } from 'react'; -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import TextTruncate from 'react-text-truncate'; import { BlogPostType } from '@/types/components/navigation/BlogPostType'; @@ -77,16 +77,14 @@ export default forwardRef(function BlogPostItem( {post.type} - - - - {post.title} - - - - - - + + + {post.title} + + + + +
    @@ -94,30 +92,21 @@ export default forwardRef(function BlogPostItem(
    - + {post.authors .map((author, index) => author.link ? ( - { - e.stopPropagation(); - }} - target='_blank' - rel='noreferrer' - > + {author.name} - + ) : ( author.name ) ) .reduce((prev, curr) => ( - <> + {prev} & {curr} - + ))} diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx index b3e73df9364..dc8dfc3d48a 100644 --- a/components/tools/ToolsCard.tsx +++ b/components/tools/ToolsCard.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType'; import { HeadingTypeStyle } from '@/types/typography/Heading'; @@ -92,9 +92,9 @@ export default function ToolsCard({ toolData }: ToolsCardProp) { }, 500) } > -
    + {toolData.description} -
    + diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 7829daf7435..be82516b097 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router'; -import { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import Empty from '@/components/illustrations/Empty'; import GenericLayout from '@/components/layout/GenericLayout'; +import Loader from '@/components/Loader'; import BlogPostItem from '@/components/navigation/BlogPostItem'; import Filter from '@/components/navigation/Filter'; import Heading from '@/components/typography/Heading'; @@ -33,6 +34,7 @@ export default function BlogIndexPage() { }) : [] ); + const [isClient, setIsClient] = useState(false); const onFilter = (data: IBlogPost[]) => setPosts(data); const toFilter = [ @@ -57,6 +59,10 @@ export default function BlogIndexPage() { const description = 'Find the latest and greatest stories from our community'; const image = '/img/social/blog.webp'; + useEffect(() => { + setIsClient(router.isReady); + }, [router.isReady]); + return (
    @@ -108,16 +114,24 @@ export default function BlogIndexPage() { )}
    - {Object.keys(posts).length === 0 ? ( + {Object.keys(posts).length === 0 && (

    No post matches your filter

    - ) : ( + )} + {Object.keys(posts).length > 0 && isClient && (
      - {router.isReady && posts.map((post, index) => )} + {posts.map((post, index) => ( + + ))}
    )} + {Object.keys(posts).length > 0 && !isClient && ( +
    + +
    + )}
    diff --git a/pages/index.tsx b/pages/index.tsx index 906ed8c65cf..826a795c8ae 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon'; import Loader from '@/components/Loader'; From 3a877640842c5397854db4f5b4482a134a4f08d2 Mon Sep 17 00:00:00 2001 From: akshatnema Date: Fri, 11 Oct 2024 15:38:06 +0530 Subject: [PATCH 3/4] Added links back to BlogPostItem --- components/Avatar.tsx | 15 ++++++++++++++- components/navigation/BlogPostItem.tsx | 15 ++++++++++++--- next-env.d.ts | 2 +- pages/blog/index.tsx | 4 ++-- 4 files changed, 29 insertions(+), 7 deletions(-) diff --git a/components/Avatar.tsx b/components/Avatar.tsx index 9e78890bc9d..5fb0a39bafe 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -31,5 +31,18 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) { /> ); - return link ? {avatar} : {avatar}; + return link ? ( + { + e.preventDefault(); + + window.open(link, '_blank'); + }} + data-testid='Avatars-link' + > + {avatar} + + ) : ( + {avatar} + ); } diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx index be42f800c6a..b1b34112855 100644 --- a/components/navigation/BlogPostItem.tsx +++ b/components/navigation/BlogPostItem.tsx @@ -96,15 +96,24 @@ export default forwardRef(function BlogPostItem( {post.authors .map((author, index) => author.link ? ( - + { + e.preventDefault(); + + // Handle the click event, e.g., navigate to author.link + window.open(author.link, '_blank'); + }} + > {author.name} ) : ( author.name ) ) - .reduce((prev, curr) => ( - + .reduce((prev, curr, index) => ( + {prev} & {curr} ))} diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc6c..a4a7b3f5cfa 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index be82516b097..37958cec430 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -60,8 +60,8 @@ export default function BlogIndexPage() { const image = '/img/social/blog.webp'; useEffect(() => { - setIsClient(router.isReady); - }, [router.isReady]); + setIsClient(true); + }, []); return ( From 8cbd9e3da7dcda9cfddb99a23e9acc51f739ea97 Mon Sep 17 00:00:00 2001 From: akshatnema Date: Fri, 11 Oct 2024 16:50:40 +0530 Subject: [PATCH 4/4] added changes based on review --- components/Avatar.tsx | 5 +++-- components/navigation/BlogPostItem.tsx | 5 +++-- components/tools/ToolsCard.tsx | 5 ++++- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/Avatar.tsx b/components/Avatar.tsx index 5fb0a39bafe..d889cafb9d7 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -32,16 +32,17 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) { ); return link ? ( - { e.preventDefault(); window.open(link, '_blank'); }} data-testid='Avatars-link' + className='cursor-pointer border-none bg-inherit p-0' > {avatar} - + ) : ( {avatar} ); diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx index b1b34112855..264fe0b6c66 100644 --- a/components/navigation/BlogPostItem.tsx +++ b/components/navigation/BlogPostItem.tsx @@ -96,9 +96,10 @@ export default forwardRef(function BlogPostItem( {post.authors .map((author, index) => author.link ? ( - { e.preventDefault(); @@ -107,7 +108,7 @@ export default forwardRef(function BlogPostItem( }} > {author.name} - + ) : ( author.name ) diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx index dc8dfc3d48a..2a6d9ced02f 100644 --- a/components/tools/ToolsCard.tsx +++ b/components/tools/ToolsCard.tsx @@ -92,7 +92,10 @@ export default function ToolsCard({ toolData }: ToolsCardProp) { }, 500) } > - + {toolData.description}