app_store UI: publish page fix

kinode/packages/app_store/ui/src/pages/PublishPage.tsx

@@ -1,17 +1,16 @@
 import React, { useState, useCallback, FormEvent, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { useAccount, useWriteContract, useWaitForTransactionReceipt, usePublicClient } from 'wagmi'
 import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
 import { keccak256, toBytes } from 'viem';
 import { mechAbi, KINOMAP, encodeIntoMintCall, encodeMulticalls, kinomapAbi, MULTICALL } from "../abis";
 import { kinohash } from '../utils/kinohash';
 import useAppsStore from "../store";
-import { AppInfo } from "../types/Apps";
 
 export default function PublishPage() {
   const { state } = useLocation();
   const { openConnectModal } = useConnectModal();
-  const { apps } = useAppsStore();
+  const { ourApps, fetchOurApps } = useAppsStore();
   const publicClient = usePublicClient();
 
   const { address, isConnected, isConnecting } = useAccount();
@@ -25,21 +24,11 @@ export default function PublishPage() {
   const [publisherId, setPublisherId] = useState<string>(window.our?.node || "");
   const [metadataUrl, setMetadataUrl] = useState<string>("");
   const [metadataHash, setMetadataHash] = useState<string>("");
-  const [myPublishedApps, setMyPublishedApps] = useState<AppInfo[]>([]);
 
   useEffect(() => {
-    const app: AppInfo | undefined = state?.app;
-    if (app) {
-      setPackageName(app.package);
-      setPublisherId(app.publisher);
-    }
-  }, [state])
+    fetchOurApps();
+  }, [fetchOurApps]);
 
-  // useEffect(() => {
-  //   setMyPublishedApps(
-  //     apps.filter((app) => app.publisher?.toLowerCase() === window.our.node?.toLowerCase())
-  //   );
-  // }, [apps, address])
 
   const calculateMetadataHash = useCallback(async () => {
     if (!metadataUrl) {
@@ -261,12 +250,15 @@ export default function PublishPage() {
 
       <div className="my-packages">
         <h2>Packages You Own</h2>
-        {myPublishedApps.length > 0 ? (
+        {ourApps.length > 0 ? (
           <ul>
-            {myPublishedApps.map((app) => (
-              <li key={`${app.package}${app.publisher}`}>
-                <span>{app.package}</span>
-                <button onClick={() => unpublishPackage(app.package, app.publisher)}>
+            {ourApps.map((app) => (
+              <li key={`${app.package_id.package_name}:{app.package_id.publisher_node}`}>
+                <Link to={`/app/${app.package_id.package_name}:${app.package_id.publisher_node}`} className="app-name">
+                  {app.metadata?.name || app.package_id.package_name}
+                </Link>
+
+                <button onClick={() => unpublishPackage(app.package_id.package_name, app.package_id.publisher_node)}>
                   Unpublish
                 </button>
               </li>

kinode/packages/app_store/ui/src/store/index.ts

@@ -77,7 +77,6 @@ const useAppsStore = create<AppsStore>()(
         const res = await fetch(`${BASE_URL}/apps`)
         if (res.status === HTTP_STATUS.OK) {
           const data = await res.json()
-          console.log('listings', data)
           set({ listings: data.apps || [] })
         }
       },
@@ -114,9 +113,10 @@ const useAppsStore = create<AppsStore>()(
 
       fetchOurApps: async () => {
         const res = await fetch(`${BASE_URL}/ourapps`)
+
         if (res.status === HTTP_STATUS.OK) {
-          const ourApps = await res.json()
-          set({ ourApps })
+          const data = await res.json()
+          set({ ourApps: data.apps || [] })
         }
       },