leaflet.pub
a tool for shared writing and social publishing
add language and time-zone to provider
awarm.space
+7
-4
app/layout.tsx
+7
-4
app/layout.tsx
···
7
import { PopUpProvider } from "components/Toast";
8
import { IdentityProviderServer } from "components/IdentityProviderServer";
9
import { headers } from "next/headers";
10
-
import { IPLocationProvider } from "components/Providers/IPLocationProvider";
11
import { RouteUIStateManager } from "components/RouteUIStateManger";
12
13
export const metadata = {
···
55
children: React.ReactNode;
56
}
57
) {
58
-
let ipLocation = (await headers()).get("X-Vercel-IP-Country");
59
return (
60
<html suppressHydrationWarning lang="en" className={`${quattro.variable}`}>
61
<body>
···
77
<InitialPageLoad>
78
<PopUpProvider>
79
<IdentityProviderServer>
80
-
<IPLocationProvider country={ipLocation}>
81
<ViewportSizeLayout>{children}</ViewportSizeLayout>
82
<RouteUIStateManager />
83
-
</IPLocationProvider>
84
</IdentityProviderServer>
85
</PopUpProvider>
86
</InitialPageLoad>
···
7
import { PopUpProvider } from "components/Toast";
8
import { IdentityProviderServer } from "components/IdentityProviderServer";
9
import { headers } from "next/headers";
10
+
import { RequestHeadersProvider } from "components/Providers/RequestHeadersProvider";
11
import { RouteUIStateManager } from "components/RouteUIStateManger";
12
13
export const metadata = {
···
55
children: React.ReactNode;
56
}
57
) {
58
+
let headersList = await headers();
59
+
let ipLocation = headersList.get("X-Vercel-IP-Country");
60
+
let acceptLanguage = headersList.get("accept-language");
61
+
let ipTimezone = headersList.get("X-Vercel-IP-Timezone");
62
return (
63
<html suppressHydrationWarning lang="en" className={`${quattro.variable}`}>
64
<body>
···
80
<InitialPageLoad>
81
<PopUpProvider>
82
<IdentityProviderServer>
83
+
<RequestHeadersProvider country={ipLocation} language={acceptLanguage} timezone={ipTimezone}>
84
<ViewportSizeLayout>{children}</ViewportSizeLayout>
85
<RouteUIStateManager />
86
+
</RequestHeadersProvider>
87
</IdentityProviderServer>
88
</PopUpProvider>
89
</InitialPageLoad>
+3
-3
components/Blocks/RSVPBlock/ContactDetailsForm.tsx
+3
-3
components/Blocks/RSVPBlock/ContactDetailsForm.tsx
···
12
import { Separator } from "components/Layout";
13
import { createPhoneAuthToken } from "actions/phone_auth/request_phone_auth_token";
14
import { Input, InputWithLabel } from "components/Input";
15
-
import { IPLocationContext } from "components/Providers/IPLocationProvider";
16
import { Popover } from "components/Popover";
17
import { theme } from "tailwind.config";
18
import { InfoSmall } from "components/Icons/InfoSmall";
···
41
data.authToken.phone_number === rsvp.phone_number,
42
)?.plus_ones || 0,
43
);
44
-
let ipLocation = useContext(IPLocationContext) || "US";
45
const [formState, setFormState] = useState({
46
country_code:
47
-
countryCodes.find((c) => c[1].toUpperCase() === ipLocation)?.[2] || "1",
48
phone_number: "",
49
confirmationCode: "",
50
});
···
12
import { Separator } from "components/Layout";
13
import { createPhoneAuthToken } from "actions/phone_auth/request_phone_auth_token";
14
import { Input, InputWithLabel } from "components/Input";
15
+
import { RequestHeadersContext } from "components/Providers/RequestHeadersProvider";
16
import { Popover } from "components/Popover";
17
import { theme } from "tailwind.config";
18
import { InfoSmall } from "components/Icons/InfoSmall";
···
41
data.authToken.phone_number === rsvp.phone_number,
42
)?.plus_ones || 0,
43
);
44
+
let requestHeaders = useContext(RequestHeadersContext);
45
const [formState, setFormState] = useState({
46
country_code:
47
+
countryCodes.find((c) => c[1].toUpperCase() === (requestHeaders.country || "US"))?.[2] || "1",
48
phone_number: "",
49
confirmationCode: "",
50
});
-14
components/Providers/IPLocationProvider.tsx
-14
components/Providers/IPLocationProvider.tsx
···
1
-
"use client";
2
-
import { createContext } from "react";
3
-
4
-
export const IPLocationContext = createContext<string | null>(null);
5
-
export const IPLocationProvider = (props: {
6
-
country: string | null;
7
-
children: React.ReactNode;
8
-
}) => {
9
-
return (
10
-
<IPLocationContext.Provider value={props.country}>
11
-
{props.children}
12
-
</IPLocationContext.Provider>
13
-
);
14
-
};
···
+29
components/Providers/RequestHeadersProvider.tsx
+29
components/Providers/RequestHeadersProvider.tsx
···
···
1
+
"use client";
2
+
import { createContext } from "react";
3
+
4
+
export type RequestHeaders = {
5
+
country: string | null;
6
+
language: string | null;
7
+
timezone: string | null;
8
+
};
9
+
10
+
export const RequestHeadersContext = createContext<RequestHeaders>({
11
+
country: null,
12
+
language: null,
13
+
timezone: null,
14
+
});
15
+
16
+
export const RequestHeadersProvider = (props: {
17
+
country: string | null;
18
+
language: string | null;
19
+
timezone: string | null;
20
+
children: React.ReactNode;
21
+
}) => {
22
+
return (
23
+
<RequestHeadersContext.Provider
24
+
value={{ country: props.country, language: props.language, timezone: props.timezone }}
25
+
>
26
+
{props.children}
27
+
</RequestHeadersContext.Provider>
28
+
);
29
+
};