Add success message on import completion

app/components/WebsocketProvider.tsx

@@ -3,8 +3,10 @@ import find from "lodash/find";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
+import { FileOperationState } from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
 import Comment from "~/models/Comment";
@@ -34,7 +36,7 @@ type SocketWithAuthentication = Socket & {
 export const WebsocketContext =
   React.createContext<SocketWithAuthentication | null>(null);
 
-type Props = RootStore;
+type Props = WithTranslation & RootStore;
 
 @observer
 class WebsocketProvider extends React.Component<Props> {
@@ -431,6 +433,15 @@ class WebsocketProvider extends React.Component<Props> {
       "fileOperations.update",
       (event: PartialWithId<FileOperation>) => {
         fileOperations.add(event);
+
+        if (
+          event.state === FileOperationState.Complete &&
+          event.user?.id === auth.user?.id
+        ) {
+          toast.success(event.name, {
+            description: this.props.t("Your import completed"),
+          });
+        }
       }
     );
 
@@ -450,13 +461,13 @@ class WebsocketProvider extends React.Component<Props> {
 
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
-    this.socket.on("join", (event: any) => {
+    this.socket.on("join", (event) => {
       this.socket?.emit("join", event);
     });
 
     // received a message from the API server that we should request
     // to leave a specific room. Forward that to the ws server.
-    this.socket.on("leave", (event: any) => {
+    this.socket.on("leave", (event) => {
       this.socket?.emit("leave", event);
     });
   };
@@ -470,4 +481,4 @@ class WebsocketProvider extends React.Component<Props> {
   }
 }
 
-export default withStores(WebsocketProvider);
+export default withTranslation()(withStores(WebsocketProvider));

app/scenes/Settings/components/DropToImport.tsx

@@ -42,9 +42,11 @@ function DropToImport({ disabled, onSubmit, children, format }: Props) {
         });
         await collections.import(attachment.id, format);
         onSubmit();
-        toast.success(
-          t("Your import is being processed, you can safely leave this page")
-        );
+        toast.message(file.name, {
+          description: t(
+            "Your import is being processed, you can safely leave this page"
+          ),
+        });
       } catch (err) {
         toast.error(err.message);
       } finally {

shared/i18n/locales/en_US/translation.json

@@ -267,6 +267,7 @@
   "Save": "Save",
   "New name": "New name",
   "Name can't be empty": "Name can't be empty",
+  "Your import completed": "Your import completed",
   "Previous match": "Previous match",
   "Next match": "Next match",
   "Find and replace": "Find and replace",