Convert useModified into a real hook.
This commit is contained in:
parent
a426c242cb
commit
91e3dff7f5
|
@ -1,6 +1,5 @@
|
|||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { touch } from 'store/modified';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import ConfirmationForm from 'components/common/ConfirmationForm';
|
||||
|
||||
export function ReportDeleteButton({
|
||||
|
@ -17,6 +16,7 @@ export function ReportDeleteButton({
|
|||
const { mutate, isPending, error } = useMutation({
|
||||
mutationFn: reportId => del(`/reports/${reportId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = (close: () => void) => {
|
||||
mutate(reportId as any, {
|
||||
|
|
|
@ -8,14 +8,14 @@ import {
|
|||
Button,
|
||||
SubmitButton,
|
||||
} from 'react-basics';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { touch } from 'store/modified';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
|
||||
export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
|
||||
const { formatMessage, labels, getMessage } = useMessages();
|
||||
const { post, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
|
||||
const ref = useRef(null);
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { useLocale, useLogin, useMessages } from 'components/hooks';
|
||||
import { useLocale, useLogin, useMessages, useModified } from 'components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import { touch } from 'store/modified';
|
||||
import TeamDeleteForm from './TeamLeaveForm';
|
||||
|
||||
export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
|
||||
|
@ -9,6 +8,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
|
|||
const router = useRouter();
|
||||
const { dir } = useLocale();
|
||||
const { user } = useLogin();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleLeave = async () => {
|
||||
touch('teams');
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { touch } from 'store/modified';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import ConfirmationForm from 'components/common/ConfirmationForm';
|
||||
|
||||
export function TeamLeaveForm({
|
||||
|
@ -20,6 +19,7 @@ export function TeamLeaveForm({
|
|||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
mutate(null, {
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
import TeamAddForm from './TeamAddForm';
|
||||
import { messages } from 'components/messages';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = async () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
import TeamJoinForm from './TeamJoinForm';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function TeamsJoinButton() {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleJoin = () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function TeamMemberRemoveButton({
|
||||
teamId,
|
||||
|
@ -18,6 +17,7 @@ export function TeamMemberRemoveButton({
|
|||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleRemoveTeamMember = () => {
|
||||
mutate(null, {
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import { useMessages } from 'components/hooks';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
|
||||
import TeamDeleteForm from './TeamDeleteForm';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function TeamAdmin({ teamId }: { teamId: string }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const router = useRouter();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleLeave = async () => {
|
||||
touch('teams');
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
|
||||
import UserAddForm from './UserAddForm';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { touch } from 'store/modified';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
|
||||
export function UserAddButton({ onSave }: { onSave?: () => void }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import ConfirmationForm from 'components/common/ConfirmationForm';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function UserDeleteForm({ userId, username, onSave, onClose }) {
|
||||
const { FormattedMessage, messages, labels, formatMessage } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
mutate(null, {
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { useMessages } from 'components/hooks';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
|
||||
import { touch } from 'store/modified';
|
||||
import WebsiteAddForm from './WebsiteAddForm';
|
||||
|
||||
export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSave = async () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
|
|
|
@ -11,9 +11,8 @@ import {
|
|||
} from 'react-basics';
|
||||
import { useContext, useState } from 'react';
|
||||
import { getRandomChars } from 'next-basics';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
const generateId = () => getRandomChars(16);
|
||||
|
||||
|
@ -33,6 +32,7 @@ export function ShareUrl({
|
|||
const { mutate, error, isPending } = useMutation({
|
||||
mutationFn: (data: any) => post(`/websites/${website.id}`, data),
|
||||
});
|
||||
const { touch } = useModified();
|
||||
|
||||
const url = `${hostUrl || process.env.hostUrl || window?.location.origin}${
|
||||
process.env.basePath
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import { Button, Modal, ModalTrigger, ActionForm, useToasts } from 'react-basics';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useMessages, useModified } from 'components/hooks';
|
||||
import WebsiteDeleteForm from './WebsiteDeleteForm';
|
||||
import WebsiteResetForm from './WebsiteResetForm';
|
||||
import { touch } from 'store/modified';
|
||||
|
||||
export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const router = useRouter();
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleReset = async () => {
|
||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
||||
|
|
|
@ -8,9 +8,8 @@ import {
|
|||
TextField,
|
||||
useToasts,
|
||||
} from 'react-basics';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { useApi, useMessages, useModified } from 'components/hooks';
|
||||
import { DOMAIN_REGEX } from 'lib/constants';
|
||||
import { touch } from 'store/modified';
|
||||
import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
|
||||
|
||||
export function WebsiteEditForm({ websiteId }: { websiteId: string }) {
|
||||
|
@ -22,6 +21,7 @@ export function WebsiteEditForm({ websiteId }: { websiteId: string }) {
|
|||
});
|
||||
const ref = useRef(null);
|
||||
const { showToast } = useToasts();
|
||||
const { touch } = useModified();
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
mutate(data, {
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
'use client';
|
||||
import { createContext, ReactNode, useEffect } from 'react';
|
||||
import { useTeam } from 'components/hooks';
|
||||
import { useTeam, useModified } from 'components/hooks';
|
||||
import { Loading } from 'react-basics';
|
||||
import useModified from 'store/modified';
|
||||
|
||||
export const TeamContext = createContext(null);
|
||||
|
||||
export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
|
||||
const modified = useModified(state => state?.[`team:${teamId}`]);
|
||||
const { modified } = useModified(`teams`);
|
||||
const { data: team, isLoading, isFetching, refetch } = useTeam(teamId);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { createContext, ReactNode, useEffect } from 'react';
|
||||
import { useWebsite } from 'components/hooks';
|
||||
import { useModified, useWebsite } from 'components/hooks';
|
||||
import { Loading } from 'react-basics';
|
||||
import useModified from 'store/modified';
|
||||
|
||||
export const WebsiteContext = createContext(null);
|
||||
|
||||
|
@ -12,7 +11,7 @@ export function WebsiteProvider({
|
|||
websiteId: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const modified = useModified(state => state?.[`website:${websiteId}`]);
|
||||
const { modified } = useModified(`website:${websiteId}`);
|
||||
const { data: website, isFetching, isLoading, refetch } = useWebsite(websiteId);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue