How to convert this into a class based component - reactjs

Question

I have tried and I keep running into react 302 errors with multiple instances of react and issues with state. I am still learning react and I always get stuck when it comes to class and function components. I am trying to convert this into a class based component since that is what I am familiar with using and need to integrate into another class based component.
const { useState, useEffect, } = React;
const { useSelector } = ReactRedux;
import { React, AllWidgetProps, getAppStore, appActions, ReactRedux, WidgetProps, WidgetManager, IMState } from 'jimu-core';
import { Button, Label, Row, Col, Select, Option } from 'jimu-ui';
import defaultMessages from './translations/default';
/**
* This widget will show how to control widget state for a collapsible sidebar widget and a widget within the widget controller widget.
*/
export default function Widget(props: AllWidgetProps<{}>) {
// Establish state properties, initial values and their corresponding set state actions
const [sidebarWidgetId, setSidebarWidgetId] = useState(null as string);
const [openCloseWidgetId, setOpenCloseWidgetId] = useState(null as string);
const [sidebarVisible] = useState(true as boolean);
const [openness, setOpenness] = useState(false as boolean);
const [appWidgets, setAppWidgets] = useState({} as Object);
const [widgetsArray, setWidgetsArray] = useState([] as Array<any>);
const [sidebarWidgetsArray, setSidebarWidgetsArray] = useState([] as Array<any>);
// Get the widget state - because the sidebar state may change in the runtime, via Redux's useSelector hook
const widgetState = useSelector((state: IMState) => {
const widgetState = state.widgetsState[sidebarWidgetId];
return widgetState;
});
// Update the appWidgets property once, on page load
useEffect(() => {
const widgets = getAppStore().getState().appConfig.widgets;
setAppWidgets(widgets);
}, []);
// Update the widgetsArray and sidebarWidgetsArray properties every time appWidgets changes
useEffect(() => {
if (appWidgets) {
const widgetsArray = Object.values(appWidgets);
setWidgetsArray(widgetsArray);
setSidebarWidgetsArray(widgetsArray.filter(w => w.uri === 'widgets/layout/sidebar/'));
}
}, [appWidgets]);
// Toggle the sidebar widget
const handleToggleSidebar = (): void => {
// If widget state's collapse property is true, collapse
if (widgetState && widgetState.collapse === true) {
getAppStore().dispatch(appActions.widgetStatePropChange(
sidebarWidgetId,
'collapse',
!sidebarVisible
));
}
// If widget state's collapse property is false, expand
else if (widgetState && widgetState.collapse === false) {
getAppStore().dispatch(appActions.widgetStatePropChange(
sidebarWidgetId,
'collapse',
sidebarVisible
));
}
else {
alert(
defaultMessages.sidebarAlert
)
}
};
// Load the widget class prior to executing the open/close actions
const loadWidgetClass = (widgetId: string): Promise<React.ComponentType<WidgetProps>> => {
if (!widgetId) return;
const isClassLoaded = getAppStore().getState().widgetsRuntimeInfo?.[widgetId]?.isClassLoaded;
if (!isClassLoaded) {
return WidgetManager.getInstance().loadWidgetClass(widgetId);
} else {
return Promise.resolve(WidgetManager.getInstance().getWidgetClass(widgetId));
}
};
// Open widget method
const handleOpenWidget = (): void => {
// Construct the open action, then run the loadWidgetClass method, dipatch the open action
// and, finally, set the openness to true
const openAction = appActions.openWidget(openCloseWidgetId);
loadWidgetClass(openCloseWidgetId).then(() => {
getAppStore().dispatch(openAction);
}).then(() => { setOpenness(true) });
};
// Close widget method
const handleCloseWidget = (): void => {
// Construct the close action, then run the loadWidgetClass function, dipatch the close action
// and, finally, set the openness to false
const closeAction = appActions.closeWidget(openCloseWidgetId);
loadWidgetClass(openCloseWidgetId).then(() => {
getAppStore().dispatch(closeAction);
}).then(() => { setOpenness(false) });
};
// Handler for the openness toggle button
const handleToggleOpennessButton = (): void => {
// Check the openness property value and run the appropriate function
if (openness === false) { handleOpenWidget(); }
else if (openness === true) { handleCloseWidget(); }
else { console.error(defaultMessages.opennessError) }
};
// Handler for the sidebar selection
const handleSidebarSelect = evt => {
setSidebarWidgetId(evt.currentTarget.value);
};
// Handler for the open/close selection
const handleOpenCloseSelect = evt => {
setOpenCloseWidgetId(evt.currentTarget.value);
};
return (
<div className='widget-control-the-widget-state jimu-widget m-2' style={{ width: '100%', height: '100%', maxHeight: '800px', padding: '0.5em' }}>
<h6
title={defaultMessages.title}
>
{defaultMessages.title}
</h6>
{sidebarWidgetsArray && sidebarWidgetsArray.length > 0 &&
<Row className='p-2 justify-content-between align-items-center'>
<Col className='col-sm-6'>
<Label
title={defaultMessages.sidebarLabel}
>
{defaultMessages.sidebarLabel}
</Label>
<Select
defaultValue=''
onChange={handleSidebarSelect}
placeholder={defaultMessages.sidebarPlaceholder}
title={defaultMessages.sidebarPlaceholder}
>
{/* Use the sidebarWidgetsArray to populate the select's options */}
{
sidebarWidgetsArray.map((w) => <Option
value={w.id}
>
{w.label}
</Option>)
}
</Select>
</Col>
{sidebarWidgetId &&
<Col className='col-sm-6'>
<Button
onClick={handleToggleSidebar}
htmlType='submit'
type='primary'
title={defaultMessages.sidebarButtonLabel}
>
{defaultMessages.sidebarButtonLabel}
</Button>
</Col>
}
</Row>
}
{widgetsArray && widgetsArray.length > 0 &&
<Row className='p-2 justify-content-between align-items-center'>
<Col className='col-sm-6'>
<Label
title={defaultMessages.widgetControllerWidgetLabel}
>
{defaultMessages.widgetControllerWidgetLabel}
</Label>
<Select
defaultValue=''
onChange={handleOpenCloseSelect}
placeholder={defaultMessages.widgetControllerWidgetPlaceholder}
title={defaultMessages.widgetControllerWidgetPlaceholder}
>
{/* Use the widgetsArray to populate the select's options */}
{
widgetsArray.map((w) => (
<Option
value={w.id}
>
{w.label}
</Option>
))
}
</Select>
</Col>
{openCloseWidgetId &&
<Col className='col-sm-6'>
<Button
onClick={handleToggleOpennessButton}
htmlType='submit'
type='primary'
title={defaultMessages.widgetControllerWidgetButton}
>
{defaultMessages.widgetControllerWidgetButton}
</Button>
</Col>
}
</Row>
}
</div>
);
};