AppStoreDetail.tsx raw

   1  import React from "react";
   2  import { useNavigate, useParams } from "react-router";
   3  import { AboutAppCard } from "src/components/connections/AboutAppCard";
   4  import { AppLinksCard } from "src/components/connections/AppLinksCard";
   5  import { AppStoreDetailHeader } from "src/components/connections/AppStoreDetailHeader";
   6  import {
   7    AppStoreApp,
   8    appStoreApps,
   9  } from "src/components/connections/SuggestedAppData";
  10  import Loading from "src/components/Loading";
  11  import { useAppsForAppStoreApp } from "src/hooks/useApps";
  12  
  13  export function AppStoreDetail() {
  14    const { appStoreId } = useParams() as { appStoreId: string };
  15    const appStoreApp = appStoreApps.find((x) => x.id === appStoreId);
  16    const navigate = useNavigate();
  17  
  18    if (!appStoreApp) {
  19      navigate("/apps?tab=app-store");
  20      return null;
  21    }
  22  
  23    // Redirect internal apps to their dedicated pages
  24    if (appStoreApp.internal) {
  25      navigate(`/internal-apps/${appStoreId}`);
  26      return null;
  27    }
  28  
  29    return <AppStoreDetailInternal appStoreApp={appStoreApp} />;
  30  }
  31  
  32  function AppStoreDetailInternal({ appStoreApp }: { appStoreApp: AppStoreApp }) {
  33    const connectedApps = useAppsForAppStoreApp(appStoreApp);
  34    const navigate = useNavigate();
  35  
  36    React.useEffect(() => {
  37      if (connectedApps && connectedApps.length > 0) {
  38        navigate(`/apps/${connectedApps[0].id}`, {
  39          replace: true,
  40        });
  41      }
  42    }, [connectedApps, navigate]);
  43  
  44    if (!connectedApps) {
  45      return <Loading />;
  46    }
  47  
  48    return (
  49      <div className="grid gap-3">
  50        <AppStoreDetailHeader appStoreApp={appStoreApp} />
  51        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
  52          <AboutAppCard appStoreApp={appStoreApp} />
  53          <AppLinksCard appStoreApp={appStoreApp} />
  54          {/* <Card>
  55            <CardHeader>
  56              <CardTitle className="text-2xl">How to Connect</CardTitle>
  57            </CardHeader>
  58            <CardContent className="flex flex-col gap-3">
  59              {appStoreApp.guide || (
  60                <ul className="list-inside list-decimal">
  61                  <li>Install the app</li>
  62                  <li>
  63                    Click{" "}
  64                    <Link to={`/apps/new?app=${appStoreId}`}>
  65                      <Button variant="link" className="px-0">
  66                        Connect to {appStoreApp.title}
  67                      </Button>
  68                    </Link>
  69                  </li>
  70                  <li>
  71                    Open the Alby Go app on your mobile and scan the QR code
  72                  </li>
  73                </ul>
  74              )}
  75            </CardContent>
  76          </Card> */}
  77        </div>
  78      </div>
  79    );
  80  }
  81