formatted imports and file, fixed tooltip headings, fixed menu items …

…grayed out if on that page

src/client/app/components/HeaderButtonsComponent.tsx

@@ -57,7 +57,8 @@ export default function HeaderButtonsComponent() {
  shouldGroupsButtonDisabled: true,
  shouldMetersButtonDisabled: true,
  shouldMapsButtonDisabled: true,
- shouldCSVButtonDisabled: true,
+ shouldCSVMetersButtonDisabled: true,
+ shouldCSVReadingsButtonDisabled: true,
  shouldUnitsButtonDisabled: true,
  shouldConversionsButtonDisabled: true,
  // Translated menu title that depend on whether logged in.
@@ -91,7 +92,8 @@ export default function HeaderButtonsComponent() {
  shouldGroupsButtonDisabled: pathname === '/groups',
  shouldMetersButtonDisabled: pathname === '/meters',
  shouldMapsButtonDisabled: pathname === '/maps',
- shouldCSVButtonDisabled: pathname === '/csv',
+ shouldCSVMetersButtonDisabled: pathname === '/csvMeters',
+ shouldCSVReadingsButtonDisabled: pathname === '/csvReadings',
  shouldUnitsButtonDisabled: pathname === '/units',
  shouldConversionsButtonDisabled: pathname === '/conversions'
  }));
@@ -172,14 +174,14 @@ export default function HeaderButtonsComponent() {
  </DropdownItem>
  <DropdownItem
  style={state.csvViewableLinkStyle}
- disabled={state.shouldCSVButtonDisabled}
+ disabled={state.shouldCSVMetersButtonDisabled}
  tag={Link}
  to="/csvMeters">
  <FormattedMessage id='csvMeters' />
  </DropdownItem>
  <DropdownItem
  style={state.csvViewableLinkStyle}
- disabled={state.shouldCSVButtonDisabled}
+ disabled={state.shouldCSVReadingsButtonDisabled}
  tag={Link}
  to="/csvReadings">
  <FormattedMessage id='csvReadings' />

src/client/app/components/csv/MetersCSVUploadComponent.tsx

@@ -4,15 +4,15 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import TooltipHelpComponent from '../TooltipHelpComponent';
-import TooltipMarkerComponent from '../TooltipMarkerComponent';
+import { useDispatch } from 'react-redux';
 import { Button, Col, Container, Form, FormGroup, Input, Label, Row } from 'reactstrap';
-import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
-import FormFileUploaderComponent from '../FormFileUploaderComponent';
 import { baseApi } from '../../redux/api/baseApi';
-import { useDispatch } from 'react-redux';
 import { uploadCSVApi } from '../../utils/api';
+import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
 import translate from '../../utils/translate';
+import FormFileUploaderComponent from '../FormFileUploaderComponent';
+import TooltipHelpComponent from '../TooltipHelpComponent';
+import TooltipMarkerComponent from '../TooltipMarkerComponent';
 
 interface MetersCSVUploadComponentProps {}
 
@@ -75,20 +75,19 @@ const MetersCSVUploadComponent: React.FC<MetersCSVUploadComponentProps> = () =>
  };
 
  const checkBox = {
- display: 'flex',
- alignItems: 'center'
+ display: 'flex'
  };
 
  return (
- <Container style={{ minHeight: '100vh' }}>
- <TooltipHelpComponent page='help.csv.header' />
+ <Container>
+ <TooltipHelpComponent page='help.csv.meters' />
  <Form onSubmit={handleSubmit}>
- <Row className="justify-content-center">
+ <Row className="justify-content-md-center">
  <Col md='auto'>
  <h2>
  {translate('csv.upload.meters')}
  <div style={tooltipStyle}>
- <TooltipMarkerComponent page='help.csv.header' helpTextId={tooltipStyle.tooltipReadings} />
+ <TooltipMarkerComponent page='help.csv.meters' helpTextId={tooltipStyle.tooltipReadings} />
  </div>
  </h2>
  </Col>

src/client/app/components/csv/ReadingsCSVUploadComponent.tsx

@@ -4,20 +4,20 @@
 
 import * as React from 'react';
 import { Button, Col, Container, Form, FormGroup, Input, Label, Row } from 'reactstrap';
-import TooltipHelpComponent from '../TooltipHelpComponent';
-import TooltipMarkerComponent from '../TooltipMarkerComponent';
-import { BooleanMeterTypes, TimeSortTypes, ReadingsCSVUploadPreferencesItem } from '../../types/csvUploadForm';
+import { authApi, authPollInterval } from '../../redux/api/authApi';
+import { useAppSelector } from '../../redux/reduxHooks';
+import { selectVisibleMeterAndGroupData } from '../../redux/selectors/adminSelectors';
+import { selectIsAdmin } from '../../redux/slices/currentUserSlice';
+import { BooleanMeterTypes, ReadingsCSVUploadPreferencesItem, TimeSortTypes } from '../../types/csvUploadForm';
+import { MeterData } from '../../types/redux/meters';
+import { uploadCSVApi } from '../../utils/api';
 import { ReadingsCSVUploadDefaults } from '../../utils/csvUploadDefaults';
 import { showErrorNotification, showInfoNotification } from '../../utils/notifications';
 import translate from '../../utils/translate';
 import FormFileUploaderComponent from '../FormFileUploaderComponent';
-import { uploadCSVApi } from '../../utils/api';
+import TooltipHelpComponent from '../TooltipHelpComponent';
+import TooltipMarkerComponent from '../TooltipMarkerComponent';
 import CreateMeterModalComponent from '../meters/CreateMeterModalComponent';
-import { useAppSelector } from '../../redux/reduxHooks';
-import { authApi, authPollInterval } from '../../redux/api/authApi';
-import { selectIsAdmin } from '../../redux/slices/currentUserSlice';
-import { selectVisibleMeterAndGroupData } from '../../redux/selectors/adminSelectors';
-import { MeterData } from '../../types/redux/meters';
 
 /**
  * Returns a range of values between the specified lower and upper bounds.
@@ -34,7 +34,7 @@ function range(lower: number, upper: number): number[] {
 }
 
 /**
- * Defines the CSV Readings page card view
+ * Defines the CSV Readings page
  * @returns CSV Readings page element
  */
 export default function ReadingsCSVUploadComponent() {
@@ -66,7 +66,7 @@ export default function ReadingsCSVUploadComponent() {
  setSelectedMeter(createdMeter);
  }
  }
- }, [createdMeterIdentifier,visibleMeters]);
+ }, [createdMeterIdentifier, visibleMeters]);
 
  const handleFileChange = (file: File | null) => {
  setSelectedFile(file);
@@ -82,7 +82,7 @@ export default function ReadingsCSVUploadComponent() {
  }));
  };
 
- const handleChange = (e:React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const { name, value } = e.target;
  setReadingsData(prevState => ({
  ...prevState,
@@ -147,14 +147,14 @@ export default function ReadingsCSVUploadComponent() {
 
  return (
  <Container>
- <TooltipHelpComponent page='help.csv.header' />
+ <TooltipHelpComponent page='help.csv.readings' />
  <Form onSubmit={handleSubmit}>
  <Row className="justify-content-md-center">
  <Col md='auto'>
  <h2>
  {translate('csv.upload.readings')}
  <div style={tooltipStyle}>
- <TooltipMarkerComponent page='help.csv.header' helpTextId={tooltipStyle.tooltipReadings} />
+ <TooltipMarkerComponent page='help.csv.readings' helpTextId={tooltipStyle.tooltipReadings} />
  </div>
  </h2>
  </Col>
@@ -178,7 +178,7 @@ export default function ReadingsCSVUploadComponent() {
  </Input>
  </Label>
  <br />
- <CreateMeterModalComponent onCreateMeter={handleCreateMeter}/>
+ <CreateMeterModalComponent onCreateMeter={handleCreateMeter} />
  <br /><br />
  <FormGroup>
  <Label for='timeSort'>