Standardize Translation Method

src/client/app/components/AreaUnitSelectComponent.tsx

@@ -11,16 +11,16 @@ import { selectUnitDataById } from '../redux/api/unitsApi';
 import { StringSelectOption } from '../types/items';
 import { UnitRepresentType } from '../types/redux/units';
 import { AreaUnitType } from '../utils/getAreaUnitConversion';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React Component that creates the area unit selector dropdown
  * @returns Area unit select element
  */
 export default function AreaUnitSelectComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
-
 	const graphState = useAppSelector(selectGraphState);
 	const unitDataById = useAppSelector(selectUnitDataById);
 

src/client/app/components/BarChartComponent.tsx

@@ -17,7 +17,7 @@ import { selectBarUnitLabel, selectIsRaw } from '../redux/selectors/plotlyDataSe
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import { selectBarStacking } from '../redux/slices/graphSlice';
 import Locales from '../types/locales';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 
 /**
@@ -27,6 +27,7 @@ import SpinnerComponent from './SpinnerComponent';
  * @returns Plotly BarChart
  */
 export default function BarChartComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const { barMeterDeps, barGroupDeps } = useAppSelector(selectPlotlyBarDeps);
 	const { meterArgs, groupArgs, meterShouldSkip, groupShouldSkip } = useAppSelector(selectBarChartQueryArgs);

src/client/app/components/BarControlsComponent.tsx

@@ -5,14 +5,15 @@
 import * as React from 'react';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { graphSlice, selectBarStacking } from '../redux/slices/graphSlice';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import IntervalControlsComponent from './IntervalControlsComponent';
 
 /**
  * @returns controls for bar page.
  */
 export default function BarControlsComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 
 	const barStacking = useAppSelector(selectBarStacking);

src/client/app/components/ChartLinkComponent.tsx

@@ -11,13 +11,14 @@ import { selectChartLink } from '../redux/selectors/uiSelectors';
 import { selectChartLinkHideOptions, setChartLinkOptionsVisibility } from '../redux/slices/appStateSlice';
 import { selectSelectedGroups, selectSelectedMeters } from '../redux/slices/graphSlice';
 import { showErrorNotification, showInfoNotification } from '../utils/notifications';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * @returns chartLinkComponent
  */
 export default function ChartLinkComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const [linkTextVisible, setLinkTextVisible] = React.useState<boolean>(false);
 	const linkText = useAppSelector(selectChartLink);

src/client/app/components/ChartSelectComponent.tsx

@@ -13,14 +13,15 @@ import { graphSlice, selectChartToRender } from '../redux/slices/graphSlice';
 import { SelectOption } from '../types/items';
 import { ChartTypes } from '../types/redux/graph';
 import { State } from '../types/redux/state';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  *  A component that allows users to select which chart should be displayed.
  * @returns Chart select element
  */
 export default function ChartSelectComponent() {
+	const translate = useTranslate();
 	const currentChartToRender = useAppSelector(selectChartToRender);
 	const dispatch = useAppDispatch();
 	const [expand, setExpand] = useState(false);

src/client/app/components/CompareControlsComponent.tsx

@@ -7,14 +7,15 @@ import { Input } from 'reactstrap';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { graphSlice, selectSortingOrder } from '../redux/slices/graphSlice';
 import { SortingOrder } from '../utils/calculateCompare';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import IntervalControlsComponent from './IntervalControlsComponent';
 
 /**
  * @returns controls for compare page.
  */
 export default function CompareControlsComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 
 	// This is the current sorting order for graphic

src/client/app/components/ConfirmActionModalComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import '../styles/modal.css';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 
 interface ConfirmActionModalComponentProps {
@@ -41,7 +41,7 @@ interface ConfirmActionModalComponentProps {
  * @returns A modal component that executes the actionFunction on confirmation and handleClose on rejection.
  */
 export default function ConfirmActionModalComponent(props: ConfirmActionModalComponentProps) {
-
+	const translate = useTranslate();
 	const handleClose = () => {
 		props.handleClose();
 	};

src/client/app/components/DateRangeComponent.tsx

@@ -13,7 +13,7 @@ import { changeSliderRange, selectQueryTimeInterval, updateTimeInterval, selectC
 import '../styles/DateRangeCustom.css';
 import { Dispatch } from '../types/redux/actions';
 import { dateRangeToTimeInterval, timeIntervalToDateRange } from '../utils/dateRangeCompatibility';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import { ChartTypes } from '../types/redux/graph';
 
@@ -22,6 +22,7 @@ import { ChartTypes } from '../types/redux/graph';
  * @returns Date Range Calendar Picker
  */
 export default function DateRangeComponent() {
+	const translate = useTranslate();
 	const dispatch: Dispatch = useAppDispatch();
 	const queryTimeInterval = useAppSelector(selectQueryTimeInterval);
 	const locale = useAppSelector(selectSelectedLanguage);

src/client/app/components/ErrorBarComponent.tsx

@@ -5,14 +5,15 @@
 import * as React from 'react';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { graphSlice, selectShowMinMax } from '../redux/slices/graphSlice';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React Component rendering an Error Bar checkbox for toggle operation.
  * @returns Error Bar checkbox with tooltip and label
  */
 export default function ErrorBarComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const showMinMax = useAppSelector(selectShowMinMax);
 

src/client/app/components/FormFileUploaderComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { Col, Input, FormGroup, Label } from 'reactstrap';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 
 interface FileUploader {
 	isInvalid: boolean;
@@ -17,7 +17,7 @@ interface FileUploader {
  * @returns File uploader element
  */
 export default function FileUploaderComponent(props: FileUploader) {
-
+	const translate = useTranslate();
 	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		const file = event.target.files?.[0] || null;
 		props.onFileChange(file);

src/client/app/components/GraphicRateMenuComponent.tsx

@@ -11,14 +11,15 @@ import { graphSlice, selectGraphState } from '../redux/slices/graphSlice';
 import { SelectOption } from '../types/items';
 import { ChartTypes, LineGraphRate, LineGraphRates } from '../types/redux/graph';
 import { UnitRepresentType } from '../types/redux/units';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React component that controls the line graph rate menu
  * @returns Rate selection element
  */
 export default function GraphicRateMenuComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 
 	// Graph state

src/client/app/components/HeaderButtonsComponent.tsx

@@ -16,7 +16,7 @@ import { selectHelpUrl } from '../redux/slices/adminSlice';
 import { selectOptionsVisibility, toggleOptionsVisibility } from '../redux/slices/appStateSlice';
 import { selectHasRolePermissions, selectIsAdmin, selectIsLoggedIn } from '../redux/slices/currentUserSlice';
 import { UserRole } from '../types/items';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import LoginComponent from './LoginComponent';
@@ -26,6 +26,7 @@ import LoginComponent from './LoginComponent';
  * @returns Header buttons element
  */
 export default function HeaderButtonsComponent() {
+	const translate = useTranslate();
 	const [logout] = authApi.useLogoutMutation();
 	const dispatch = useAppDispatch();
 	// Get the current page so know which one should not be shown in menu.

src/client/app/components/LineChartComponent.tsx

@@ -16,14 +16,15 @@ import { selectLineChartDeps, selectPlotlyGroupData, selectPlotlyMeterData } fro
 import { selectLineUnitLabel } from '../redux/selectors/plotlyDataSelectors';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import Locales from '../types/locales';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 
 
 /**
  * @returns plotlyLine graphic
  */
 export default function LineChartComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	// get current data fetching arguments
 	const { meterArgs, groupArgs, meterShouldSkip, groupShouldSkip } = useAppSelector(selectLineChartQueryArgs);

src/client/app/components/LoginComponent.tsx

@@ -8,7 +8,7 @@ import { FormattedMessage } from 'react-intl';
 import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
 import { authApi } from '../redux/api/authApi';
 import { showErrorNotification, showSuccessNotification } from '../utils/notifications';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 
 
 interface LoginProp {
@@ -21,6 +21,7 @@ interface LoginProp {
  * @returns The login page for users or admins.
  */
 export default function LoginComponent({ handleClose }: LoginProp) {
+	const translate = useTranslate();
 	// Local State
 	const [username, setUsername] = useState<string>('');
 	const [password, setPassword] = useState<string>('');

src/client/app/components/MapChartComponent.tsx

@@ -32,15 +32,15 @@ import {
 } from '../utils/calibration';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
 import getGraphColor from '../utils/getGraphColor';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 import { showInfoNotification } from '../utils/notifications';
 
 /**
  * @returns map component
  */
 export default function MapChartComponent() {
-
+	const translate = useTranslate();
 	const { meterArgs, groupArgs, meterShouldSkip, groupShouldSkip } = useAppSelector(selectMapChartQueryArgs);
 	const { data: meterReadings, isLoading: meterIsFetching } = readingsApi.useBarQuery(meterArgs, { skip: meterShouldSkip });
 	const { data: groupData, isLoading: groupIsFetching } = readingsApi.useBarQuery(groupArgs, { skip: groupShouldSkip });

src/client/app/components/MeterAndGroupSelectComponent.tsx

@@ -16,7 +16,7 @@ import { selectMeterGroupSelectData } from '../redux/selectors/uiSelectors';
 import { selectChartToRender, updateSelectedMetersOrGroups, updateThreeDMeterOrGroupInfo } from '../redux/slices/graphSlice';
 import { GroupedOption, SelectOption } from '../types/items';
 import { ChartTypes, MeterOrGroup } from '../types/redux/graph';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import { selectAnythingFetching } from '../redux/selectors/apiSelectors';
 /**
@@ -25,6 +25,7 @@ import { selectAnythingFetching } from '../redux/selectors/apiSelectors';
  * @returns A React-Select component.
  */
 export default function MeterAndGroupSelectComponent(props: MeterAndGroupSelectProps) {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const { meterGroupedOptions, groupsGroupedOptions, allSelectedMeterValues, allSelectedGroupValues } = useAppSelector(selectMeterGroupSelectData);
 	const somethingIsFetching = useAppSelector(selectAnythingFetching);

src/client/app/components/MoreOptionsComponent.tsx

@@ -15,13 +15,14 @@ import DateRangeComponent from './DateRangeComponent';
 import ErrorBarComponent from './ErrorBarComponent';
 import ExportComponent from '../components/ExportComponent';
 import GraphicRateMenuComponent from './GraphicRateMenuComponent';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 
 /**
  * Modal popup control for various graph types
  * @returns Custom Modal depending on selected graph type
  */
 export default function MoreOptionsComponent() {
+	const translate = useTranslate();
 	const chartToRender = useAppSelector(selectChartToRender);
 	const [showModal, setShowModal] = useState(false);
 	const handleShow = () => setShowModal(true);

src/client/app/components/RadarChartComponent.tsx

@@ -22,13 +22,14 @@ import Locales from '../types/locales';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
 import getGraphColor from '../utils/getGraphColor';
 import { lineUnitLabel } from '../utils/graphics';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
 
 /**
  * @returns radar plotly component
  */
 export default function RadarChartComponent() {
+	const translate = useTranslate();
 	const { meterArgs, groupArgs, meterShouldSkip, groupShouldSkip } = useAppSelector(selectRadarChartQueryArgs);
 	const { data: meterReadings, isLoading: meterIsLoading } = readingsApi.useLineQuery(meterArgs, { skip: meterShouldSkip });
 	const { data: groupData, isLoading: groupIsLoading } = readingsApi.useLineQuery(groupArgs, { skip: groupShouldSkip });

src/client/app/components/ReadingsPerDaySelectComponent.tsx

@@ -10,14 +10,15 @@ import { selectThreeDQueryArgs } from '../redux/selectors/chartQuerySelectors';
 import { selectReadingsPerDaySelectData } from '../redux/selectors/threeDSelectors';
 import { selectThreeDReadingInterval, updateThreeDReadingInterval } from '../redux/slices/graphSlice';
 import { ReadingInterval } from '../types/redux/graph';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * A component which allows users to select number of reading per day for 3D graphic
  * @returns A Select menu with Readings per day options.
  */
 export default function ReadingsPerDaySelect() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const readingInterval = useAppSelector(selectThreeDReadingInterval);
 	const { args, shouldSkipQuery } = useAppSelector(selectThreeDQueryArgs);

src/client/app/components/ThreeDComponent.tsx

@@ -20,6 +20,9 @@ import { UnitDataById } from '../types/redux/units';
 import { isValidThreeDInterval, roundTimeIntervalForFetch } from '../utils/dateRangeCompatibility';
 import { AreaUnitType, getAreaUnitConversion } from '../utils/getAreaUnitConversion';
 import { lineUnitLabel } from '../utils/graphics';
+// Both translates are used since some are in the function component where the React Hook is okay
+// and some are in other functions where the older method is needed.
+import { useTranslate } from '../redux/componentHooks';
 import translate from '../utils/translate';
 import SpinnerComponent from './SpinnerComponent';
 import ThreeDPillComponent from './ThreeDPillComponent';
@@ -32,6 +35,7 @@ import Locales from '../types/locales';
  * @returns 3D Plotly 3D Surface Graph
  */
 export default function ThreeDComponent() {
+	const translate = useTranslate();
 	const { args, shouldSkipQuery } = useAppSelector(selectThreeDQueryArgs);
 	const { data, isFetching } = readingsApi.endpoints.threeD.useQuery(args, { skip: shouldSkipQuery });
 	const meterDataById = useAppSelector(selectMeterDataById);

src/client/app/components/ThreeDPillComponent.tsx

@@ -11,13 +11,14 @@ import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { MeterOrGroup, MeterOrGroupPill } from '../types/redux/graph';
 import { AreaUnitType } from '../utils/getAreaUnitConversion';
 import { selectMeterDataById } from '../redux/api/metersApi';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 
 /**
  * A component used in the threeD graphics to select a single meter from the currently selected meters and groups.
  * @returns List of selected groups and meters as reactstrap Pills Badges
  */
 export default function ThreeDPillComponent() {
+	const translate = useTranslate();
 	const dispatch = useAppDispatch();
 	const meterDataById = useAppSelector(selectMeterDataById);
 	const groupDataById = useAppSelector(selectGroupDataById);

src/client/app/components/TimeZoneSelect.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import Select from 'react-select';
 import { TimeZoneOption } from 'types/timezone';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 import * as moment from 'moment-timezone';
 
 interface TimeZoneSelectProps {
@@ -15,7 +15,7 @@ interface TimeZoneSelectProps {
 }
 
 const TimeZoneSelect: React.FC<TimeZoneSelectProps> = ({ current, handleClick }) => {
-
+	const translate = useTranslate();
 	const getTimeZones = () => {
 		const zoneNames = moment.tz.names();
 		return zoneNames.map(zoneName => {

src/client/app/components/TooltipHelpComponent.tsx

@@ -9,7 +9,7 @@ import { selectOEDVersion } from '../redux/api/versionApi';
 import { useAppSelector } from '../redux/reduxHooks';
 import { selectHelpUrl } from '../redux/slices/adminSlice';
 import '../styles/tooltip.css';
-import translate from '../utils/translate';
+import { useTranslate } from '../redux/componentHooks';
 
 interface TooltipHelpProps {
 	page: string; // Specifies which page the tip is in.
@@ -20,11 +20,10 @@ interface TooltipHelpProps {
  * @returns ToolTipHelpComponent
  */
 export default function TooltipHelpComponent(props: TooltipHelpProps) {
-
 	/**
 	 * @returns JSX to create the help icons with links
 	 */
-
+	const translate = useTranslate();
 
 	const version = useAppSelector(selectOEDVersion);
 	const helpUrl = useAppSelector(selectHelpUrl);