Refactored fetching to use react-query.

This commit is contained in:
Mike Cao 2022-12-28 15:43:22 -08:00
parent 7bbed0e12b
commit c56f02c475
112 changed files with 255 additions and 492 deletions

View file

@ -2,7 +2,7 @@ import Calendar from 'components/common/Calendar';
import { FormButtons } from 'components/layout/FormLayout';
import { isAfter, isBefore, isSameDay } from 'date-fns';
import { getDateRangeValues } from 'lib/date';
import React, { useState } from 'react';
import { useState } from 'react';
import { Button, ButtonGroup } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import styles from './DatePickerForm.module.css';

View file

@ -1,6 +1,5 @@
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import { getRandomChars, useApi } from 'next-basics';
import { getRandomChars } from 'next-basics';
import { useEffect, useMemo, useRef, useState } from 'react';
import {
Button,
@ -12,11 +11,12 @@ import {
TextField,
Toggle,
} from 'react-basics';
import useApi from 'hooks/useApi';
export default function ShareUrlForm({ websiteId, data, onSave }) {
const { name, shareId } = data;
const [id, setId] = useState(shareId);
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error } = useMutation(({ shareId }) =>
post(`/websites/${websiteId}`, { shareId }),
);

View file

@ -3,10 +3,9 @@ import { Form, FormInput, FormButtons, TextField, Button } from 'react-basics';
import useApi from 'hooks/useApi';
import styles from './Form.module.css';
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
export default function TeamAddForm({ onSave, onClose }) {
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
const ref = useRef(null);

View file

@ -2,10 +2,9 @@ import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from '
import { useMutation } from '@tanstack/react-query';
import { useRef } from 'react';
import useApi from 'hooks/useApi';
import { getClientAuthToken } from 'lib/client';
export default function TeamEditForm({ teamId, data, onSave }) {
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
const ref = useRef(null);

View file

@ -1,5 +1,4 @@
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
import styles from './Form.module.css';
@ -7,7 +6,7 @@ import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE';
export default function UserDeleteForm({ userId, onSave, onClose }) {
const { del } = useApi(getClientAuthToken());
const { del } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
const handleSubmit = async data => {

View file

@ -10,7 +10,6 @@ import {
import { useRef } from 'react';
import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import { getClientAuthToken } from 'lib/client';
import { ROLES } from 'lib/constants';
import styles from './UserForm.module.css';
@ -27,7 +26,7 @@ const items = [
export default function UserEditForm({ data, onSave }) {
const { id } = data;
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error } = useMutation(({ username }) => post(`/user/${id}`, { username }));
const ref = useRef(null);

View file

@ -2,18 +2,15 @@ import { useRef } from 'react';
import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import useApi from 'hooks/useApi';
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import styles from './UserPasswordForm.module.css';
import useUser from 'hooks/useUser';
export default function UserPasswordForm({ onSave, userId }) {
const {
user: { id },
} = useUser();
const user = useUser();
const isCurrentUser = !userId || id === userId;
const url = isCurrentUser ? `/users/${id}/password` : `/users/${id}`;
const { post } = useApi(getClientAuthToken());
const isCurrentUser = !userId || user?.id === userId;
const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
const { post } = useApi();
const { mutate, error, isLoading } = useMutation(data => post(url, data));
const ref = useRef(null);

View file

@ -3,11 +3,10 @@ import { Form, FormInput, FormButtons, TextField, Button, SubmitButton } from 'r
import useApi from 'hooks/useApi';
import styles from './Form.module.css';
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import { DOMAIN_REGEX } from 'lib/constants';
export default function WebsiteAddForm({ onSave, onClose }) {
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
const ref = useRef(null);

View file

@ -1,5 +1,4 @@
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
import styles from './Form.module.css';
@ -7,7 +6,7 @@ import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE';
export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
const { del } = useApi(getClientAuthToken());
const { del } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
const handleSubmit = async data => {

View file

@ -1,5 +1,4 @@
import { useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from 'lib/client';
import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
import styles from './Form.module.css';
@ -7,7 +6,7 @@ import styles from './Form.module.css';
const CONFIRM_VALUE = 'RESET';
export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
const { post } = useApi(getClientAuthToken());
const { post } = useApi();
const { mutate, error, isLoading } = useMutation(data =>
post(`/websites/${websiteId}/reset`, data),
);