fix: consent settings were not applied correctly

package.json

@@ -68,7 +68,8 @@
     "react-textarea-autosize": "8.3.3",
     "sitemap": "7.0.0",
     "tslib": "2.3.1",
-    "use-cookie-consent": "^0.1.12"
+    "use-cookie-consent": "^0.1.12",
+    "zustand": "3.5.10"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

src/atoms/route-loader/index.tsx

@@ -1,7 +1,11 @@
-import React from "react";
+import { useRouteLoader } from "@/ions/hooks/route-loader";
+import React, { memo } from "react";
 import { StyledLoader } from "./styled";
-import { RouteLoaderProps } from "./types";
 
-const RouteLoader = (props: RouteLoaderProps) => <StyledLoader {...props} />;
+const RouteLoader = () => {
+	const { loaded, loading } = useRouteLoader();
 
-export default RouteLoader;
+	return <StyledLoader isLoading={loading} isLoaded={loaded} />;
+};
+
+export default memo(RouteLoader);

src/atoms/route-loader/types.ts

@@ -2,5 +2,3 @@ export interface StyledLoaderProps {
 	isLoading?: boolean;
 	isLoaded?: boolean;
 }
-
-export interface RouteLoaderProps extends StyledLoaderProps {}

src/atoms/toggle/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { StyledInput, StyledToggle, StyledToggleWrapper } from "./styled";
 import { ToggleProps } from "./types";
 
@@ -17,4 +17,4 @@ const Toggle = ({ checked, onChange, invalid, disabled, ...props }: ToggleProps)
 	);
 };
 
-export default Toggle;
+export default memo(Toggle);

src/groups/layout/index.tsx

@@ -1,6 +1,8 @@
+import RouteLoader from "@/atoms/route-loader";
 import { GlobalTypography } from "@/atoms/typography/global";
 import { BreadcrumbsProvider } from "@/ions/contexts/breadcrumbs/context";
-import { useCookieConsentModal } from "@/ions/contexts/cookie-consent-modal";
+import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
+import { useCookieConsentModal } from "@/ions/stores/modal/cookie-consent";
 import { globalStyles } from "@/ions/styles";
 import Footer from "@/organisms/footer";
 import Header from "@/organisms/header";
@@ -9,7 +11,7 @@ import { css, Global, useTheme } from "@emotion/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import process from "process";
-import React, { FC, useMemo } from "react";
+import React, { FC, useEffect, useMemo } from "react";
 import { LayoutProps } from "./types";
 
 const OverlayGrid = dynamic(async () => import("@/organisms/grid-overlay"), { ssr: false });
@@ -28,8 +30,17 @@ const Layout: FC<LayoutProps> = ({
 }) => {
 	const theme = useTheme();
 	const breadcrumbs = useMemo(() => rawBreadcrumbs || [], [rawBreadcrumbs]);
-	const { isOpen: isCookieModalOpen } = useCookieConsentModal();
+	const isCookieModalOpen = useCookieConsentModal(state => state.isOpen);
+	const toggleCookieModal = useCookieConsentModal(state => state.toggle);
+	const { consent } = useCookieConsentContext();
 
+	useEffect(() => {
+		if (consent) {
+			toggleCookieModal(Object.keys(consent).length === 0);
+		} else {
+			toggleCookieModal(true);
+		}
+	}, [consent, toggleCookieModal]);
 	return (
 		<>
 			<Global key="globalStyles" styles={globalStyles} />
@@ -67,12 +78,15 @@ const Layout: FC<LayoutProps> = ({
 				{description && <meta itemProp="description" content={description} />}
 				{image && <meta itemProp="image" content={image} />}
 			</Head>
-			{isCookieModalOpen && !process.env.NEXT_PUBLIC_HIDE_COOKIE_CONSENT && <CookieBanner />}
+			{isCookieModalOpen && !process.env.NEXT_PUBLIC_HIDE_COOKIE_CONSENT && (
+				<CookieBanner dark={!dark} />
+			)}
 			<Header dark={dark} />
 			<BreadcrumbsProvider breadcrumbs={breadcrumbs}>
 				<Main className={className}>{children}</Main>
 			</BreadcrumbsProvider>
 			<Footer dark={dark} />
+			<RouteLoader />
 			{process.env.NODE_ENV !== "production" && <OverlayGrid />}
 		</>
 	);

src/groups/signin-modal/index.tsx

@@ -4,10 +4,9 @@ import { StyledFormText } from "@/atoms/form-text/styled";
 import ButtonIcon from "@/atoms/icon/button-icon";
 import { StyledStripe, StyledStripeWrapper } from "@/atoms/stripe/styled";
 import Typography from "@/atoms/typography";
-import { useProviders } from "@/ions/contexts/providers";
-import { useSigninModal } from "@/ions/contexts/signin-modal";
 import { useLockBodyScroll } from "@/ions/hooks/body-scroll-lock";
 import { useEscapeKey } from "@/ions/hooks/escape-key";
+import { useSigninModal } from "@/ions/stores/modal/signin";
 import { pxToRem } from "@/ions/utils/unit";
 import { StyledFieldset, StyledForm, StyledFormWrapper } from "@/molecules/form/styled";
 import InputField from "@/molecules/input-field";
@@ -23,9 +22,8 @@ import { FormProvider, useForm } from "react-hook-form";
 const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner"));
 
 const SigninModal = () => {
-	const { providers } = useProviders();
 	const { t } = useTranslation(["cancel", "form", "wishlist"]);
-	const { close } = useSigninModal();
+	const close = useSigninModal(state => state.close);
 	const methods = useForm<SigninFormProps>();
 	const [loadingGoogle, setLoadingGoogle] = useState(false);
 	const [loadingGithub, setLoadingGithub] = useState(false);
@@ -35,10 +33,10 @@ const SigninModal = () => {
 
 	const handleSubmit = useCallback(
 		async (data: SigninFormProps) => {
-			await signIn(providers.email.id, { email: data.email });
+			await signIn("email", { email: data.email });
 			close();
 		},
-		[providers, close]
+		[close]
 	);
 
 	const { isSubmitting, isSubmitSuccessful } = methods.formState;
@@ -63,7 +61,7 @@ const SigninModal = () => {
 										aria-label="google"
 										onClick={() => {
 											setLoadingGoogle(true);
-											void signIn(providers.google.id);
+											void signIn("google");
 										}}
 									>
 										{loadingGoogle ? (
@@ -79,7 +77,7 @@ const SigninModal = () => {
 										aria-label="github"
 										onClick={() => {
 											setLoadingGithub(true);
-											void signIn(providers.github.id);
+											void signIn("github");
 										}}
 									>
 										{loadingGithub ? (

src/groups/signin/index.tsx

@@ -4,7 +4,6 @@ import { StyledFormText } from "@/atoms/form-text/styled";
 import ButtonIcon from "@/atoms/icon/button-icon";
 import { StyledStripe, StyledStripeWrapper } from "@/atoms/stripe/styled";
 import Typography from "@/atoms/typography";
-import { useProviders } from "@/ions/contexts/providers";
 import { pxToRem } from "@/ions/utils/unit";
 import {
 	StyledFieldset,
@@ -25,18 +24,14 @@ import { FormProvider, useForm } from "react-hook-form";
 const ButtonSpinner = dynamic(async () => import("@/atoms/spinner/button-spinner"));
 
 const Signin = () => {
-	const { providers } = useProviders();
 	const { t } = useTranslation(["form"]);
 	const methods = useForm<SigninFormProps>();
 	const [loadingGoogle, setLoadingGoogle] = useState(false);
 	const [loadingGithub, setLoadingGithub] = useState(false);
 
-	const handleSubmit = useCallback(
-		(data: SigninFormProps) => {
-			void signIn(providers.email.id, { email: data.email });
-		},
-		[providers]
-	);
+	const handleSubmit = useCallback((data: SigninFormProps) => {
+		void signIn("email", { email: data.email });
+	}, []);
 
 	const { isSubmitting, isSubmitSuccessful } = methods.formState;
 	const loading = isSubmitting || isSubmitSuccessful;
@@ -60,7 +55,7 @@ const Signin = () => {
 									aria-label="google"
 									onClick={() => {
 										setLoadingGoogle(true);
-										void signIn(providers.google.id);
+										void signIn("google");
 									}}
 								>
 									{loadingGoogle ? (
@@ -77,7 +72,7 @@ const Signin = () => {
 									aria-label="github"
 									onClick={() => {
 										setLoadingGithub(true);
-										void signIn(providers.github.id);
+										void signIn("github");
 									}}
 								>
 									{loadingGithub ? (