import type { MetaFunction , LoaderFunction , ActionFunction } from "remix" ; import { useLoaderData , useSubmit , Form , Link , redirect } from "remix" ; import { userPrefsCookie } from "../cookies" ; async function getUserPrefs ( cookieHeader ) { return ( ( await userPrefsCookie . parse ( cookieHeader ) ) || { language : null , showBanner : true } ) ; } function setUserPrefs ( userPrefs ) { return userPrefsCookie . serialize ( userPrefs ) ; } export let meta = ( ) => { return { title : "User Preferences" } ; } ; export let loader = async ( { request } ) => { return getUserPrefs ( request . headers . get ( "Cookie" ) ) ; } ; export let action = async ( { request } ) => { let userPrefs = await getUserPrefs ( request . headers . get ( "Cookie" ) ) ; let formParams = new URLSearchParams ( await request . text ( ) ) ; if ( formParams . has ( "language" ) ) { userPrefs . language = formParams . get ( "language" ) ; } userPrefs . showBanner = formParams . get ( "showBanner" ) === "on" ; return redirect ( "/prefs" , { headers : { "Set-Cookie" : await setUserPrefs ( userPrefs ) } } ) ; } ; export let handle = { breadcrumb : ( ) => < Link to = "/prefs" > Preferences < /Link> } ; export default function UserPrefs ( ) { let userPrefs = useLoaderData ( ) ; let submit = useSubmit ( ) ; function handleChange ( event ) { submit ( event . currentTarget , { replace : true } ) ; } function handleClick ( event ) { submit ( event . currentTarget , { replace : true } ) ; } return ( < div > < header > < h1 > User Preferences < /h1> < /header> < div > < Form method = "post" replace onChange = { handleChange } > < p > < label > Language : { " " } < select name = "language" defaultValue = { userPrefs . language || ( typeof navigator !== "undefined" && navigator . language ) } > < option value = "en-US" > English ( US ) < /option> < option value = "en-GB" > English ( GB ) < /option> < option value = "it-IT" > Italian < /option> < option value = "es-ES" > Spanish < /option> < option value = "fr-FR" > French < /option> < option value = "zh-CN" > Chinese < /option> < /select> < /label> < /p> < p > < label > Show banner : { " " } < input type = "checkbox" name = "showBanner" defaultChecked = { userPrefs . showBanner } / > < /label> < /p> < p > < label > Banner : { " " } < button type = "button" onClick = { handleClick } name = "showBanner" value = "on" > Show < /button>{" "} < button type = "button" onClick = { handleClick } name = "showBanner" value = "off" > Hide < /button> < /label> < /p> < /Form> < /div> < div > < pre > { JSON . stringify ( userPrefs , null , 2 ) } < /pre> < /div> < /div>); }