Show extension reviews

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

src/common/routes/preferences.ts

@@ -46,6 +46,10 @@ export const extensionPageRoute: RouteProps = {
   path: `${preferencesRoute.path}/extension/:extensionId?`,
 };
 
+export const extensionReviewsRoute: RouteProps = {
+  path: `${extensionPageRoute.path}/reviews`,
+};
+
 export const preferencesURL = buildURL(preferencesRoute.path);
 export const appURL = buildURL(appRoute.path);
 export const proxyURL = buildURL(proxyRoute.path);
@@ -56,3 +60,4 @@ export const extensionURL = buildURL(extensionRoute.path);
 export const terminalURL = buildURL(terminalRoute.path);
 export const installURL = buildURL(installRoute.path);
 export const extensionPageURL = buildURL<{ extensionId?: string }>(extensionPageRoute.path);
+export const extensionReviewsURL = buildURL<{ extensionId?: string }>(extensionReviewsRoute.path);

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

@@ -6,30 +6,41 @@
 import styles from "./extension-page.module.scss";
 
 import React, { useEffect, useState } from "react";
-import { Extension, getExtensionById } from "./extension-list";
+import { Extension, getExtensionById, getReviewsExtensionById, Review } from "./extension-list";
 import { Spinner } from "../spinner";
 import { ExtensionCard } from "./extension-card";
-import { useParams } from "react-router";
+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";
 
 export function ExtensionPage() {
   const [extension, setExtension] = useState<Extension>(null);
   const [description, setDescription] = useState<string>("");
+  const [reviews, setReviews] = useState<Review[]>([]);
   const { id } = useParams<{ id?: string }>();
+  const isActive = (route: RouteProps) => !!matchPath(location.pathname, { path: route.path, exact: true });
 
   useEffect(() => {
     async function fetchExtension() {
       return await getExtensionById(id);
     }
 
+    async function fetchReviews() {
+      return await getReviewsExtensionById(id);
+    }
+
     async function loadData() {
       try {
         const extension = await fetchExtension();
         const readmeUrl = `${extension.githubRepositoryUrl.replace("github.com", "raw.githubusercontent.com")}/master/README.md`;
         const description = await (await fetch(readmeUrl)).text();
+        const reviews = await fetchReviews();
 
         setExtension(extension);
         setDescription(description);
+        setReviews(reviews);
       } catch (error) {
         console.error(error);
       }
@@ -46,27 +57,86 @@ export function ExtensionPage() {
     <section className="page">
       <ExtensionCard extension={extension}/>
       <hr />
+      <Tabs scrollable={false} onChange={(url) => {
+        navigate(url);
+      }}>
+        <Tab
+          value={`/preferences/extension/${extension.id}`}
+          label="Overview"
+          active={isActive(extensionPageRoute)}
+        />
+        <Tab
+          value={`${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}>
-        <div className="github">
-          <MarkdownViewer markdown={description} />
-        </div>
-        <div className="metadata">
-          <h3 className="mb-5">Categories</h3>
-          <div className="links">
-            {extension.category.map(category => (
-              <a key={`category-${category.id}`} href="#">{category.name}</a>
-            ))}
-          </div>
-          <h3 className="mb-5 mtp-5">Tags</h3>
-          <div className="links">
-            {extension.tags.map(tag => (
-              <a key={`tag-${tag.id}`} href="#">{tag.name}</a>
-            ))}
-          </div>
-          <h3 className="mb-5 mtp-5">More Info</h3>
-          <div className="moreInfo"></div>
-        </div>
+        <Switch>
+          <Route path={extensionReviewsURL()}>
+            <Reviews reviews={reviews}/>
+          </Route>
+          <Route path={extensionPageURL()}>
+            <Overview extension={extension} description={description}/>
+          </Route>
+        </Switch>
       </div>
     </section>
   );
 }
+
+function Overview({ extension, description }: { extension: Extension, description: string }) {
+  return (
+    <>
+      <div className="github">
+        <MarkdownViewer markdown={description} />
+      </div>
+      <div className="metadata">
+        <h3 className="mb-5">Categories</h3>
+        <div className="links">
+          {extension.category.map(category => (
+            <a key={`category-${category.id}`} href="#">{category.name}</a>
+          ))}
+        </div>
+        <h3 className="mb-5 mtp-5">Tags</h3>
+        <div className="links">
+          {extension.tags.map(tag => (
+            <a key={`tag-${tag.id}`} href="#">{tag.name}</a>
+          ))}
+        </div>
+        <h3 className="mb-5 mtp-5">More Info</h3>
+        <div className="moreInfo"></div>
+      </div>
+    </>
+  );
+}
+
+function Reviews({ reviews }: { reviews: Review[] }) {
+  return (
+    <div className="reviews">
+      <h2>User reviews</h2>
+
+      {reviews.map(review => (
+        <div key={review.id} className="review">
+          <div className="avatar">
+
+          </div>
+          <div className="content">
+            <div className="mb-4"><b>{review.user.firstName} {review.user.lastName}</b></div>
+            <div className="rating">rating</div>
+            <div className="text">
+              {review.content}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}