From ca07904fa99d435c409a171577a98ea35d2e7e0f Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 8 Feb 2022 13:32:56 +0300
Subject: [PATCH] Go to extension page from extension list

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/extension-card.tsx      |  9 +++++----
 src/renderer/components/+preferences/install.tsx    | 13 +++++++++++--
 .../components/+preferences/preferences.tsx         |  3 +++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/+preferences/extension-card.tsx b/src/renderer/components/+preferences/extension-card.tsx
index f89b1f0320..61b6127ecc 100644
--- a/src/renderer/components/+preferences/extension-card.tsx
+++ b/src/renderer/components/+preferences/extension-card.tsx
@@ -20,10 +20,11 @@ interface Dependencies {
 }
 
 interface Props {
-  extension: Extension
+  extension: Extension;
+  onClick?: () => void;
 }
 
-function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: Props & Dependencies) {
+function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput, onClick }: Props & Dependencies) {
   const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
 
   function onInstall() {
@@ -31,7 +32,7 @@ function NonInjectedExtensionCard({ extension, extensionInstallationStateStore,
   }
 
   return (
-    <div className={styles.extensionCard}>
+    <div className={styles.extensionCard} onClick={onClick}>
       <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
       <div className={styles.contents}>
         <div className={styles.head}>
@@ -60,7 +61,7 @@ function NonInjectedExtensionCard({ extension, extensionInstallationStateStore,
               waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
               onClick={onInstall}
             >
-              <Icon className={styles.installButtonIco} material="cloud_download"/> 
+              <Icon className={styles.installButtonIco} material="cloud_download"/>
               Install
             </Button>
           </div>
diff --git a/src/renderer/components/+preferences/install.tsx b/src/renderer/components/+preferences/install.tsx
index 95966e7483..4dfb30d20f 100644
--- a/src/renderer/components/+preferences/install.tsx
+++ b/src/renderer/components/+preferences/install.tsx
@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { Icon } from "../icon";
 import { SearchInput } from "../input";
 import { Spinner } from "../spinner";
@@ -45,16 +46,24 @@ export function Install() {
 
       <hr />
 
-      <h2 style={{ marginTop: "30px", display: "flex", alignItems: "center" }}><Icon material="star" small style={{ opacity: ".3" }}/> Featured Extensions</h2>
+      <h2 style={{ marginTop: "30px", display: "flex", alignItems: "center" }}><Icon material="star" small style={{ opacity: ".3" }}/>&nbsp;Featured Extensions</h2>
       {renderExtensionsOrSpinner()}
     </section>
   );
 }
 
 function ExtensionList({ extensions }: { extensions: Extension[] }) {
+  const history = useHistory();
+
+  function handleClick(extensionId: string) {
+    history.push(`extension/${extensionId}`);
+  }
+
   return (
     <>
-      {extensions.map(extension => <ExtensionCard key={extension.id} extension={extension}/>)}
+      {extensions.map(extension => (
+        <ExtensionCard key={extension.id} extension={extension} onClick={() => handleClick(extension.id)}/>
+      ))}
     </>
   );
 }
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 9767455b90..367d939d40 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -26,6 +26,7 @@ import {
   terminalURL,
   installURL,
   installRoute,
+  extensionPageURL,
 } from "../../../common/routes";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
@@ -42,6 +43,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
 import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
 import { Install } from "./install";
+import { ExtensionPage } from "./extension-page";
 
 interface Dependencies {
   appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
@@ -93,6 +95,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
         <Route path={telemetryURL()} component={Telemetry}/>
         <Route path={extensionURL()} component={Extensions}/>
         <Route path={installURL()} component={Install}/>
+        <Route path={extensionPageURL()} component={ExtensionPage}/>
         <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
       </Switch>
     </SettingLayout>