Fixes the strict warnings

src/commands/commands.ts

@@ -16,7 +16,7 @@ function action(event: Office.AddinCommands.Event) {
   };
 
   // Show a notification message
-  Office.context.mailbox.item.notificationMessages.replaceAsync(
+  Office.context.mailbox.item?.notificationMessages.replaceAsync(
     "action",
     message
   );
@@ -38,4 +38,6 @@ function getGlobal() {
 const g = getGlobal();
 
 // The add-in command functions need to be available in global scope
-g.action = action;
+if (g && g.action) {
+  g.action = action;
+}

src/taskpane/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, ReactElement } from "react";
+import React, { useEffect, useState } from "react";
 import { Switch, Route } from "react-router-dom";
 import Progress from "./Progress";
 import Login from "../pages/login";
@@ -12,7 +12,7 @@ export interface AppProps {
   isOfficeInitialized: boolean;
 }
 
-function App(props: AppProps): ReactElement {
+function App(props: AppProps): JSX.Element {
   const { isOfficeInitialized } = props;
   const [citeSupport] = useState(() => new CiteSupport(data));
   useEffect(() => {
@@ -42,4 +42,5 @@ function App(props: AppProps): ReactElement {
     </div>
   );
 }
+
 export default App;

src/taskpane/components/ReferenceList.tsx

@@ -10,10 +10,11 @@ import {
   Checkbox,
 } from "@fluentui/react";
 import { MetaData } from "citeproc";
-import React, { ReactElement } from "react";
+import React from "react";
 
 const theme: ITheme = getTheme();
 const { palette, semanticColors, fonts } = theme;
+
 export interface bib extends MetaData {
   isSelected: boolean;
 }
@@ -82,26 +83,30 @@ const classNames = mergeStyleSets({
   },
 });
 
-function ReferenceList(props: ReferenceListProps): ReactElement {
-  const { list } = props;
-  const onRenderCell = (item: bib): JSX.Element => {
+function ReferenceList({
+  list,
+  onCheckBoxChange,
+}: ReferenceListProps): JSX.Element {
+  const onRenderCell = (item?: bib): React.ReactNode => {
     return (
-      <div className={classNames.itemCell} data-is-focusable>
-        <Checkbox
-          className={classNames.checkbox}
-          title={item.title}
-          checked={item.isSelected}
-          onChange={props.onCheckBoxChange}
-        />
-        <div className={classNames.itemContent}>
-          <div className={classNames.itemType}>{item.type}</div>
-          <div className={classNames.itemTitle}>{item.title}</div>
-          {/* <div className={classNames.itemAuthor}>{item.author}</div>
+      item && (
+        <div className={classNames.itemCell} data-is-focusable>
+          <Checkbox
+            className={classNames.checkbox}
+            title={item.title}
+            checked={item.isSelected}
+            onChange={onCheckBoxChange}
+          />
+          <div className={classNames.itemContent}>
+            <div className={classNames.itemType}>{item.type}</div>
+            <div className={classNames.itemTitle}>{item.title}</div>
+            {/* <div className={classNames.itemAuthor}>{item.author}</div>
           <div className={classNames.itemYear}>
             {item.journal} {item.year}
           </div> */}
+          </div>
         </div>
-      </div>
+      )
     );
   };
 

src/taskpane/components/SearchField.tsx

@@ -1,13 +1,5 @@
-/* eslint-disable no-unused-vars */
-import { ISearchBoxStyles, SearchBox } from "@fluentui/react";
-import React, { ReactElement } from "react";
-
-interface SearchFieldProps {
-  onFilterChange: (
-    event?: React.ChangeEvent<HTMLInputElement>,
-    newValue?: string
-  ) => void;
-}
+import { ISearchBoxProps, ISearchBoxStyles, SearchBox } from "@fluentui/react";
+import React from "react";
 
 const searchBoxStyle: ISearchBoxStyles = {
   root: {
@@ -19,16 +11,16 @@ const searchBoxStyle: ISearchBoxStyles = {
   },
 };
 
-function SearchField(props: SearchFieldProps): ReactElement {
-  const { onFilterChange } = props;
+function SearchField({ onChange }: ISearchBoxProps): JSX.Element {
   return (
     <SearchBox
       styles={searchBoxStyle}
       underlined
       placeholder="Search"
       autoComplete="off"
-      onChange={onFilterChange}
+      onChange={onChange}
     />
   );
 }
+
 export default SearchField;

src/taskpane/index.tsx

@@ -21,7 +21,7 @@ let isOfficeInitialized = false;
 
 const title = "JabRef Task Pane Add-in";
 
-const render = (Component) => {
+const render = (Component: typeof App): void => {
   ReactDOM.render(
     <ApolloProvider client={client}>
       <AppContainer>

src/taskpane/pages/citationStyle.tsx

@@ -65,6 +65,8 @@ interface CitationStyleProps {
   citeSupport: CiteSupport;
 }
 
+const defaultStyle = "American Political Science Association";
+
 function CitationStyle({ citeSupport }: CitationStyleProps): JSX.Element {
   const items = [
     {
@@ -100,19 +102,23 @@ function CitationStyle({ citeSupport }: CitationStyleProps): JSX.Element {
     return Preference.syncPreference();
   });
 
-  const onRenderCell = (item: { text: string; value: string }): JSX.Element => {
+  const onRenderCell = (
+    item: { text: string; value: string } | undefined
+  ): React.ReactNode => {
     return (
-      <Stack className={classNames.itemCell} data-is-focusable>
-        <Stack
-          key={item.value}
-          id={item.value}
-          className={classNames.itemName}
-          onClick={onClick}
-          onKeyDown={onClick}
-        >
-          {item.text}
+      item && (
+        <Stack className={classNames.itemCell} data-is-focusable>
+          <Stack
+            key={item.value}
+            id={item.value}
+            className={classNames.itemName}
+            onClick={onClick}
+            onKeyDown={onClick}
+          >
+            {item.text}
+          </Stack>
         </Stack>
-      </Stack>
+      )
     );
   };
 
@@ -121,8 +127,9 @@ function CitationStyle({ citeSupport }: CitationStyleProps): JSX.Element {
       <div className={classNames.StyleHeading}>Current Style</div>
       <div className={classNames.selectedStyle}>
         {currentStyle
-          ? items.find((item) => item.value === currentStyle).text
-          : "American Political Science Association"}
+          ? items.find((item) => item.value === currentStyle)?.text ??
+            defaultStyle
+          : defaultStyle}
       </div>
       <div className={classNames.StyleHeading}>Change Style</div>
       <div className={classNames.container}>

src/taskpane/pages/dashboard.tsx

@@ -5,7 +5,13 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { PrimaryButton, DefaultButton, arraysEqual } from "@fluentui/react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  arraysEqual,
+  ISearchBoxProps,
+} from "@fluentui/react";
+import { Author } from "citeproc";
 import data from "../../utils/data";
 import ReferenceList, { bib } from "../components/ReferenceList";
 import SearchField from "../components/SearchField";
@@ -34,18 +40,19 @@ const buttonContainer = {
 };
 
 function containsSearchTerm(keyword: string) {
-  return (item?: bib) => {
-    return [item.title, item.author, item.year].some((str: string | number) =>
-      str
-        ? str.toString().toLowerCase().includes(keyword.toLowerCase().trim())
-        : false
+  return (item: bib) => {
+    return [item.title, item.author, item.year].some(
+      (str?: string | number | Array<Author>) =>
+        str?.toString().toLowerCase().includes(keyword.toLowerCase().trim())
     );
   };
 }
 
-function onCheckboxChange(ev: React.FormEvent<HTMLElement | HTMLInputElement>) {
+function onCheckboxChange(
+  event?: React.FormEvent<HTMLElement | HTMLInputElement>
+) {
   return (item: bib) => {
-    if (ev.currentTarget && item.title === ev.currentTarget.title) {
+    if (event?.currentTarget && item.title === event.currentTarget.title) {
       return { ...item, isSelected: !item.isSelected };
     }
     return item;
@@ -59,7 +66,7 @@ function unCheckCheckbox(item: bib): bib {
 function Dashboard({ citeSupport }: DashboardProps): ReactElement {
   const originalItems = data.map((item) => ({ ...item, isSelected: false }));
   const [items, setItems] = useState(originalItems);
-  const [citationItemsIDs, _setCitationItemsIDs] = useState([]);
+  const [citationItemsIDs, _setCitationItemsIDs] = useState<Array<string>>([]);
   const [isCitationSelected, setIsCitationSelection] = useState(false);
   const itemsIDsInSelectedCitation = useRef(citationItemsIDs);
   const setCitationItemsIDs = (ids: Array<string>) => {
@@ -79,29 +86,27 @@ function Dashboard({ citeSupport }: DashboardProps): ReactElement {
     });
   };
 
-  const onFilterChange = (
-    _: React.ChangeEvent<HTMLInputElement>,
-    keyword: string
-  ): void => {
-    setItems(originalItems.filter(containsSearchTerm(keyword)));
+  const onFilterChange: ISearchBoxProps["onChange"] = (_, newValue?): void => {
+    if (newValue) {
+      setItems(originalItems.filter(containsSearchTerm(newValue)));
+    }
   };
 
   const handleToggleChange = (
-    ev: React.FormEvent<HTMLElement | HTMLInputElement>
-  ) => {
-    setItems((currentItems) => {
-      return currentItems.map(onCheckboxChange(ev));
-    });
-  };
-
-  async function insertCitation() {
-    if (isCitationSelected && !checkedItems.length) {
-      await citeSupport.wordApi.removeSelectedCitation();
-    } else {
-      await citeSupport.insertCitation(checkedItems, isCitationSelected);
-      unCheckAllCheckboxes();
-    }
-  }
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>
+  ) => setItems((currentItems) => currentItems.map(onCheckboxChange(ev)));
+
+  const insertCitation = useCallback(
+    async function insertCitation() {
+      if (isCitationSelected && !checkedItems.length) {
+        await citeSupport.wordApi.removeSelectedCitation();
+      } else {
+        await citeSupport.insertCitation(checkedItems, isCitationSelected);
+        unCheckAllCheckboxes();
+      }
+    },
+    [checkedItems, citeSupport, isCitationSelected]
+  );
 
   const checkItems = (itemIds: Array<string>) => {
     setItems((currentItems) => {
@@ -148,7 +153,7 @@ function Dashboard({ citeSupport }: DashboardProps): ReactElement {
 
   return (
     <div style={dashboadStyle}>
-      <SearchField onFilterChange={onFilterChange} />
+      <SearchField onChange={onFilterChange} />
       <ReferenceList list={items} onCheckBoxChange={handleToggleChange} />
       {checkedItems.length && !itemsIDsInSelectedCitation.current.length ? (
         <div style={buttonContainer}>

src/taskpane/pages/login.tsx

@@ -57,7 +57,7 @@ function Login() {
               variables: value,
             });
             // eslint-disable-next-line no-underscore-dangle
-            if (response.data?.login.__typename === "User") {
+            if (response.data?.login?.__typename === "User") {
               history.push({ pathname: "/" });
             }
           }}

tsconfig.json

@@ -23,7 +23,7 @@
     "pretty": true,
     "typeRoots": [
       "node_modules/@types",
-    ],    
+    ],
     "types": [
       "@types/node",
       "office-js"