Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

re-queries the API when language is changed #940

Merged
merged 5 commits into from
May 31, 2024
Merged

re-queries the API when language is changed #940

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bbcca4b
re-queries the API when language is changed
Razzmatazzz May 22, 2024
49d6b3c
fix console errors
Razzmatazzz May 22, 2024
c47295a
Merge branch 'main' into query-on-language-change
Shebuka May 22, 2024
4ee9070
fix freezes maybe
Razzmatazzz May 23, 2024
85a96fb
Merge branch 'query-on-language-change' of https://github.com/the-hid…
Razzmatazzz May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions src/components/data-table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
{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>
Expand All @@ -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>
Expand Down
28 changes: 16 additions & 12 deletions src/features/achievements/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useEffect } from 'react';
import { useEffect, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
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: [],
Expand Down Expand Up @@ -40,28 +40,32 @@ const achievementsSlice = createSlice({

export const achievementsReducer = achievementsSlice.reducer;

let fetchedData = false;
let refreshInterval = false;

export default function useAchievementsData() {
const dispatch = useDispatch();
const { data, status, error } = useSelector((state) => state.achievements);
const lang = useLangCode();
const fetchedLang = useRef(false);
const refreshInterval = useRef(false);
const clearRefreshInterval = useCallback(() => {
clearInterval(refreshInterval.current);
refreshInterval.current = false;
}, [refreshInterval]);

useEffect(() => {
if (!fetchedData) {
fetchedData = true;
if (fetchedLang.current !== lang) {
fetchedLang.current = lang;
dispatch(fetchAchievements());
clearRefreshInterval();
}
if (!refreshInterval) {
refreshInterval = setInterval(() => {
if (!refreshInterval.current) {
refreshInterval.current = setInterval(() => {
dispatch(fetchAchievements());
}, 600000);
}
return () => {
clearInterval(refreshInterval);
refreshInterval = false;
clearRefreshInterval();
};
}, [dispatch]);
}, [dispatch, fetchedLang, lang, refreshInterval, clearRefreshInterval]);

return { data, status, error };
};
4 changes: 2 additions & 2 deletions src/features/barters/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
28 changes: 16 additions & 12 deletions src/features/hideout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useEffect } from 'react';
import { useEffect, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
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 = {
Expand Down Expand Up @@ -46,28 +46,32 @@ export const hideoutReducer = hideoutSlice.reducer;

export const selectAllHideoutModules = (state) => state.hideout.data;

let fetchedData = false;
let refreshInterval = false;

export default function useHideoutData() {
const dispatch = useDispatch();
const { data, status, error } = useSelector((state) => state.hideout);
const lang = useLangCode();
const fetchedLang = useRef(false);
const refreshInterval = useRef(false);
const clearRefreshInterval = useCallback(() => {
clearInterval(refreshInterval.current);
refreshInterval.current = false;
}, [refreshInterval]);

useEffect(() => {
if (!fetchedData) {
fetchedData = true;
if (fetchedLang.current !== lang) {
fetchedLang.current = lang;
dispatch(fetchHideout());
clearRefreshInterval();
}
if (!refreshInterval) {
refreshInterval = setInterval(() => {
if (!refreshInterval.current) {
refreshInterval.current = setInterval(() => {
dispatch(fetchHideout());
}, 600000);
}
return () => {
clearInterval(refreshInterval);
refreshInterval = false;
clearRefreshInterval();
};
}, [dispatch]);
}, [dispatch, fetchedLang, lang, refreshInterval, clearRefreshInterval]);

return { data, status, error };
};
28 changes: 16 additions & 12 deletions src/features/items/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useEffect } from 'react';
import { useEffect, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
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()),
Expand Down Expand Up @@ -52,28 +52,32 @@ export const itemsReducer = itemsSlice.reducer;

export const selectAllItems = (state) => state.items.data;

let fetchedData = false;
let refreshInterval = false;

export default function useItemsData() {
const dispatch = useDispatch();
const { data, status, error } = useSelector((state) => state.items);
const lang = useLangCode();
const fetchedLang = useRef(false);
const refreshInterval = useRef(false);
const clearRefreshInterval = useCallback(() => {
clearInterval(refreshInterval.current);
refreshInterval.current = false;
}, [refreshInterval]);

useEffect(() => {
if (!fetchedData) {
fetchedData = true;
if (fetchedLang.current !== lang) {
fetchedLang.current = lang;
dispatch(fetchItems());
clearRefreshInterval();
}
if (!refreshInterval) {
refreshInterval = setInterval(() => {
if (!refreshInterval.current) {
refreshInterval.current = setInterval(() => {
dispatch(fetchItems());
}, 600000);
}
return () => {
clearInterval(refreshInterval);
refreshInterval = false;
clearRefreshInterval();
};
}, [dispatch]);
}, [dispatch, fetchedLang, lang, refreshInterval, clearRefreshInterval]);

return { data, status, error };
};
28 changes: 16 additions & 12 deletions src/features/maps/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useMemo } from 'react';
import { useEffect, useMemo, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import equal from 'fast-deep-equal';
Expand All @@ -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';

Expand Down Expand Up @@ -59,28 +59,32 @@ export const mapsReducer = mapsSlice.reducer;

export const selectMaps = (state) => state.maps.data;

let fetchedData = false;
let refreshInterval = false;

export default function useMapsData() {
const dispatch = useDispatch();
const { data, status, error } = useSelector((state) => state.maps);
const lang = useLangCode();
const fetchedLang = useRef(false);
const refreshInterval = useRef(false);
const clearRefreshInterval = useCallback(() => {
clearInterval(refreshInterval.current);
refreshInterval.current = false;
}, [refreshInterval]);

useEffect(() => {
if (!fetchedData) {
fetchedData = true;
if (fetchedLang.current !== lang) {
fetchedLang.current = lang;
dispatch(fetchMaps());
clearRefreshInterval();
}
if (!refreshInterval) {
refreshInterval = setInterval(() => {
if (!refreshInterval.current) {
refreshInterval.current = setInterval(() => {
dispatch(fetchMaps());
}, 600000);
}
return () => {
clearInterval(refreshInterval);
refreshInterval = false;
clearRefreshInterval();
};
}, [dispatch]);
}, [dispatch, fetchedLang, lang, refreshInterval, clearRefreshInterval]);

return { data, status, error };
};
Expand Down
28 changes: 16 additions & 12 deletions src/features/meta/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useEffect } from 'react';
import { useEffect, useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import equal from 'fast-deep-equal';

import doFetchMeta from './do-fetch-meta.mjs';
import { langCode } from '../../modules/lang-helpers.js';
import { langCode, useLangCode } from '../../modules/lang-helpers.js';
import { placeholderMeta } from '../../modules/placeholder-data.js';

const initialState = {
Expand Down Expand Up @@ -43,28 +43,32 @@ export const metaReducer = metaSlice.reducer;

export const selectMeta = (state) => state.meta.data;

let fetchedData = false;
let refreshInterval = false;

export default function useMetaData() {
const dispatch = useDispatch();
const { data, status, error } = useSelector((state) => state.meta);
const lang = useLangCode();
const fetchedLang = useRef(false);
const refreshInterval = useRef(false);
const clearRefreshInterval = useCallback(() => {
clearInterval(refreshInterval.current);
refreshInterval.current = false;
}, [refreshInterval]);

useEffect(() => {
if (!fetchedData) {
fetchedData = true;
if (fetchedLang.current !== lang) {
fetchedLang.current = lang;
dispatch(fetchMeta());
clearRefreshInterval();
}
if (!refreshInterval) {
refreshInterval = setInterval(() => {
if (!refreshInterval.current) {
refreshInterval.current = setInterval(() => {
dispatch(fetchMeta());
}, 600000);
}
return () => {
clearInterval(refreshInterval);
refreshInterval = false;
clearRefreshInterval();
};
}, [dispatch]);
}, [dispatch, fetchedLang, lang, refreshInterval, clearRefreshInterval]);

return { data, status, error };
};
Loading