-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from deepsingh132/development
Fix: Resolve 'Entire page deopted into client-side rendering' error and address dark mode flashing issue in production build
- Loading branch information
Showing
11 changed files
with
7,604 additions
and
2,141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import { ThemeProvider as NextThemesProvider } from "next-themes"; | ||
| type ThemeProviderProps = Parameters<typeof NextThemesProvider>[0]; | ||
|
|
||
| /** | ||
| * Your app's theme provider component. | ||
| * 'use client' is essential for next-themes to work with app-dir. | ||
| */ | ||
| export function ThemeProvider({ children, ...props }: ThemeProviderProps) { | ||
| return <NextThemesProvider {...props}>{children}</NextThemesProvider>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,68 @@ | ||
| import Sidebar from "@/components/Sidebar"; | ||
| import Widgets from "@/components/Widgets"; | ||
| import RefreshFeed from "@/components/RefreshFeed"; | ||
| import CommentModal from "@/components/CommentModal"; | ||
| import { Suspense } from "react"; | ||
| import Feed from "@/components/Feed"; | ||
|
|
||
| export default async function Home() { | ||
| const { trendingPosts, randomUsersResults } = await getWidgetsData(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <main className="flex dark:bg-darkBg dark:text-darkText overflow-clip min-h-screen mx-auto"> | ||
|
|
||
| <main | ||
| role="main" | ||
| className="flex dark:bg-darkBg dark:text-darkText overflow-clip min-h-screen mx-auto" | ||
| > | ||
| {/* Sidebar */} | ||
| <Sidebar /> | ||
|
|
||
| <div className="flex flex-grow w-full"> | ||
| {/* Feed */} | ||
| <RefreshFeed /> | ||
| <Suspense fallback={<Feed type={undefined} />}> | ||
| <RefreshFeed /> | ||
| </Suspense> | ||
|
|
||
| {/* Widgets */} | ||
|
|
||
| <Widgets | ||
| trendingPosts={trendingPosts || []} | ||
| randomUsersResults={randomUsersResults?.results || []} | ||
| trendingPosts={trendingPosts} | ||
| randomUsersResults={randomUsersResults} | ||
| /> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| async function getWidgetsData() { | ||
|
|
||
| if (!process.env.NEXT_PUBLIC_BACKEND_URL) { | ||
| return { | ||
| trendingPosts: [], | ||
| randomUsersResults: [], | ||
| }; | ||
| } | ||
|
|
||
| // Trending posts section | ||
| // TODO: add backend route for trending posts | ||
| const trendingPosts = | ||
| await fetch( | ||
| `${process.env.NEXT_PUBLIC_BACKEND_URL}/widgets/trending/posts` | ||
| ).then((res) => res.json()); | ||
| async function getWidgetsData() { | ||
| const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL; | ||
|
|
||
| // Who to follow section | ||
| if (!backendUrl || backendUrl === "undefined") { | ||
| return { | ||
| trendingPosts: [], | ||
| randomUsersResults: [], | ||
| }; | ||
| } | ||
|
|
||
| let randomUsersResults: any = []; | ||
| try { | ||
| const trendingPostsRes = await fetch( | ||
| `${backendUrl}/widgets/trending/posts` | ||
| ); | ||
| const randomUsersRes = await fetch( | ||
| "https://randomuser.me/api/?results=10&inc=name,login,picture" | ||
| ); | ||
|
|
||
| try { | ||
| const res = await fetch( | ||
| "https://randomuser.me/api/?results=10&inc=name,login,picture" | ||
| ); | ||
| const trendingPosts = await trendingPostsRes.json(); | ||
| const randomUsersResults = await randomUsersRes.json(); | ||
|
|
||
| randomUsersResults = await res.json(); | ||
| } catch (e) { | ||
| randomUsersResults = []; | ||
| return { | ||
| trendingPosts: trendingPosts.trendingPosts, | ||
| randomUsersResults: randomUsersResults.results, | ||
| }; | ||
| } catch (error) { | ||
| return { | ||
| trendingPosts: [], | ||
| randomUsersResults: [], | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| trendingPosts: trendingPosts?.trendingPosts, | ||
| randomUsersResults, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,85 @@ | ||
| 'use client'; | ||
| import { useState, useEffect } from "react"; | ||
| import { useEffect, useState } from "react"; | ||
| import "./toggle_mode.css"; | ||
| import { MoonIcon, SunIcon } from "@heroicons/react/24/outline"; | ||
| import { toastSuccess } from "./Toast"; | ||
| import { useTheme } from "next-themes"; | ||
|
|
||
| export default function ModeToggle() { | ||
|
|
||
| const initialMode = localStorage.getItem("mode") || "light"; | ||
| const [mode, setMode] = useState(initialMode); | ||
| const { setTheme, resolvedTheme } = useTheme(); | ||
| const [mounted, setMounted] = useState(false); | ||
| useEffect(() => setMounted(true), []); | ||
|
|
||
| useEffect(() => { | ||
| if (mode === "dark") { | ||
| document.documentElement.classList.add("dark"); | ||
| localStorage.setItem("mode", "dark"); | ||
| // set the toggle state based on the resolved theme | ||
| if (resolvedTheme === "dark") { | ||
| document?.getElementById("darkModeToggle")?.classList.add("dark"); | ||
| document?.getElementById("icon")?.classList.toggle("moon"); | ||
| } else { | ||
| document.documentElement.classList.remove("dark"); | ||
| localStorage.setItem("mode", "light"); | ||
| document?.getElementById("darkModeToggle")?.classList.remove("dark"); | ||
| document?.getElementById("icon")?.classList.toggle("sun"); | ||
| } | ||
| }, [mode, initialMode]); | ||
|
|
||
| }, [resolvedTheme]); | ||
|
|
||
| const toggleMode = () => { | ||
| if (mode === "dark") { | ||
| localStorage.setItem("mode", "light"); | ||
| setMode("light"); | ||
| document?.getElementById("icon")?.classList.toggle("moon"); | ||
| toastSuccess("Light mode enabled", { | ||
| if (!mounted) return; | ||
|
|
||
| const toggleClasses = (id: string, newClass: string, oldClass: string) => { | ||
| const element = document?.getElementById(id); | ||
| element?.classList.remove(oldClass); | ||
| element?.classList.add(newClass); | ||
| }; | ||
|
|
||
| const showToast = (message: string, color: string) => { | ||
| toastSuccess(message, { | ||
| style: { | ||
| background: "#fff", | ||
| color: "#333", | ||
| background: color, | ||
| color: color === "#fff" ? "#333" : "#fff", | ||
| zIndex: 1, | ||
| boxShadow: "0 1px 4px rgba(0, 0, 0, 0.1)", | ||
| }, | ||
| duration: 3000, | ||
| }); | ||
| }; | ||
| if (resolvedTheme === "dark") { | ||
| setTheme("light"); | ||
| toggleClasses("icon", "sun", "moon"); | ||
| document?.getElementById("darkModeToggle")?.classList.remove("dark"); | ||
| showToast("Light mode enabled", "#fff"); | ||
| } else { | ||
| localStorage.setItem("mode", "dark"); | ||
| setMode("dark"); | ||
| toastSuccess("Dark mode enabled", { | ||
| style: { | ||
| background: "#333", | ||
| color: "#fff", | ||
| zIndex: 1, | ||
| boxShadow: "0 1px 4px rgba(0, 0, 0, 0.1)", | ||
| }, | ||
| } | ||
| ); | ||
| setTheme("dark"); | ||
| toggleClasses("icon", "sun", "sun"); | ||
| document?.getElementById("darkModeToggle")?.classList.add("dark"); | ||
| showToast("Dark mode enabled", "#333"); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-center"> | ||
| <div className="toggle-container"> | ||
| <div | ||
| className={mode === "dark" ? "toggle dark" : "toggle"} | ||
| data-testid="dark-mode-toggle" | ||
| className={ | ||
| resolvedTheme === "dark" | ||
| ? "toggle dark" | ||
| : "toggle" | ||
| } | ||
| onClick={toggleMode} | ||
| id="darkModeToggle" | ||
| > | ||
| <div className="icon sun" id="icon"> | ||
| {mode === "dark" ? ( | ||
| <MoonIcon className="text-black" id="moon" /> | ||
| ) : ( | ||
| <SunIcon className="text-black" id="sun" /> | ||
| ) | ||
| { | ||
| resolvedTheme === "dark" ? ( | ||
| <MoonIcon className="text-black" id="sun" /> | ||
| ) : ( | ||
| <SunIcon className="text-black" id="moony" /> | ||
| ) | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| // { | ||
| // // if mode is dark then show moon else show sun | ||
| // mode === "dark" ? ( | ||
| // <MoonIcon | ||
| // className="icon moon transition-transform duration-500" | ||
| // id="moon" | ||
| // /> | ||
| // ) : ( | ||
| // <SunIcon | ||
| // className="icon sun transition-transform duration-500" | ||
| // id="sun" | ||
| // /> | ||
| // ); | ||
| // } | ||
| } |
Oops, something went wrong.