README.md

@@ -9,6 +9,13 @@
   - Multilanguage support
   - Markdown format for the rich text fields
 
+#### [Image Processor](https://github.com/Accords-Library/img.accords-library.com)
+- Convert the images from the CMS to 4 formats
+  - Small: 512x512, quality 60, .webp
+  - Medium: 1024x1024, quality 75, .webp
+  - Large: 2048x2048, quality 80, .webp
+  - Og: 512x512, quality 60, .jpg
+
 #### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)
 
 - Language: [TypeScript](https://www.typescriptlang.org/)
@@ -29,6 +36,12 @@
 - State Management: [React Context](https://reactjs.org/docs/context.html)
   - Persistent app state using LocalStorage
 - Support for many screen sizes and resolutions
+- SSG (Static Site Generation):
+  - The website is built before running in production
+  - Performances are great, and possibility to deploy the app using a CDN
+- OpenGraph and Metadata
+  - Good defaults for the metadate and OpenGraph properties
+  - Each page can provide the thumbnail, title, description to be used
 - Data quality testing
   - Data from the CMS is subject to a battery of tests (about 20 warning types and 40 error types) at build time
   - Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it.

src/components/Button.tsx

@@ -21,7 +21,7 @@ export default function Button(props: ButtonProps): JSX.Element {
       } ${
         props.active
           ? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed"
-          : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:drop-shadow-black-lg active:border-black"
+          : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black"
       }`}
     >
       {props.children}

src/pages/library/index.tsx

@@ -4,6 +4,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import {
+  GetCurrenciesQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
@@ -13,7 +14,7 @@ import AppLayout from "components/AppLayout";
 import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
 import Select from "components/Select";
 import { useEffect, useState } from "react";
-import { prettyDate, prettyinlineTitle } from "queries/helpers";
+import { convertPrice, prettyDate, prettyinlineTitle } from "queries/helpers";
 import Switch from "components/Switch";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
@@ -27,7 +28,7 @@ type GroupLibraryItems = Map<
 >;
 
 export default function Library(props: LibraryProps): JSX.Element {
-  const { langui, items } = props;
+  const { langui, items, currencies } = props;
 
   const [showSubitems, setShowSubitems] = useState<boolean>(false);
   const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
@@ -40,7 +41,7 @@ export default function Library(props: LibraryProps): JSX.Element {
   );
 
   const [sortedItems, setSortedItem] = useState<LibraryProps["items"]>(
-    sortBy(groupingMethod, filteredItems)
+    sortBy(groupingMethod, filteredItems, currencies)
   );
 
   const [groups, setGroups] = useState<GroupLibraryItems>(
@@ -54,7 +55,7 @@ export default function Library(props: LibraryProps): JSX.Element {
   }, [showSubitems, items, showPrimaryItems, showSecondaryItems]);
 
   useEffect(() => {
-    setSortedItem(sortBy(sortingMethod, filteredItems));
+    setSortedItem(sortBy(sortingMethod, filteredItems, currencies));
   }, [filteredItems, sortingMethod]);
 
   useEffect(() => {
@@ -278,7 +279,8 @@ function filterItems(
 
 function sortBy(
   orderByType: number,
-  items: LibraryProps["items"]
+  items: LibraryProps["items"],
+  currencies: GetCurrenciesQuery["currencies"]["data"]
 ): LibraryProps["items"] {
   switch (orderByType) {
     case 0:
@@ -297,8 +299,12 @@ function sortBy(
       });
     case 1:
       return [...items].sort((a, b) => {
-        const priceA = a.attributes.price ? a.attributes.price.amount : 99999;
-        const priceB = b.attributes.price ? b.attributes.price.amount : 99999;
+        const priceA = a.attributes.price
+          ? convertPrice(a.attributes.price, currencies[0])
+          : 99999;
+        const priceB = b.attributes.price
+          ? convertPrice(b.attributes.price, currencies[0])
+          : 99999;
         return priceA - priceB;
       });
     case 2:

src/queries/helpers.ts

@@ -33,10 +33,7 @@ export function prettyPrice(
   let result = "";
   currencies.map((currency) => {
     if (currency.attributes.code === targetCurrencyCode) {
-      let amountInUSD =
-        pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd;
-      let amountInTargetCurrency =
-        amountInUSD / currency.attributes.rate_to_usd;
+      const amountInTargetCurrency = convertPrice(pricePicker, currency);
       result =
         currency.attributes.symbol +
         amountInTargetCurrency.toLocaleString(undefined, {
@@ -48,6 +45,16 @@ export function prettyPrice(
   return result;
 }
 
+export function convertPrice(
+  pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"],
+  targetCurrency: GetCurrenciesQuery["currencies"]["data"][number]
+): number {
+  return (
+    (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) /
+    targetCurrency.attributes.rate_to_usd
+  );
+}
+
 export function prettySlug(slug?: string, parentSlug?: string): string {
   if (slug) {
     if (parentSlug && slug.startsWith(parentSlug))