From 386efce0a78b79d35106c35c36a44b925b03c58f Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Mon, 7 Mar 2022 16:27:38 +0100
Subject: [PATCH 1/3] Fixed small visual problem with buttons
---
src/components/Button.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 73eda2b..a968847 100644
--- a/src/components/Button.tsx
+++ b/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}
From 1b25bcc22d6100b3bc62736b9b9d3eac23a6fb36 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Mon, 7 Mar 2022 21:43:51 +0100
Subject: [PATCH 2/3] Prices can now be properly compared between currencies
---
src/pages/library/index.tsx | 20 +++++++++++++-------
src/queries/helpers.ts | 15 +++++++++++----
2 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 4dec60f..cba6882 100644
--- a/src/pages/library/index.tsx
+++ b/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:
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts
index c475860..6e30470 100644
--- a/src/queries/helpers.ts
+++ b/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))
From 6de9302306da035cadc9b3be5e37fd661614de89 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Mon, 7 Mar 2022 21:57:56 +0100
Subject: [PATCH 3/3] Upadated REAME
---
README.md | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/README.md b/README.md
index 6b245ca..66573d1 100644
--- a/README.md
+++ b/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.