Improve error handling

package.json

@@ -38,9 +38,11 @@
     "es6-promise": "^4.2.8",
     "formik": "^2.2.9",
     "graphql": "^15.7.2",
+    "neverthrow": "^4.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
+    "react-toastify": "^8.0.3",
     "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {

src/taskpane/components/App.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState, ReactElement } from "react";
 import { Switch, Route } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 import Progress from "./Progress";
 import Login from "../pages/login";
-import Layout from "./Layout";
-import ProtectedRoutes from "../../utils/ProtectedRoutes";
+import Layout from "../layout/Layout";
+import ProtectedRoutes from "../router/ProtectedRoutes";
 import CiteSupport from "../../utils/citesupport";
 import data from "../../utils/data";
 
@@ -31,6 +32,23 @@ function App(props: AppProps): ReactElement {
   }
   return (
     <div>
+      <ToastContainer
+        position="top-center"
+        closeButton={false}
+        hideProgressBar
+        newestOnTop
+        closeOnClick
+        limit={5}
+        rtl={false}
+        draggable={false}
+        pauseOnHover
+        autoClose={3000} // 3 seconds
+        bodyStyle={{ padding: 0 }}
+        style={{ marginTop: 45, padding: 0 }}
+        toastClassName={() =>
+          "relative flex p-1 overflow-auto min-h-100vh box-border rounded-md justify-between cursor-pointer"
+        }
+      />
       <Switch>
         <Route path="/login">
           <Login />

src/taskpane/components/Toasts.tsx

@@ -0,0 +1,36 @@
+import { MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import React from "react";
+import { toast } from "react-toastify";
+
+export const successToast = (message: string): void => {
+  toast(
+    <MessageBar messageBarType={MessageBarType.success} isMultiline={false}>
+      {message}
+    </MessageBar>
+  );
+};
+
+export const errorToastWithActionButton = (message: string): void => {
+  toast(
+    ({ closeToast }) => (
+      <MessageBar
+        actions={
+          <div>
+            <MessageBarButton onClick={closeToast}>Yes</MessageBarButton>
+          </div>
+        }
+        messageBarType={MessageBarType.blocked}
+        isMultiline
+      >
+        {message}
+      </MessageBar>
+    ),
+    {
+      style: {
+        height: "100vh",
+      },
+      autoClose: false,
+      closeOnClick: false,
+    }
+  );
+};

src/taskpane/index.tsx

@@ -13,7 +13,7 @@ import { AppContainer } from "react-hot-loader";
 import { initializeIcons, ThemeProvider } from "@fluentui/react";
 import { HashRouter as Router } from "react-router-dom";
 import App from "./components/App";
-import client from "../utils/apolloClient";
+import client from "../plugins/apolloClient";
 
 initializeIcons();
 

src/taskpane/components/Layout.tsx → src/taskpane/layout/Layout.tsx

@@ -14,10 +14,10 @@ import {
 } from "@fluentui/react";
 import React, { ReactElement } from "react";
 import { useLogoutMutation } from "../../generated/graphql";
-import client from "../../utils/apolloClient";
+import client from "../../plugins/apolloClient";
 import CitationStyle from "../pages/citationStyle";
 import Dashboard from "../pages/dashboard";
-import Wrapper from "./Wrapper";
+import Wrapper from "../components/Wrapper";
 import CiteSupport from "../../utils/citesupport";
 
 interface LayoutProps {

src/taskpane/pages/citationStyle.tsx

@@ -10,6 +10,7 @@ import {
 import { Stack } from "@fluentui/react";
 import Preference from "../../utils/user-preference";
 import CiteSupport from "../../utils/citesupport";
+import { successToast } from "../components/Toasts";
 
 const theme: ITheme = getTheme();
 const { palette, semanticColors, fonts } = theme;
@@ -93,6 +94,7 @@ function CitationStyle({ citeSupport }: CitationStyleProps): JSX.Element {
     setCurrentStyle(ev.currentTarget.id);
     Preference.setCitationStyle(ev.currentTarget.id);
     await citeSupport.initDocument();
+    successToast("Citation Style Updated Successfully");
   };
 
   // Sync with doc settings

src/taskpane/pages/dashboard.tsx

@@ -10,6 +10,7 @@ import { CitationItem } from "citeproc";
 import data from "../../utils/data";
 import ReferenceList, { bib } from "../components/ReferenceList";
 import SearchField from "../components/SearchField";
+import "react-toastify/dist/ReactToastify.css";
 import CiteSupport from "../../utils/citesupport";
 
 interface DashboardProps {
@@ -164,9 +165,12 @@ function Dashboard({ citeSupport }: DashboardProps): ReactElement {
     const isCitationValue = await citeSupport.wordApi.isCitationSelected();
     if (itemsInSelectedCitation) {
       resetAllReferences();
-      setReferenceState(itemsInCitation);
-      setItemsInSelectedCitation(itemsInCitation);
-      setCitationSelected(() => isCitationValue);
+      if (itemsInCitation.isOk()) {
+        setReferenceState(itemsInCitation.value);
+        setItemsInSelectedCitation(itemsInCitation.value);
+      }
+      if (isCitationValue.isOk())
+        setCitationSelected(() => isCitationValue.value);
     } else if (itemsInSelectedCitation.current.length) {
       resetAllReferences();
       setItemsInSelectedCitation([]);

src/utils/ProtectedRoutes.tsx → src/taskpane/router/ProtectedRoutes.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
-import { useMeQuery } from "../generated/graphql";
-import Progress from "../taskpane/components/Progress";
+import { useMeQuery } from "../../generated/graphql";
+import Progress from "../components/Progress";
 
 interface ProtectedRoutesProps {
   children: JSX.Element;
@@ -26,7 +26,7 @@ function ProtectedRoutes({
     <Route
       {...rest}
       render={({ location }) =>
-        !data.me ? (
+        !data ? (
           children
         ) : (
           <Redirect

src/utils/citesupport.ts

@@ -257,7 +257,7 @@ class CiteSupport {
     this.debug("upsertCitation()");
     const isCitationSelected = await this.wordApi.isCitationSelected();
     const citationData = this.convertCitationDataToCustomFormat(data);
-    if (isCitationSelected) {
+    if (isCitationSelected.isOk() && isCitationSelected.value) {
       await this.wordApi.updateCitations(citationData);
     } else {
       await this.wordApi.insertNewCitation(citationData[0]);
@@ -318,16 +318,19 @@ class CiteSupport {
     if (citationStyle) {
       this.config.defaultStyle = citationStyle;
     }
-    this.config.citationByIndex = await this.wordApi.getCitationByIndex();
+    const citationByIndex = await this.wordApi.getCitationByIndex();
+    if (citationByIndex.isOk()) {
+      this.config.citationByIndex = citationByIndex.value;
+    }
   }
 
   /**
    *  Update the citationByIndex array after every edit or delete operation
    */
   async updateCitationByIndex(): Promise<void> {
     const citationByIndex = await this.wordApi.getCitationByIndex();
-    if (citationByIndex) {
-      this.config.citationByIndex = citationByIndex;
+    if (citationByIndex.isOk()) {
+      this.config.citationByIndex = citationByIndex.value;
     }
   }
 
@@ -356,9 +359,17 @@ class CiteSupport {
     let i = 0;
     let offset = 0;
     if (!isCitation) {
-      i = await this.wordApi.getPositionOfNewCitation();
+      const positionOfNewCitation =
+        await this.wordApi.getPositionOfNewCitation();
+      if (positionOfNewCitation.isOk()) {
+        i = positionOfNewCitation.value;
+      }
     } else {
-      i = await this.wordApi.getPositionOfSelectedCitation();
+      const positionOfSelectedCitation =
+        await this.wordApi.getPositionOfSelectedCitation();
+      if (positionOfSelectedCitation.isOk()) {
+        i = positionOfSelectedCitation.value;
+      }
       offset = 1;
     }
     if (this.config.citationByIndex.slice(0, i).length) {