Merge pull request #6 from SchickliCop/feature/ms/fix-hydration-errors

Fix: Hydration, Missing Keys, changed hook

src/features/chat-home-page/chat-home.tsx

@@ -42,14 +42,12 @@ export const ChatHome: FC<ChatPersonaProps> = (props) => {
               <h2 className="text-2xl font-bold mb-3">Articles</h2>
               <div className="space-y-4">
                 {props.news && props.news.length > 0 ? (
-
                   props.news.map((newsArticle) => {
-                    return (NewsArticle({newsArticle}))
-                  }
-                  )
+                  return <NewsArticle newsArticle={newsArticle} key={newsArticle.id} />;
+                  })
                 ) : (
                   <p className="text-muted-foreground max-w-xl">
-                    No current news
+                  No current news
                   </p>
                 )}
               </div>

src/features/extensions-page/add-extension/add-new-extension.tsx

@@ -4,8 +4,7 @@ import { ServerActionResponse } from "@/features/common/server-action-response";
 import { LoadingIndicator } from "@/features/ui/loading";
 import { Textarea } from "@/features/ui/textarea";
 import { useSession } from "next-auth/react";
-import { FC } from "react";
-import { useFormState } from "react-dom";
+import { FC, useActionState } from "react";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
@@ -35,7 +34,7 @@ export const AddExtension: FC<Props> = (props) => {
   const { data } = useSession();
   const initialState: ServerActionResponse | undefined = undefined;
 
-  const [formState, formAction] = useFormState(
+  const [formState, formAction] = useActionState(
     AddOrUpdateExtension,
     initialState
   );

src/features/theme/theme-provider.tsx

@@ -2,7 +2,17 @@
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
+import { useEffect, useState } from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }