108 lines
2.5 KiB
JavaScript
108 lines
2.5 KiB
JavaScript
import { useState } from 'react'
|
|
// Stores state in local storage
|
|
import useLocalStorage from 'shared/hooks/useLocalStorage.js'
|
|
// Designs
|
|
import { designsByType } from 'config/software/index.mjs'
|
|
// Locale and translation
|
|
import { useTranslation } from 'next-i18next'
|
|
import { capitalize } from 'shared/utils.mjs'
|
|
import { formatVersionUri } from '../components/version-picker.js'
|
|
import useVersion from 'site/hooks/useVersion.js'
|
|
import useTheme from 'shared/hooks/useTheme'
|
|
|
|
// Initial navigation
|
|
const initialNavigation = (t, version) => {
|
|
const base = {
|
|
accessories: {
|
|
__title: t('accessoryDesigns'),
|
|
__slug: 'accessories',
|
|
},
|
|
blocks: {
|
|
__title: t('blockDesigns'),
|
|
__slug: 'blocks',
|
|
},
|
|
garments: {
|
|
__title: t('garmentDesigns'),
|
|
__slug: t('garments'),
|
|
},
|
|
utilities: {
|
|
__title: t('utilityDesigns'),
|
|
__slug: 'utilities',
|
|
},
|
|
}
|
|
for (const type in designsByType) {
|
|
for (const design in designsByType[type]) {
|
|
base[type][design] = {
|
|
__title: capitalize(design),
|
|
__slug: formatVersionUri(version,design)
|
|
}
|
|
}
|
|
}
|
|
for (const key in base) {
|
|
base[key].__order = base[key].__title
|
|
base[key].__linktitle = base[key].__title
|
|
}
|
|
|
|
return base
|
|
}
|
|
|
|
const designs = {}
|
|
for (const type in designsByType) {
|
|
designs[type] = []
|
|
for (const design in designsByType[type]) {
|
|
designs[type].push(design)
|
|
}
|
|
}
|
|
|
|
function useApp(full = true) {
|
|
|
|
// Version
|
|
const version = useVersion()
|
|
|
|
// Locale (aka language)
|
|
const { t } = useTranslation(['app'])
|
|
|
|
// Persistent state
|
|
const [account, setAccount] = useLocalStorage('account', { username: false })
|
|
const [theme, setTheme] = useTheme();
|
|
|
|
// React State
|
|
const [primaryMenu, setPrimaryMenu] = useState(false)
|
|
const [navigation, setNavigation] = useState(initialNavigation(t, version))
|
|
const [slug, setSlug] = useState('/')
|
|
const [design, setDesign] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
// State methods
|
|
const togglePrimaryMenu = () => setPrimaryMenu(!primaryMenu)
|
|
|
|
return {
|
|
// Static vars
|
|
site: 'lab',
|
|
designs,
|
|
|
|
// State
|
|
loading,
|
|
navigation,
|
|
design,
|
|
primaryMenu,
|
|
slug,
|
|
theme,
|
|
|
|
// State setters
|
|
setLoading,
|
|
setNavigation,
|
|
setDesign,
|
|
setPrimaryMenu,
|
|
setSlug,
|
|
setTheme,
|
|
startLoading: () => { setLoading(true); setPrimaryMenu(false) }, // Always close menu when navigating
|
|
stopLoading: () => setLoading(false),
|
|
|
|
// State handlers
|
|
togglePrimaryMenu,
|
|
}
|
|
}
|
|
|
|
export default useApp
|
|
|