diff --git a/src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx b/src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx index cdfa5102..9cade6a8 100644 --- a/src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx +++ b/src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx @@ -1,30 +1,35 @@ -import React, { useState } from 'react'; +import React, { ReactElement, useState } from 'react'; -import { FormSpy } from '@data-driven-forms/react-form-renderer'; -import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api'; -import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api'; import { FormGroup } from '@patternfly/react-core'; import { Select, SelectOption, SelectVariant, } from '@patternfly/react-core/deprecated'; -import PropTypes from 'prop-types'; -import { ARCHS } from '../../../constants'; +import { ARCHS } from '../../../../constants'; +import { useAppDispatch, useAppSelector } from '../../../../store/hooks'; +import { ImageRequest } from '../../../../store/imageBuilderApi'; +import { + changeArchitecture, + selectArchitecture, +} from '../../../../store/wizardSlice'; -const ArchSelect = ({ label, isRequired, ...props }) => { - const { change, getState } = useFormApi(); - const { input } = useFieldApi(props); +const ArchSelect = () => { + const arch = useAppSelector((state) => selectArchitecture(state)); + const dispatch = useAppDispatch(); const [isOpen, setIsOpen] = useState(false); - const setArch = (_, selection) => { - change(input.name, selection); + const setArch = ( + _event: React.MouseEvent, + selection: ImageRequest['architecture'] + ) => { + dispatch(changeArchitecture(selection)); setIsOpen(false); }; const setSelectOptions = () => { - var options = []; + const options: ReactElement[] = []; ARCHS.forEach((arch) => { options.push( @@ -37,28 +42,19 @@ const ArchSelect = ({ label, isRequired, ...props }) => { }; return ( - - {() => ( - - - - )} - + + + ); }; -ArchSelect.propTypes = { - label: PropTypes.node, - isRequired: PropTypes.bool, -}; - export default ArchSelect; diff --git a/src/Components/CreateImageWizardV2/steps/ImageOutput/index.tsx b/src/Components/CreateImageWizardV2/steps/ImageOutput/index.tsx index 18a4f3c8..472b9ae3 100644 --- a/src/Components/CreateImageWizardV2/steps/ImageOutput/index.tsx +++ b/src/Components/CreateImageWizardV2/steps/ImageOutput/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Text, Form, Title } from '@patternfly/react-core'; +import ArchSelect from './ArchSelect'; import ReleaseLifecycle from './ReleaseLifecycle'; import ReleaseSelect from './ReleaseSelect'; @@ -19,6 +20,7 @@ const ImageOutputStep = () => { + ); }; diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts index 00ac7170..128ef951 100644 --- a/src/store/wizardSlice.ts +++ b/src/store/wizardSlice.ts @@ -1,19 +1,25 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit'; -import { Distributions } from './imageBuilderApi'; +import { Distributions, ImageRequest } from './imageBuilderApi'; -import { RHEL_9 } from '../constants'; +import { RHEL_9, X86_64 } from '../constants'; import { RootState } from '.'; type wizardState = { + architecture: ImageRequest['architecture']; distribution: Distributions; }; const initialState: wizardState = { + architecture: X86_64, distribution: RHEL_9, }; +export const selectArchitecture = (state: RootState) => { + return state.wizard.architecture; +}; + export const selectDistribution = (state: RootState) => { return state.wizard.distribution; }; @@ -23,11 +29,18 @@ export const wizardSlice = createSlice({ initialState, reducers: { initializeWizard: () => initialState, + changeArchitecture: ( + state, + action: PayloadAction + ) => { + state.architecture = action.payload; + }, changeDistribution: (state, action: PayloadAction) => { state.distribution = action.payload; }, }, }); -export const { initializeWizard, changeDistribution } = wizardSlice.actions; +export const { initializeWizard, changeArchitecture, changeDistribution } = + wizardSlice.actions; export default wizardSlice.reducer;