fixed instances of {}

.eslintrc.json

@@ -53,5 +53,44 @@
             "error",
             "as-needed"
         ]
-    }
+    },
+    "overrides": [
+        {
+            // also possible in the future to limit to src/client/app/components/**/*.tsx files, where we make sure {} is only used for props.
+            "files": [
+                "src/client/app/components/UIModalComponent.tsx",
+                "src/client/app/containers/admin/CreateUserContainer.tsx",
+                "src/client/app/containers/csv/UploadCSVContainer.tsx"
+            ],
+            "extends": [
+                "eslint:recommended",
+                "plugin:@typescript-eslint/recommended"
+            ],
+            "parser": "@typescript-eslint/parser",
+            "parserOptions": {
+                "ecmaFeatures": {
+                    "jsx": true
+                },
+                "ecmaVersion": "latest",
+                "sourceType": "module"
+            },
+            "plugins": [
+                "@typescript-eslint"
+            ],
+            "rules": {
+                // only to be used when declaring props as {}. Example is in UIModalComponent, ie; extends React.Component<{}>
+                // is used in conjunction with overrides
+                // https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns
+                "@typescript-eslint/ban-types": [
+                    "error",
+                    {
+                        "extendDefaults": true,
+                        "types": {
+                            "{}": false
+                        }
+                    }
+                ]
+            }
+        }
+    ]
 }

src/client/app/components/ChartDataSelectComponent.tsx

@@ -22,7 +22,7 @@ type ChartDataSelectPropsWithIntl = ChartDataSelectProps & WrappedComponentProps
 /**
  * A component which allows the user to select which data should be displayed on the chart.
  */
-class ChartDataSelectComponent extends React.Component<ChartDataSelectPropsWithIntl, {}> {
+class ChartDataSelectComponent extends React.Component<ChartDataSelectPropsWithIntl> {
 	constructor(props: ChartDataSelectPropsWithIntl) {
 		super(props);
 		this.handleMeterSelect = this.handleMeterSelect.bind(this);

src/client/app/components/ChartSelectComponent.tsx

@@ -24,7 +24,7 @@ interface DropdownState {
 /**
  * A component that allows users to select which chart should be displayed.
  */
-export default class ChartSelectComponent extends React.Component<ChartSelectProps, DropdownState, {}> {
+export default class ChartSelectComponent extends React.Component<ChartSelectProps, DropdownState> {
 	constructor(props: ChartSelectProps) {
 		super(props);
 		this.handleChangeChartType = this.handleChangeChartType.bind(this);

src/client/app/components/DashboardComponent.tsx

@@ -32,7 +32,7 @@ interface DashboardProps {
 /**
  * React component that controls the dashboard
  */
-export default class DashboardComponent extends React.Component<DashboardProps, {}> {
+export default class DashboardComponent extends React.Component<DashboardProps> {
 	constructor(props: DashboardProps) {
 		super(props);
 		this.handleTimeIntervalChange = this.handleTimeIntervalChange.bind(this);

src/client/app/components/FooterComponent.tsx

@@ -13,7 +13,7 @@ interface FooterProps {
 /*
 * Footer loaded at the bottom of every webpage, which loads the site version from the redux store
 */
-export default class FooterComponent extends React.Component<FooterProps, {}> {
+export default class FooterComponent extends React.Component<FooterProps> {
 	constructor(props: FooterProps) {
 		super(props);
 		this.props.fetchVersionIfNeeded();

src/client/app/components/HeaderButtonsComponent.tsx

@@ -27,7 +27,7 @@ interface HeaderButtonsProps {
 /**
  * React component that controls the buttons in the Header
  */
-export default class HeaderButtonsComponent extends React.Component<HeaderButtonsProps, {}> {
+export default class HeaderButtonsComponent extends React.Component<HeaderButtonsProps> {
 	constructor(props: HeaderButtonsProps) {
 		super(props);
 		this.handleLogOut = this.handleLogOut.bind(this);

src/client/app/components/HeaderComponent.tsx

@@ -17,7 +17,7 @@ interface HeaderProps {
 /**
  * React component that controls the header strip at the top of all pages
  */
-class HeaderComponent extends React.Component<HeaderProps, {}> {
+class HeaderComponent extends React.Component<HeaderProps> {
 	public render() {
 		const divStyle = {
 			marginTop: '5px',

src/client/app/components/InitializationComponent.tsx

@@ -18,7 +18,7 @@ interface InitializationProps {
 	changeOptionsFromLink(options: LinkOptions): Promise<any>;
 }
 
-export default class InitializationComponent extends React.Component<InitializationProps, {}> {
+export default class InitializationComponent extends React.Component<InitializationProps> {
 	private notificationSystem: NotificationSystem.System;
 
 	public componentDidMount() {

src/client/app/components/LanguageSelectorComponent.tsx

@@ -34,7 +34,7 @@ enum LanguageNames {
 /**
  * A component that allows users to select which language the page should be displayed in.
  */
-export default class LanguageSelectorComponent extends React.Component<LanguageSelectProps, DropdownState, {}> {
+export default class LanguageSelectorComponent extends React.Component<LanguageSelectProps, DropdownState> {
 	constructor(props: LanguageSelectProps) {
 		super(props);
 		this.handleChangeLanguage = this.handleChangeLanguage.bind(this);

src/client/app/components/MapChartSelectComponent.tsx

@@ -17,7 +17,7 @@ interface MapChartSelectProps {
 
 type MapChartSelectPropsWithIntl = MapChartSelectProps & WrappedComponentProps;
 
-class MapChartSelectComponent extends React.Component<MapChartSelectPropsWithIntl, {}> {
+class MapChartSelectComponent extends React.Component<MapChartSelectPropsWithIntl> {
 	constructor(props: MapChartSelectPropsWithIntl) {
 		super(props);
 		this.handleMapSelect = this.handleMapSelect.bind(this);

src/client/app/components/MeterDropDownComponent.tsx

@@ -11,7 +11,7 @@ export interface MeterDropDownProps {
 	updateSelectedMeter(meterID: number): UpdateImportMeterAction;
 }
 
-export default class MeterDropDownComponent extends React.Component<MeterDropDownProps, {}> {
+export default class MeterDropDownComponent extends React.Component<MeterDropDownProps> {
 	constructor(props: MeterDropDownProps) {
 		super(props);
 		this.handleMeterSelect = this.handleMeterSelect.bind(this);

src/client/app/components/RouteComponent.tsx

@@ -44,7 +44,7 @@ interface RouteProps {
 	clearCurrentUser(): any;
 }
 
-export default class RouteComponent extends React.Component<RouteProps, {}> {
+export default class RouteComponent extends React.Component<RouteProps> {
 	constructor(props: RouteProps) {
 		super(props);
 		this.requireAuth = this.requireAuth.bind(this);

src/client/app/components/UIOptionsComponent.tsx

@@ -231,7 +231,7 @@ class UIOptionsComponent extends React.Component<UIOptionsPropsWithIntl, UIOptio
 									<FormattedMessage id='4.weeks' />
 								</Button>
 							</ButtonGroup>
-						<TooltipMarkerComponent page='home' helpTextId='help.home.map.interval.tip' />
+							<TooltipMarkerComponent page='home' helpTextId='help.home.map.interval.tip' />
 						</div>
 						<MapChartSelectContainer key='chart' />
 					</div>

src/client/app/components/admin/PreferencesComponent.tsx

@@ -42,7 +42,7 @@ interface PreferencesProps {
 
 type PreferencesPropsWithIntl = PreferencesProps & WrappedComponentProps;
 
-class PreferencesComponent extends React.Component<PreferencesPropsWithIntl, {}> {
+class PreferencesComponent extends React.Component<PreferencesPropsWithIntl> {
 	constructor(props: PreferencesPropsWithIntl) {
 		super(props);
 		this.handleDisplayTitleChange = this.handleDisplayTitleChange.bind(this);

src/client/app/components/groups/DatasourceBoxComponent.tsx

@@ -24,7 +24,7 @@ type DatasourceBoxPropsWithIntl = DatasourceBoxProps & WrappedComponentProps;
 // tslint:disable max-classes-per-file
 class MultiSelectDatasourceComponent extends MultiSelectComponent<DatasourceID> { }
 
-class DatasourceBoxComponent extends React.Component<DatasourceBoxPropsWithIntl, {}> {
+class DatasourceBoxComponent extends React.Component<DatasourceBoxPropsWithIntl> {
 	constructor(props: DatasourceBoxPropsWithIntl) {
 		super(props);
 		this.handleDatasourceSelect = this.handleDatasourceSelect.bind(this);

src/client/app/components/groups/GroupSidebarComponent.tsx

@@ -16,7 +16,7 @@ interface GroupSidebarProps {
 	selectGroups(groups: number[]): ChangeDisplayedGroupsAction;
 }
 
-export default class GroupSidebarComponent extends React.Component<GroupSidebarProps, {}> {
+export default class GroupSidebarComponent extends React.Component<GroupSidebarProps> {
 	constructor(props: GroupSidebarProps) {
 		super(props);
 		this.handleGroupSelect = this.handleGroupSelect.bind(this);

src/client/app/components/groups/GroupViewComponent.tsx

@@ -20,7 +20,7 @@ interface GroupViewProps {
 	changeDisplayModeToEdit(): ChangeDisplayModeAction;
 }
 
-export default class GroupViewComponent extends React.Component<GroupViewProps, {}> {
+export default class GroupViewComponent extends React.Component<GroupViewProps> {
 	constructor(props: GroupViewProps) {
 		super(props);
 		this.handleEditGroup = this.handleEditGroup.bind(this);

src/client/app/components/groups/GroupsDetailComponent.tsx

@@ -18,7 +18,7 @@ interface GroupsDetailProps {
 	fetchMetersDetailsIfNeeded(): Promise<any>;
 }
 
-export default class GroupsDetailComponent extends React.Component<GroupsDetailProps, {}> {
+export default class GroupsDetailComponent extends React.Component<GroupsDetailProps> {
 	public componentDidMount() {
 		this.props.fetchGroupsDetailsIfNeeded();
 		this.props.fetchMetersDetailsIfNeeded();

src/client/app/components/maps/MapCalibrationComponent.tsx

@@ -16,7 +16,7 @@ interface MapCalibrationProps {
 	mapID: number;
 }
 
-export default class MapCalibrationComponent extends React.Component<MapCalibrationProps, {}> {
+export default class MapCalibrationComponent extends React.Component<MapCalibrationProps> {
 	constructor(props: any) {
 		super(props);
 	}

src/client/app/components/maps/MapsDetailComponent.tsx

@@ -24,7 +24,7 @@ interface MapsDetailProps {
 	createNewMap(): any;
 }
 
-export default class MapsDetailComponent extends React.Component<MapsDetailProps, {}> {
+export default class MapsDetailComponent extends React.Component<MapsDetailProps> {
 	constructor(props: MapsDetailProps) {
 		super(props);
 		this.handleSubmitClicked = this.handleSubmitClicked.bind(this);

src/client/app/components/meters/MetersDetailComponent.tsx

@@ -22,7 +22,7 @@ interface MetersDetailProps {
 	submitEditedMeters(): Promise<any>;
 }
 
-export default class MetersDetailComponent extends React.Component<MetersDetailProps, {}> {
+export default class MetersDetailComponent extends React.Component<MetersDetailProps> {
 	constructor(props: MetersDetailProps) {
 		super(props);
 		this.handleSubmitClicked = this.handleSubmitClicked.bind(this);

src/client/app/containers/ChartDataSelectContainer.ts

@@ -10,7 +10,8 @@ import { State } from '../types/redux/state';
 import { Dispatch } from '../types/redux/actions';
 import { ChartTypes } from '../types/redux/graph';
 import { SelectOption } from '../types/items';
-import { CartesianPoint, Dimensions, normalizeImageDimensions, calculateScaleFromEndpoints, itemDisplayableOnMap, itemMapInfoOk } from '../utils/calibration';
+import { CartesianPoint, Dimensions, normalizeImageDimensions, calculateScaleFromEndpoints,
+	itemDisplayableOnMap, itemMapInfoOk } from '../utils/calibration';
 import { gpsToUserGrid } from './../utils/calibration';
 import { DataType } from '../types/Datasources';
 

src/client/app/containers/admin/CreateUserContainer.tsx

@@ -12,7 +12,7 @@ import { browserHistory } from '../../utils/history';
 import { showSuccessNotification, showErrorNotification } from '../../utils/notifications';
 import translate from '../../utils/translate';
 
-export default class CreateUserFormContainer extends React.Component<{}, {}>{
+export default class CreateUserFormContainer extends React.Component<{}>{
 	constructor(props: {}) {
 		super(props);
 		this.handleEmailChange = this.handleEmailChange.bind(this);

src/client/app/types/csvUploadForm.ts

@@ -63,7 +63,7 @@ export interface ReadingsCSVUploadProps extends ReadingsCSVUploadPreferencesItem
 	toggleCreateMeter: () => void;
 	toggleRefreshHourlyReadings: () => void;
 	toggleRefreshReadings: () => void;
-};
+}
 
 // MetersCSVUpload, MetersCSVUploadPreferencesItem, MetersCSVUploadProps should be interfaces. However, at the moment does not add anything new.
 // Hence, we define a new type rather than a new interface that extends CSVUploadPreferences and CSVUploadProps to pass our linter.

src/client/app/types/items.ts

@@ -62,4 +62,4 @@ export enum UserRole {
 	CSV = 'csv',
 	EXPORT = 'export',
 	OBVIUS = 'obvius'
-};
+}

src/client/app/utils/api/MapsApi.ts

@@ -22,7 +22,7 @@ export default class MapsApi {
 		return await this.backend.doPostRequest<void>('/api/maps/create', mapData);
 	}
 
-	public async edit(mapData: MapData): Promise<{}> {
+	public async edit(mapData: MapData): Promise<MapData> {
 		return await this.backend.doPostRequest<MapData>('/api/maps/edit', mapData);
 	}
 

src/client/app/utils/api/MetersApi.ts

@@ -54,7 +54,7 @@ export default class MetersApi {
 		);
 	}
 
-	public async edit(meter: MeterMetadata): Promise<{}> {
+	public async edit(meter: MeterMetadata): Promise<MeterEditData> {
 		return await this.backend.doPostRequest<MeterEditData>(
 			'/api/meters/edit',
 			{ id: meter.id, identifier: meter.identifier, enabled: meter.enabled, displayable: meter.displayable, timeZone: meter.timeZone, gps: meter.gps }