Added more cache checks.

src/app/(main)/reports/ReportsDataTable.js

@@ -5,14 +5,10 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 
-function useReports() {
+export default function ReportsDataTable() {
   const { get } = useApi();
   const modified = useCache(state => state?.reports);
-  return useFilterQuery(['reports', modified], params => get(`/reports`, params));
+  const queryResult = useFilterQuery(['reports', { modified }], params => get(`/reports`, params));
-}
-
-export default function ReportsDataTable() {
-  const queryResult = useReports();
 
   return (
     <DataTable queryResult={queryResult}>

src/app/(main)/settings/teams/TeamJoinForm.js

@@ -21,7 +21,7 @@ export function TeamJoinForm({ onSave, onClose }) {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
-        setValue('teams', Date.now());
+        setValue('teams:members', Date.now());
         onSave?.();
         onClose?.();
       },

src/app/(main)/settings/teams/TeamsDataTable.js

@@ -7,7 +7,7 @@ import useCache from 'store/cache';
 
 export function TeamsDataTable() {
   const { get } = useApi();
-  const modified = useCache(state => state?.websites);
+  const modified = useCache(state => state?.teams);
   const queryResult = useFilterQuery(['teams', { modified }], params => {
     return get(`/teams`, {
       ...params,

src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.js

@@ -1,6 +1,7 @@
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+import { setValue } from 'store/cache';
 
 export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
   const { formatMessage, labels } = useMessages();
@@ -12,7 +13,8 @@ export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
       {},
       {
         onSuccess: () => {
-          onSave();
+          setValue('team:members', Date.now());
+          onSave?.();
         },
       },
     );

src/app/(main)/settings/teams/[id]/TeamMembers.js

@@ -2,11 +2,13 @@ import useApi from 'components/hooks/useApi';
 import TeamMembersTable from './TeamMembersTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
 
 export function TeamMembers({ teamId, readOnly }) {
   const { get } = useApi();
+  const modified = useCache(state => state?.['team:members']);
   const queryResult = useFilterQuery(
-    ['team:users', teamId],
+    ['team:members', { teamId, modified }],
     params => {
       return get(`/teams/${teamId}/users`, {
         ...params,

src/app/(main)/settings/teams/[id]/TeamMembersTable.js

@@ -4,7 +4,7 @@ import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 
-export function TeamMembersTable({ data = [], teamId, readOnly, onChange }) {
+export function TeamMembersTable({ data = [], teamId, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -24,9 +24,7 @@ export function TeamMembersTable({ data = [], teamId, readOnly, onChange }) {
           return (
             !readOnly &&
             row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
-            user?.id !== row?.id && (
+            user?.id !== row?.id && <TeamMemberRemoveButton teamId={teamId} userId={row.id} />
-              <TeamMemberRemoveButton teamId={teamId} userId={row.id} onSave={onChange} />
-            )
           );
         }}
       </GridColumn>

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js

@@ -4,6 +4,7 @@ import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle }
 import useMessages from 'components/hooks/useMessages';
 import WebsitesDataTable from '../../websites/WebsitesDataTable';
 import Empty from 'components/common/Empty';
+import { setValue } from 'store/cache';
 
 export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
@@ -18,8 +19,9 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
       { websiteIds: selected },
       {
         onSuccess: async () => {
-          onSave();
+          setValue('team:websites', Date.now());
-          onClose();
+          onSave?.();
+          onClose?.();
         },
       },
     );

src/app/(main)/settings/teams/[id]/TeamWebsites.js

@@ -6,13 +6,15 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
 
 export function TeamWebsites({ teamId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
+  const modified = useCache(state => state?.['team:websites']);
   const queryResult = useFilterQuery(
-    ['team:websites', teamId],
+    ['team:websites', { teamId, modified }],
     params => {
       return get(`/teams/${teamId}/websites`, {
         ...params,

src/app/(main)/settings/users/UsersDataTable.js

@@ -4,10 +4,12 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
 import UsersHeader from './UsersHeader';
+import useCache from 'store/cache';
 
 export function UsersDataTable() {
   const { get } = useApi();
-  const queryResult = useFilterQuery(['users'], params => {
+  const modified = useCache(state => state?.users);
+  const queryResult = useFilterQuery(['users', { modified }], params => {
     return get(`/users`, {
       ...params,
     });