Next.js Discord

Discord Forum

Context's data lost when navigating with Link

Unanswered
Weevil parasitoid posted this in #help-forum
Open in Discord
Weevil parasitoidOP
I have this layout.js in my app folder:
import NextUIWrapper from "components/NextUIWrapper";
import { AuthenticationContextProvider } from "contexts/AuthenticationContext";
import { LanguageContextProvider } from "contexts/LanguageContext";
import { UserSettingsContextProvider } from "contexts/UserSettingsContext";
import { cookies } from "next/headers";
import { Toaster } from "react-hot-toast";
import "./globals.css";

export const metadata = {
title: "Barsoft iPanel",
description: "Generated by Barsoft devs, powered by the best team",
};

export default function RootLayout({ children }) {
let theme;
let userTheme = cookies().get("theme");

if (userTheme) {
theme = userTheme?.value;
} else {
theme = "dark";
}
let token = cookies().get("token");

let validUser = false;

return (
<html lang="en" className={theme}>
<body>
<LanguageContextProvider>
<AuthenticationContextProvider token={token}>
<UserSettingsContextProvider>
<NextUIWrapper>{children}</NextUIWrapper>
<Toaster position="bottom-right" reverseOrder={false} />
</UserSettingsContextProvider>
</AuthenticationContextProvider>
</LanguageContextProvider>
</body>
</html>
);
}


and the site is wrapped into the context's but when i link to an another page then the context's data is lost and i have to store everything into localstorage now, is there any reasons? or am i making something badly?

13 Replies

aardani
Which context data?
Weevil parasitoidOP
UserSettingsContextProvider
aardani
Theorhetically the context shouldnt be lost since the root layout isn't getting prerendered, meaning all client-states should be preserved
Evidently the other context does not lose its data too
so might need to check out whats happening under the UserSettingsContextProvider?
Weevil parasitoidOP
return (
<UserSettingsContext.Provider
value={{
userSettings,
setUserSettings,
}}
>
{children}
</UserSettingsContext.Provider>
);

This is the return of that context
Weevil parasitoidOP
Sorry for late response
"use client";
import { createContext, useContext, useEffect, useState } from "react";
import { AuthenticationContext } from "./AuthenticationContext";

const UserSettingsContext = createContext();

const UserSettingsContextProvider = ({ children, token }) => {
const [userSettings, setUserSettings] = useState({
selectedBrand: null,
selectedBrandLocations: null,
selectedBrandDevices: null,
loadingLocations: true,
loadingDevices: true,
selectedDevicesFilter: [],
selectedLocationsFilter: [],
filteredDataLength: 0,
devicesSearchString: "",
});
const [userToken, setUserToken] = useState(null);
const { userData } = useContext(AuthenticationContext);

const getLocations = async () => {
try {
console.log("getting locations");
setUserSettings({ ...userSettings, loadingLocations: true });
const res = await fetch(XXXXXXX);
return res.json();
} catch (err) {
console.log(err);
}
};
const getDevices = async () => {
try {
console.log("getting devices");
setUserSettings({ ...userSettings, loadingDevices: true });
const res = await fetch(
XXXXXXX
);
return res.json();
} catch (err) {
console.log(err);
}
};
const getBrandDetails = async () => {
const fetchedLocatins = await getLocations();
const fetchedDevices = await getDevices();
setUserSettings({
...userSettings,
selectedBrandLocations: fetchedLocatins?.data,
selectedBrandDevices: fetchedDevices?.data,
loadingLocations: false,
loadingDevices: false,
});

};

useEffect(() => {
if (userSettings?.selectedBrand) {
getBrandDetails();
}
}, [userSettings?.selectedBrand]);

return (
<UserSettingsContext.Provider
value={{
userSettings,
setUserSettings,
}}
>
{children}
</UserSettingsContext.Provider>
);
};

export { UserSettingsContext, UserSettingsContextProvider };
Weevil parasitoidOP
If i run a build and run in production mode then the context works fine but in dev mode not
joulev
please do not repost the question in a different post.
i'll delete the other posts
Weevil parasitoidOP
Alright, sorry