Update dependencies, fix filters, refactoring (#26)

* Node v18, update minor dependencies * Codemod pt1 * Removeu nrecognized type * ... * Fix imports * Fix filtering features, improve UI * Improve filters, image stuff * Prepare for Remix v2 * use @tsconfig/remix * Add missing type --------- Co-authored-by: Santeri Elo <[email protected]>
iffa · Aug 1, 2023 · 18ae650 · 18ae650 · vercel · Aug 1, 2023
1 parent f6083a3
commit 18ae650
Show file tree

Hide file tree

Showing 23 changed files with 15,235 additions and 1,812 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -21,10 +21,9 @@ jobs:
         id: nvmrc
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: "${{ steps.nvmrc.outputs.version }}"
-          cache: "npm"
+          node-version-file: ".nvmrc"
 
       - name: Install dependencies
         run: npm ci

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+v18.16.1
diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
@@ -1,5 +1,5 @@
-import { useTranslation } from "react-i18next";
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
+import { Trans, useTranslation } from "react-i18next";
 
 export const NavBar = (): JSX.Element => {
   const { t } = useTranslation("common");
@@ -9,8 +9,13 @@ export const NavBar = (): JSX.Element => {
       <div className="container mx-auto p-4 flex flex-row justify-between items-center align-middle">
         <Link to="/" className="text-xl text-gray-900 font-semibold">
           {t("title")}
-          <span className="text-gray-700 font-normal text-sm">
-            {t("version")}
+          <span className="text-gray-700 font-normal text-base">
+            <Trans
+              i18nKey="common:version"
+              components={{
+                span: <span className="font-semibold text-pink-500" />,
+              }}
+            />
           </span>
         </Link>
       </div>

diff --git a/app/components/product/ProductDetailsCard.tsx b/app/components/product/ProductDetailsCard.tsx
@@ -1,56 +1,59 @@
 import { Trans, useTranslation } from "react-i18next";
+import { getFormattedNumber, getFormattedPrice } from "~/utils/number-utils";
+import { getStoresAmountForProduct } from "~/utils/product-utils";
 import { Product } from "../../lib/model/product.model";
-import {
-  getFormattedNumber,
-  getFormattedPrice,
-} from "../../utils/number-utils";
-import { getStoresAmountForProduct } from "../../utils/product-utils";
 import ProductPlatformPill from "./ProductPlatformPill";
 
-function ProductDetailsCard({ product }: { product: Product }): JSX.Element {
+export function ProductDetailsCard({
+  product,
+}: {
+  product: Product;
+}): JSX.Element {
   const { t } = useTranslation();
   const price =
     product.bestOffer?.bestVoucher?.priceWithVoucher ||
     product.bestOffer?.price;
   const currency = product.bestOffer?.currency;
 
   return (
-    <div className="w-full bg-white rounded shadow">
-      <div className="p-4">
-        <h3
-          className="text-xl leading-6 font-medium text-gray-900"
-          data-cy="title"
-        >
-          {product.name}
-        </h3>
-        <p className="mt-1 max-w-2xl text-sm text-gray-500">
-          <Trans
-            i18nKey="product:developedBy"
-            values={{ developer: product.developer }}
-            components={{ span: <span className="font-semibold" /> }}
-          />
-        </p>
-        <p className="mt-1 max-w-2xl text-sm text-gray-500">
-          <Trans
-            i18nKey="product:publishedBy"
-            values={{ publisher: product.publisher }}
-            components={{ span: <span className="font-semibold" /> }}
-          />
-        </p>
-
-        <div className="flex flex-row space-x-2 mt-4 overflow-x-auto">
-          {Object.entries(product.availablePlatforms).map(([key, value]) => {
-            return (
-              <ProductPlatformPill
-                key={key}
-                platform={value}
-                isActive={value.gameId === product.id}
-              />
-            );
-          })}
+    <div className="bg-white rounded shadow w-full overflow-hidden">
+      <div className="flex flex-row">
+        {/** TODO: Use more optimized component instead of native <img> */}
+        <img src={product.coverImageUrl || "/img/placeholder_cover.svg"}></img>
+        <div className="p-4">
+          <h3
+            className="text-xl leading-6 font-medium text-gray-900"
+            data-cy="title"
+          >
+            {product.name}
+          </h3>
+          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+            <Trans
+              i18nKey="product:developedBy"
+              values={{ developer: product.developer }}
+              components={{ span: <span className="font-semibold" /> }}
+            />
+          </p>
+          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+            <Trans
+              i18nKey="product:publishedBy"
+              values={{ publisher: product.publisher }}
+              components={{ span: <span className="font-semibold" /> }}
+            />
+          </p>
+          <div className="flex flex-row space-x-2 mt-4 overflow-x-auto">
+            {Object.entries(product.availablePlatforms).map(([key, value]) => {
+              return (
+                <ProductPlatformPill
+                  key={key}
+                  platform={value}
+                  isActive={value.gameId === product.id}
+                />
+              );
+            })}
+          </div>
         </div>
       </div>
-
       <div className="border-t border-gray-200">
         <dl>
           <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -82,6 +85,9 @@ function ProductDetailsCard({ product }: { product: Product }): JSX.Element {
                   />
                 )}
               </a>
+              <p className="mt-2 text-gray-400">
+                <Trans i18nKey="product:bestOfferNote" />
+              </p>
             </dd>
           </div>
           <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -123,5 +129,3 @@ function ProductDetailsCard({ product }: { product: Product }): JSX.Element {
     </div>
   );
 }
-
-export default ProductDetailsCard;
diff --git a/app/components/product/ProductOfferTable.tsx b/app/components/product/ProductOfferTable.tsx
@@ -31,7 +31,7 @@ function ProductOfferTable({ product }: { product: Product }): JSX.Element {
                     </th>
                     <th
                       scope="col"
-                      className="hidden md:visible px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      className="md:visible px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                     >
                       {t("product:store")}
                     </th>

diff --git a/app/components/product/ProductOfferTableFilters.tsx b/app/components/product/ProductOfferTableFilters.tsx
@@ -1,23 +1,28 @@
+import { Form, useSearchParams } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
-import { Form, useSearchParams } from "remix";
+import { Store } from "~/lib/model/store.model";
 import { Edition } from "../../lib/model/edition.model";
 import { Region } from "../../lib/model/region.model";
 import ProductFilterCheckbox from "./ProductFilterCheckbox";
 
 function ProductOfferTableFilters({
   launchers,
   editions,
+  stores,
 }: {
   launchers: Region[];
   editions: Edition[];
+  stores: Store[];
 }): JSX.Element {
   const { t } = useTranslation();
 
   const [searchParams] = useSearchParams();
   const hasSelectedEditions = searchParams.has("edition");
   const hasSelectedLaunchers = searchParams.has("launcher");
+  const hasSelectedStores = searchParams.has("store");
   const selectedEditions = searchParams.getAll("edition");
   const selectedLaunchers = searchParams.getAll("launcher");
+  const selectedStores = searchParams.getAll("store");
 
   return (
     <Form reloadDocument className="px-4 mb-8">
@@ -30,7 +35,7 @@ function ProductOfferTableFilters({
             {launchers.map((launcher) => (
               <ProductFilterCheckbox
                 key={launcher.id}
-                title={launcher.name}
+                title={launcher.id}
                 name="launcher"
                 value={launcher.id}
                 checked={
@@ -61,6 +66,26 @@ function ProductOfferTableFilters({
             ))}
           </div>
         </div>
+
+        <div className="flex flex-col">
+          <h4 className="text-lg text-gray-900 font-semibold mb-2">
+            {t("product:stores")}
+          </h4>
+          <div className="grid grid-flow-row-dense grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-0.5">
+            {stores.map((store) => (
+              <ProductFilterCheckbox
+                key={store.id}
+                title={store.name}
+                name="store"
+                value={store.id.toString()}
+                checked={
+                  !hasSelectedStores ||
+                  !!selectedStores.find((x) => x === store.id.toString())
+                }
+              ></ProductFilterCheckbox>
+            ))}
+          </div>
+        </div>
       </div>
       <button
         type="submit"

diff --git a/app/components/product/ProductOfferTableRow.tsx b/app/components/product/ProductOfferTableRow.tsx
@@ -19,20 +19,18 @@ function ProductOfferTableRow({ offer }: { offer: Offer }): JSX.Element {
             <img
               className="h-10 w-10"
               src={getLauncherIcon(region.id)}
-              alt={region.name}
+              alt={region.id}
               width={40}
               height={40}
             ></img>
           </div>
           <div className="ml-4">
-            <div className="text-sm font-medium text-gray-900">
-              {region.name}
-            </div>
+            <div className="text-sm font-medium text-gray-900">{region.id}</div>
             <div className="text-sm text-gray-500">{edition.name}</div>
           </div>
         </div>
       </td>
-      <td className="hidden md:visible px-4 py-4 whitespace-nowrap text-sm text-gray-900">
+      <td className="md:visible px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900">
         <div>{store.name}</div>
       </td>
       <td className="px-4 py-4 whitespace-nowrap text-right">

diff --git a/app/components/product/ProductPlatformPill.tsx b/app/components/product/ProductPlatformPill.tsx
@@ -1,4 +1,4 @@
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 import { AvailablePlatform } from "../../lib/model/product.model";
 
 function ProductPlatformPill({

diff --git a/app/components/search/SearchResult.tsx b/app/components/search/SearchResult.tsx
@@ -1,4 +1,4 @@
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 import { Product } from "../../lib/model/product.model";
 import { getFormattedPrice } from "../../utils/number-utils";
 

diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,7 +1,7 @@
 import i18next from "i18next";
 import { hydrate } from "react-dom";
 import { initReactI18next } from "react-i18next";
-import { RemixBrowser } from "remix";
+import { RemixBrowser } from "@remix-run/react";
 import i18nOptions from "./i18n-options";
 
 if (!i18next.isInitialized) {

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
+import { type EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import i18nOptions from "./i18n-options";