Modernize toolchain: React 17, TypeScript 4.9, Node 16, and strict type fixes

.nvmrc

@@ -0,0 +1 @@
+16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "etesync-web",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "dependencies": {
     "@date-io/moment": "^1.x",
@@ -16,9 +16,9 @@
     "localforage": "^1.9.0",
     "memoizee": "^0.4.14",
     "moment": "^2.27.0",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-big-calendar": "^0.26.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^10.0.4",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
@@ -48,10 +48,10 @@
     "@types/color": "^3.0.1",
     "@types/jest": "^24.0.4",
     "@types/memoizee": "^0.4.4",
-    "@types/node": "^11.9.3",
-    "@types/react": "^16.9.0",
+    "@types/node": "^16.0.0",
+    "@types/react": "^17.0.0",
     "@types/react-big-calendar": "^0.22.3",
-    "@types/react-dom": "^16.9.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.9",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
@@ -60,12 +60,16 @@
     "@types/redux-logger": "^3.0.8",
     "@types/urijs": "^1.15.38",
     "@types/uuid": "^3.4.3",
-    "typescript": "~3.9.7"
+    "typescript": "~4.9.5"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "resolutions": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
+  }
 }

src/Collections/Collection.tsx

@@ -52,14 +52,14 @@ class Collection extends React.Component<PropsType> {
           {isAdmin &&
             <>
               <IconButton
-                component={Link}
+                component={Link as any}
                 title="Edit"
                 {...{ to: routeResolver.getRoute("collections._id.edit", { colUid: collection.uid }) }}
               >
                 <IconEdit />
               </IconButton>
               <IconButton
-                component={Link}
+                component={Link as any}
                 title="Members"
                 {...{ to: routeResolver.getRoute("collections._id.members", { colUid: collection.uid }) }}
               >

src/Collections/CollectionEdit.tsx

@@ -126,7 +126,7 @@ export default function CollectionEdit(props: PropsType) {
     },
   };
 
-  const colTypes = {
+  const colTypes: Record<string, string> = {
     "etebase.vcard": "Address Book",
     "etebase.vevent": "Calendar",
     "etebase.vtodo": "Task List",

src/Collections/CollectionImport.tsx

@@ -23,7 +23,7 @@ interface PropsType {
 export default function CollectionImport(props: PropsType) {
   const [selectedCollection, setSelectedCollection] = React.useState<CachedCollection>();
 
-  const collectionMap = {
+  const collectionMap: Record<string, React.ReactNode[]> = {
     "etebase.vcard": [],
     "etebase.vevent": [],
     "etebase.vtodo": [],

src/Collections/CollectionList.tsx

@@ -27,7 +27,7 @@ interface PropsType {
 export default function CollectionList(props: PropsType) {
   const history = useHistory();
 
-  const collectionMap = {
+  const collectionMap: Record<string, React.ReactNode[]> = {
     "etebase.vcard": [],
     "etebase.vevent": [],
     "etebase.vtodo": [],
@@ -58,7 +58,7 @@ export default function CollectionList(props: PropsType) {
     <Container>
       <AppBarOverride title="Collections">
         <IconButton
-          component={Link}
+          component={Link as any}
           title="New"
           {...{ to: routeResolver.getRoute("collections.new") }}
         >

src/Contacts/ContactEdit.tsx

@@ -147,9 +147,9 @@ class ContactEdit extends React.PureComponent<PropsType> {
 
     collectionUid: string;
     showDeleteDialog: boolean;
-    collectionGroups: {};
+    collectionGroups: Record<string, any>;
     newGroups: string[];
-    originalGroups: {};
+    originalGroups: Record<string, any>;
   };
 
   constructor(props: PropsType) {
@@ -264,7 +264,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
   public addValueType(name: string, _type?: string) {
     const type = _type ? _type : "home";
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray.push(new ValueType(type));
       return {
         ...prevState,
@@ -275,7 +275,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
 
   public removeValueType(name: string, idx: number) {
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray.splice(idx, 1);
       return {
         ...prevState,
@@ -286,7 +286,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
 
   public handleValueTypeChange(name: string, idx: number, value: ValueType) {
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray[idx] = value;
       return {
         ...prevState,
@@ -302,7 +302,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
   }
 
   public getCollectionGroups(collectionUid: string) {
-    const groups = {};
+    const groups: Record<string, any> = {};
     this.props.allGroups.forEach((group) => {
       if (collectionUid === group.collectionUid) {
         groups[group.fn] = group;

src/Contacts/GroupEdit.tsx

@@ -97,7 +97,7 @@ class GroupEdit extends React.PureComponent<PropsType> {
   public addValueType(name: string, _type?: string) {
     const type = _type ? _type : "home";
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray.push(new ValueType(type));
       return {
         ...prevState,
@@ -108,7 +108,7 @@ class GroupEdit extends React.PureComponent<PropsType> {
 
   public removeValueType(name: string, idx: number) {
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray.splice(idx, 1);
       return {
         ...prevState,
@@ -119,7 +119,7 @@ class GroupEdit extends React.PureComponent<PropsType> {
 
   public handleValueTypeChange(name: string, idx: number, value: ValueType) {
     this.setState((prevState) => {
-      const newArray = prevState[name].slice(0);
+      const newArray = (prevState as any)[name].slice(0);
       newArray[idx] = value;
       return {
         ...prevState,
@@ -135,7 +135,7 @@ class GroupEdit extends React.PureComponent<PropsType> {
   }
 
   public getCollectionGroups(collectionUid: string) {
-    const groups = {};
+    const groups: Record<string, any> = {};
     this.props.allGroups.forEach((group) => {
       if (collectionUid === group.collectionUid) {
         groups[group.fn] = null;

src/Contacts/SearchableAddressBook.tsx

@@ -15,7 +15,7 @@ import AddressBook from "./AddressBook";
 
 const useStyles = makeStyles((theme) => ({
   topBar: {
-    backgroundColor: theme.palette.primary[500],
+    backgroundColor: theme.palette.primary.main,
   },
 }));
 

src/Contacts/Toolbar.tsx

@@ -8,7 +8,7 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 
 const transitionTimeout = 300;
 
-const transitionStyles = {
+const transitionStyles: Record<string, React.CSSProperties> = {
   entering: { visibility: "visible", width: "100%", overflow: "hidden" },
   entered: { visibility: "visible", width: "100%" },
   exiting: { visibility: "visible", width: "0%", overflow: "hidden" },

src/Debug.tsx

@@ -63,7 +63,7 @@ export default function Debug() {
           const col = colMgr.cacheLoad(cachedCollection);
           const itemMgr = colMgr.getItemManager(col);
 
-          const wantedEntries = {};
+          const wantedEntries: Record<string, boolean> = {};
           const wantAll = (itemsUids.trim() === "all");
           itemsUids.split("\n").forEach((ent) => wantedEntries[ent.trim()] = true);
 

src/Tasks/TaskList.tsx

@@ -94,7 +94,7 @@ function getSortFunction(sortOrder: string) {
 
 const useStyles = makeStyles((theme) => ({
   topBar: {
-    backgroundColor: theme.palette.primary[500],
+    backgroundColor: theme.palette.primary.main,
   },
 }));
 

src/Tasks/Toolbar.tsx

@@ -24,7 +24,7 @@ import { CachedCollection } from "../Pim/helpers";
 
 const transitionTimeout = 300;
 
-const transitionStyles = {
+const transitionStyles: Record<string, React.CSSProperties> = {
   entering: { visibility: "visible", width: "100%", overflow: "hidden" },
   entered: { visibility: "visible", width: "100%" },
   exiting: { visibility: "visible", width: "0%", overflow: "hidden" },

src/helpers.tsx

@@ -29,15 +29,15 @@ export function handleInputChange(self: React.Component, part?: string) {
     } else {
       self.setState({
         [part]: {
-          ...self.state[part],
+          ...(self.state as Record<string, any>)[part],
           ...newState,
         },
       });
     }
   };
 }
 
-export function insertSorted<T>(array: T[] = [], newItem: T, key: string) {
+export function insertSorted<T extends Record<string, any>>(array: T[] = [], newItem: T, key: string) {
   if (array.length === 0) {
     return [newItem];
   }

src/persist-state-history.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { withRouter } from "react-router";
 
 // FIXME: Should probably tie this to the history object, or at least based on the depth of the history
-const stateCache = {};
+const stateCache: Record<string, any> = {};
 
 type Constructor<T> = new(...args: any[]) => T;
 

src/pim-types.ts

@@ -22,9 +22,9 @@ export function timezoneLoadFromName(timezone: string | null) {
     return null;
   }
 
-  let zone = zones.zones[timezone];
-  if (!zone && zones.aliases[timezone]) {
-    zone = zones.zones[zones.aliases[timezone]];
+  let zone = (zones.zones as Record<string, any>)[timezone];
+  if (!zone && (zones.aliases as Record<string, any>)[timezone]) {
+    zone = (zones.zones as Record<string, any>)[(zones.aliases as Record<string, any>)[timezone].aliasTo];
   }
 
   if (!zone) {
@@ -185,6 +185,13 @@ export class TaskType extends EventType {
 
   constructor(comp?: ICAL.Component | null) {
     super(comp ? comp : new ICAL.Component("vtodo"));
+    // Override endDate — not applicable for tasks
+    Object.defineProperty(this, "endDate", {
+      get() {
+        return undefined as any;
+      },
+      configurable: true,
+    });
   }
 
   get finished() {
@@ -264,11 +271,6 @@ export class TaskType extends EventType {
     return this.component.getFirstPropertyValue("related-to");
   }
 
-  get endDate() {
-    // XXX: A hack to override this as it shouldn't be used
-    return undefined as any;
-  }
-
   get allDay() {
     return !!((this.startDate?.isDate) || (this.dueDate?.isDate));
   }

src/routes.ts

@@ -6,9 +6,9 @@ export interface RouteKeysType {
 }
 
 export class RouteResolver {
-  public routes: {};
+  public routes: Record<string, any>;
 
-  constructor(routes: {}) {
+  constructor(routes: Record<string, any>) {
     this.routes = routes;
   }
 

src/store/reducers.ts

@@ -179,7 +179,7 @@ for (const func in actions) {
     func.startsWith("update") ||
     func.startsWith("delete")) {
 
-    fetchActions.push(actions[func]);
+    fetchActions.push((actions as Record<string, any>)[func]);
   }
 }
 

src/widgets/ExternalLink.tsx

@@ -3,10 +3,10 @@
 
 import * as React from "react";
 
-export const ExternalLink = React.memo(({ children, ...props }: any) => (
-  <a target="_blank" rel="noopener noreferrer" {...props}>
+export const ExternalLink = React.memo(React.forwardRef<HTMLAnchorElement, any>(({ children, ...props }, ref) => (
+  <a ref={ref} target="_blank" rel="noopener noreferrer" {...props}>
     {children}
   </a>
-));
+)));
 
 export default ExternalLink;

src/widgets/RRule.tsx

@@ -124,9 +124,9 @@ export default function RRule(props: PropsType) {
     }
 
     for (const key of Object.keys(updatedOptions)) {
-      const value = updatedOptions[key];
+      const value = (updatedOptions as Record<string, any>)[key];
       if ((value === undefined) || (value?.length === 0)) {
-        delete updatedOptions[key];
+        delete (updatedOptions as Record<string, any>)[key];
         continue;
       }
     }
@@ -206,7 +206,7 @@ export default function RRule(props: PropsType) {
             </Select>
           }
           {options.bysetpos &&
-            <Select value={options.bysetpos[0]}
+            <Select value={(options.bysetpos as number[])[0]}
               onChange={(event: React.FormEvent<{ value: unknown }>) => {
                 updateRule({ bysetpos: [Number((event.target as HTMLInputElement).value)] });
               }}>
@@ -224,7 +224,7 @@ export default function RRule(props: PropsType) {
         {options.freq === "MONTHLY" &&
           <TextField
             type="number"
-            value={options.bymonthday ? options.bymonthday[0] : undefined}
+            value={options.bymonthday ? (options.bymonthday as number[])[0] : undefined}
             label="Month day"
             style={styles.width}
             inputProps={{ min: 1, step: 1, max: 31 }}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "outDir": "build/dist",
     "module": "esnext",
     "target": "es5",
@@ -25,7 +26,6 @@
     "noUnusedParameters": false,
     "strictNullChecks": true,
     "strictBindCallApply": true,
-    "suppressImplicitAnyIndexErrors": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true