fix(ui): Added feedback to the manual rule & collection handling buttons

jorenn92 · Jan 19, 2024 · f1183c0 · f1183c0
1 parent 6233b71
commit f1183c0
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 42 deletions.
diff --git a/server/src/modules/api/lib/plextvApi.ts b/server/src/modules/api/lib/plextvApi.ts
@@ -167,9 +167,7 @@ export class PlexTvApi extends ExternalApiService {
       responseType: 'text',
     });
 
-    const parsedXml = (await parseStringPromise(
-      response,
-    )) as UsersResponse;
+    const parsedXml = (await parseStringPromise(response)) as UsersResponse;
     return parsedXml;
   }
 

diff --git a/ui/src/components/Collection/index.tsx b/ui/src/components/Collection/index.tsx
@@ -6,6 +6,7 @@ import CollectionDetail from './CollectionDetail'
 import CollectionOverview from './CollectionOverview'
 import { EPlexDataType } from '../../utils/PlexDataType-enum'
 import { IPlexMetadata } from '../Overview/Content'
+import { useToasts } from 'react-toast-notifications'
 
 export interface ICollection {
   id?: number
@@ -47,6 +48,7 @@ const Collection = () => {
   }>({ open: false, collection: undefined })
   const [library, setLibrary] = useState<ILibrary>()
   const [collections, setCollections] = useState<ICollection[]>()
+  const { addToast } = useToasts()
 
   useEffect(() => {
     document.title = 'Maintainerr - Collections'
@@ -74,6 +76,13 @@ const Collection = () => {
 
   const doActions = () => {
     PostApiHandler('/collections/handle', {})
+    addToast(
+      'Initiated collection handling in the background, Consult the logs for status updates.',
+      {
+        autoDismiss: true,
+        appearance: 'success',
+      },
+    )
   }
 
   const openDetail = (collection: ICollection) => {

diff --git a/ui/src/components/Common/AddButton/index.tsx b/ui/src/components/Common/AddButton/index.tsx
@@ -11,8 +11,8 @@ const AddButton = (props: IAddButton) => {
       className="add-button bg-amber-600 hover:bg-amber-500 flex m-auto h-9 rounded text-zinc-200 shadow-md"
       onClick={props.onClick}
     >
-      {<PlusCircleIcon className="m-auto h-5 ml-5" />}
-      <p className="m-auto rules-button-text ml-1 mr-5">{props.text}</p>
+      {<PlusCircleIcon className="m-auto h-5 ml-4" />}
+      <p className="m-auto rules-button-text ml-1 mr-4">{props.text}</p>
     </button>
   )
 }

diff --git a/ui/src/components/Common/ExecuteButton/index.tsx b/ui/src/components/Common/ExecuteButton/index.tsx
@@ -1,18 +1,37 @@
 import { PlayIcon } from '@heroicons/react/solid'
+import { useEffect, useState } from 'react'
+import { SmallLoadingSpinner } from '../LoadingSpinner'
 
 interface IExecuteButton {
   text: string
   onClick: () => void
 }
 
 const ExecuteButton = (props: IExecuteButton) => {
+  const [clicked, setClicked] = useState(false)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setClicked(false)
+    }, 10000)
+  }, [clicked])
+  const onClick = () => {
+    setClicked(true)
+    props.onClick()
+  }
+
   return (
     <button
       className="edit-button flex m-auto rounded h-9 text-zinc-200 shadow-md"
-      onClick={props.onClick}
+      disabled={clicked}
+      onClick={onClick}
     >
-        {<PlayIcon className="m-auto h-5 ml-5" />}{' '}
-        <p className="m-auto rules-button-text ml-1 mr-5">{props.text}</p>
+      {clicked ? (
+        <SmallLoadingSpinner className="h-5 m-auto ml-2" />
+      ) : (
+        <PlayIcon className="m-auto h-5 ml-4" />
+      )}{' '}
+      <p className="m-auto rules-button-text ml-1 mr-4">{props.text}</p>
     </button>
   )
 }

diff --git a/ui/src/components/Common/LoadingSpinner/index.tsx b/ui/src/components/Common/LoadingSpinner/index.tsx
@@ -1,33 +1,41 @@
-import React from 'react';
+import React from 'react'
 
-export const SmallLoadingSpinner: React.FC = () => {
+interface SmallLoadingSpinnerProps {
+  className?: string
+}
+
+export const SmallLoadingSpinner: React.FC<SmallLoadingSpinnerProps> = (
+  props: SmallLoadingSpinnerProps,
+) => {
   return (
-    <div className="inset-0 flex h-full w-full items-center justify-center text-zinc-200">
-      <svg
-        className="h-10 w-10"
-        viewBox="0 0 38 38"
-        xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
-      >
-        <g fill="none" fillRule="evenodd">
-          <g transform="translate(1 1)" strokeWidth="2">
-            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
-            <path d="M36 18c0-9.94-8.06-18-18-18">
-              <animateTransform
-                attributeName="transform"
-                type="rotate"
-                from="0 18 18"
-                to="360 18 18"
-                dur="1s"
-                repeatCount="indefinite"
-              />
-            </path>
+    <div className={`${props.className ? props.className : ''}`}>
+      <div className="inset-0 flex h-full w-full items-center justify-center text-zinc-200">
+        <svg
+          className={props.className ? props.className : 'h-10 w-10'}
+          viewBox="0 0 38 38"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+        >
+          <g fill="none" fillRule="evenodd">
+            <g transform="translate(1 1)" strokeWidth="2">
+              <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+              <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                  attributeName="transform"
+                  type="rotate"
+                  from="0 18 18"
+                  to="360 18 18"
+                  dur="1s"
+                  repeatCount="indefinite"
+                />
+              </path>
+            </g>
           </g>
-        </g>
-      </svg>
+        </svg>
+      </div>
     </div>
-  );
-};
+  )
+}
 
 const LoadingSpinner: React.FC = () => {
   return (
@@ -55,7 +63,7 @@ const LoadingSpinner: React.FC = () => {
         </g>
       </svg>
     </div>
-  );
-};
+  )
+}
 
-export default LoadingSpinner;
+export default LoadingSpinner
diff --git a/ui/src/components/Rules/index.tsx b/ui/src/components/Rules/index.tsx
@@ -1,24 +1,22 @@
-import { RefreshIcon } from '@heroicons/react/outline'
-import { PlayIcon } from '@heroicons/react/solid'
 import { debounce } from 'lodash'
-import React, { useContext, useEffect, useState } from 'react'
-import LibrariesContext from '../../contexts/libraries-context'
+import React, { useEffect, useState } from 'react'
 import GetApiHandler, { PostApiHandler } from '../../utils/ApiHandler'
 import AddButton from '../Common/AddButton'
 import ExecuteButton from '../Common/ExecuteButton'
 import LibrarySwitcher from '../Common/LibrarySwitcher'
 import LoadingSpinner from '../Common/LoadingSpinner'
 import RuleGroup, { IRuleGroup } from './RuleGroup'
 import AddModal from './RuleGroup/AddModal'
+import { useToasts } from 'react-toast-notifications'
 
 const Rules: React.FC = () => {
   const [addModalActive, setAddModal] = useState(false)
   const [editModalActive, setEditModal] = useState(false)
   const [data, setData] = useState()
   const [editData, setEditData] = useState<IRuleGroup>()
-  const LibrariesCtx = useContext(LibrariesContext)
   const [selectedLibrary, setSelectedLibrary] = useState<number>(9999)
   const [isLoading, setIsLoading] = useState(true)
+  const { addToast } = useToasts()
 
   const fetchData = async () => {
     if (selectedLibrary === 9999) return await GetApiHandler('/rules')
@@ -58,6 +56,13 @@ const Rules: React.FC = () => {
 
   const sync = () => {
     PostApiHandler(`/rules/execute`, {})
+    addToast(
+      'Initiated rule execution in the background. Consult the logs for status updates.',
+      {
+        autoDismiss: true,
+        appearance: 'success',
+      },
+    )
   }
 
   if (!data || isLoading) {