feat: display addon icons

PolarExpress · Jun 14, 2024 · 6163ada · 6163ada
1 parent 33f5cf8
commit 6163ada
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 33 deletions.
diff --git a/assets/favicon-180x180.png b/assets/favicon-180x180.png
diff --git a/src/components/addonIcon.tsx b/src/components/addonIcon.tsx
@@ -0,0 +1,37 @@
+/*
+ * This program has been developed by students from the bachelor
+ * Computer Science at Utrecht University within the Software Project course.
+ *
+ * © Copyright Utrecht University
+ * (Department of Information and Computing Sciences)
+ */
+
+import { Addon } from "@polarexpress/types/addon";
+import React from "react";
+import GpLogo from "../../assets/favicon-180x180.png";
+
+type AddonItemProperties = {
+  addon: Addon;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Renders the icon for a given addon.
+ */
+function AddonIcon({ addon, ...properties }: AddonItemProperties) {
+  const { _id, icon, name } = addon;
+
+  return (
+    <div {...properties}>
+      <img
+        alt={`Icon for ${name}`}
+        src={
+          icon
+            ? `${import.meta.env.VITE_API_BASE}/store/addons/${_id}/${icon}`
+            : GpLogo
+        }
+      />
+    </div>
+  );
+}
+
+export default AddonIcon;
diff --git a/src/mockData/addons.ts b/src/mockData/addons.ts
@@ -26,7 +26,7 @@ export const generateAddon = (index: number): Addon => ({
   author: authorList[(index - 1) % authorList.length],
   authorId: authorList[(index - 1) % authorList.length].userId,
   category: categories[(index - 1) % categories.length],
-  icon: "icon.png",
+  icon: undefined,
   installCount: 0,
   name: `Addon${index}`,
   summary: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Addon ${index}.`

diff --git a/src/pages/addonPage/addonList/addonCard.tsx b/src/pages/addonPage/addonList/addonCard.tsx
@@ -10,6 +10,7 @@ import type { Addon } from "@polarexpress/types/addon";
 
 import { Link } from "react-router-dom";
 import InstallIcon from "../../../../assets/install.svg";
+import AddonIcon from "@polarexpress/components/addonIcon";
 
 /**
  * Defines the properties for the AddonCard component.
@@ -26,20 +27,26 @@ interface AddonCardProperties {
  */
 const AddonCard = ({ addOn }: AddonCardProperties) => {
   return (
-    <div className="size-64 flex-none gap-4 text-center font-sans font-bold leading-7">
+    <div className="size-64 flex-none gap-4 font-sans font-bold leading-7">
       <Link
         className="flex h-full flex-col rounded-lg border border-gray-200 bg-white p-4 hover:shadow-md"
         data-testid="addon-card"
         to={`/addons/${addOn._id}`}>
-        <div className="grow">
-          <h1 className="mt-2 truncate text-2xl font-semibold">{addOn.name}</h1>
+        <div className="flex flex-col">
+          <AddonIcon
+            addon={addOn}
+            className="mb-2 aspect-square w-1/4 self-center"
+          />
+          <h1 className="truncate border-t-2 pt-2 text-2xl font-semibold">
+            {addOn.name}
+          </h1>
 
           {/* TODO: Fetch author name instead of id */}
-          <p className="mt-2 truncate text-xs font-thin text-gray-400">
+          <p className="truncate text-xs font-thin text-gray-400">
             Author: {addOn.authorId}
           </p>
 
-          <p className="mt-2 line-clamp-3 text-lg font-normal text-gray-700">
+          <p className="line-clamp-3 text-ellipsis text-sm font-normal leading-snug text-gray-700">
             {addOn.summary}
           </p>
         </div>

diff --git a/src/pages/addonPage/addonPage.tsx b/src/pages/addonPage/addonPage.tsx
@@ -26,6 +26,7 @@ import {
   useGetAddonByIdQuery,
   useGetAddonReadmeByIdQuery
 } from "./addonList/addonApi";
+import AddonIcon from "@polarexpress/components/addonIcon";
 
 /**
  * Renders the individual page of an add-on. It retrieves information about the
@@ -139,29 +140,32 @@ const AddonPage = () => {
 
   return (
     <div className="m-8 font-sans leading-10" data-testid="addon-page">
-      <div className="mb-2 border-b-2 pb-2 text-center">
+      <div className="mb-2 flex items-center justify-center gap-4 border-b-2 pb-2 text-center">
+        <AddonIcon addon={addon} className="aspect-square w-1/6" />
         {/* Name, author, summary. */}
-        <h1 className="text-4xl font-bold">{addon.name}</h1>
-        <p className="text-sm font-light">{addon.authorId}</p>
-        <p>{addon.summary}</p>
-        <div className="mt-2 flex items-center justify-center">
-          <img className="mr-2 h-6 text-gray-600" src={InstallIcon}></img>
-          <div
-            className="text-lg font-semibold text-gray-800"
-            data-testid="install-count">
-            {addon.installCount} installs
+        <div className="w-1/2">
+          <h1 className="text-4xl font-bold">{addon.name}</h1>
+          <p className="text-sm font-light">{addon.authorId}</p>
+          <p className="leading-snug">{addon.summary}</p>
+          <div className="mt-2 flex items-center justify-center">
+            <img className="mr-2 h-6 text-gray-600" src={InstallIcon}></img>
+            <div
+              className="text-lg font-semibold text-gray-800"
+              data-testid="install-count">
+              {addon.installCount} installs
+            </div>
+          </div>
+          <div className="my-4 flex justify-center">
+            <InstallButton
+              authorized={auth.authorized ?? false}
+              handleClick={handleInstall}
+              installPending={install.isPending}
+              installationError={installationError}
+              isAddonInstalled={installed}
+              uninstallPending={unInstall.isPending}
+              userAddonsLoading={userAddonsLoading}
+            />
           </div>
-        </div>
-        <div className="my-4 flex justify-center">
-          <InstallButton
-            authorized={auth.authorized ?? false}
-            handleClick={handleInstall}
-            installPending={install.isPending}
-            installationError={installationError}
-            isAddonInstalled={installed}
-            uninstallPending={unInstall.isPending}
-            userAddonsLoading={userAddonsLoading}
-          />
         </div>
       </div>
 
@@ -183,11 +187,7 @@ const AddonPage = () => {
             ))}
           {readMe !== undefined && (
             <div className="markdown" data-testid="readme">
-              <Markdown
-                className="markdown [&_a]:underline"
-                remarkPlugins={[remarkGfm]}>
-                {readMe}
-              </Markdown>
+              <Markdown remarkPlugins={[remarkGfm]}>{readMe}</Markdown>
             </div>
           )}
         </div>

diff --git a/src/types/addon.ts b/src/types/addon.ts
@@ -39,7 +39,7 @@ export interface Addon {
   /**
    * Link to the icon of the addon.
    */
-  icon: string;
+  icon?: string;
   /**
    * Number of times this addon was installed.
    */