46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useAppDispatch, useAppSelector } from "../../hooks";
|
|
import {
|
|
PreferencesState,
|
|
setLayout as setPreferencesLayout,
|
|
setIsSavePreferences as setPreferencesIsSavePreferences,
|
|
setLanguage as setLanguagePreferences,
|
|
getWindowDimensions,
|
|
AUTO_SWITCH_THRESHOLD
|
|
} from "../preferences";
|
|
|
|
|
|
const UsePreferences = () => {
|
|
const dispatch = useAppDispatch()
|
|
const [mobile, setMobile] = React.useState<boolean>()
|
|
|
|
const layout = useAppSelector((state) => state.preferences.layout);
|
|
const setLayout = (layout: PreferencesState["layout"]) => dispatch(setPreferencesLayout(layout))
|
|
|
|
const isSavePreferences = useAppSelector((state) => state.preferences.isSavePreferences);
|
|
const setIsSavePreferences = (isSave: boolean) => dispatch(setPreferencesIsSavePreferences(isSave))
|
|
|
|
const language = useAppSelector((state) => state.preferences.language);
|
|
const setLanguage = (lang: string) => dispatch(setLanguagePreferences(lang))
|
|
|
|
const automaticallyAdjustLayout = () => {
|
|
const {width} = getWindowDimensions()
|
|
setMobile(width < AUTO_SWITCH_THRESHOLD)
|
|
}
|
|
|
|
React.useEffect(()=>{
|
|
if (layout === "auto"){
|
|
void automaticallyAdjustLayout()
|
|
window.addEventListener('resize', automaticallyAdjustLayout)
|
|
|
|
return () => window.removeEventListener('resize', automaticallyAdjustLayout)
|
|
} else {
|
|
setMobile(layout === "mobile")
|
|
}
|
|
}, [layout])
|
|
|
|
return {mobile, layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage}
|
|
}
|
|
|
|
export default UsePreferences;
|