Use localhost fetch requests instead of mocked ones

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

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

@@ -6,10 +6,10 @@
 import styles from "./extension-page.module.scss";
 
 import React, { useEffect, useState } from "react";
-import { Extension, getExtensionById, getReviewsExtensionById, Review } from "./extension-list";
+import type { Extension, Review } from "./extension-list";
 import { Spinner } from "../spinner";
 import { ExtensionCard } from "./extension-card";
-import { matchPath, Route, RouteProps, Switch, useParams } from "react-router";
+import { matchPath, Route, RouteProps, Switch, useLocation } from "react-router";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Tab, Tabs } from "../tabs";
 import { navigate } from "../../navigation";
@@ -20,17 +20,17 @@ import { Rating } from "@material-ui/lab";
 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 });
+  const location = useLocation();
+  const id = location.search.replace("?id=", "");
 
   useEffect(() => {
     async function fetchExtension() {
-      return await getExtensionById(id);
-    }
+      const response = await fetch(`http://localhost:65113/api/extensions/${id}/`, {
+        method: "GET",
+      });
 
-    async function fetchReviews() {
-      return await getReviewsExtensionById(id);
+      return await response.json();
     }
 
     async function loadData() {
@@ -38,11 +38,9 @@ export function ExtensionPage() {
         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);
       }
@@ -80,7 +78,7 @@ export function ExtensionPage() {
           <Overview extension={extension} description={description}/>
         </Route>
         <Route path={`/preferences/extension/:extensionId?/reviews`}>
-          <Reviews reviews={reviews}/>
+          <Reviews reviews={extension.reviews}/>
         </Route>
       </Switch>
     </section>
@@ -96,7 +94,7 @@ function Overview({ extension, description }: { extension: Extension, descriptio
       <div className={styles.metadata}>
         <h3 className="mb-5">Categories</h3>
         <div className={styles.links}>
-          {extension.category.map(category => (
+          {extension.categories.map(category => (
             <a key={`category-${category.id}`} href="#">{category.name}</a>
           ))}
         </div>
@@ -122,17 +120,17 @@ function Reviews({ reviews }: { reviews: Review[] }) {
         <div key={review.id} className={styles.review}>
           <div className="avatar">
             <Avatar
-              title={review.user.username}
+              title={review.user}
               size={32}
             />
           </div>
           <div className="content">
-            <div className={styles.userName}><b>{review.user.firstName} {review.user.lastName}</b></div>
+            <div className={styles.userName}><b>{review.user}</b></div>
             <div className="mb-4">
               <Rating name="read-only" value={Math.floor(Math.random() * 5) + 1} readOnly />
             </div>
             <div className="text">
-              {review.content}
+              {review.text}
             </div>
           </div>
         </div>

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

@@ -11,7 +11,7 @@ import { Icon } from "../icon";
 import { SearchInput } from "../input";
 import { Spinner } from "../spinner";
 import { ExtensionCard } from "./extension-card";
-import { Extension, getExtensions } from "./extension-list";
+import type { Extension } from "./extension-list";
 
 export function Install() {
   const [extensions, setExtensions] = useState([]);
@@ -21,9 +21,13 @@ export function Install() {
   useEffect(() => {
     async function fetchExtensions() {
       try {
-        const response = await getExtensions();
+        const response = await fetch("http://localhost:65113/api/extensions/", {
+          method: "GET",
+        });
 
-        setExtensions(response);
+        const extensions = await response.json();
+
+        setExtensions(extensions.reverse());
       } catch (error) {
         console.error(error);
       }
@@ -63,7 +67,7 @@ function ExtensionList({ extensions, search }: { extensions: Extension[], search
   ));
 
   function handleClick(extensionId: string) {
-    history.push(`extension/${extensionId}/overview`);
+    history.push(`extension/${extensionId}/overview?id=${extensionId}`);
   }
 
   if (!filteredExtensions.length) {