Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Utilising localStorage for theme saving

Browse source
This commit is contained in:
Neshura 2022-12-15 21:24:38 +01:00
parent cc9a7e0d5e
commit 5616975351
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
2 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
pages/_app.tsx
View file

@ -5,8 +5,9 @@ import type { NextPage } from 'next'
import { AppProps } from 'next/app'; import { AppProps } from 'next/app';
import { DefaultTheme, ThemeProvider } from 'styled-components'; import { DefaultTheme, ThemeProvider } from 'styled-components';
import { createContext, useContext, useEffect, useState } from 'react' import { createContext, useContext, useEffect, useState } from 'react'
import { getCookie, getCookies, setCookie } from 'cookies-next'
import { darkTheme } from '../components/themes'; import { darkTheme } from '../components/themes';
import useSWR from 'swr';
import { getTheme } from '../components/themeselector';
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode getLayout?: (page: ReactElement) => ReactNode
@ -26,10 +27,16 @@ export const useUpdateTheme = () => useContext(ThemeUpdateContext);
export default function Website({ Component, pageProps }: AppPropsWithLayout) { export default function Website({ Component, pageProps }: AppPropsWithLayout) {
const [selectedTheme, setselectedTheme] = useState(darkTheme); const [selectedTheme, setselectedTheme] = useState(darkTheme);
//console.log("Selected Theme: ", selectedTheme); // DEBUG
useEffect(() => { useEffect(() => {
setCookie('theme', selectedTheme.themeId); const storedThemeIdTemp = localStorage.getItem("theme");
// get stored theme data
// if theme data differs set it
// if not just exit
if (storedThemeIdTemp && parseInt(storedThemeIdTemp) !== selectedTheme.themeId) {
setselectedTheme(getTheme(parseInt(storedThemeIdTemp)))
}
}, [selectedTheme]) }, [selectedTheme])
@ -45,12 +52,3 @@ export default function Website({ Component, pageProps }: AppPropsWithLayout) {
</ThemeProvider> </ThemeProvider>
) )
} }
export async function getServerSideProps() {
return {
props: {
token: {},
}
}
}

7
pages/_document.tsx
View file

@ -1,12 +1,7 @@
import { getCookie, getCookies, setCookie } from 'cookies-next';
import { Html, Head, Main, NextScript, DocumentContext } from 'next/document' import { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import { useUpdateTheme } from './_app';
import { darkTheme } from '../components/themes';
import { GetServerSidePropsContext } from 'next';
export default function Document(ctx: DocumentContext) {
const updateTheme = useUpdateTheme();
export default function Document() {
return ( return (
<Html lang='en'> <Html lang='en'>
<Head /> <Head />