Merge pull request #1 from dawalberto/develop

Additional settings feature

Author: dawalberto

src/components/AdditionalSettings.tsx

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react'
+import { BMRSelector } from './BMRSelector'
+import { LBMSelector } from './LBMSelector'
+
+export const AdditionalSettings = () => {
+	const [showMore, setShowMore] = useState(false)
+
+	const handleOnClick = useCallback(() => {
+		setShowMore((shown) => !shown)
+		window.scrollTo({
+			top: document.documentElement.scrollHeight,
+			behavior: 'smooth',
+		})
+	}, [])
+
+	return (
+		<div className='mt-6 w-full'>
+			<button
+				onClick={handleOnClick}
+				className='mx-auto block w-full rounded-sm bg-amber-400 px-4 py-2 text-center text-amber-950 shadow-md hover:shadow-lg active:border-amber-500 active:shadow-none active:ring-amber-500'
+			>
+				Additional settings 👇
+			</button>
+			{showMore && (
+				<div className='mt-6 flex flex-col gap-6'>
+					<div>
+						<LBMSelector />
+					</div>
+					<div>
+						<BMRSelector />
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

src/components/BMRSelector.tsx

@@ -1,10 +1,13 @@
-import { defaultBMREquation } from '@lib/defaults'
+import { useStore } from '@nanostores/react'
+import { $userAttributes } from '@store/user-attributes'
 import { selectStyles } from '@styles/selects'
 import { calculateAndUpdateBMR } from '@utils/bmr-functions'
 import clsx from 'clsx'
 import type { BMREquation } from 'src/types'
 
 export const BMRSelector = () => {
+	const { bmrAndExercise } = useStore($userAttributes)
+
 	const handleBMREquationChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
 		const equation: BMREquation = event.target.value as unknown as BMREquation
 		calculateAndUpdateBMR({ equation })
@@ -18,7 +21,7 @@ export const BMRSelector = () => {
 			<select
 				id='BMREquation'
 				name='BMREquation'
-				defaultValue={defaultBMREquation}
+				defaultValue={bmrAndExercise.equation}
 				onChange={handleBMREquationChange}
 				className={clsx(selectStyles, 'border-amber-300 bg-amber-50 text-amber-900 focus:border-amber-500 focus:ring-amber-500')}
 			>

src/components/LBMSelector.tsx

@@ -1,12 +1,14 @@
-import { defaultLBMFormula } from '@lib/defaults'
+import { useStore } from '@nanostores/react'
+import { $userAttributes } from '@store/user-attributes'
 import { selectStyles } from '@styles/selects'
 import { calculateAndUpdateLBM } from '@utils/lbm-functions'
 import clsx from 'clsx'
 import { useCallback, useState } from 'react'
 import type { LBMFormula } from 'src/types'
 
 export const LBMSelector = () => {
-	const [showManualLBMInput, setShowManualLBMInput] = useState(false)
+	const { lbm } = useStore($userAttributes)
+	const [showManualLBMInput, setShowManualLBMInput] = useState(lbm.formula === 'Manual')
 
 	const handleLBMFormulaChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
 		const formula: LBMFormula = event.target.value as unknown as LBMFormula
@@ -30,7 +32,7 @@ export const LBMSelector = () => {
 				<select
 					id='LBMFormula'
 					name='LBMFormula'
-					defaultValue={defaultLBMFormula}
+					defaultValue={lbm.formula}
 					onChange={handleLBMFormulaChange}
 					className={clsx(
 						selectStyles,
@@ -47,10 +49,11 @@ export const LBMSelector = () => {
 					type='number'
 					name='manualLBMInput'
 					onChange={handleManualLBMInputChange}
+					defaultValue={lbm.lbmKg}
 					placeholder='LBM in Kg'
 					className={clsx(
 						showManualLBMInput ? 'block w-2/5' : 'hidden',
-						'block h-10 max-h-12 min-h-9 rounded-none border border-lime-300 bg-lime-50 p-2.5 text-sm text-lime-900 focus:border-lime-500 focus:ring-lime-500'
+						'block h-10 max-h-12 min-h-9 rounded-none border border-lime-300 bg-lime-50 p-2.5 text-sm text-lime-900 shadow-md focus:border-lime-500 focus:ring-lime-500'
 					)}
 				/>
 			</div>

src/pages/index.astro

@@ -1,10 +1,9 @@
 ---
-import { BMRSelector } from '@components/BMRSelector'
+import { AdditionalSettings } from '@components/AdditionalSettings'
 import ChartMacros from '@components/ChartMacros.astro'
 import { Dashboard } from '@components/Dashboard'
 import { ExerciseMultiplier } from '@components/ExerciseMultiplier'
 import { GoalSelector } from '@components/GoalSelector'
-import { LBMSelector } from '@components/LBMSelector'
 import '@styles/selects.css'
 ---
 
@@ -26,28 +25,24 @@ import '@styles/selects.css'
 		<meta name='language' content='English' />
 		<meta name='author' content='Alberto García Sola' />
 	</head>
-	<body class='mx-auto mt-4 w-full max-w-screen-xl p-2'>
+	<body class='mx-auto mt-4 w-full max-w-screen-xl p-2 text-slate-700'>
 		<div class='mx-auto lg:w-1/2 xl:w-[40%] 2xl:w-1/3'>
 			<div class='flex flex-col gap-6'>
 				<div>
 					<Dashboard client:load />
 				</div>
-				<div>
-					<GoalSelector client:load />
-				</div>
 				<div>
 					<ExerciseMultiplier client:load />
 				</div>
 				<div>
-					<ChartMacros />
-				</div>
-				<div>
-					<LBMSelector client:load />
+					<GoalSelector client:load />
 				</div>
 				<div>
-					<BMRSelector client:load />
+					<ChartMacros />
 				</div>
+				<AdditionalSettings client:load />
 			</div>
+			<!-- <Development client:load /> -->
 		</div>
 	</body>
 </html>