feat: finished addsubscriptions table

fix: fixed view data keys

src/renderer/components/blocks/modals/AddSubscriptionErrorModal/AddSubscriptionErrorModal.tsx

@@ -18,19 +18,19 @@ const AddSubscriptionErrorModal: React.FC<AddSubscriptionErrorModalProps> = (
       </Modal.Header>
       <Modal.Body>
         <div className="space-y-6">
+          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {
+              errorMessage || <FormattedMessage id="error-occurred-while-adding-subscription"/>
+            }
+          </p>
           <div className="space-y-2">
             <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              <FormattedMessage id="error-occurred-while-adding-subscription"/>
-            </p>
-            <p>
               <FormattedMessage id={'confirm-entered-store-id-is-correct-and-references-a-valid-store'}/>
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              <FormattedMessage id="ensure-chia-services-are-running-and-accessible"/>
+            </p>
             </p>
           </div>
-          <p>
-            {
-              errorMessage || <FormattedMessage id="ensure-chia-services-are-running-and-accessible"/>
-            }
-          </p>
         </div>
       </Modal.Body>
     </Modal>

src/renderer/components/blocks/tables/OwnedStoresTable.tsx

@@ -87,7 +87,7 @@ const OwnedStoresTable: React.FC<OwnedStoreSelectionTableProps> = (
     return (
       <>
         <Button onClick={refetch}>
-          <FormattedMessage id={'unable-to-load-stores-click-to-retry'} />
+          <FormattedMessage id={'unable-to-load-click-to-retry'} />
         </Button>
       </>
     );

src/renderer/components/blocks/tables/SubscriptionsTable.tsx

@@ -62,6 +62,9 @@ const SubscriptionsTable: React.FC<SubscriptionsTableProps> = ({setTableContents
       title: '',
       key: "view",
       render: (row: any) => {
+
+        console.log(row.storeId);
+
         return (
           <Link
             to={ROUTES.VIEW_STORE}
@@ -87,8 +90,6 @@ const SubscriptionsTable: React.FC<SubscriptionsTableProps> = ({setTableContents
     }
   ], [setStoreIdToUnsubscribe]);
 
-  console.log(subscriptionsData?.store_ids);
-
   return (
     <>
       {subscriptionQueryLoading

src/renderer/components/layout/DataTable.tsx

@@ -87,7 +87,7 @@ const DataTable = (({ columns, data, isLoading = false }) => {
             justifyContent: 'center',
           }}
         >
-          <FormattedMessage id="empty-table" />
+          <FormattedMessage id="no-data-found" />
         </div>
       )}
     </>

src/renderer/pages/Subscriptions/Subscriptions.tsx

@@ -1,28 +1,45 @@
-import {Spacer, SubscriptionsTable} from "@/components";
-import React, {useCallback, useEffect, useState} from "react";
-import {Button, Spinner, TextInput, Tooltip} from "flowbite-react";
+import { Spacer, SubscriptionsTable} from "@/components";
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {Button, TextInput, Tooltip} from "flowbite-react";
 import {FormattedMessage} from "react-intl";
-import {useSubscribeMutation} from "@/api/ipc/datalayer";
+import {useGetOwnedStoresQuery, useSubscribeMutation} from "@/api/ipc/datalayer";
 import {AddSubscriptionErrorModal} from "@/components";
 
 const Subscriptions: React.FC = () => {
 
   const [subscriptionStoreIdToAdd, setSubscriptionStoreIdToAdd] = useState<string>('');
   const [subscriptionsLoaded, setSubscriptionsLoaded] = useState<boolean>(false);
   const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+  const [storeIsOwned, setStoreIsOwned] = useState(false);
+
+  const storeInputRef = useRef<HTMLInputElement>(null);
 
   const [triggerSubscribe, {
     data: subscribeMutationData,
     isLoading: subscribeMutationLoading
   }] = useSubscribeMutation();
+  const {
+    data: ownedStoresData,
+    isLoading: ownedStoresQueryLoading,
+    error: ownedStoresQueryError
+  } = useGetOwnedStoresQuery({});
 
   const handleTextInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setSubscriptionStoreIdToAdd(event.target.value || '');
   }, []);
 
+  const handleStoreIsOwned = useCallback(() => {
+    setShowErrorModal(true);
+    if (storeInputRef?.current?.value){
+      storeInputRef.current.value = '';
+    }
+  }, [setShowErrorModal, storeInputRef])
+
   const handleAddSubscription = useCallback(() => {
-    triggerSubscribe({id: subscriptionStoreIdToAdd});
-  }, [triggerSubscribe, subscriptionStoreIdToAdd]);
+    const storeOwned: boolean = ownedStoresData?.store_ids.includes(subscriptionStoreIdToAdd);
+    setStoreIsOwned(storeOwned);
+    storeOwned ? handleStoreIsOwned() : triggerSubscribe({id: subscriptionStoreIdToAdd});
+  }, [triggerSubscribe, subscriptionStoreIdToAdd, handleStoreIsOwned, ownedStoresData]);
 
   useEffect(() => {
     if (subscribeMutationData?.error){
@@ -33,6 +50,9 @@ const Subscriptions: React.FC = () => {
   useEffect(() => {
     if (subscribeMutationData?.success) {
       setSubscriptionStoreIdToAdd('');
+      if (storeInputRef?.current?.value) {
+        storeInputRef.current.value = '';
+      }
     }
   }, [subscribeMutationData]);
 
@@ -54,14 +74,14 @@ const Subscriptions: React.FC = () => {
             </Tooltip>
           </div>
           <div style={{width: "100%", marginLeft: '10px', marginRight: '10px'}}>
-            <TextInput onChange={handleTextInputChange}/>
+            <TextInput ref={storeInputRef} onChange={handleTextInputChange}/>
           </div>
           <Button
             disabled={subscriptionStoreIdToAdd.length < 64 || subscriptionStoreIdToAdd.length > 64}
+            isProcessing={subscribeMutationLoading || ownedStoresQueryLoading}
             onClick={() => handleAddSubscription()}
             style={{inlineSize: 'min-content', whiteSpace: 'nowrap'}}
           >
-            {subscribeMutationLoading && <Spinner/>}
             <FormattedMessage id={"add-store-subscription"}/>
           </Button>
         </div>
@@ -71,7 +91,11 @@ const Subscriptions: React.FC = () => {
       <AddSubscriptionErrorModal
         showModal={showErrorModal}
         setShowModal={setShowErrorModal}
-        errorMessage={subscribeMutationData?.error}
+        errorMessage={
+          subscribeMutationData?.error ||
+          ownedStoresQueryError ||
+          (storeIsOwned && <FormattedMessage id={'you-cannot-subscribe-to-your-own-store'}/>)
+        }
       />
     </>
   );

src/renderer/translations/tokens/en-US.json

@@ -13,6 +13,7 @@
   "edit-store": "Edit Store",
   "back-to-my-stores": "Back to My Stores",
   "key": "Key",
+  "and": "and",
   "deploy": "Deploy",
   "success": "Success",
   "important": "Important",
@@ -53,7 +54,7 @@
   "yes-create-store": "Yes, Create Store",
   "no-cancel-store-creation": "No, Cancel Store Creation",
   "yes-unsubscribe": "Yes, unsubscribe",
-  "no-cancel": "No, cancel",
+  "cancel": "Cancel",
   "web2-gateway-settings" :"Web2 Gateway Settings",
   "data-layer-storage-settings" :"Data Layer Storage Settings",
   "deployment-settings" :"Deployment Settings",
@@ -96,5 +97,10 @@
   : "Unsubscribing from this store will remove its associated data from this device.",
   "this-subscription-will-appear-in-your-subscriptions-list-until-all-of-its-local-data-has-been-removed"
   : "This subscription will appear in your subscriptions list until all of its local data has been removed.",
-  "do-you-want-to-unsubscribe-from-this-store?": "Do you want to unsubscribe from this store?"
+  "do-you-want-to-unsubscribe-from-this-store?": "Do you want to unsubscribe from this store?",
+  "unable-to-add-subscription": "Unable to add subscription",
+  "you-cannot-subscribe-to-your-own-store": "You cannot subscribe to your own store.",
+  "confirm-entered-store-id-is-correct-and-references-a-valid-store"
+  : "Confirm entered store ID is correct and references a valid store.",
+  "no-data-found": "No data found"
 }