Fix overview and review routes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/routes/preferences.ts

@@ -43,11 +43,11 @@ export const installRoute: RouteProps = {
 };
 
 export const extensionPageRoute: RouteProps = {
-  path: `${preferencesRoute.path}/extension/:extensionId?`,
+  path: `${preferencesRoute.path}/extension/:extensionId?/overview`,
 };
 
 export const extensionReviewsRoute: RouteProps = {
-  path: `${extensionPageRoute.path}/reviews`,
+  path: `${preferencesRoute.path}/extension/:extensionId?/reviews`,
 };
 
 export const preferencesURL = buildURL(preferencesRoute.path);

src/renderer/components/+preferences/extension-page.tsx

@@ -13,7 +13,7 @@ import { matchPath, Route, RouteProps, Switch, useParams } from "react-router";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Tab, Tabs } from "../tabs";
 import { navigate } from "../../navigation";
-import { extensionPageRoute, extensionPageURL, extensionReviewsRoute, extensionReviewsURL } from "../../../common/routes";
+import { extensionPageRoute, extensionReviewsRoute } from "../../../common/routes";
 
 export function ExtensionPage() {
   const [extension, setExtension] = useState<Extension>(null);
@@ -50,7 +50,7 @@ export function ExtensionPage() {
   }, []);
 
   if (!extension || !description) {
-    return <Spinner/>;
+    return <Spinner center/>;
   }
 
   return (
@@ -61,31 +61,26 @@ export function ExtensionPage() {
         navigate(url);
       }}>
         <Tab
-          value={`/preferences/extension/${extension.id}`}
+          value={`/preferences/extension/${extension.id}/overview`}
           label="Overview"
           active={isActive(extensionPageRoute)}
         />
         <Tab
-          value={`${extension.id}/reviews`}
+          value={`/preferences/extension/${extension.id}/reviews`}
           label="Rating & Review"
           active={isActive(extensionReviewsRoute)}
         />
-        {/* {tabs.map(({ title, routePath, url = routePath, exact }) => {
-          const isActive = !!matchPath(currentLocation, { path: routePath, exact });
-
-          return <Tab key={url} label={title} value={url} active={isActive}/>;
-        })} */}
       </Tabs>
 
 
       <div className={styles.contents}>
         <Switch>
-          <Route path={extensionReviewsURL()}>
-            <Reviews reviews={reviews}/>
-          </Route>
-          <Route path={extensionPageURL()}>
+          <Route path={`/preferences/extension/:extensionId?/overview`}>
             <Overview extension={extension} description={description}/>
           </Route>
+          <Route path={`/preferences/extension/:extensionId?/reviews`}>
+            <Reviews reviews={reviews}/>
+          </Route>
         </Switch>
       </div>
     </section>

src/renderer/components/+preferences/install.tsx

@@ -63,7 +63,7 @@ function ExtensionList({ extensions, search }: { extensions: Extension[], search
   ));
 
   function handleClick(extensionId: string) {
-    history.push(`extension/${extensionId}`);
+    history.push(`extension/${extensionId}/overview`);
   }
 
   if (!filteredExtensions.length) {

src/renderer/components/+preferences/preferences.tsx

@@ -26,7 +26,7 @@ import {
   terminalURL,
   installURL,
   installRoute,
-  extensionPageURL,
+  // extensionPageURL,
 } from "../../../common/routes";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
@@ -95,7 +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}/>
+        <Route path={`/preferences/extension`} component={ExtensionPage}/>
         <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
       </Switch>
     </SettingLayout>