Remove multmapping page and start merging it with pinMapping page

bsstephan · Apr 18, 2024 · 9d10afb · 9d10afb
1 parent 5f3fa47
commit 9d10afb
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 195 deletions.
diff --git a/www/src/App.jsx b/www/src/App.jsx
@@ -7,7 +7,6 @@ import Navigation from './Components/Navigation';
 
 import HomePage from './Pages/HomePage';
 import PinMappingPage from './Pages/PinMapping';
-import MultiMappingPage from './Pages/MultiMappingPage';
 import PeripheralMappingPage from './Pages/PeripheralMappingPage';
 import ResetSettingsPage from './Pages/ResetSettingsPage';
 import SettingsPage from './Pages/SettingsPage';
@@ -31,7 +30,6 @@ const App = () => {
 						<Route path="/" element={<HomePage />} />
 						<Route path="/settings" element={<SettingsPage />} />
 						<Route path="/pin-mapping" element={<PinMappingPage />} />
-						<Route path="/multi-mapping" element={<MultiMappingPage />} />
 						<Route
 							path="/peripheral-mapping"
 							element={<PeripheralMappingPage />}

diff --git a/www/src/Components/Navigation.jsx b/www/src/Components/Navigation.jsx
@@ -76,9 +76,6 @@ const Navigation = () => {
 						<NavDropdown.Item as={NavLink} to="/pin-mapping">
 							{t('Navigation:pin-mapping-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} to="/multi-mapping">
-							{t('Navigation:multi-mapping-label')}
-						</NavDropdown.Item>
 						<NavDropdown.Item as={NavLink} to="/peripheral-mapping">
 							{t('Navigation:peripheral-mapping-label')}
 						</NavDropdown.Item>

diff --git a/www/src/Data/Pins.ts b/www/src/Data/Pins.ts
@@ -1,6 +1,3 @@
-// Hide from select options / Disable select if returned from board
-export const NON_SELECTABLE_BUTTON_ACTIONS = [-5, 0, 32, 33];
-
 // These could theoretically be created from enums.proto
 export const BUTTON_ACTIONS = {
 	NONE: -10,
@@ -48,5 +45,14 @@ export const BUTTON_ACTIONS = {
 	CUSTOM_BUTTON_COMBO: 40,
 } as const;
 
+// Hide from select options / Disable select if returned from board
+export const NON_SELECTABLE_BUTTON_ACTIONS = [
+	BUTTON_ACTIONS.RESERVED,
+	BUTTON_ACTIONS.ASSIGNED_TO_ADDON,
+	BUTTON_ACTIONS.BUTTON_PRESS_TURBO,
+	BUTTON_ACTIONS.BUTTON_PRESS_MACRO,
+	BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
+] as const;
+
 type PinActionKeys = keyof typeof BUTTON_ACTIONS;
 export type PinActionValues = (typeof BUTTON_ACTIONS)[PinActionKeys];
diff --git a/www/src/Locales/en/Index.jsx b/www/src/Locales/en/Index.jsx
@@ -8,7 +8,6 @@ import DisplayConfig from './DisplayConfig';
 import HomePage from './HomePage';
 import InputMacroAddon from './InputMacroAddon';
 import LedConfig from './LedConfig';
-import MultiMapping from './MultiMapping';
 import Navigation from './Navigation';
 import PeripheralMapping from './PeripheralMapping';
 import PinMapping from './PinMapping';
@@ -28,7 +27,6 @@ export default {
 	HomePage,
 	InputMacroAddon,
 	LedConfig,
-	MultiMapping,
 	Navigation,
 	PeripheralMapping,
 	PinMapping,

diff --git a/www/src/Locales/en/MultiMapping.jsx b/www/src/Locales/en/MultiMapping.jsx
diff --git a/www/src/Pages/MultiMappingPage.tsx b/www/src/Pages/MultiMappingPage.tsx
@@ -5,7 +5,6 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
-import Select from 'react-select';
 import { Alert, Button, Form, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import zip from 'lodash/zip';
@@ -15,14 +14,14 @@ import { AppContext } from '../Contexts/AppContext';
 import Section from '../Components/Section';
 
 import { BUTTON_MASKS, DPAD_MASKS, getButtonLabels } from '../Data/Buttons';
-import useMultiPinStore, { MaskPayload } from '../Store/useMultiPinStore';
-import usePinStore from '../Store/usePinStore';
+import usePinStore, { MaskPayload } from '../Store/usePinStore';
 import {
 	NON_SELECTABLE_BUTTON_ACTIONS,
 	BUTTON_ACTIONS,
 	PinActionValues,
 } from '../Data/Pins';
 import invert from 'lodash/invert';
+import CustomSelect from '../Components/CustomSelect';
 
 const isNonSelectable = (value: PinActionValues) =>
 	NON_SELECTABLE_BUTTON_ACTIONS.filter(
@@ -87,7 +86,7 @@ export default function MultiMappingPage() {
 				>
 					<label htmlFor={pin}>{pin.toUpperCase()}</label>
 				</div>
-				<Select
+				<CustomSelect
 					inputId={pin}
 					className="text-primary flex-grow-1"
 					isClearable
@@ -140,11 +139,7 @@ export default function MultiMappingPage() {
 		<>
 			<Section title={t('MultiMapping:header-text')}>
 				<Row className="mb-3">
-					<p>
-						{t(
-							'MultiMapping:profile-limitation',
-						)}
-					</p>
+					<p>{t('MultiMapping:profile-limitation')}</p>
 				</Row>
 				<Form onSubmit={handleSubmit}>
 					<div className="gx-3">

diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
@@ -13,26 +13,38 @@ import omit from 'lodash/omit';
 import zip from 'lodash/zip';
 
 import { AppContext } from '../Contexts/AppContext';
-import usePinStore from '../Store/usePinStore';
+import usePinStore, { MaskPayload, setPinType } from '../Store/usePinStore';
 import useProfilesStore from '../Store/useProfilesStore';
-import useMultiPinStore from '../Store/useMultiPinStore';
 
 import Section from '../Components/Section';
 import CustomSelect from '../Components/CustomSelect';
 import CaptureButton from '../Components/CaptureButton';
 
-import { getButtonLabels } from '../Data/Buttons';
+import {
+	BUTTON_MASKS,
+	BUTTON_MASKS_OPTIONS,
+	DPAD_MASKS,
+	getButtonLabels,
+} from '../Data/Buttons';
 import {
 	BUTTON_ACTIONS,
 	NON_SELECTABLE_BUTTON_ACTIONS,
 	PinActionValues,
 } from '../Data/Pins';
 
-type PinCell = [string, PinActionValues];
+type PinCell = [string, MaskPayload];
 type PinRow = [PinCell, PinCell];
 type PinList = [PinRow];
 
-const isNonSelectable = (value: PinActionValues) =>
+const MASK_OPTIONS = [
+	...BUTTON_MASKS.map((mask) => ({ ...mask, type: 'customButtonMask' })),
+	...DPAD_MASKS.map((mask) => ({ ...mask, type: 'customDpadMask' })),
+];
+
+const getButtonKeyByValue = (value: PinActionValues) =>
+	invert(BUTTON_ACTIONS)[value];
+
+const isNonSelectable = (value) =>
 	NON_SELECTABLE_BUTTON_ACTIONS.includes(value);
 
 const options = Object.entries(BUTTON_ACTIONS)
@@ -42,19 +54,19 @@ const options = Object.entries(BUTTON_ACTIONS)
 		value,
 	}));
 
-const getOption = (actionId) => ({
-	label: invert(BUTTON_ACTIONS)[actionId],
-	value: actionId,
+const getValue = (pin) => ({
+	label: getButtonKeyByValue(pin.action),
+	value: pin,
 });
 
 type PinsFormTypes = {
 	savePins: () => void;
-	pins: { [key: string]: PinActionValues };
-	setPinAction: (pin: string, action: PinActionValues) => void;
+	pins: { [key: string]: MaskPayload };
+	setPin: setPinType;
 	onCopy?: () => void;
 };
 
-const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
+const PinsForm = ({ savePins, pins, setPin, onCopy }: PinsFormTypes) => {
 	const { buttonLabels, updateUsedPins } = useContext(AppContext);
 	const [saveMessage, setSaveMessage] = useState('');
 
@@ -84,7 +96,7 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 	}, [pins]);
 
 	const createCell = useCallback(
-		([pin, pinAction]: PinCell) => (
+		([pin, pinData]: PinCell) => (
 			<div className="d-flex col py-2">
 				<div className="d-flex align-items-center" style={{ width: '4rem' }}>
 					<label htmlFor={pin}>{pin.toUpperCase()}</label>
@@ -94,8 +106,8 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 					isClearable
 					isSearchable
 					options={options}
-					value={getOption(pinAction)}
-					isDisabled={isNonSelectable(pinAction)}
+					value={getValue(pinData)}
+					isDisabled={isNonSelectable(pinData.action)}
 					getOptionLabel={(option) => {
 						const labelKey = option.label.split('BUTTON_PRESS_').pop();
 						// Need to fallback as some button actions are not part of button names
@@ -104,12 +116,43 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 							t(`PinMapping:actions.${option.label}`)
 						);
 					}}
-					onChange={(change) =>
-						setPinAction(
-							pin,
-							change?.value === undefined ? -10 : change.value, // On clear set to -10
+					// onChange={(change) =>
+					// 	setPin(
+					// 		pin,
+					// 		change?.value === undefined ? -10 : change.value, // On clear set to -10
+					// 	)
+					// }
+					isMulti={
+						pinData.action === BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO ||
+						MASK_OPTIONS.some(
+							({ label }) =>
+								label.toUpperCase() ===
+								getButtonKeyByValue(pinData.action)
+									.split('BUTTON_PRESS_')
+									.pop(),
 						)
 					}
+					onChange={
+						(selected) => {
+							console.log('selected', selected);
+						}
+						// setPin(
+						// 	pin,
+						// 	selected.reduce(
+						// 		(masks, option) => ({
+						// 			customButtonMask:
+						// 				option.type === 'customButtonMask'
+						// 					? masks.customButtonMask ^ option.value
+						// 					: masks.customButtonMask,
+						// 			customDpadMask:
+						// 				option.type === 'customDpadMask'
+						// 					? masks.customDpadMask ^ option.value
+						// 					: masks.customDpadMask,
+						// 		}),
+						// 		{ customButtonMask: 0, customDpadMask: 0 },
+						// 	),
+						// )
+					}
 				/>
 			</div>
 		),
@@ -123,7 +166,7 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 					<CaptureButton
 						labels={Object.values(buttonNames)}
 						onChange={(label, pin) =>
-							setPinAction(
+							setPin(
 								// Convert getHeldPins format to setPinMappings format
 								parseInt(pin) < 10 ? `pin0${pin}` : `pin${pin}`,
 								// Maps current mode buttons to actions
@@ -159,8 +202,7 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 };
 
 export default function PinMappingPage() {
-	const { fetchPins, pins, savePins, setPinAction } = usePinStore();
-	const { fetchPins: fetchMultiPins } = useMultiPinStore();
+	const { fetchPins, pins, savePins, setPin } = usePinStore();
 	const {
 		fetchProfiles,
 		profiles,
@@ -181,8 +223,7 @@ export default function PinMappingPage() {
 	const saveAll = useCallback(() => {
 		savePins();
 		saveProfiles();
-		fetchMultiPins();
-	}, [savePins, saveProfiles, fetchMultiPins]);
+	}, [savePins, saveProfiles]);
 
 	return (
 		<>
@@ -214,13 +255,9 @@ export default function PinMappingPage() {
 
 				<Tabs id="profiles">
 					<Tab eventKey="Base" title="Base(Profile 1)">
-						<PinsForm
-							pins={pins}
-							savePins={saveAll}
-							setPinAction={setPinAction}
-						/>
+						<PinsForm pins={pins} savePins={saveAll} setPin={setPin} />
 					</Tab>
-					{profiles.map((profilePins, profileIndex) => (
+					{/* {profiles.map((profilePins, profileIndex) => (
 						<Tab
 							key={`Profile${profileIndex + 2}`}
 							eventKey={`Profile${profileIndex + 2}`}
@@ -229,15 +266,15 @@ export default function PinMappingPage() {
 							<PinsForm
 								pins={profilePins}
 								savePins={saveAll}
-								setPinAction={(pin, action) => {
+								setPin={(pin, action) => {
 									setProfileAction(profileIndex, pin, action);
 								}}
 								onCopy={() => {
 									setProfile(profileIndex, pins);
 								}}
 							/>
 						</Tab>
-					))}
+					))} */}
 				</Tabs>
 			</Section>
 		</>