added share link to cube view

src/ui/component/copyToClipboardButton.tsx

@@ -1,22 +1,24 @@
-import React, { useState } from 'react'
+import React, { HTMLAttributes, useState } from 'react'
 import { TaskStatus } from '../../types'
 
-const buttonText = {
+const DEFAULT_BUTTON_TEXT = {
   unstarted: 'copy to clipboard',
   success: 'copied successfully!',
   error: 'there was an error copying',
 }
 
-interface CopyToClipboardButtonProps {
+interface CopyToClipboardButtonProps extends HTMLAttributes<HTMLButtonElement> {
   copyText: string
   children?: React.ReactNode
+  buttonText?: Partial<Record<TaskStatus, React.ReactNode>>
   className?: string
 }
-export const CopyToClipboardButton = ({ copyText, className, children }: CopyToClipboardButtonProps) => {
+export const CopyToClipboardButton = ({ buttonText, copyText, className, children, ...rest }: CopyToClipboardButtonProps) => {
   const [clipboardStatus, setClipboardStatus] =
     useState<TaskStatus>('unstarted')
 
   return <button
+    {...rest}
     className={className}
     disabled={clipboardStatus !== 'unstarted'}
     onClick={() => {
@@ -33,6 +35,6 @@ export const CopyToClipboardButton = ({ copyText, className, children }: CopyToC
         })
     }}
   >
-    {children ?? buttonText[clipboardStatus]}
+    {children ?? buttonText[clipboardStatus] ?? DEFAULT_BUTTON_TEXT[clipboardStatus]}
   </button>
 }

src/ui/cubeView.tsx

@@ -15,8 +15,14 @@ import { LoaderText } from './component/loaders'
 import { useBulkCubeImporter } from '../api/cubecobra/useBulkCubeImporter'
 import { Multiselect } from './component/multiselect'
 import { useLocalStorage } from '../api/local/useLocalStorage'
+import { useSearchParams } from 'react-router-dom'
+import { CopyToClipboardButton } from './component/copyToClipboardButton'
 
-
+const shareButtonText = {
+  unstarted: '🔗',
+  success: '✅',
+  error: '🚫',
+}
 interface OrderedCard extends Card {
   index: number
 }
@@ -163,6 +169,11 @@ export function CubeView() {
               </a>
               {" "}
               <RefreshButton toSubmit={[cube]} />
+              <CopyToClipboardButton
+                copyText={`${window.location.protocol}//${window.location.host}/data/cube/${cube.key}?source=${cube.source}`}
+                title={`copy share link to keyboard`}
+                buttonText={shareButtonText}
+              />
             </>}
             {cube.source === "list" && "a text list"}
             {" "}
@@ -237,9 +248,17 @@ interface NotFoundProps {
 function NotFound({cubekey}: NotFoundProps) {
   const { attemptImport, isRunning, missingCubes, source, setSource } = useBulkCubeImporter()
   const notFound = useMemo(() => missingCubes.includes(cubekey), [missingCubes, cubekey, source])
+  let [searchParams] = useSearchParams();
+  useEffect(() => {
+    const source = searchParams.get("source")
+    if (source === "cubecobra" || source === "cubeartisan") {
+      setSource(source);
+      attemptImport([cubekey], source)
+    }
+  }, [searchParams])
 
   return <div className="header row baseline">
-    <h2>{cubekey} not found</h2>
+    <h2>{cubekey} not found in local database</h2>
     <div>
       <button disabled={isRunning} onClick={() => {
         setSource("cubeartisan")
@@ -251,5 +270,6 @@ function NotFound({cubekey}: NotFoundProps) {
       }}>import from cubecobra</button>
     </div>
     {notFound && <div className="alert">{cubekey} not found in {source}</div>}
+    {isRunning && <LoaderText text={`Fetching ${cubekey} from ${source}`} />}
   </div>
 }

src/ui/data/cubeDataView.tsx

@@ -3,7 +3,7 @@ import { cogDB } from '../../api/local/db'
 import { NormedCard, CubeSource, CUBE_SOURCE_OPTIONS } from 'mtgql'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { BulkCubeSiteImporter } from './bulkCubeSiteImporter'
-import { isFunction } from 'lodash'
+import { isFunction, sortBy } from 'lodash'
 import { DISMISS_TIMEOUT_MS, ToasterContext } from '../component/toaster'
 import { ListImporterContext } from '../../api/local/useListImporter'
 import { LoaderBar } from '../component/loaders'
@@ -27,7 +27,7 @@ export const CubeDataView = () => {
 
   const listImporter = useContext(ListImporterContext)
 
-  const existingCubes = useLiveQuery(() => cogDB.cube.toArray())
+  const existingCubes = useLiveQuery(async () => sortBy(await cogDB.cube.toArray(), [(it) => it.key.toLowerCase()]))
 
   const [showConfirmation, setShowConfirmation] = useState(false)