Convert useModified into a real hook.

src/components/hooks/index.ts

@@ -25,6 +25,7 @@ export * from './useFormat';
 export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
+export * from './useModified';
 export * from './useNavigation';
 export * from './useSticky';
 export * from './useTeamUrl';

src/components/hooks/queries/useReports.ts

@@ -1,9 +1,9 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import useModified from 'store/modified';
+import useModified from '../useModified';
 
 export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
-  const modified = useModified((state: any) => state?.reports);
+  const { modified } = useModified(`reports`);
   const { get, del, useMutation } = useApi();
   const queryResult = useFilterQuery({
     queryKey: ['reports', { websiteId, teamId, modified }],

src/components/hooks/queries/useTeamMembers.ts

@@ -1,10 +1,10 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import useModified from 'store/modified';
+import useModified from '../useModified';
 
 export function useTeamMembers(teamId: string) {
   const { get } = useApi();
-  const modified = useModified((state: any) => state?.['teams:members']);
+  const { modified } = useModified(`teams:members`);
 
   return useFilterQuery({
     queryKey: ['teams:members', { teamId, modified }],

src/components/hooks/queries/useTeamWebsites.ts

@@ -1,10 +1,10 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import useModified from 'store/modified';
+import useModified from '../useModified';
 
 export function useTeamWebsites(teamId: string) {
   const { get } = useApi();
-  const modified = useModified((state: any) => state?.['teams:websites']);
+  const { modified } = useModified(`teams:websites`);
 
   return useFilterQuery({
     queryKey: ['teams:websites', { teamId, modified }],

src/components/hooks/queries/useTeams.ts

@@ -1,15 +1,16 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import { useLogin } from 'components/hooks';
-import useModified from 'store/modified';
+import useLogin from './useLogin';
+import useModified from '../useModified';
 
 export function useTeams(userId?: string) {
   const { get } = useApi();
   const { user } = useLogin();
-  const modified = useModified((state: any) => state?.teams);
+  const id = userId || user?.id;
+  const { modified } = useModified(`teams`);
 
   return useFilterQuery({
-    queryKey: ['teams', { userId: userId || user?.id, modified }],
+    queryKey: ['teams', { userId: id, modified }],
     queryFn: (params: any) => {
       return get(`/teams`, params);
     },

src/components/hooks/queries/useUsers.ts

@@ -1,10 +1,10 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
-import useModified from 'store/modified';
+import useModified from '../useModified';
 
 export function useUsers() {
   const { get } = useApi();
-  const modified = useModified((state: any) => state?.users);
+  const { modified } = useModified(`users`);
 
   return useFilterQuery({
     queryKey: ['users', { modified }],

src/components/hooks/queries/useWebsites.ts

@@ -1,7 +1,7 @@
 import { useApi } from './useApi';
 import { useFilterQuery } from './useFilterQuery';
 import { useLogin } from './useLogin';
-import useModified from 'store/modified';
+import useModified from '../useModified';
 
 export function useWebsites(
   { userId, teamId }: { userId?: string; teamId?: string },
@@ -9,7 +9,7 @@ export function useWebsites(
 ) {
   const { get } = useApi();
   const { user } = useLogin();
-  const modified = useModified((state: any) => state?.websites);
+  const { modified } = useModified(`websites`);
 
   return useFilterQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],

src/components/hooks/useModified.ts

@@ -0,0 +1,15 @@
+import useStore from 'store/modified';
+
+export function useModified(key?: string) {
+  const modified = useStore(state => state?.[key]);
+
+  const touch = (id?: string) => {
+    if (id || key) {
+      useStore.setState({ [id || key]: Date.now() });
+    }
+  };
+
+  return { modified, touch };
+}
+
+export default useModified;