Merge pull request #940 from the-hideout/query-on-language-change

re-queries the API when language is changed
the-hideout · May 31, 2024 · 0887623 · 0887623
2 parents beec374 + 85a96fb
commit 0887623
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 68 deletions.
diff --git a/src/components/data-table/index.js b/src/components/data-table/index.js
@@ -107,18 +107,23 @@ function DataTable({
 
         return rowContainer.map((row, i) => {
             prepareRow(row);
-            const tableProps = row.getRowProps();
+            const tableProps = {...row.getRowProps()};
 
             tableProps.className = `${
                 row.depth >= 1 ? 'expanded' : ''
             }`;
+            delete tableProps.key;
             return (
-                <tr key={row.original.id} {...tableProps}>
-                    {row.cells.map((cell) => {
+                <tr key={`data-table-row-${i}`} {...tableProps}>
+                    {row.cells.map((cell, i) => {
+                        const cellProps = {...cell.getCellProps()};
+                        const cellKey = cellProps.key;
+                        delete cellProps.key;
                         return (
                             <td
+                                key={cellKey}
                                 className={'data-cell'}
-                                {...cell.getCellProps()}
+                                {...cellProps}
                             >
                                 {cell.render('Cell')}
                             </td>
@@ -135,9 +140,19 @@ function DataTable({
             <table className={`data-table ${className ?? ''}`} {...getTableProps()}>
                 <thead>
                     {headerGroups.map((headerGroup) => (
-                        <tr {...headerGroup.getHeaderGroupProps()}>
+                        <tr key={headerGroup.getHeaderGroupProps().key} {...Object.keys(headerGroup.getHeaderGroupProps()).reduce((props, propName) => {
+                            if (propName !== 'key') {
+                                props[propName] = headerGroup.getHeaderGroupProps()[propName];
+                            }
+                            return props;
+                        }, {})}>
                             {headerGroup.headers.map((column) => (
-                                <th {...column.getHeaderProps(column.getSortByToggleProps({ title: undefined }))}>
+                                <th key={column.getHeaderProps(column.getSortByToggleProps({ title: undefined })).key} {...Object.keys(column.getHeaderProps(column.getSortByToggleProps({ title: undefined }))).reduce((props, propName) => {
+                                    if (propName !== 'key') {
+                                        props[propName] = column.getHeaderProps(column.getSortByToggleProps({ title: undefined }))[propName];
+                                    }
+                                    return props;
+                                }, {})}>
                                     <span>
                                         {column.render('Header')}
                                     </span>
@@ -176,7 +191,7 @@ function DataTable({
                             </td>
                         </tr>
                     )}
-                    <tr className="last-row" ref={ref} />
+                    <tr key="last-row" className="last-row" ref={ref} />
                 </tbody>
                 {sumColumns && rows.length > 1 && (
                     <tfoot>

diff --git a/src/features/achievements/index.js b/src/features/achievements/index.js
@@ -4,7 +4,7 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import equal from 'fast-deep-equal';
 
 import doFetchAchievements from './do-fetch-achievements.mjs';
-import { langCode } from '../../modules/lang-helpers.js';
+import { langCode, useLangCode } from '../../modules/lang-helpers.js';
 
 const initialState = {
     data: [],
@@ -40,28 +40,34 @@ const achievementsSlice = createSlice({
 
 export const achievementsReducer = achievementsSlice.reducer;
 
-let fetchedData = false;
+let fetchedLang = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useAchievementsData() {
     const dispatch = useDispatch();
     const { data, status, error } = useSelector((state) => state.achievements);
+    const lang = useLangCode();
 
     useEffect(() => {
-        if (!fetchedData) {
-            fetchedData = true;
+        if (fetchedLang !== lang) {
+            fetchedLang = lang;
             dispatch(fetchAchievements());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchAchievements());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
-    }, [dispatch]);
+    }, [dispatch, lang]);
 
     return { data, status, error };
 };
diff --git a/src/features/barters/index.js b/src/features/barters/index.js
@@ -122,7 +122,7 @@ export const selectAllBarters = createSelector([selectBarters, selectQuests, sel
         return {
             ...barter,
             requiredItems: barter.requiredItems.reduce((requirements, req) => {
-                let matchedItem = items.find(it => it.id === req.item.id);
+                let matchedItem = items?.find(it => it.id === req.item.id);
                 if (matchedItem) {
                     requirements.push({
                         ...req,
@@ -132,7 +132,7 @@ export const selectAllBarters = createSelector([selectBarters, selectQuests, sel
                 return requirements;
             }, []),
             rewardItems: barter.rewardItems.reduce((requirements, req) => {
-                const matchedItem = items.find(it => it.id === req.item.id);
+                const matchedItem = items?.find(it => it.id === req.item.id);
                 if (matchedItem) {
                     requirements.push({
                         ...req,
@@ -149,6 +149,11 @@ export const selectAllBarters = createSelector([selectBarters, selectQuests, sel
 let fetchedData = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useBartersData() {
     const dispatch = useDispatch();
     const { status, error } = useSelector((state) => state.barters);
@@ -160,15 +165,15 @@ export default function useBartersData() {
         if (!fetchedData) {
             fetchedData = true;
             dispatch(fetchBarters());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchBarters());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
     }, [dispatch]);
 

diff --git a/src/features/bosses/index.js b/src/features/bosses/index.js
@@ -4,7 +4,7 @@ import { createSlice, createAsyncThunk, createSelector } from '@reduxjs/toolkit'
 import equal from 'fast-deep-equal';
 
 import doFetchBosses from './do-fetch-bosses.mjs';
-import { langCode } from '../../modules/lang-helpers.js';
+import { langCode, useLangCode } from '../../modules/lang-helpers.js';
 import { placeholderBosses } from '../../modules/placeholder-data.js';
 import rawBossData from '../../data/boss.json';
 import useMapsData from '../maps/index.js';
@@ -89,27 +89,36 @@ export const selectAllBosses = createSelector([selectBosses, selectMaps], (bosse
     return bosses;
 });
 
-let fetchedData = false;
+let fetchedLang = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useBossesData() {
     const dispatch = useDispatch();
     const { status, error } = useSelector((state) => state.bosses);
     const data = useSelector(selectAllBosses);
     useMapsData();
+    const lang = useLangCode();
 
     useEffect(() => {
-        if (!fetchedData) {
-            fetchedData = true;
+        if (fetchedLang !== lang) {
+            fetchedLang = lang;
             dispatch(fetchBosses());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchBosses());
             }, 600000);
         }
-        return () => clearInterval(refreshInterval);
-    }, [dispatch]);
+        return () => {
+            clearRefreshInterval();
+        };
+    }, [dispatch, lang]);
 
     return { data, status, error };
 };
diff --git a/src/features/crafts/index.js b/src/features/crafts/index.js
@@ -161,6 +161,11 @@ export const selectAllCrafts = createSelector([selectCrafts, selectQuests, selec
 let fetchedData = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useCraftsData() {
     const dispatch = useDispatch();
     const { status, error } = useSelector((state) => state.crafts);
@@ -172,15 +177,15 @@ export default function useCraftsData() {
         if (!fetchedData) {
             fetchedData = true;
             dispatch(fetchCrafts());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchCrafts());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
     }, [dispatch]);
 

diff --git a/src/features/hideout/index.js b/src/features/hideout/index.js
@@ -5,7 +5,7 @@ import equal from 'fast-deep-equal';
 
 import doFetchHideout from './do-fetch-hideout.mjs';
 
-import { langCode } from '../../modules/lang-helpers.js';
+import { langCode, useLangCode } from '../../modules/lang-helpers.js';
 import { placeholderHideout } from '../../modules/placeholder-data.js';
 
 const initialState = {
@@ -46,28 +46,34 @@ export const hideoutReducer = hideoutSlice.reducer;
 
 export const selectAllHideoutModules = (state) => state.hideout.data;
 
-let fetchedData = false;
+let fetchedLang = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useHideoutData() {
     const dispatch = useDispatch();
     const { data, status, error } = useSelector((state) => state.hideout);
+    const lang = useLangCode();
 
     useEffect(() => {
-        if (!fetchedData) {
-            fetchedData = true;
+        if (fetchedLang !== lang) {
+            fetchedLang = lang;
             dispatch(fetchHideout());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchHideout());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
-    }, [dispatch]);
+    }, [dispatch, lang]);
 
     return { data, status, error };
 };
diff --git a/src/features/items/index.js b/src/features/items/index.js
@@ -5,7 +5,7 @@ import equal from 'fast-deep-equal';
 
 import doFetchItems from './do-fetch-items.mjs';
 import { placeholderItems } from '../../modules/placeholder-data.js';
-import { langCode } from '../../modules/lang-helpers.js';
+import { langCode, useLangCode } from '../../modules/lang-helpers.js';
 
 const initialState = {
     data: placeholderItems(langCode()),
@@ -52,28 +52,34 @@ export const itemsReducer = itemsSlice.reducer;
 
 export const selectAllItems = (state) => state.items.data;
 
-let fetchedData = false;
+let fetchedLang = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useItemsData() {
     const dispatch = useDispatch();
     const { data, status, error } = useSelector((state) => state.items);
+    const lang = useLangCode();
 
     useEffect(() => {
-        if (!fetchedData) {
-            fetchedData = true;
+        if (fetchedLang !== lang) {
+            fetchedLang = lang;
             dispatch(fetchItems());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchItems());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
-    }, [dispatch]);
+    }, [dispatch, lang]);
 
     return { data, status, error };
 };
diff --git a/src/features/maps/index.js b/src/features/maps/index.js
@@ -17,7 +17,7 @@ import {
 } from '@mdi/js';
 
 import doFetchMaps from './do-fetch-maps.mjs';
-import { langCode } from '../../modules/lang-helpers.js';
+import { langCode, useLangCode } from '../../modules/lang-helpers.js';
 import { placeholderMaps } from '../../modules/placeholder-data.js';
 import i18n from '../../i18n.js';
 
@@ -59,28 +59,34 @@ export const mapsReducer = mapsSlice.reducer;
 
 export const selectMaps = (state) => state.maps.data;
 
-let fetchedData = false;
+let fetchedLang = false;
 let refreshInterval = false;
 
+const clearRefreshInterval = () => {
+    clearInterval(refreshInterval);
+    refreshInterval = false;
+};
+
 export default function useMapsData() {
     const dispatch = useDispatch();
     const { data, status, error } = useSelector((state) => state.maps);
+    const lang = useLangCode();
 
     useEffect(() => {
-        if (!fetchedData) {
-            fetchedData = true;
+        if (fetchedLang !== lang) {
+            fetchedLang = lang;
             dispatch(fetchMaps());
+            clearRefreshInterval();
         }
         if (!refreshInterval) {
             refreshInterval = setInterval(() => {
                 dispatch(fetchMaps());
             }, 600000);
         }
         return () => {
-            clearInterval(refreshInterval);
-            refreshInterval = false;
+            clearRefreshInterval();
         };
-    }, [dispatch]);
+    }, [dispatch, lang]);
 
     return { data, status, error };
 };