Client: upgrade Prettier to v3

This changes the default value of `trailingComma` to all so a bunch code is reformatted.
StenAL · Oct 21, 2023 · 3187960 · 3187960
1 parent 672db33
commit 3187960
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 26 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -14,7 +14,7 @@
     "devDependencies": {
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.2.14",
-        "prettier": "2.5.1",
+        "prettier": "^3.0.3",
         "react-scripts": "^5.0.1",
         "typescript": "~5.2.2"
     },

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -113,7 +113,7 @@ export const App: FunctionComponent = () => {
     useEffect(() => {
         const fetchData = async () => {
             const data: { stocks?: Stock[]; timeFetched?: string; index?: IndexType } = await fetch(
-                `${API_URL}/stocks`
+                `${API_URL}/stocks`,
             ).then((res) => res.json());
             dispatch({
                 type: ActionType.FETCH_DATA,
@@ -168,7 +168,7 @@ export const App: FunctionComponent = () => {
                 freeCashFlow: fd?.freeCashFlow,
             };
         },
-        [state.selectedYear]
+        [state.selectedYear],
     );
 
     const visibleStocksData = state.stocks.filter((s) => s.visible).map((s) => getStockDisplayedData(s));

diff --git a/client/src/Reducer.ts b/client/src/Reducer.ts
@@ -100,15 +100,15 @@ export const reducer: Reducer<AppState, Action> = (state, action) => {
                     (s) =>
                         s[columnTitle as keyof Stock] ||
                         s.keyStats[columnTitle] ||
-                        getDisplayedFinancialData(s, state.selectedYear)?.[columnTitle]
+                        getDisplayedFinancialData(s, state.selectedYear)?.[columnTitle],
                 ) // don't sort stocks where sorting attribute is not available
                 .sort((a, b) => compareStocksByAttribute(a, b, columnTitle, state.selectedYear));
             sortedStocks = [
                 ...state.stocks.filter(
                     (s) =>
                         !s[columnTitle as keyof Stock] &&
                         !s.keyStats[columnTitle] &&
-                        !getDisplayedFinancialData(s, state.selectedYear)?.[columnTitle]
+                        !getDisplayedFinancialData(s, state.selectedYear)?.[columnTitle],
                 ),
                 ...sortedStocks,
             ]; // add stocks where sorting attribute is "undefined" to beginning of sorted sequence
@@ -120,7 +120,7 @@ export const reducer: Reducer<AppState, Action> = (state, action) => {
                           ...stock,
                           visible: !stock.visible,
                       }
-                    : stock
+                    : stock,
             );
             return { ...state, stocks: invertedVisibilityStocks };
         case ActionType.TOGGLE_COUNTRY_STOCKS:
@@ -130,7 +130,7 @@ export const reducer: Reducer<AppState, Action> = (state, action) => {
                           ...s,
                           visible: action.visible,
                       }
-                    : s
+                    : s,
             );
             return { ...state, stocks: toggledCountryStocks };
         case ActionType.TOGGLE_COLUMN_VISIBILITY:
@@ -140,7 +140,7 @@ export const reducer: Reducer<AppState, Action> = (state, action) => {
                           ...col,
                           visible: !col.visible,
                       }
-                    : col
+                    : col,
             );
             return { ...state, columns: newColumns };
         case ActionType.SELECT_YEAR:

diff --git a/client/src/components/HighlightedStats.tsx b/client/src/components/HighlightedStats.tsx
@@ -31,7 +31,7 @@ export const HighlightedStats: FunctionComponent<HighlightedStatsProps> = ({ sto
     const getIndexInvestmentChange = useCallback(
         (initialMoney: number): string =>
             index ? ((index.changePercent / 100 + 1) * initialMoney).toFixed(2).toString() : "XXXX.XX",
-        [index]
+        [index],
     );
 
     return (

diff --git a/client/src/components/StockTable.tsx b/client/src/components/StockTable.tsx
@@ -31,7 +31,7 @@ export const StockTable: FunctionComponent<StockTableProps> = ({
                     key={`stock_${s.isin}`}
                 />
             )),
-        [stocks, renderedColumns]
+        [stocks, renderedColumns],
     );
     return (
         <div>

diff --git a/client/src/components/StockTableHead.tsx b/client/src/components/StockTableHead.tsx
@@ -21,7 +21,7 @@ export const StockTableHead: FunctionComponent<StockTableHeadProps> = ({ titles,
             }
             return className;
         },
-        [sortingBy, sortingOrder]
+        [sortingBy, sortingOrder],
     );
 
     const generateTableHeaders = useCallback((): JSX.Element[] => {

diff --git a/client/src/components/filtering/FiltersContainer.tsx b/client/src/components/filtering/FiltersContainer.tsx
@@ -31,15 +31,15 @@ export const FiltersContainer: FunctionComponent<FilterersContainerProps> = ({
             columns
                 .filter((col) => !YEARLY_FINANCIAL_DATA_IDS.includes(col.title))
                 .map((col) => <ColumnFilter column={col} key={col.title} />),
-        [columns]
+        [columns],
     );
 
     const financialDataFilters = useMemo(
         (): JSX.Element[] =>
             columns
                 .filter((col) => YEARLY_FINANCIAL_DATA_IDS.includes(col.title))
                 .map((col) => <ColumnFilter column={col} key={col.title} />),
-        [columns]
+        [columns],
     );
 
     const countryFilters = useMemo(
@@ -51,7 +51,7 @@ export const FiltersContainer: FunctionComponent<FilterersContainerProps> = ({
                     countryCode={countryCode}
                 />
             )),
-        [stocks]
+        [stocks],
     );
 
     const stockFilters = useMemo((): JSX.Element[] => {
@@ -62,7 +62,7 @@ export const FiltersContainer: FunctionComponent<FilterersContainerProps> = ({
     const yearFilters = useMemo(
         (): JSX.Element[] =>
             years.map((year) => <YearFilter year={year} key={year} selected={year === selectedYear} />),
-        [years, selectedYear]
+        [years, selectedYear],
     );
 
     return (

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -128,6 +128,6 @@ await i18n
 // https://react.i18next.com/latest/typescript
 declare module "i18next" {
     interface CustomTypeOptions {
-        resources: typeof resources["en"];
+        resources: (typeof resources)["en"];
     }
 }
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -13,5 +13,5 @@ const root = createRoot(container);
 root.render(
     <StrictMode>
         <App />
-    </StrictMode>
+    </StrictMode>,
 );
diff --git a/client/src/style/FiltersContainer.css b/client/src/style/FiltersContainer.css
@@ -98,7 +98,12 @@ ul.columns-4 {
     top: 9px;
     width: 2px;
     height: 2px;
-    box-shadow: 2px 0 0 white, 4px 0 0 #f4f4f4, 4px -2px 0 #f4f4f4, 4px -4px 0 #f4f4f4, 4px -6px 0 #f4f4f4,
+    box-shadow:
+        2px 0 0 white,
+        4px 0 0 #f4f4f4,
+        4px -2px 0 #f4f4f4,
+        4px -4px 0 #f4f4f4,
+        4px -6px 0 #f4f4f4,
         4px -8px 0 #f4f4f4;
     transform: rotate(45deg);
 }