285 add conditional anchor component (#291)

src/common-components/conditional-anchor.jsx

@@ -0,0 +1,42 @@
+import { jsx } from "@emotion/react";
+import React from "react";
+
+/**
+ * @param {{
+*  target:string,
+*  href: string,
+*  condition: boolean,
+*  className?: string,
+*  children?:React.ReactNode,
+*  style?:CSSProperties
+* }} 
+*/
+
+export function ConditionalAnchor(props){
+
+    const {target,
+        href,
+        condition,
+        className,
+        children,
+        style,} = props;
+    console.log(condition)
+    if (condition){
+        return(
+            <a href={href} target={target} className={className} style={style}>
+                {children}
+            </a>
+        )
+    }else{
+        return(
+            <span >
+                {children}
+            </span>
+        );
+    }
+
+
+
+
+
+}

src/detail-panels/lists/list-view.jsx

@@ -8,6 +8,8 @@ import { AccountShortEntry } from '../../common-components/account-short-entry';
 import { FormatTimestamp } from '../../common-components/format-timestamp';
 
 import './list-view.css';
+import { ConditionalAnchor } from '../../common-components/conditional-anchor';
+import { useResolveHandleOrDid } from '../../api';
 
 /**
  * @param {{
@@ -46,7 +48,9 @@ function ListViewEntry({ className, entry }) {
   };
 
   const opacity = entry.spam? 0.4 : 1;
-
+  console.log('list-view', entry.name, entry.url, entry.status, entry);
+  const resolved = useResolveHandleOrDid(entry.did);
+  console.log(resolved);
   return (
     <li className={'lists-entry ' + (className || '')}>
       <div className='row' style={{opacity}}>
@@ -63,9 +67,10 @@ function ListViewEntry({ className, entry }) {
       {/* <div className='row'  > */}
       <div>
         <span className='list-name'>
-          <a href={entry.url} target='__blank' style={{opacity}}>
+
+          <ConditionalAnchor target='__blank' style={{opacity}} href={entry.url} condition={(!resolved.isError  && resolved.data)}>
           {entry.name}
-          </a>
+          </ConditionalAnchor> 
           {entry.spam && (
             <ClickAwayListener onClickAway={handleTooltipClose}>
               <Tooltip 

src/detail-panels/packs/pack-view.jsx

@@ -3,6 +3,7 @@
 import { FormatTimestamp } from '../../common-components/format-timestamp';
 import {useResolveDidToProfile} from '../../api/resolve-handle-or-did'; 
 import "./list-packs.css"
+import { ConditionalAnchor } from '../../common-components/conditional-anchor';
 
 /**
  * @param {{
@@ -35,11 +36,12 @@ export function PackView({packs, className=""}){
       <div className='row'>
 
        <span className='pack-name'>
-        {originator.data?.avatarUrl 
-          ? (<a href={entry.url??""} target='__blank'><AvatarAndName name={entry.name} avatarUrl={originator.data?.avatarUrl} /> </a>) 
-          :( 
-          <AvatarAndName name={entry.name} avatarUrl={originator.data?.avatarUrl} />) 
-        }
+        <ConditionalAnchor 
+          condition={(!originator.isError && originator.data)}
+          href={entry.url??""} 
+          target='__blank'>
+          <AvatarAndName name={entry.name} avatarUrl={originator.data?.avatarUrl} />
+        </ConditionalAnchor>
         </span>
         <FormatTimestamp
           timestamp={entry.created_date ?? ""}