move context to the feedback widget component to keep the base layout server rendered

Author: pettinarip

src/components/FeedbackWidget/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useContext } from "react"
 import { MdClose } from "react-icons/md"
 
 import { Button } from "@/components/ui/buttons/Button"
@@ -14,9 +15,11 @@ import {
 import FixedDot from "./FixedDot"
 import { useFeedbackWidget } from "./useFeedbackWidget"
 
+import { FeedbackWidgetContext } from "@/contexts/FeedbackWidgetContext"
 import { useTranslation } from "@/hooks/useTranslation"
 
 const FeedbackWidget = () => {
+  const { showFeedbackWidget } = useContext(FeedbackWidgetContext)
   const { t } = useTranslation("common")
   const {
     offsetBottom,
@@ -29,6 +32,9 @@ const FeedbackWidget = () => {
     isExpanded,
     isOpen,
   } = useFeedbackWidget()
+
+  if (!showFeedbackWidget) return null
+
   return (
     <>
       <Popover

src/components/ListenToPlayer/ListenToPlayer.stories.tsx

@@ -39,8 +39,8 @@ export const BaseLayout: StoryObj<typeof meta> = {
         <ListenToPlayer slug="/eth" />
       </div>
     ),
-    contentIsOutdated: false,
-    contentNotTranslated: false,
+    // contentIsOutdated: false,
+    // contentNotTranslated: false,
     lastDeployLocaleTimestamp: "May 14, 2021",
   },
 }

src/components/ListenToPlayer/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useContext, useEffect, useState } from "react"
 import { Howl } from "howler"
 import { Portal } from "@radix-ui/react-portal"

src/layouts/BaseLayout.tsx

@@ -1,5 +1,4 @@
 // import { join } from "path"
-import { useContext } from "react"
 import dynamic from "next/dynamic"
 
 import type { Root } from "@/lib/types"
@@ -8,8 +7,6 @@ import Footer from "@/components/Footer"
 import Nav from "@/components/Nav"
 import { SkipLink } from "@/components/SkipLink"
 
-import { FeedbackWidgetContext } from "@/contexts/FeedbackWidgetContext"
-
 // import TranslationBanner from "@/components/TranslationBanner"
 // import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 // import { toPosixPath } from "@/lib/utils/relativePath"
@@ -25,7 +22,6 @@ export const BaseLayout = ({
   // contentNotTranslated,
   lastDeployLocaleTimestamp,
 }: Root) => {
-  const { showFeedbackWidget } = useContext(FeedbackWidgetContext)
   // const { locale, asPath } = useRouter()
 
   // const CONTRIBUTING = "/contributing/"
@@ -79,7 +75,7 @@ export const BaseLayout = ({
        * layout on initial load.
        */}
 
-      {showFeedbackWidget && <FeedbackWidget />}
+      <FeedbackWidget />
     </>
   )
 }