Minor Fixes / Tweaks

OpenEnergyDashboard · Feb 8, 2024 · cc252d2 · cc252d2
1 parent 053c865
commit cc252d2
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 148 deletions.
diff --git a/src/client/app/components/MeterAndGroupSelectComponent.tsx b/src/client/app/components/MeterAndGroupSelectComponent.tsx
@@ -13,7 +13,7 @@ import ReactTooltip from 'react-tooltip';
 import { Badge } from 'reactstrap';
 import { graphSlice } from '../redux/slices/graphSlice';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
-import { selectAnythingLoading, selectMeterGroupSelectData } from '../redux/selectors/uiSelectors';
+import { selectAnythingFetching, selectMeterGroupSelectData } from '../redux/selectors/uiSelectors';
 import { GroupedOption, SelectOption } from '../types/items';
 import { MeterOrGroup } from '../types/redux/graph';
 import translate from '../utils/translate';
@@ -28,7 +28,7 @@ import TooltipMarkerComponent from './TooltipMarkerComponent';
 export default function MeterAndGroupSelectComponent(props: MeterAndGroupSelectProps) {
 	const dispatch = useAppDispatch();
 	const { meterGroupedOptions, groupsGroupedOptions, allSelectedMeterValues, allSelectedGroupValues } = useAppSelector(selectMeterGroupSelectData);
-	const somethingIsFetching = useAppSelector(selectAnythingLoading)
+	const somethingIsFetching = useAppSelector(selectAnythingFetching)
 	const { meterOrGroup } = props;
 	// Set the current component's appropriate meter or group update from the graphSlice's Payload-Action Creator
 

diff --git a/src/client/app/components/admin/CreateUserComponent.tsx b/src/client/app/components/admin/CreateUserComponent.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Button, Input } from 'reactstrap';
+import { Alert, Button, Input } from 'reactstrap';
 import { userApi } from '../../redux/api/userApi';
 import { NewUser, UserRole } from '../../types/items';
 import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
@@ -20,23 +20,29 @@ export default function CreateUserComponent() {
 	const [email, setEmail] = React.useState<string>('');
 	const [password, setPassword] = React.useState<string>('');
 	const [confirmPassword, setConfirmPassword] = React.useState<string>('');
+	const [passwordMatch, setPasswordMatch] = React.useState<boolean>(true);
 	const [role, setRole] = React.useState<UserRole>(UserRole.ADMIN);
 	const [createUser] = userApi.useCreateUserMutation();
 	const nav = useNavigate()
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
-		const newUser: NewUser = { email, role, password }
-		createUser(newUser)
-			.unwrap()
-			.then(() => {
-				showSuccessNotification(translate('users.successfully.create.user'))
-				nav('/users')
+		if (password == confirmPassword) {
+			setPasswordMatch(true)
+			const newUser: NewUser = { email, role, password }
+			createUser(newUser)
+				.unwrap()
+				.then(() => {
+					showSuccessNotification(translate('users.successfully.create.user'))
+					nav('/users')
 
-			})
-			.catch(() => {
-				showErrorNotification(translate('users.failed.to.create.user'));
-			})
+				})
+				.catch(() => {
+					showErrorNotification(translate('users.failed.to.create.user'));
+				})
+		} else {
+			setPasswordMatch(false)
+		}
 
 	}
 	return (
@@ -49,6 +55,7 @@ export default function CreateUserComponent() {
 							<label> <FormattedMessage id='email' /> </label><br />
 							<Input type='email' onChange={({ target }) => setEmail(target.value)} required value={email} />
 						</div>
+						{!passwordMatch && <Alert color='danger'>Error: Passwords Do Not Match</Alert>}
 						<div style={formInputStyle}>
 							<label> <FormattedMessage id='password' /> </label><br />
 							<Input type='password' onChange={({ target }) => setPassword(target.value)} required value={password} />

diff --git a/src/client/app/components/admin/UsersDetailComponent.tsx b/src/client/app/components/admin/UsersDetailComponent.tsx
@@ -15,13 +15,14 @@ import TooltipMarkerComponent from '../TooltipMarkerComponent';
 import { UnsavedWarningComponent } from '../UnsavedWarningComponent';
 import CreateUserLinkButtonComponent from './users/CreateUserLinkButtonComponent';
 
-
+// Provide a stable empty reference for when data is in flight
+const stableEmptyUsers: User[] = []
 /**
  * Component which shows user details
  * @returns User Detail element
  */
 export default function UserDetailComponent() {
-	const { data: users = [] } = userApi.useGetUsersQuery(undefined);
+	const { data: users = stableEmptyUsers } = userApi.useGetUsersQuery(undefined);
 	const [submitUserEdits] = userApi.useEditUsersMutation();
 	const [submitDeleteUser] = userApi.useDeleteUsersMutation();
 	const [localUsersChanges, setLocalUsersChanges] = React.useState<User[]>([]);

diff --git a/src/client/app/components/conversion/ConversionsDetailComponent.tsx b/src/client/app/components/conversion/ConversionsDetailComponent.tsx
@@ -75,14 +75,14 @@ export default function ConversionsDetailComponent() {
 							{
 								Object.values(conversionsState)
 									.sort((conversionA: ConversionData, conversionB: ConversionData) =>
-										((unitDataById[conversionA.sourceId].identifier + unitDataById[conversionA.destinationId].identifier).toLowerCase() >
-											(unitDataById[conversionB.sourceId].identifier + unitDataById[conversionB.destinationId].identifier).toLowerCase()) ? 1 :
-											(((unitDataById[conversionB.sourceId].identifier + unitDataById[conversionB.destinationId].identifier).toLowerCase() >
-												(unitDataById[conversionA.sourceId].identifier + unitDataById[conversionA.destinationId].identifier).toLowerCase()) ? -1 : 0))
+										((unitDataById[conversionA.sourceId]?.identifier + unitDataById[conversionA.destinationId]?.identifier).toLowerCase() >
+											(unitDataById[conversionB.sourceId]?.identifier + unitDataById[conversionB.destinationId]?.identifier).toLowerCase()) ? 1 :
+											(((unitDataById[conversionB.sourceId]?.identifier + unitDataById[conversionB.destinationId]?.identifier).toLowerCase() >
+												(unitDataById[conversionA.sourceId]?.identifier + unitDataById[conversionA.destinationId]?.identifier).toLowerCase()) ? -1 : 0))
 									.map(conversionData => (
 										<ConversionViewComponent
 											conversion={conversionData}
-											key={conversionData.sourceId + '>' + conversionData.destinationId}
+											key={conversionData?.sourceId + '>' + conversionData?.destinationId}
 										/>
 									))}
 						</div>

diff --git a/src/client/app/components/meters/CreateMeterModalComponent.tsx b/src/client/app/components/meters/CreateMeterModalComponent.tsx
@@ -9,7 +9,7 @@ import { FormattedMessage } from 'react-intl';
 import { Button, Col, Container, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
 import { metersApi } from '../../redux/api/metersApi';
 import { useAppSelector } from '../../redux/reduxHooks';
-import { makeSelectGraphicUnitCompatibility, selectDefaultCreateMeterValues } from '../../redux/selectors/adminSelectors';
+import { selectDefaultCreateMeterValues, selectGraphicUnitCompatibility } from '../../redux/selectors/adminSelectors';
 import '../../styles/modal.css';
 import { tooltipBaseStyle } from '../../styles/modalStyle';
 import { TrueFalseType } from '../../types/items';
@@ -30,7 +30,6 @@ export default function CreateMeterModalComponent() {
 
 	const [addMeter] = metersApi.endpoints.addMeter.useMutation();
 	// Memo'd memoized selector
-	const selectGraphicUnitCompatibility = React.useMemo(makeSelectGraphicUnitCompatibility, []);
 	const defaultValues = useAppSelector(selectDefaultCreateMeterValues);
 
 	/* State */

diff --git a/src/client/app/components/meters/EditMeterModalComponent.tsx b/src/client/app/components/meters/EditMeterModalComponent.tsx
@@ -11,7 +11,7 @@ import { Button, Col, Container, FormFeedback, FormGroup, Input, Label, Modal, M
 import { metersApi, selectMeterById } from '../../redux/api/metersApi';
 import { selectUnitDataById } from '../../redux/api/unitsApi';
 import { useAppSelector } from '../../redux/reduxHooks';
-import { makeSelectGraphicUnitCompatibility } from '../../redux/selectors/adminSelectors';
+import { selectGraphicUnitCompatibility } from '../../redux/selectors/adminSelectors';
 import '../../styles/modal.css';
 import { tooltipBaseStyle } from '../../styles/modalStyle';
 import { TrueFalseType } from '../../types/items';
@@ -41,7 +41,6 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 	const [editMeter] = metersApi.useEditMeterMutation();
 	// since this selector is shared amongst many other modals, we must use a selector factory in order
 	// to have a single selector per modal instance. Memo ensures that this is a stable reference
-	const selectGraphicUnitCompatibility = React.useMemo(makeSelectGraphicUnitCompatibility, []);
 	// The current meter's state of meter being edited. It should always be valid.
 	const meterState = useAppSelector(state => selectMeterById(state, props.meter.id));
 	const [localMeterEdits, setLocalMeterEdits] = useState(_.cloneDeep(meterState));